/**
 * Crescita Studio — Layout & Site Shell
 * Container/grid system, header, navigation, footer.
 *
 * Built on tokens.css. Styles GeneratePress markup rather than replacing it.
 * Architectural, whitespace-first, strong horizontal divisions (Brand Kit §7–8).
 */

/* ── Container ───────────────────────────────────────────────── */

.crescita-container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .crescita-container { padding-inline: var(--space-lg); }
}

/* Text-heavy measure, per Brand Kit §7.
   The container keeps the full content width so its left edge lines up with
   every other section; the measure is applied to the children instead.
   Constraining the container itself would centre the block and give the page
   two different left edges. */
.crescita-container--text > * { max-width: var(--width-text); }

/* ── Grid ────────────────────────────────────────────────────── */

/* Mobile-first: everything is a single column below 768px
   (DESIGN.md: design mobile-first, verify desktop). */
.crescita-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .crescita-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Asymmetric split — content leads, asset follows (Brand Kit §7:
   asymmetrical where justified).

   Held back to 1024px deliberately. At 768px the left column measures about
   360px, and the H1 stays on the desktop scale there (the mobile scale ends
   at 767.98px), so a 64px headline broke onto 3 lines. Tablet keeps the
   stacked layout, where the headline has the full measure and sets on two. */
@media (min-width: 1024px) {
  .crescita-grid--split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-xl);
    align-items: center;
  }
}

/* ── Full-width template ─────────────────────────────────────── */
/* page-full-width.php drops the GeneratePress content container. Neutralise
   the width, float and padding GP would otherwise apply so Crescita sections
   run edge to edge and manage their own container.

   Specificity matters here. GeneratePress sets `.content-area { width: 70% }`
   for its sidebar layouts and prints that rule as inline CSS in wp_head,
   after this stylesheet. A plain `.crescita-full` class ties on specificity
   and loses on order, which left every section constrained to 70% with a
   dead gutter on the right. Qualifying with the #primary id wins outright.
   The template renders no sidebar, so the full width is ours to take. */

#primary.crescita-full,
#primary.crescita-full .site-main,
#primary.crescita-full .crescita-full__article,
#primary.crescita-full .entry-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  float: none;
}

/* The outer GeneratePress wrapper is the real constraint. With GP's
   "Contained" container layout, #page carries .grid-container with
   max-width: 1200px and auto side margins, which caps every section no
   matter what the inner elements do. Measured on staging: #page rendered
   1200px wide at a 1440px viewport with 120px margins either side.
   Released only on this template, so ordinary pages keep GP's container. */
.crescita-full-page #page.grid-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.crescita-full-page #content,
.crescita-full-page .site-content {
  display: block;
  padding: 0;
  margin: 0;
  max-width: none;
}

/* The page's own sections own all vertical rhythm. */
#primary.crescita-full .entry-content > * { margin-block: 0; }

/* ── Skip link (a11y: WCAG 2.1 AA, bypass blocks) ────────────── */

.screen-reader-text:focus,
.skip-link:focus {
  background-color: var(--crescita-midnight);
  color: var(--crescita-sand);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 100000;
}

/* ── Header ──────────────────────────────────────────────────── */

.site-header {
  background-color: var(--color-bg);
  border-bottom: var(--border-hairline);
}

.site-header .inside-header {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .site-header .inside-header { padding: var(--space-sm) var(--space-lg); }
}

/* Wordmark. Switzer, tight tracking — the logo lockup is typographic
   until the finalised mark is supplied. */
.site-header .main-title,
.site-header .site-logo { margin: 0; }

.site-header .main-title a {
  font-family: var(--font-primary);
  font-size: var(--text-wordmark);
  font-weight: var(--weight-heading-strong);
  letter-spacing: -0.01em;
  color: var(--crescita-midnight);
}

.site-header .main-title a:hover { color: var(--crescita-ocean); }

