/* ==========================================================================
   Site-wide header/footer chrome — the Preston landing-page design.
   Ported from landing-pages/ai-pr-agent/style.css so every page carries the
   same header and footer as /ai-pr-agent/.

   Two deliberate differences from the landing-page original:

   1. Tokens are prefixed --lp-*. The theme already defines --green, --text
      and --white on :root; reusing those names here would repaint unrelated
      components across the site.
   2. No global reset and no `body` rule. The landing-page stylesheet loads
      alone (the standalone template dequeues everything else), so it can
      reset freely. Here the theme's own CSS is present, so every rule below
      is scoped inside .lp-header / .lp-footer / .lp-postfooter and must not
      leak into page content.
   ========================================================================== */

:root {
  --lp-brand:       #4A35F0;
  --lp-brand-hover: #3826C0;

  --lp-ink:         #17103F;
  --lp-muted:       #6C6A85;
  --lp-faint:       #8D8BA3;
  --lp-nav:         #3D4761;

  --lp-line:        #EAE8F5;
  --lp-wash-2:      #FAF9FF;
  --lp-white:       #ffffff;

  --lp-gutter:      40px;
  --lp-wrap:        1080px;
  --lp-font:        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Scoped reset. The theme's global rules (list bullets, ::before content,
   fixed-position header, white link colour) would otherwise bleed in.
   -------------------------------------------------------------------------- */
.lp-header,
.lp-header *,
.lp-footer,
.lp-footer *,
.lp-postfooter,
.lp-postfooter * {
  box-sizing: border-box;
  font-family: var(--lp-font);
}

.lp-header ul,
.lp-footer ul,
.lp-postfooter ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-header li,
.lp-footer li,
.lp-postfooter li {
  margin: 0;
  padding-left: 0;
  line-height: inherit;
  list-style: none;
}

.lp-header li::before,
.lp-footer li::before,
.lp-postfooter li::before {
  content: none;
}

.lp-header a,
.lp-footer a,
.lp-postfooter a {
  text-decoration: none;
}

.lp-header img,
.lp-footer img,
.lp-postfooter img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Header
   The theme's critical CSS pins `header` to position:fixed with a
   transparent background and white text. `header.lp-header` outranks a bare
   `header` selector, so these win without touching the original rules.
   -------------------------------------------------------------------------- */
/* main.css paints a solid blue bar whenever the hero is disabled
   (`.header-disabled header:not(.floating-header)`, specificity 0,2,1) — a
   compensation for the old transparent fixed header. The new header is always
   opaque, so that rule is obsolete; these selectors outrank it. The theme's
   scroll JS also toggles .floating-header / .mobile-menu-active, so both are
   neutralised here too. */
header.lp-header,
.page-warpper header.lp-header,
.header-disabled header.lp-header:not(.floating-header),
header.lp-header.floating-header,
header.lp-header.mobile-menu-active {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  padding: 16px var(--lp-gutter);
  background: rgba(255, 255, 255, .88) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-ink);
  transition: none;
  max-width: 100vw;
  overflow-x: clip;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lp-ink);
  flex: 0 0 auto;
  margin-right: auto;   /* pushes nav + sign-in to the right edge */
}
.lp-brand img { height: 30px; width: auto; }
.lp-brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.lp-brand-name span { color: var(--lp-muted); font-weight: 400; }

.lp-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: var(--lp-nav);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lp-nav a { color: var(--lp-nav); }
.lp-nav a:hover { color: var(--lp-ink); }
.lp-nav .is-current > a,
.lp-nav a.is-current { color: var(--lp-brand); font-weight: 500; }
.lp-nav .is-current > a:hover,
.lp-nav a.is-current:hover { color: var(--lp-brand-hover); }

/* The primary menu renders as a <ul> here, unlike the landing page's flat
   list of <a>s, so the flex layout is applied to the list itself. */
.lp-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.lp-nav ul ul { display: none; }   /* no dropdowns in this design */

