/**
 * Neue Agency Child — compiled stylesheet.
 *
 * Loaded AFTER all parent stylesheets (theme.css → responsive.css)
 * so every rule here wins the specificity battle without !important.
 *
 * Structure
 * ─────────────────────────────────────────────────────────────────────────────
 *  1.  Token overrides       — CSS custom properties that re-skin the theme.
 *  2.  Global base           — body, typography, link resets.
 *  3.  Header                — logo, nav, hamburger overrides.
 *  4.  Hero                  — front-page hero adjustments.
 *  5.  Portfolio grid        — card, filter, grid overrides.
 *  6.  Case studies          — row, single-page overrides.
 *  7.  WooCommerce           — shop, product, cart, checkout overrides.
 *  8.  Footer                — footer layout and editorial statement.
 *  9.  Utility helpers       — child-specific utility classes.
 * 10.  Print                 — print-specific overrides.
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * To compile from SCSS: npm run build (uses src/scss/child.scss as input)
 *
 * @package NeueAgencyChild
 * @since   1.0.0
 */


/* ============================================================================
   1. TOKEN OVERRIDES
   Override these CSS custom properties to re-skin the entire theme.
   The parent prints :root tokens in <style id="neue-agency-tokens">.
   Child tokens printed in <style id="neue-child-custom-css"> override them.
   ============================================================================ */

:root {
  /* Brand accent — amber default */
  --neue-brand:          #FFAA00;

  /* Text colours */
  --neue-heading-color:  #000000;
  --neue-body-color:     #111111;

  /* Surface colours */
  --neue-bg-color:       #FFFFFF;
  --neue-mist-color:     #F5F5F5;

  /* Typography */
  --neue-body-font:      'Inter', 'Hanken Grotesk', sans-serif;
  --neue-heading-font:   'Inter', 'Hanken Grotesk', sans-serif;
  --neue-base-font-size: 16px;
  --neue-letter-spacing: -0.04em;
}

[data-scheme="dark"] {
  --neue-bg-color:    #0A0A0A;
  --neue-fg-color:    #FAFAFA;
  --neue-mist-color:  #171717;
}


/* ============================================================================
   2. GLOBAL BASE
   ============================================================================ */

/* Smooth focus ring using brand colour */
*:focus-visible {
  outline:        2px solid var(--neue-brand);
  outline-offset: 2px;
}

/* Selection highlight */
::selection {
  background-color: var(--neue-brand);
  color:            #000;
}


/* ============================================================================
   3. HEADER
   ============================================================================ */

/*
 * Uncomment to make the header sticky / translucent on scroll.
 *
header {
  position: sticky;
  top:      0;
  z-index:  var(--z-header, 20);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.92);
}
*/


/* ============================================================================
   4. HERO
   ============================================================================ */

/*
 * Reduce hero heading size for a more conservative brand voice.
 *
.text-\[7rem\] {
  font-size: clamp(2rem, 6vw, 5.5rem);
  line-height: 0.9;
}
*/


/* ============================================================================
   5. PORTFOLIO GRID
   ============================================================================ */

/*
 * Tighten card padding on mobile.
 *
@media (max-width: 480px) {
  [data-portfolio-grid] > * {
    padding: 1rem;
  }
}
*/


/* ============================================================================
   6. CASE STUDIES
   ============================================================================ */

/*
 * Thinner row dividers in the case study archive.
 *
#case-studies section > a,
.neue-widget-cs-list > * {
  border-bottom-width: 1px;
}
*/


/* ============================================================================
   7. WOOCOMMERCE
   ============================================================================ */

/*
 * Change "Add to Cart" button to brand-coloured background.
 *
.neue-atc-btn {
  background:   var(--neue-brand);
  border-color: var(--neue-brand);
  color:        #000;
}
.neue-atc-btn:hover {
  background:   #000;
  border-color: #000;
  color:        #fff;
}
*/


/* ============================================================================
   8. FOOTER
   ============================================================================ */

/*
 * Child footer editorial statement (output by template-parts/custom/footer.php).
 */
.neue-child-footer-statement {
  font-size:      0.75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          #737373;
  margin-top:     0.5rem;
}


/* ============================================================================
   9. UTILITY HELPERS
   ============================================================================ */

/* Visually hidden but accessible */
.u-sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0,0,0,0);
  white-space: nowrap;
  border:      0;
}

/* Full-bleed breakout for images inside constrained containers */
.u-breakout {
  width:       100vw;
  position:    relative;
  left:        50%;
  transform:   translateX(-50%);
}


/* ============================================================================
   10. PRINT
   ============================================================================ */

@media print {
  .neue-child-footer-statement,
  .neue-child-contact-block {
    display: block !important;
    color: #000 !important;
  }
}


/* ============================================================================
   11. MEGA MENU FIXES
   ============================================================================ */

/* Ensure header sits above hero and all page content */
header,
.neue-site-header {
  position: relative;
  z-index:  100;
}

/* Mega menu panel: full-width, never overflows viewport */
.neue-mega-panel,
[data-mega-panel] {
  position:   absolute;
  left:       0;
  right:      0;
  width:      100%;
  max-width:  100vw;
  z-index:    99;
  box-sizing: border-box;
}

/* ============================================================================
   12. SEARCH BAR — hidden
   ============================================================================ */
[role="search"],
.search-form,
.searchform,
.wp-block-search,
.widget_search {
  display: none !important;
}


/* ============================================================================
   13. PAGELAYER ENTRANCE ANIMATIONS — disabled
   Kills the slide/fade entrance effects Pagelayer adds to page elements.
   Hover and UI transitions are unaffected.
   ============================================================================ */
[data-pagelayer-id][class*="pl-anim"],
[data-pagelayer-id] [class*="pl-anim"],
.pl-animate,
.pagelayer-anim {
  animation-duration:       0.001ms !important;
  animation-delay:          0s     !important;
  transition-delay:         0s     !important;
  opacity:                  1      !important;
  transform:                none   !important;
  translate:                none   !important;
}


/* ============================================================================
   14. DOUBLE BORDER SAFETY NET
   The header already has border-bottom. This rule ensures nothing directly
   after the header or at the top of <main> adds a second top border.
   ============================================================================ */
header + * { border-top: none !important; }
#main > *:first-child { border-top: none !important; }



/* ============================================================================
   16. GUTENBERG BLOCK CONTAINMENT — single portfolio content column
   Gutenberg blocks can carry .alignwide / .alignfull or un-reset max-widths
   that override their flex parent's w-2/3 constraint. Force everything inside
   .neue-prose to stay within the column width.
   ============================================================================ */
.neue-prose,
.neue-prose * {
  max-width: 100%;
  min-width: 0;
}
.neue-prose > * {
  width: 100%;
  box-sizing: border-box;
}
.neue-prose .alignwide,
.neue-prose .alignfull,
.neue-prose figure {
  width:     100%;
  max-width: 100%;
  margin-left:  0;
  margin-right: 0;
}