/* Contact, FAQ and notices visual updates. Uses the shared public tokens. */
.page-hero--visual { background: linear-gradient(110deg, #eef8ff 0%, #f8fbfd 48%, #e9f7f0 100%); border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, #b9e4ff, var(--brand-secondary), var(--brand-orange)) 1; color: var(--text-primary); }
.page-hero--visual .page-hero__title { color: var(--brand-primary); }
.page-hero--visual .page-hero__sub { color: var(--text-muted); }
.page-hero--visual .breadcrumb { color: var(--text-muted); }
.page-hero--visual .breadcrumb a { color: var(--brand-primary); }
.page-hero--visual .breadcrumb a:hover { color: var(--brand-secondary); }
.page-hero--visual .breadcrumb li + li::before { opacity: 1; }
.page-hero--visual .container { position: relative; overflow: hidden; }
.page-hero--visual .container::after { content: ''; position: absolute; right: 2rem; top: -4rem; width: 14rem; height: 14rem; border-radius: 50%; background: rgba(0, 168, 90, .08); pointer-events: none; }
.visual-page { background: #f8fbfd; }
.visual-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr); gap: 1.5rem; align-items: start; }
.contact-form-card { padding: clamp(1.15rem, 3vw, 2rem); }
.contact-form-card__heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .4rem; }
.contact-form-card__icon, .contact-info-card__icon { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; flex: none; border-radius: 12px; background: var(--brand-secondary); color: #fff; font-size: 1.2rem; }
.contact-form-card__intro { margin: 0 0 1.4rem 3.4rem; color: var(--text-muted); font-size: .9rem; }
.contact-side { display: grid; gap: 1rem; }
.contact-info-card { padding: 1.25rem; }
.contact-info-card__heading { display: flex; gap: .7rem; align-items: center; }
.contact-info-card__heading h2 { margin: 0; font-size: 1.2rem; }
.contact-info-card__image { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 10px; margin: 1rem 0; }
.contact-info-card p { color: var(--text-muted); font-size: .88rem; }
.contact-info-card a { font-weight: 700; }
.contact-help { background: linear-gradient(120deg, #0c2144, #124a72); color: #fff; }
.contact-help h2, .contact-help p { color: #fff; }
.contact-help p { opacity: .82; }
.contact-help .btn { background: var(--brand-secondary); color: #fff; }
.contact-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.contact-point { padding: 1.1rem; background: #eff9f5; border-radius: var(--radius); border: 1px solid #d4ecdc; }
.contact-point h3 { font-size: 1rem; margin-bottom: .35rem; }
.contact-point p { margin: 0; color: var(--text-muted); font-size: .82rem; }
.page-toolbar { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.page-toolbar__search { flex: 1 1 18rem; }
.page-toolbar__select { flex: 0 1 13rem; }
.page-toolbar label { display: block; font-size: .8rem; color: var(--text-muted); font-weight: 700; margin-bottom: .25rem; }
.page-toolbar input, .page-toolbar select { width: 100%; min-height: 44px; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; padding: .65rem .8rem; font: inherit; }
.toolbar-check { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .65rem .25rem; color: var(--text-muted); font-size: .85rem; }
.notice-list { gap: .75rem; }
.notice-item { padding: 1rem; border: 1px solid var(--border-color); border-left: 4px solid var(--brand-secondary); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.notice-item--pinned { border-left-color: var(--brand-orange); background: #fffaf5; }
.notice-item__date { border-radius: 10px; background: var(--surface-green); color: var(--brand-primary); }
.notice-item__flag { display: inline-block; margin-bottom: .25rem; padding: .15rem .5rem; border-radius: 999px; background: #fff0e4; color: #a84c0b; font-size: .7rem; font-weight: 800; }
.notice-item__meta { display: flex; gap: .5rem; flex-wrap: wrap; color: var(--text-muted); font-size: .78rem; }
.notice-empty { padding: 2rem 1rem; text-align: center; border: 1px dashed #b7d9c1; border-radius: 12px; background: var(--surface-green); }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.5rem; align-items: start; }
.faq-list { display: grid; gap: .7rem; }
.faq-item { padding: .15rem 1rem; border: 1px solid var(--border-color); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.faq-item__q { padding: 1rem 1.8rem 1rem 0; font-weight: 800; }
.faq-item__a { padding-bottom: 1rem; }
.faq-aside { padding: 1.25rem; background: linear-gradient(160deg, #e9f4ed, #f7fbf8); border: 1px solid #cbe7d4; border-radius: var(--radius); }
.faq-aside h2 { font-size: 1.15rem; }
.faq-aside p { color: var(--text-muted); font-size: .88rem; }
.is-filtered-out { display: none !important; }
@media (max-width: 800px) { .contact-layout, .faq-layout { grid-template-columns: 1fr; } .contact-side { order: 2; } .faq-aside { order: -1; } }
@media (max-width: 560px) { .contact-points { grid-template-columns: 1fr; } .contact-form-card__intro { margin-left: 0; } .page-toolbar__search, .page-toolbar__select { flex-basis: 100%; } .page-toolbar { align-items: stretch; } .toolbar-check { padding-left: 0; } .notice-item { padding: .8rem; } }