/* The theme's older stylesheets carry several high-specificity link colours
   scoped to the header -- partials.css alone has
   `.header-disabled header:not(.floating-header).bg-white-header a` at 0,3,2,
   which outranks a plain `header.lp-header .lp-signin` (0,2,1) and turned this
   label black. The classes that triggered that one are no longer emitted (see
   header.php), but the header link colours are pinned here so any remaining
   legacy selector cannot repaint them. */
header.lp-header .lp-nav a,
header.lp-header .lp-nav a:visited { color: var(--lp-nav) !important; }
header.lp-header .lp-nav a:hover { color: var(--lp-ink) !important; }
header.lp-header .lp-brand,
header.lp-header .lp-brand:visited { color: var(--lp-ink) !important; }

header.lp-header .lp-signin,
header.lp-header .lp-signin:visited,
.lp-nav a.lp-signin {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--lp-brand);
  color: var(--lp-white);
  font-weight: 500;
  white-space: nowrap;
  color: var(--lp-white) !important;
}
header.lp-header .lp-signin:hover,
.lp-nav a.lp-signin:hover {
  background: var(--lp-brand-hover);
  color: var(--lp-white) !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer.lp-footer {
  padding: 56px var(--lp-gutter) 32px;
  border-top: 1px solid var(--lp-line);
  background: var(--lp-wash-2);
  color: var(--lp-ink);
}

.lp-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--lp-wrap);
  margin: 0 auto;
}

.lp-footer-logo { display: inline-flex; }
.lp-footer-logo img { height: 44px; width: auto; }

.lp-footer-blurb {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-muted);
  text-wrap: pretty;
}

.lp-footer h3 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-ink);
}

.lp-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
.lp-footer-links a { color: var(--lp-muted); }
.lp-footer-links a:hover { color: var(--lp-brand); }
.lp-footer-links a.is-strong { color: var(--lp-brand); font-weight: 600; }

/* --------------------------------------------------------------------------
   Post-footer (copyright + social). The landing page calls this
   .lp-footer-bottom; the theme keeps it in a separate element, so it is
   styled to match and pulled up under the footer grid.
   -------------------------------------------------------------------------- */
.lp-postfooter {
  background: var(--lp-wash-2);
  padding: 0 var(--lp-gutter) 32px;
}

.lp-postfooter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: var(--lp-wrap);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--lp-line);
  font-size: 13px;
  color: var(--lp-faint);
}

