:root { --bmdc-blue: #003b5c; --bmdc-action-blue: #005a8b; --bmdc-yellow: #ffcc00; --bmdc-light: #eef7ff; --text: #333; }
body { font-family: Arial, sans-serif; background: #f2f2f2; margin: 0; color: var(--text); line-height: 1.6; }
.page-width { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.council-header { background: var(--bmdc-blue); color: #fff; border-bottom: 5px solid var(--bmdc-yellow); }
.header-logo-band { background: var(--bmdc-light); padding: 12px 0; border-bottom: 1px solid #d1e1f0; color: var(--bmdc-blue); }
.header-flex { display: flex; align-items: center; }
.council-logo { height: 45px; margin-right: 15px; }
.site-branding { font-weight: bold; text-transform: uppercase; font-size: 0.85rem; }
.header-main { padding: 35px 0; text-align: center; }
h1 { margin: 0 0 25px 0; font-size: 1.8rem; font-weight: normal; }
.search-container { position: relative; max-width: 600px; margin: 0 auto 20px; }
#searchInput { width: 100%; padding: 15px; border-radius: 4px; border: none; font-size: 1.1rem; }
.input-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #999; font-size: 1.2rem; }
.filter-wrapper { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px; }
.filter-group { margin-bottom: 10px; }
.filter-label { display: block; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; opacity: 0.8; }
.filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.filter-btn { background: var(--bmdc-action-blue); color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 5px 12px; cursor: pointer; font-size: 0.8rem; }
.filter-btn.active { background: var(--bmdc-yellow); color: var(--bmdc-blue); font-weight: bold; }
.action-buttons { margin-top: 20px; display: flex; gap: 10px; justify-content: center; }
.primary-btn { background: #28a745; color: #fff; border: none; padding: 10px 20px; cursor: pointer; font-weight: bold; border-radius: 4px; }
.secondary-btn { background: #6c757d; color: #fff; border: none; padding: 10px 20px; cursor: pointer; font-weight: bold; border-radius: 4px; }
main { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; margin: 30px 0; }
.school-card { background: #fff; border: 1px solid #ddd; border-bottom: 5px solid var(--bmdc-blue); page-break-inside: avoid; }
.dsl-section { background: #fff9e6; padding: 15px 20px; border-bottom: 2px solid var(--bmdc-yellow); position: relative; }
.dsl-badge { position: absolute; right: 20px; top: 15px; background: var(--bmdc-blue); color: #fff; font-size: 0.6rem; padding: 2px 8px; border-radius: 10px; font-weight: bold; }
.card-content { padding: 20px; }
.school-card h2 { color: var(--bmdc-blue); margin: 0 0 5px 0; font-size: 1.3rem; }
.meta-info { font-size: 0.75rem; color: #666; font-weight: bold; margin-bottom: 15px; text-transform: uppercase; }
.role-box { border-top: 1px solid #f0f0f0; padding: 10px 0; }
.role-title { display: block; font-weight: bold; font-size: 0.7rem; color: var(--bmdc-action-blue); text-transform: uppercase; }
.worker-name { font-size: 1rem; font-weight: 600; color: #000; }
.contact-links a { font-size: 0.85rem; color: var(--bmdc-action-blue); text-decoration: underline; margin-right: 15px; display: inline-flex; align-items: center; }
.contact-links i { margin-right: 5px; width: 15px; }
.intro-text { background: #fff; padding: 20px; border: 1px solid #ddd; text-align: center; }
.council-footer { background: #333; color: #fff; padding: 30px 0; margin-top: 50px; border-top: 4px solid var(--bmdc-yellow); }
.council-footer a { color: #8bc9f2; }
.placeholder-text { grid-column: 1/-1; text-align: center; padding: 50px; color: #777; font-style: italic; }
@media print { .no-print { display: none !important; } }