/* =====================================================================
   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 ---------- */
.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); }
.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; }
.site-footer__brand img { filter: brightness(0) invert(1); opacity: .95; }
.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; }
body.reference 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; }