/* Theme kit: "Signal Flag" (Harbor Beach). Yacht-harbor modern: deep navy hull, sailcloth white, signal red and
   sand. A full-bleed navy hero with a signal-flag stripe, a round "porthole" plate ringed like a rope, square-cornered
   buttons, cards with a red/white/navy flag tab, a tide-table stats strip, and a flag stripe above the footer.
   DM Serif Display headings, DM Sans body.
   Loaded only on sites whose config sets themeKit.name = 'signal-flag' (Base.astro); every rule is scoped to
   html[data-theme="signal-flag"], so other sites are unaffected even if this file were loaded.
   Fonts: SIL Open Font License 1.1 (see fonts/OFL-*.txt), self-hosted from @fontsource. */
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dm-serif-display-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/dm-serif-display-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dm-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/dm-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/dm-sans-latin-600-normal.woff2) format('woff2'); }

html[data-theme="signal-flag"] {
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 4px; --radius-sm: 2px;
  --surface: #ffffff;
  --signal-yellow: #f2c14e;
  --flag: linear-gradient(90deg, var(--coral) 0 33.33%, #ffffff 33.33% 66.66%, var(--signal-yellow) 66.66% 100%);
  --shadow: 0 1px 0 var(--line), 0 18px 28px -26px rgba(15, 36, 64, .55);
}
html[data-theme="signal-flag"] body { background: var(--paper); font-size: 1.04rem; }
html[data-theme="signal-flag"] h1, html[data-theme="signal-flag"] h2, html[data-theme="signal-flag"] h3 { font-weight: 400; letter-spacing: 0; line-height: 1.1; }
html[data-theme="signal-flag"] h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.005em; }
html[data-theme="signal-flag"] h1 { font-size: clamp(2.3rem, 4.8vw, 3.5rem); }
html[data-theme="signal-flag"] .main h2 { padding-left: 1rem; border-left: 4px solid var(--coral); }
html[data-theme="signal-flag"] .eyebrow { font: 600 .76rem/1 var(--sans); letter-spacing: .2em; color: var(--coral-deep); }
html[data-theme="signal-flag"] .answer { font: 400 1.16rem/1.65 var(--sans); }
html[data-theme="signal-flag"] a:hover { text-decoration-color: var(--coral); }

/* Header: sailcloth bar over a thin signal-flag stripe */
html[data-theme="signal-flag"] .site-header { background: color-mix(in srgb, var(--surface) 95%, transparent); border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
html[data-theme="signal-flag"] .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: linear-gradient(90deg, var(--deep) 0 70%, var(--coral) 70% 85%, var(--signal-yellow) 85% 100%); }
html[data-theme="signal-flag"] .site-header__title { font: 400 1.32rem/1.1 var(--serif); letter-spacing: .01em; }
html[data-theme="signal-flag"] .primary-nav a { font-weight: 600; letter-spacing: .02em; }
html[data-theme="signal-flag"] .primary-nav a:hover { border-bottom-color: var(--coral); }
html[data-theme="signal-flag"] .primary-nav a[aria-current="page"] { border-bottom-color: var(--deep); color: var(--ink); }
@media (min-width: 1280px) { html[data-theme="signal-flag"] .primary-nav ul { gap: .55rem; } html[data-theme="signal-flag"] .primary-nav a { letter-spacing: 0; } }