.site-header .site-description {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Navigation ──────────────────────────────────────────────── */
/* Single line at desktop, height capped well under 80px. */

.main-navigation { background-color: transparent; }

.main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-navigation .main-nav > ul > li > a {
  font-family: var(--font-primary);
  font-size: var(--text-nav);
  font-weight: var(--weight-body);
  line-height: 1;
  color: var(--crescita-midnight);
  padding: var(--space-xs) 0;
  background: none;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a {
  color: var(--crescita-ocean);
}

/* Current page marked with a rule, not colour alone
   (DESIGN.md: no colour-only communication). */
.main-navigation .main-nav > ul > li.current-menu-item > a {
  box-shadow: inset 0 -1px 0 0 var(--crescita-ocean);
}

/* Primary CTA in the navigation. Assign the `menu-item-cta` class to the
   Diagnosi menu item in Appearance → Menus. */
.main-navigation .main-nav > ul > li.menu-item-cta > a {
  background-color: var(--crescita-midnight);
  color: var(--crescita-sand);
  border: 1px solid var(--crescita-midnight);
  border-radius: var(--radius-sm);
  padding: 0.6875rem 1.125rem;
  transition: background-color var(--transition-base),
              border-color var(--transition-base);
}

.main-navigation .main-nav > ul > li.menu-item-cta > a:hover {
  background-color: var(--crescita-ocean);
  border-color: var(--crescita-ocean);
  box-shadow: none;
}

/* Mobile navigation toggle.
   Explicit min dimensions and horizontal padding: with `padding: x 0` the
   button measured 14px wide, well under the 44px WCAG 2.5.5 target. align-self
   stops the header flex row stretching it to full header height. */
.menu-toggle {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  color: var(--crescita-midnight);
  background: none;
  padding: var(--space-xs) var(--space-sm);
  min-width: 44px;
  min-height: 44px;
  align-self: center;
}

@media (max-width: 767.98px) {
  .main-navigation .main-nav > ul {
    display: block;
    padding-block: var(--space-xs);
  }

  /* Comfortable tap targets: 0.875rem top and bottom around a 15px line
     clears 44px, the WCAG 2.5.5 target size. */
  .main-navigation .main-nav > ul > li > a {
    display: block;
    padding: 0.875rem 0;
  }

  .main-navigation .main-nav > ul > li.menu-item-cta > a {
    display: inline-block;
    margin-top: var(--space-xs);
  }
}

/* ── Header ──────────────────────────────────────────────────── */
/* Prototype 02 (founder decision 2026-08-24: site-wide, not homepage-only).
   Logo only, no nav — GeneratePress' own header markup is fully replaced via
   the generate_header hook in functions.php, not this file's old
   .site-header/.main-navigation rules below (kept for now, unused — see
   current-state.md for the cleanup follow-up). */

.crescita-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crescita-midnight);
  border-bottom: 1px solid var(--color-border-dark);
}

/* Two surfaces unpin it — founder direction 2026-09-07, and the reason is the
   same on both: the header exists to keep the top of the funnel reachable
   while someone is being persuaded, and neither of these is a persuasion
   surface. On the booking page the visitor has already decided; while the
   questionnaire is open they are mid-task. A bar that follows the viewport
   there only competes with the thing it is following over, and on a phone it
   is spending scarce height to do it.

   'crescita-assessment-active' is set by diagnosi-assessment.js the moment
   the questionnaire replaces the hero form, not on a page view of /diagnosi:
   the marketing page above the questionnaire still wants a sticky header. */
body.crescita-page-prenota .crescita-head,
body.crescita-assessment-active .crescita-head {
  position: static;
}

/* The header CTA points at the Diagnosi. Offering it to someone already
   filling in the Diagnosi is an invitation to restart what they are halfway
   through. (The booking page renders no CTA at all — see
   crescita_custom_header().) */
body.crescita-assessment-active .crescita-head__cta {
  display: none;
}

/* Logged-in admin bar is fixed at top:0 with a higher z-index than ours;
   without this offset it overlaps and clips the sticky header the moment
   it pins. Matches WP core's own admin-bar breakpoints (32px desktop,
   46px at <= 782px — the same width WP's admin-bar.min.css switches on). */
body.admin-bar .crescita-head { top: 32px; }
@media screen and (max-width: 782px) {
  /* NOT 46px. Below 782px WP core switches #wpadminbar from position:fixed
     to position:absolute, so the admin bar scrolls away with the document
     instead of staying pinned. Offsetting by its height therefore reserved
     46px of empty space below the viewport top once scrolled, and page
     content showed through the gap above the "sticky" header — which read
     as the header having stopped sticking. Nothing is pinned there to
     avoid at this width, so the header belongs at top: 0.
     Logged-in admin only; never visible to a real visitor. */
  body.admin-bar .crescita-head { top: 0; }
}

.crescita-head .crescita-container {
  display: flex;
  position: relative;
  justify-content: center;
  /* Trimmed from 0.3/0.6rem, founder direction 2026-09-07 — the bar was
     taking more height than it earns, most of it on mobile where height is
     scarcest. Note the logo is the dominant term in this bar's height, not
     the padding: at 52/68px it is roughly three quarters of the total, so
     this trim alone is a small change. */
  padding-block: 0.15rem;
}

