/* =====================================================================
   Ad On Group — shared shell styles (header, nav, footer).
   Deliberately minimal so per-page designs (from Claude Design) sit on top
   without fighting. Restyle freely; class names are the only contract.
   ===================================================================== */
:root {
  --aog-ink: #1a1a2e;
  --aog-accent: #e8491d;
  --aog-bg: #ffffff;
  --aog-muted: #f5f6f8;
  --aog-border: #e3e6ea;
  --aog-maxw: 1200px;
}
*{ box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--aog-ink); background: var(--aog-bg); }
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------- Header ----------
   The header markup now comes from the design (see partials/header.njk), so it
   carries its own inline styling and needs only the dropdown behaviour here.
   The .site-header/.site-nav rules below are retained for any page still using
   the old bar, but nothing generates it any more. */
.nav-prog { position: relative; }
.nav-menu { opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.nav-prog:hover .nav-menu, .nav-menu:hover { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- Header (legacy) ---------- */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--aog-bg); border-bottom: 1px solid var(--aog-border); }
.site-header__inner { max-width: var(--aog-maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; }
.site-header__logo { display: block; width: auto; height: 48px; }
.site-header__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.site-header__toggle span { width: 26px; height: 2px; background: var(--aog-ink); display: block; }

.site-nav__list { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__item > a { display: block; padding: .75rem .9rem; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.site-nav__item > a[aria-current="page"] { color: var(--aog-accent); }
.site-nav__submenu { list-style: none; margin: 0; padding: .4rem 0; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--aog-bg); border: 1px solid var(--aog-border); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s ease; }
.site-nav__item.has-children:hover > .site-nav__submenu,
.site-nav__item.has-children:focus-within > .site-nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
/* The trailing dropdowns sit near the right of the header, and a 220px panel
   anchored to the item's LEFT corner reached ~7px past the viewport. Because
   the panel is absolutely positioned, it widened the scroll area even while
   closed (visibility:hidden still takes part in layout) — so every page
   carrying this header scrolled sideways a few pixels, on every desktop load.
   Anchor the last two to their right edge so they open inwards. */
.site-nav__item:nth-last-child(-n+2) > .site-nav__submenu { left: auto; right: 0; }

.site-nav__submenu a { display: block; padding: .5rem 1rem; text-decoration: none; font-size: .9rem; }
.site-nav__submenu a:hover { background: var(--aog-muted); }

@media (max-width: 900px) {
  .site-header__toggle { display: flex; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--aog-bg); border-bottom: 1px solid var(--aog-border); display: none; max-height: 80vh; overflow-y: auto; }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; padding: .5rem; }
  .site-nav__submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: 1rem; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--aog-ink); color: #fff; margin-top: 4rem; }