/* Buttons: square, uppercase, signal red; hover navy */
html[data-theme="signal-flag"] .btn { color: #fff; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: .12em; font: 600 .86rem/1 var(--sans); padding: .95rem 1.4rem; box-shadow: none; }
html[data-theme="signal-flag"] .btn:hover { color: #fff; transform: none; }
html[data-theme="signal-flag"] .btn--small { color: #fff !important; border-radius: var(--radius-sm); }
html[data-theme="signal-flag"] .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
html[data-theme="signal-flag"] .btn--ghost:hover { background: var(--ink); color: #fff; }

/* Tables: white with a navy head row */
html[data-theme="signal-flag"] .table-wrap, html[data-theme="signal-flag"] table { background: var(--surface); }
html[data-theme="signal-flag"] .table-wrap { border: 1px solid var(--line); border-top: 3px solid var(--deep); }
html[data-theme="signal-flag"] .prose table { border: 1px solid var(--line); border-top: 3px solid var(--deep); }
html[data-theme="signal-flag"] th { background: var(--paper-alt); color: var(--ink); font-weight: 600; text-transform: uppercase; font-size: .76rem; letter-spacing: .1em; }

/* Cards: white panels with a flag tab in the corner */
html[data-theme="signal-flag"] .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.3rem 1.3rem; box-shadow: var(--shadow); }
html[data-theme="signal-flag"] .card::before { content: ""; display: block; position: absolute; top: -1px; left: 1.3rem; width: 42px; height: 6px; background: var(--flag); border-radius: 0; }
html[data-theme="signal-flag"] a.card:hover { border-color: var(--deep); transform: translateY(-2px); }
html[data-theme="signal-flag"] .note { border-left: 4px solid var(--deep); background: var(--paper-alt); border-radius: 0; }
html[data-theme="signal-flag"] .from-blog, html[data-theme="signal-flag"] .related-guides { border-left: 4px solid var(--coral); background: var(--paper-alt); border-radius: 0; }
html[data-theme="signal-flag"] .faq details { background: var(--surface); border-radius: var(--radius); border-left: 3px solid var(--deep); }
html[data-theme="signal-flag"] .faq summary { font: 600 1.06rem/1.4 var(--sans); }
html[data-theme="signal-flag"] .faq summary::marker { color: var(--coral-deep); }
html[data-theme="signal-flag"] .lead, html[data-theme="signal-flag"] .listing, html[data-theme="signal-flag"] .post-list__item { background: var(--surface); border-radius: var(--radius); }
html[data-theme="signal-flag"] .lead input, html[data-theme="signal-flag"] .lead select, html[data-theme="signal-flag"] .lead textarea, html[data-theme="signal-flag"] .sort select { border-color: #6b7787; border-radius: var(--radius-sm); }
html[data-theme="signal-flag"] .listing__price { font-family: var(--serif); font-weight: 400; }
html[data-theme="signal-flag"] .seg { border-radius: var(--radius-sm); }
html[data-theme="signal-flag"] .seg button[aria-selected="true"] { background: var(--deep); color: #fff; }
html[data-theme="signal-flag"] .listing-dialog::backdrop { background: rgba(15, 36, 64, .7); }

/* CTA + footer: navy, with a signal-flag stripe on top */
html[data-theme="signal-flag"] .wave { display: none; }
html[data-theme="signal-flag"] .cta { background: var(--deep); border-radius: var(--radius); box-shadow: none; border-top: 6px solid var(--coral); }
html[data-theme="signal-flag"] .site-footer { margin-top: 3rem; background: var(--deep); border-top: 0; box-shadow: inset 0 6px 0 var(--coral), inset 0 12px 0 #ffffff, inset 0 18px 0 var(--signal-yellow); padding-top: 3.4rem; }
html[data-theme="signal-flag"] .site-footer .bmls-logo { background: #fff; padding: 3px 6px; border-radius: 2px; box-sizing: content-box; }
html[data-theme="signal-flag"] .footer-h { font-family: var(--serif); font-weight: 400; letter-spacing: .02em; }

/* ---------- Editorial hero (home.heroVariant = 'editorial'): full-bleed navy, porthole plate ---------- */
.hx { background: var(--deep); color: var(--on-deep); position: relative; }
.hx::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--coral) 0 20%, #ffffff 20% 40%, var(--signal-yellow) 40% 60%, var(--on-deep-link) 60% 80%, var(--coral) 80% 100%); }
.hx__grid { display: grid; gap: 0; }
@media (min-width: 960px) { .hx__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 580px; align-items: center; } }
.hx__copy { padding: 3.4rem 1.25rem 2.2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 960px) { .hx__copy { padding: 4.2rem 3rem 3.6rem max(1.25rem, calc((100vw - 1160px) / 2 + 1.25rem)); } }
.hx__kicker { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font: 600 .78rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--on-deep-link); margin: 0 0 1.2rem; }
.hx__kicker span + span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 1rem; background: var(--coral); vertical-align: 0; }
.hx__title { font-size: clamp(2.8rem, 6vw, 5rem) !important; margin: 0 0 1.2rem !important; line-height: .98 !important; color: var(--on-deep) !important; }
.hx__title span { display: block; font-style: italic; color: var(--on-deep-link); }
.hx .answer { max-width: 48ch; color: var(--on-deep); }
.hx__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .8rem; }
.hx .btn--ghost { color: var(--on-deep); border-color: var(--on-deep); }
.hx .btn--ghost:hover { background: var(--on-deep); color: var(--deep); }
.hx__plate { position: relative; margin: 0 auto 2.6rem; width: min(86vw, 440px); aspect-ratio: 1; border-radius: 50%; background: var(--deep-2); color: var(--on-deep); overflow: hidden; box-shadow: 0 0 0 6px var(--deep), 0 0 0 9px var(--driftwood), 0 0 0 15px var(--deep), 0 0 0 16px var(--on-deep-link); }
@media (min-width: 960px) { .hx__plate { margin: 3rem auto; width: min(36vw, 460px); } }
.hx__plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx__plate figcaption { position: absolute; left: 12%; right: 12%; bottom: 7%; text-align: center; font: 400 .74rem/1.3 var(--sans); letter-spacing: .04em; color: var(--on-deep); margin: 0; }
.hx__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 1160px; margin: 0 auto; padding: 0 1.25rem 2.6rem; }
@media (min-width: 760px) { .hx__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hx__stat { margin: 0; padding: 1.3rem 1.1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--coral); }
.hx__stat:nth-child(2) { border-top-color: var(--signal-yellow); }
.hx__stat:nth-child(3) { border-top-color: var(--deep); }
.hx__stat:nth-child(4) { border-top-color: var(--on-deep-link); }
.hx__stat dt { font: 600 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.hx__stat dd { margin: .45rem 0 0; font: 400 clamp(1.6rem, 3vw, 2.2rem)/1 var(--serif); color: var(--ink); }
.hx__stat dd small { display: block; font: 400 .8rem/1.35 var(--sans); color: var(--ink-soft); margin-top: .45rem; }
/* Prose tables fill the column on wider screens (global CSS keeps them display:block for mobile scrolling). */
@media (min-width: 720px) {
  html[data-theme="signal-flag"] .prose table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; }
}

/* Preview-only [VERIFY] marks: let long ones wrap so they never widen the page on phones. */
html[data-theme="signal-flag"] mark.verify { white-space: normal; display: inline; line-height: 1.5; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* About Glen: signal-flag = white panel with the red/white/yellow flag stripe on top, porthole-style photo ring. */
html[data-theme="signal-flag"] .about-glen { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
html[data-theme="signal-flag"] .about-glen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--flag); }
html[data-theme="signal-flag"] .about-glen .about-glen__photo img { border-radius: var(--radius); border: 6px solid var(--deep); box-shadow: 0 0 0 3px var(--signal-yellow); }
html[data-theme="signal-flag"] .about-glen__line { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; }
html[data-theme="signal-flag"] .about-glen__media .about-glen__line { border-left-color: var(--coral); }
html[data-theme="signal-flag"] .about-glen-contact__card { border-top: 6px solid var(--deep); border-radius: var(--radius); }