@media (min-width: 768px) {
  .crescita-head .crescita-container { padding-block: 0.35rem; }
}

.crescita-head__brand {
  display: flex;
  align-items: center;
}

.crescita-head__logo {
  display: block;
  height: 52px;
  width: auto;
  mix-blend-mode: lighten;
}

@media (min-width: 768px) {
  .crescita-head__logo { height: 68px; }
}

/* Header CTA — desktop/tablet only (mobile keeps the bottom sticky CTA).
   Hidden by default here; the homepage script (home.js) reveals it only
   when no other "Inizia la Diagnosi" CTA is on screen, mirroring the
   sticky-mobile-CTA avoidance logic. Non-homepage pages have no such
   script, so the CTA stays visible there once the breakpoint is met. */
.crescita-head__cta { display: none; }

@media (min-width: 768px) {
  .crescita-head__cta {
    display: inline-flex;
    align-items: center;
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.55rem 1.1rem;
    font-family: var(--font-primary);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--crescita-midnight);
    background: var(--crescita-sand);
    border-radius: var(--radius-cta);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                background-color var(--transition-base),
                box-shadow var(--transition-base);
  }

  /* Lit, not dimmed: this used to go Sand → Stone, which is darker than where
     it started. It sits on Midnight, so the lit state is white with a bloom. */
  .crescita-head__cta:hover,
  .crescita-head__cta:focus-visible {
    background: #fff;
    box-shadow: var(--cta-lit-on-dark);
  }

  .crescita-head__cta.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.96);
  }
}

@media (min-width: 1024px) {
  .crescita-head__cta { right: var(--space-lg); }
}

/* ── Footer ──────────────────────────────────────────────────── */
/* Prototype 02 (founder decision 2026-08-24: site-wide, exactly as
   designed — Privacy/Termini/cookie-preferences links only, no Servizi
   menu). The copyright line in .crescita-footer__bottom is not part of the
   prototype's own footer; kept as a standard, low-risk footer convention
   the founder wasn't asked to drop — flag if that's wrong. */

.site-footer {
  background-color: var(--crescita-midnight);
  color: var(--color-text-on-dark);
}

.site-footer a { color: var(--color-text-on-dark); }
.site-footer a:hover { color: var(--crescita-stone); }

/* Hairline at the top so the footer reads as its own band when it follows a
   Midnight section, rather than merging into one undifferentiated dark mass.
   Invisible where the preceding section is Sand or Stone, which is correct. */
.crescita-footer {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--text-small);
}

.crescita-footer__top {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .crescita-footer__top {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.crescita-footer__logo {
  display: block;
  width: 190px;
  height: auto;
  mix-blend-mode: lighten;
  margin: 0 0 var(--space-sm) -14px;
}

/* Company contact block. `address` is italic by default in UA stylesheets;
   Crescita sets it upright to match the surrounding type. */
.crescita-footer__contact {
  font-style: normal;
  line-height: 1.8;
  color: var(--color-text-on-dark-secondary);
}

.crescita-footer__contact a { color: var(--color-text-on-dark-secondary); }
.crescita-footer__contact a:hover { color: var(--color-text-on-dark); }

.crescita-footer__legal-links {
  display: grid;
  gap: 0.4rem;
}

/* Padded so each link/button clears the 24px minimum target size
   (WCAG 2.2 SC 2.5.8). The consent-reopen control lives here as a
   <button>, styled to match the surrounding links, not a link itself —
   it triggers the preferences dialog rather than navigating
   (Implementation Spec §30: consent must be withdrawable on every page). */
.crescita-footer__legal-links a,
.crescita-footer__legal-links .crescita-consent-reopen {
  display: inline-block;
  padding-block: var(--space-2xs);
  /* GeneratePress' UA button reset left padding-inline (measured live:
     20px) unset on this control, so "Preferenze Cookie" sat visibly
     indented from the plain <a> links stacked above it, which have no
     such padding. Zeroed explicitly; margin too, in case a theme update
     reintroduces a UA button default there as well. */
  padding-inline: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--color-text-on-dark-secondary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.crescita-footer__legal-links a:hover,
.crescita-footer__legal-links .crescita-consent-reopen:hover {
  color: var(--color-text-on-dark);
}

.crescita-footer__bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-md);
  margin-top: var(--space-lg);
}

.crescita-footer__bottom p {
  font-size: var(--text-small);
  color: var(--color-text-on-dark-secondary);
  margin: 0;
}

/* GeneratePress prints its own footer credit bar; the Crescita footer
   replaces it via the generate_credits filter. */
.site-info { display: none; }