.site-footer__inner { max-width: var(--aog-maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; padding: 2.5rem 1rem; }
.site-footer__brand { max-width: 360px; }
/* No filter here. This used to be `brightness(0) invert(1)` to fake a white
   logo, but that only works on a transparent source — against the opaque JPEG
   it painted the entire 130x75 box solid white, so every page with this footer
   showed a blank block. site.logoFooter is already white-on-transparent. */
.site-footer__brand img { opacity: .95; height: auto; }
.site-footer__brand p { color: #c9cdd6; font-size: .9rem; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__nav a { color: #dfe3ea; text-decoration: none; font-size: .92rem; }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.12); }
.site-footer__legal p { max-width: var(--aog-maxw); margin: 0 auto; padding: 1rem; font-size: .82rem; color: #aeb4c0; }

/* =====================================================================
   REFERENCE MODE (body.reference)
   The auto-ported pages carry the OLD site's Beaver Builder markup, which
   only renders correctly with Beaver Builder's own CSS/JS (animations start
   hidden, "light" rows use white text on background images that no longer
   load). These rules neutralise that so the CONTENT is plainly readable as
   reference material for the redesign. Not meant to be pretty.
   ===================================================================== */
body.reference main { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; line-height: 1.65; }
body.reference .fl-animation { opacity: 1 !important; transform: none !important; }
/* force legible dark-on-white regardless of the old row/overlay classes */
body.reference [class*="fl-row"],
body.reference [class*="fl-col"],
body.reference [class*="fl-module"] { color: #1a1a2e !important; background: none !important; }
body.reference .fl-row-content-wrap::before,
body.reference .fl-row-content-wrap::after { display: none !important; }
body.reference h1, body.reference h2, body.reference h3 { line-height: 1.25; margin: 1.5rem 0 .5rem; }
body.reference p { margin: 0 0 1rem; }
/* Content images only. This must NOT reach the header: `body.reference img`
   outranks `.site-header__logo` on specificity, which un-capped the logo's
   height:48px and rendered it at natural size (285px) on all 87 reference
   pages — the "giant logo" header. */
body.reference main img { height: auto; margin: 1rem 0; }
/* stacked sliders: show every slide as plain blocks */
body.reference .owl-carousel, body.reference .slider { display: block !important; }
body.reference .slide-item { display: block !important; float: none !important; width: auto !important; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--aog-border); }
body.reference .slider-image img { max-height: 90px; width: auto; }
body.reference main a { color: var(--aog-accent); }

/* Interim CTA where a Ninja Forms embed used to be (scripts/replace-dead-forms.js).
   Those forms died with WordPress; these link through to the working contact form. */
/* Specificity has to beat the ported Beaver Builder link colour, whose
   stylesheet loads after this one via extraHead. */
.aog-form-cta a[href],
.fl-html .aog-form-cta a[href] {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  background: #1BABE5;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}
.aog-form-cta a[href]:hover,
.aog-form-cta a[href]:focus { background: #1793c4; color: #fff; }

/* =====================================================================
   AI resource articles (src/_includes/layouts/resource.njk)
   Readable long-form column. Deliberately restrained — the value is the
   writing, and a measured line length is most of what makes it readable.
   ===================================================================== */
body.resource main { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
body.resource .resource-crumbs { font-size: .85rem; color: #6b7280; margin-bottom: 1rem; }
body.resource .resource-crumbs a { color: var(--aog-accent); text-decoration: none; }
body.resource h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .75rem; }
body.resource .resource-byline { font-size: .9rem; color: #6b7280; margin: 0 0 2rem; }
body.resource .resource-byline a { color: inherit; }

/* The direct answer, first thing after the title. */
body.resource .resource-answer {
  background: #F2FAFE; border: 1px solid rgba(27,171,229,.28);
  border-radius: 14px; padding: 1.15rem 1.35rem; margin: 0 0 2.25rem;
}
body.resource .resource-answer h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: #1BABE5; margin: 0 0 .5rem;
}
body.resource .resource-answer p { margin: 0; font-size: 1.08rem; line-height: 1.6; }

body.resource h2 { font-size: 1.45rem; line-height: 1.25; margin: 2.5rem 0 .75rem; letter-spacing: -.01em; }
body.resource h3 { font-size: 1.12rem; margin: 1.75rem 0 .5rem; }
body.resource p, body.resource li { font-size: 1.03rem; line-height: 1.7; color: #2C3440; }
body.resource ul, body.resource ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
body.resource li { margin-bottom: .4rem; }
body.resource table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .97rem; }
body.resource th, body.resource td { border: 1px solid #E4E8EE; padding: .6rem .75rem; text-align: left; vertical-align: top; }
body.resource th { background: #F7F9FB; font-weight: 700; }

body.resource .resource-faq details {
  border: 1px solid #E4E8EE; border-radius: 12px; padding: .85rem 1.1rem; margin-bottom: .6rem;
}
body.resource .resource-faq summary { cursor: pointer; font-weight: 700; }
body.resource .resource-faq details > div { padding-top: .6rem; }

body.resource .resource-cta {
  border-top: 1px solid #E4E8EE; margin-top: 3rem; padding-top: 1.75rem;
}
body.resource .resource-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
body.resource .resource-card {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid #E4E8EE; border-radius: 12px; padding: 1rem 1.1rem;
  text-decoration: none; color: inherit;
}
body.resource .resource-card:hover { border-color: rgba(27,171,229,.5); }
body.resource .resource-card-kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #1BABE5; font-weight: 700; }
body.resource .resource-card-title { font-weight: 700; }
body.resource .resource-card-blurb { font-size: .9rem; color: #6b7280; }

@media (max-width: 640px) {
  body.resource .resource-more-grid { grid-template-columns: 1fr; }
}

/* Resources hub (/resources/) */
body.resource-index main { max-width: 900px; }
body.resource .resource-hub-intro { font-size: 1.1rem; color: #4A5462; margin-bottom: 2.5rem; max-width: 62ch; }
body.resource .resource-hub-group { margin-bottom: 2.5rem; }
body.resource .resource-hub-group h2 { margin-bottom: 1rem; }
body.resource .resource-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
body.resource .resource-hub-cta {
  border-top: 1px solid #E4E8EE; margin-top: 1rem; padding-top: 1.75rem;
}
@media (max-width: 640px) {
  body.resource .resource-hub-grid { grid-template-columns: 1fr; }
}
body.resource .resource-note {
  font-size: .95rem; color: #5A6472; background: #F7F9FB;
  border-left: 3px solid #D6DCE4; padding: .75rem 1rem; margin: 1.5rem 0;
}

/* Contact form validation and status (assets/js/contact-form.js) */
.form-error {
  display: block; margin-top: .35rem; font-size: .85rem; color: #C0392B; font-weight: 600;
}
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #C0392B !important; outline-color: #C0392B;
}
.form-status { margin: .5rem 0 0; font-size: .95rem; min-height: 1.2em; }
.form-status--ok { color: #1E7B4D; font-weight: 600; }
.form-status--error { color: #C0392B; font-weight: 600; }
.contact-pref-group legend { padding: 0; }