.lp-postfooter .lp-social ul {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lp-postfooter .lp-social img {
  height: 16px;
  width: auto;
  opacity: .55;
  transition: opacity .2s ease;
}
.lp-postfooter .lp-social a:hover img { opacity: 1; }

/* --------------------------------------------------------------------------
   Top spacing.

   The old header was position:fixed and ~150px tall, so main.css clears it
   with ~20 different `padding-top` rules (100px-209px) spread across hero and
   page-heading variants. The new header is sticky: it sits in normal flow, so
   that clearance is now additive and some pages carry more whitespace above
   the fold than they used to.

   Sticky is kept deliberately. Switching to `fixed` would restore the old
   spacing contract but reintroduces the risk of the header overlapping
   content on templates whose clearance is smaller than the header. Extra
   whitespace is cosmetic; overlap is a bug. Trimming those ~20 rules is a
   layout change well beyond the header/footer and is left alone.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive — mirrors the landing page's breakpoints.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --lp-gutter: 28px; }
}

/* Below 900px the full site menu no longer fits beside the logo. The header
   wraps to two rows -- logo + sign-in, then the menu -- and the menu scrolls
   sideways rather than overflowing the page. The landing page never needed
   this: it carries three links, this header carries the whole site menu. */
@media (max-width: 900px) {
  header.lp-header {
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 16px;
    padding: 12px 20px;
  }
  .lp-nav {
    order: 3;
    width: 100%;
    /* Flex items default to min-width:auto, so a nowrap menu refuses to shrink
       and widens the whole document instead of scrolling inside itself. */
    min-width: 0;
    max-width: 100%;
    gap: 18px;
    font-size: 13px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .lp-nav::-webkit-scrollbar { display: none; }
  .lp-nav ul {
    gap: 18px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .lp-nav li { white-space: nowrap; }
  .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  :root { --lp-gutter: 20px; }
  .lp-brand-name span { display: none; }
  .lp-nav a.lp-signin { padding: 8px 14px; font-size: 13px; }
  footer.lp-footer { padding: 44px var(--lp-gutter) 28px; }
  .lp-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-postfooter__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Standard page heading (Preston system)

   `.page-heading.heading` is the shared hero emitted by
   template-parts/layout/header/{default,category,author,search}.php and
   404.php. It is on every page that does not ship its own template, so this
   block is the site's standard page hero.

   Was: solid legacy indigo #4f40fc, white text, a black 20% overlay and a
   background image, with `padding: 206px 0 45px` — clearance for the header
   back when it was position:fixed. Now: the pale Preston hero used by the
   pricing page, matching .ir-pricing__hero in ir-pricing.css value for value.

   The background image and its overlay are SUPPRESSED, not restyled. Every
   page sets one via the `_ir_header_image` meta and they are dark photographs
   chosen to carry white text; keeping them under dark-on-pale copy would make
   the text unreadable. The meta is untouched, so reverting this block brings
   every image back.

   Loads after the inline critical CSS in header.php (line 5, before wp_head()
   at line 49), so equal-specificity rules here win. That is why the h1/p rules
   below do not need to be more specific than the ones they replace.
   ========================================================================== */

.page-heading.heading {
  padding: 80px 0 56px;
  background: linear-gradient(180deg, var(--ir-wash, #F7F6FD) 0%, var(--ir-white, #FFFFFF) 100%);
}

/* Kill the dark scrim and the photo behind it. */
.page-heading.heading::before,
.page-heading.heading .page-heading__background-image { display: none; }

/* The legacy inner is capped at 60% and the arrow is a scroll cue for a
   full-bleed photo hero that no longer exists. */
.page-heading.heading .page-heading__inner { max-width: none; }
.page-heading.heading .arrow-down { display: none; }

.page-heading.heading h1 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--ir-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 600;              /* 600, never 700 — DESIGN-SYSTEM.md §2 */
  color: var(--ir-ink, #17103F);
  text-wrap: balance;
}

.page-heading.heading p {
  max-width: 64ch;
  margin: 18px 0 0;
  font-family: var(--ir-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ir-text, #4C4A63);
  text-wrap: pretty;
}

/* The optional header CTA. Legacy `.button--primary` is mint on legacy blue;
   on a pale ground it needs the Preston primary treatment. */
.page-heading.heading .cta-wrapper { margin-top: 28px; }

.page-heading.heading .cta-wrapper .button {
  display: inline-block;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--ir-radius-md, 10px);
  background: var(--ir-brand, #4A35F0);
  color: var(--ir-white, #FFFFFF);
  font-family: var(--ir-font, Inter, sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--ir-shadow-cta, 0 6px 18px rgba(74, 53, 240, .28));
  transition: background-color 160ms ease;
}

.page-heading.heading .cta-wrapper .button:hover {
  background: var(--ir-brand-hover, #3826C0);
}

.page-heading.heading .cta-wrapper .button:focus-visible {
  outline: 2px solid var(--ir-brand, #4A35F0);
  outline-offset: 3px;
}

/* Breadcrumbs render immediately below the hero and were white-on-indigo. */
.page-heading.heading + .breadcrumbs,
.page-heading.heading + .breadcrumbs a,
.page-heading.heading + .breadcrumbs span {
  color: var(--ir-muted, #6C6A85);
}

@media (max-width: 1080px) {
  .page-heading.heading { padding: 64px 0 48px; }
}

@media (max-width: 600px) {
  .page-heading.heading { padding: 48px 0 40px; }
  .page-heading.heading h1 { max-width: none; }
  .page-heading.heading p { font-size: 17px; }
}