/* Costanoa FAQ (HWV-153) — SAME layout as the batch-1 highway2021 FAQ revamp (faq-headline / quick-answers / policy-tables / category panel / guest CTA), only the COLORS and FONTS differ to match the Costanoa (Kalium) design system. Ported 1:1 from highway2021 _faq.scss / _faq-quick-answers.scss / _faq-policy.scss, scoped under .cfaq so it neither bleeds into nor inherits Kalium page styles. */ /* Header link legibility is handled the native Kalium way — page 386 carries the same per-page "Page Header Styling" (teal nav links) that /offers/ and the other interior pages use — so no CSS header override is needed here. See the plugin readme / feasibility note for the exact postmeta. */ .cfaq { /* Color roles — Lake Siskiyou (Kalium) palette: dark teal heading, primary teal accent, cream panel */ --c-head: #002d44; /* headings + table header bar (Lake dark teal) */ --c-accent: #004a66; /* accents: qa-number, borders, hovers, icon, links (Lake primary) */ --c-accent-dark: #00374d; --c-panel: #DAE4EC; /* module panel background box — site style blue (#77052) */ --c-line: #e4ded2; /* borders */ --c-text: #202124; /* body copy */ --c-white: #ffffff; --c-link: #004a66; /* Fonts — match the site: Arvo (headings) / Montserrat (body) */ --c-head-font: "Arvo", Georgia, "Times New Roman", serif; --c-body-font: "Montserrat", "Helvetica Neue", Arial, sans-serif; max-width: 1180px; margin: 0 auto; padding: 0 20px 40px; font-family: var(--c-body-font); color: var(--c-text); } .cfaq *, .cfaq *::before, .cfaq *::after { box-sizing: border-box; } .cfaq [id] { scroll-margin-top: 120px; } /* #77074: pointer cursor on every clickable CTA/link */ .cfaq a, .cfaq .qa-card, .cfaq .faq-btn-title { cursor: pointer; } /* ============ Headline (.faq-headline) ============ */ .cfaq .faq-headline .fh-inner { max-width: 760px; margin: 0 auto; text-align: center; } /* Force the module heading font here too: Kalium styles the page

with the brand script face, but batch-1 keeps H1 + module headings in one display font. */ .cfaq .faq-headline h1 { /* Match the site heading font (Arvo). One H1 per the handoff. */ font-family: var(--c-head-font); text-transform: none; color: var(--c-head); letter-spacing: normal; font-size: clamp(30px, 4vw, 42px); line-height: 1.15; font-weight: 400; /* #77070 */ margin: 40px 0 20px; } .cfaq .faq-headline p { font-family: var(--c-body-font); max-width: 680px; margin: 0 auto; line-height: 1.55; color: var(--c-text); /* HWV-153 #76851: intro text per tester (#202124) */ font-size: 16.5px; } /* ============ Module panels (quick answers + policy tables) ============ */ .cfaq .faq-quick-answers, .cfaq .faq-policy-tables { position: relative; } .cfaq .faq-quick-answers { margin-top: 46px; } .cfaq .faq-quick-answers .module-inner, .cfaq .faq-policy-tables .module-inner { background: var(--c-panel); border-radius: 4px; padding: 30px 34px 34px; margin: 0 0 28px; } .cfaq .module-heading { font-family: var(--c-head-font); text-transform: uppercase; color: var(--c-head); letter-spacing: 0.06em; font-size: clamp(24px, 3vw, 33px); line-height: 1.08; font-weight: 400; /* HWV-153 #76850: h2 module headings at normal weight */ margin: 0 0 10px; text-align: left; } .cfaq .module-intro { font-family: var(--c-body-font); font-size: 15.5px; color: var(--c-text); /* HWV-153 #76851: module intro per tester (#202124) */ line-height: 1.45; margin: 0 0 22px; } /* ============ Quick-answer cards (.qa-grid / .qa-card) ============ */ .cfaq .qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cfaq .qa-card { display: block; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 5px; padding: 18px; /* #77067: roomier card padding to match the sample */ min-height: 250px; /* #77067: taller cards + room for the bottom link */ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.025); text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } /* Single-link card: the whole card is one stretched link inside the .qa-card div. */ .cfaq .qa-cardlink { display: block; height: 100%; text-decoration: none; color: inherit; } .cfaq .qa-card:hover, .cfaq .qa-card:focus-within { border-color: var(--c-accent); box-shadow: 0 4px 14px rgba(0, 74, 102, 0.10); transform: translateY(-2px); text-decoration: none; } .cfaq .qa-number { font-family: var(--c-body-font); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: #2585a8; /* #77079 */ } .cfaq .qa-title { font-family: var(--c-head-font); color: var(--c-head); text-transform: uppercase; letter-spacing: 0.05em; font-size: 19px; font-weight: 400; /* #77070 */ line-height: 1.1; margin: 8px 0; } .cfaq .qa-text { font-family: var(--c-body-font); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--c-text); margin: 0; } /* Multi-link cards (non-linked container: title + summary + a secondary link) */ .cfaq .qa-card--multi { display: flex; flex-direction: column; position: relative; } /* #77077: the whole card (number/title/description) is clickable to the primary target; the secondary sublink stays clickable on top (no nested anchors). */ .cfaq .qa-card--multi .qa-jump::before { content: ""; position: absolute; inset: 0; z-index: 1; } .cfaq .qa-card--multi .qa-sublink { position: relative; z-index: 2; } .cfaq .qa-card--multi .qa-text { flex: 0 1 auto; } /* #77067: text stays top; sublink margin-top:auto pushes to bottom */ .cfaq .qa-card--multi:hover, .cfaq .qa-card--multi:focus-within { border-color: var(--c-accent); box-shadow: 0 4px 14px rgba(0, 74, 102, 0.10); } .cfaq .qa-title .qa-jump, .cfaq a.qa-jump { color: var(--c-head); text-decoration: none; } .cfaq a.qa-jump:hover, .cfaq a.qa-jump:focus-visible { color: var(--c-accent); text-decoration: none; } .cfaq .qa-sublink { display: inline-flex; /* #77072: center the arrow vertically with the text */ align-items: center; /* #77080: shrink the sublink to its text+arrow width. As a flex item in the column card it would otherwise stretch full-width (align-items:stretch), making the blank area beside the label trigger the sublink; only the text should — the rest of the card belongs to the primary anchor overlay (.qa-jump::before). */ align-self: flex-start; gap: 5px; margin-top: auto; /* #77067: push the link to the bottom of the card (space above it) */ font-family: var(--c-body-font); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-accent); text-decoration: none; transition: color 180ms ease; } /* #77071: animated underline on the label TEXT only (arrow stays un-underlined), 1.5px / 180ms */ .cfaq .qa-sublink-text { line-height: 1.3; /* #77075: small, even gap between the text and the underline */ background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; transition: background-size 180ms ease; } .cfaq .qa-sublink::after { content: "\2192"; line-height: 1; } /* #77054/#77072: arrow after label, middle-aligned, no underline */ .cfaq .qa-sublink:hover, .cfaq .qa-sublink:focus-visible { color: #00435C; text-decoration: none; } .cfaq .qa-sublink:hover .qa-sublink-text, .cfaq .qa-sublink:focus-visible .qa-sublink-text { background-size: 100% 1.5px; } /* #77071 */ /* ============ Policy tables (.tables-grid / .policy-table) ============ */ .cfaq .faq-policy-tables .tables-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .cfaq .policy-table { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 5px; overflow: hidden; } .cfaq .policy-table .table-title { caption-side: top; text-align: left; font-family: var(--c-head-font); text-transform: uppercase; color: var(--c-head); letter-spacing: 0.05em; font-size: 19px; font-weight: 400; /* #77070 */ line-height: 1.1; margin: 0; padding: 18px 18px 12px; } .cfaq .policy-table table { width: 100%; border-collapse: collapse; font-family: var(--c-body-font); font-size: 13.5px; line-height: 1.4; } .cfaq .policy-table thead th { text-align: left; background: var(--c-head); color: var(--c-white); padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .cfaq .policy-table tbody th { text-align: left; font-weight: 800; padding: 12px; border-bottom: 1px solid var(--c-line); vertical-align: top; color: var(--c-text); } .cfaq .policy-table td { padding: 12px; border-bottom: 1px solid var(--c-line); vertical-align: top; color: var(--c-text); } .cfaq .policy-table tr:last-child th, .cfaq .policy-table tr:last-child td { border-bottom: 0; } /* HWV-153 #76864: the theme sets word-break:break-word on cells, so in the narrow first column a word broke mid-character ("Designate|d fire pits"). Keep whole words — the table widens (and scrolls) instead of splitting words. */ .cfaq .policy-table th, .cfaq .policy-table td { word-break: normal; overflow-wrap: normal; } /* ============ FAQ category panel (pills + accordion) ============ */ .cfaq .faq-category { position: relative; } .cfaq .faq-sections-panel { background: var(--c-panel); border-radius: 4px; padding: 30px 34px 34px; margin-top: 46px; margin-bottom: 40px; } .cfaq .faq-sections-header .module-heading { margin-bottom: 0; } /* Pills (category nav) */ .cfaq .faq-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; } .cfaq .faq-pills .pill { background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-head); font-family: var(--c-body-font); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.035em; padding: 10px 12px; border-radius: 3px; text-decoration: none; transition: border-color .25s ease, background .25s ease, color .25s ease; } .cfaq .faq-pills .pill:hover, .cfaq .faq-pills .pill:focus-visible { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-white); text-decoration: none; } /* FAQ groups + accordion rows */ .cfaq .main-faq-category { margin-top: 26px; } .cfaq .main-faq-category .card { background: transparent; border: none; margin-bottom: 26px; outline: none; } .cfaq .main-faq-category .card:last-child { margin-bottom: 0; } .cfaq .main-faq-category .card-faq { background: transparent; border-radius: 0; padding: 0; } .cfaq .main-faq-category .card-title { font-family: var(--c-head-font); text-transform: uppercase; color: var(--c-head); letter-spacing: 0.05em; font-size: 26px; /* #77076 */ font-weight: 700; line-height: 1.1; margin: 0 0 13px; } .cfaq .faq-info { display: block; background: var(--c-white); border-radius: 3px; min-height: 38px; padding: 11px 17px; margin: 0 0 9px; border-left: 3px solid transparent; transition: border-color .2s ease, background .2s ease; } /* #77057: hover state on the question row (match the sample page) */ .cfaq .faq-info:hover:not(.is-open) { background: #eef3f7; } .cfaq .faq-info.is-open { border-left-color: var(--c-accent); padding: 13px 17px 15px 14px; } .cfaq .faq-title { margin: 0; font-size: inherit; } /* native