/*
Theme Name:   Herron Net
Theme URI:    https://hrrn.net
Description:  Child theme for Twenty Twenty-Five — DoD Program & Logistics Management consulting
Author:       hrrn.net
Author URI:   https://hrrn.net
Template:     twentytwentyfive
Version:      3.1.6
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  herron-net
Tags:         full-site-editing, block-theme
*/

/*
 * ARCHITECTURE — v3.0
 * ════════════════════════════════════════════════════════════════
 *
 * WHAT WP CORE ALREADY DOES (do not duplicate or fight):
 *   - Column stacking: @media (max-width:781px) sets flex-basis:100%!important
 *     on all .wp-block-column children. This fires automatically unless
 *     the block has class "is-not-stacked-on-mobile".
 *   - Hamburger nav: shown below 600px via WP's own media query on
 *     .wp-block-navigation__responsive-container-open
 *   - Font scaling: theme.json fluid clamp() values handle all headings
 *   - Block gap / spacing: theme.json spacingScale values
 *
 * WHAT WE MUST NOT DO:
 *   - Set flex-basis, flex-grow, flex-direction, flex-wrap on columns
 *     at desktop level — these fight WP's own mobile stacking rules
 *   - Use !important outside of the nav overlay (where WP specificity
 *     genuinely requires it)
 *   - Set overflow:hidden on full-bleed containers (clips negative margins)
 *
 * WHAT WE ADD:
 *   1. Brand tokens (colors, shadows, easing)
 *   2. Typography: font family/weight/style additions only
 *   3. Header nav: sticky, shadow, CTA pill, hamburger overlay styling
 *   4. Decorative textures (hero grid, diagonal stripes)
 *   5. Hover effects (service cards, nav links, buttons)
 *   6. Animation (fadeUp, scroll-reveal)
 *   7. Dark mode: color-scheme aware overrides
 *   8. Utility blocks: table, code, separator styling
 *   9. One targeted fix: spacing tokens need fluid values so lg/xl
 *      padding doesn't eat mobile viewport width
 *
 * ════════════════════════════════════════════════════════════════
 */


/* ── 1. BRAND TOKENS ── */

:root {
  --clr-cloud:      #F5F6F7;
  --clr-silver:     #EAECEE;
  --clr-pewter:     #85929E;
  --clr-graphite:   #2C3E50;
  --clr-navy:       #1A5276;
  --clr-navy-dark:  #143D59;
  --clr-navy-light: #2471A3;
  --clr-white:      #FFFFFF;
  --rule:           rgba(133, 146, 158, 0.2);

  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s var(--ease);
  --t-base: 0.2s  var(--ease);
  --t-slow: 0.4s  var(--ease);

  --shadow-card:       0 4px 16px rgba(44,62,80,0.08);
  --shadow-card-hover: 0 8px 32px rgba(26,82,118,0.12);
  --shadow-nav:        0 2px 8px  rgba(44,62,80,0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-cloud:    #1a1f25;
    --clr-silver:   #232a33;
    --clr-graphite: #e0e6ed;
    --clr-pewter:   #8da0b0;
    --clr-white:    #f0f4f8;
    --rule:         rgba(133,146,158,0.15);
  }
}


/* ── 2. BASE ── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--clr-cloud);
  color: var(--clr-graphite);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Respect system motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
  .reveal-on-scroll { opacity: 1; transform: none; }
}


/* ── 3. TYPOGRAPHY ADDITIONS ── */

/* Italic headings — navy accent */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--clr-navy);
}

/* Eyebrow / mono label style */
h6,
.is-style-eyebrow {
  font-family:    var(--wp--preset--font-family--mono);
  font-size:      var(--wp--preset--font-size--eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--clr-pewter);
}

/* Body links */
.entry-content a,
.wp-block-post-content a {
  color: var(--clr-navy);
  text-underline-offset: 3px;
  transition: color var(--t-base);
}
.entry-content a:hover,
.wp-block-post-content a:hover { color: var(--clr-navy-light); }

/* Dark backgrounds — em contrast */
.wp-block-group[style*="#143D59"] h2 em,
.wp-block-group[style*="#1A5276"] h2 em {
  color: #7FB3D3;
}


/* ── 4. HEADER & NAV ── */

.wp-block-template-part[data-area="header"] {
  position: relative;
  z-index: 200;
  box-shadow: var(--shadow-nav);
}

/* Nav link hover */
.wp-block-navigation a { transition: color var(--t-base); }
.wp-block-navigation a:not(.nav-cta):hover {
  color: var(--clr-white) !important;
  opacity: 1 !important;
}

/* CTA pill */
.nav-cta > a,
.wp-block-navigation-item.nav-cta > a {
  background-color: var(--clr-navy) !important;
  color:            var(--clr-white) !important;
  padding:          0.45rem 1.2rem !important;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  font-size:        var(--wp--preset--font-size--eyebrow);
  font-weight:      500;
  transition:       background-color var(--t-base);
}
.nav-cta > a:hover,
.wp-block-navigation-item.nav-cta > a:hover {
  background-color: var(--clr-navy-light) !important;
}

/*
 * Hamburger nav overlay
 * WP shows the toggle button via its own @media (max-width:600px).
 * We only need to style the overlay panel and its contents.
 * We do NOT set display:none on the button — WP handles that.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--clr-white) !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--clr-graphite) !important;
  padding: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 1.75rem;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  font-size:      1.15rem !important;
  letter-spacing: 0.08em !important;
  color:          rgba(255,255,255,0.85) !important;
  text-transform: uppercase;
}

.wp-block-navigation__responsive-container.is-menu-open
  .nav-cta .wp-block-navigation-item__content {
  background-color: var(--clr-navy) !important;
  color:            var(--clr-white) !important;
  padding:          0.65rem 1.75rem !important;
}


/* ── 5. HERO TEXTURES ── */

.hero-grid-texture {
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero-stats-panel {
  background-image: repeating-linear-gradient(
    -55deg,
    transparent 0 20px,
    rgba(255,255,255,0.02) 20px 40px
  );
}

.stat-number {
  font-size:   clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1;
}


/* ── 6. SERVICE CARDS ── */

.wp-block-column.service-card {
  transition: box-shadow var(--t-slow);
  position:   relative;
  overflow:   hidden;
}
.wp-block-column.service-card:hover { box-shadow: var(--shadow-card-hover); }

.wp-block-column.service-card::after {
  content:          '';
  position:         absolute;
  bottom:0; left:0;
  width:100%; height:3px;
  background:       var(--clr-navy);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform var(--t-slow);
}
.wp-block-column.service-card:hover::after { transform: scaleX(1); }

.wp-block-column.service-card .wp-block-image { overflow: hidden; }
.wp-block-column.service-card .wp-block-image img {
  transition:  transform var(--t-slow);
  width:       100%;
  object-fit:  cover;
}
.wp-block-column.service-card:hover .wp-block-image img { transform: scale(1.04); }

a.service-card-link {
  display:         inline-block;
  font-size:       var(--wp--preset--font-size--eyebrow);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--clr-navy);
  border-bottom:   1px solid var(--clr-navy);
  padding-bottom:  1px;
  text-decoration: none;
  transition:      opacity var(--t-base);
}
a.service-card-link:hover { opacity: 0.6; }


/* ── 7. PULL QUOTE ── */

.wp-block-pullquote {
  border-top:    4px solid var(--clr-navy) !important;
  border-bottom: none !important;
  text-align:    left;
}
.wp-block-pullquote blockquote { margin: 0; }
.wp-block-pullquote p {
  font-family: var(--wp--preset--font-family--serif);
  font-style:  italic;
  font-weight: 300;
  color:       var(--clr-navy);
}
.wp-block-pullquote cite {
  font-family:    var(--wp--preset--font-family--mono);
  font-size:      var(--wp--preset--font-size--eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--clr-pewter);
  font-style:     normal;
}

.wp-block-quote {
  border-left:  4px solid var(--clr-navy) !important;
  padding-left: var(--wp--preset--spacing--md) !important;
}


/* ── 8. WHY WORK WITH ME ── */
/*
 * Desktop layout only. Zero margin/gap on the outer columns so the
 * image bleeds flush to the section edge.
 * We do NOT touch flex-basis — WP handles column widths.
 * WP stacks these columns at 781px automatically.
 */
.wp-block-columns.why-columns {
  margin-left:  0;
  margin-right: 0;
  gap:          0;
}

.wp-block-columns.why-columns > .wp-block-column:first-child {
  padding: 0;
}
.wp-block-columns.why-columns > .wp-block-column:first-child .wp-block-cover {
  height:     100%;
  min-height: 100%;
}

/* Credential list: tighten row gaps */
.wp-block-columns.why-columns .wp-block-column:last-child > .wp-block-group {
  --wp--style--block-gap: 0;
}
.wp-block-columns.why-columns .wp-block-column:last-child
  > .wp-block-group > .wp-block-group {
  margin-top:    0;
  margin-bottom: 0;
}

/* Number label */
.wp-block-columns.why-columns .wp-block-column:last-child
  > .wp-block-group > .wp-block-group > .wp-block-group > p {
  min-width:   2.5rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

/* Row hover */
.wp-block-columns.why-columns .wp-block-column:last-child
  > .wp-block-group > .wp-block-group > .wp-block-group:hover {
  background-color: rgba(26,82,118,0.03);
}


/* ── 9. CTA BAND ── */

.cta-band {
  background-image: repeating-linear-gradient(
    -55deg,
    transparent 0 24px,
    rgba(255,255,255,0.02) 24px 48px
  );
}

.wp-block-button.is-style-cta-reversed .wp-block-button__link {
  background-color: var(--clr-white)     !important;
  color:            var(--clr-navy-dark) !important;
  font-weight:      600;
  transition: background-color var(--t-base), transform var(--t-fast);
}
.wp-block-button.is-style-cta-reversed .wp-block-button__link:hover {
  background-color: var(--clr-cloud) !important;
  transform: translateY(-1px);
}


/* ── 10. FOOTER ── */

.wp-block-template-part[data-area="footer"] {
  position: relative;
  z-index:  10;
}

/* Site title */
.wp-block-template-part[data-area="footer"] .wp-block-site-title a {
  color:           var(--clr-white) !important;
  text-decoration: none;
}

/* Nav links (plain paragraph — no wp:navigation, no hamburger) */
.wp-block-template-part[data-area="footer"] .footer-nav a {
  transition: color var(--t-base), opacity var(--t-base);
}
.wp-block-template-part[data-area="footer"] .footer-nav a:hover {
  color:   rgba(255,255,255,0.7) !important;
  opacity: 1;
}

/* Copyright / privacy link */
.wp-block-template-part[data-area="footer"] p:not(.footer-nav) a {
  transition: color var(--t-base);
}
.wp-block-template-part[data-area="footer"] p:not(.footer-nav) a:hover {
  color: rgba(255,255,255,0.45) !important;
}

/*
 * Force footer column stacking on mobile.
 * WP generates a unique .wp-container-core-columns-is-layout-XXXX rule with
 * flex-wrap:nowrap for columns inside a constrained layout group. That
 * generated rule has higher specificity than WP's own generic 781px stacking
 * rule, so the columns never stack in template parts. We override it here.
 */
@media (max-width: 781px) {
  .wp-block-template-part[data-area="footer"] .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-template-part[data-area="footer"] .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}


/* ── 11. BUTTONS ── */

.wp-block-button__link,
.wp-element-button {
  border-radius: 0 !important;
  transition:
    background-color var(--t-base),
    color            var(--t-base),
    transform        var(--t-fast);
}

.wp-block-button:not([class*="is-style"]) .wp-block-button__link {
  background-color: var(--clr-navy);
  color:            var(--clr-white);
}
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover {
  background-color: var(--clr-navy-light);
  transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  border-width:     1px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  transform: translateY(-1px);
}


/* ── 12. PAGE PROSE (privacy policy, static pages) ── */
/*
 * Styles scoped to wp:post-content — applies to any page using page.html.
 * Brings headings, lists, separators, and spacing in line with the site brand.
 * The page.html template provides the graphite title banner and cloud background;
 * these rules handle the body copy inside the 720px constrained content area.
 */

/* Heading hierarchy */
.wp-block-post-content h2 {
  font-family:   var(--wp--preset--font-family--serif);
  font-size:     var(--wp--preset--font-size--h-2);
  font-weight:   300;
  line-height:   1.2;
  color:         var(--clr-graphite);
  margin-top:    var(--wp--preset--spacing--lg);
  margin-bottom: var(--wp--preset--spacing--sm);
  padding-bottom: var(--wp--preset--spacing--xs);
  border-bottom: 1px solid var(--rule);
}
.wp-block-post-content h3 {
  font-family:   var(--wp--preset--font-family--serif);
  font-size:     var(--wp--preset--font-size--h-3);
  font-weight:   400;
  line-height:   1.3;
  color:         var(--clr-graphite);
  margin-top:    var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--xs);
}
.wp-block-post-content h4 {
  font-family:    var(--wp--preset--font-family--mono);
  font-size:      var(--wp--preset--font-size--eyebrow);
  font-weight:    400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--clr-pewter);
  margin-top:     var(--wp--preset--spacing--md);
  margin-bottom:  var(--wp--preset--spacing--xs);
}

/* Body paragraphs */
.wp-block-post-content p {
  font-size:   var(--wp--preset--font-size--body);
  line-height: 1.85;
  color:       var(--clr-graphite);
}

/* Lists */
.wp-block-post-content ul,
.wp-block-post-content ol {
  font-size:    var(--wp--preset--font-size--body);
  line-height:  1.85;
  color:        var(--clr-graphite);
  padding-left: 1.5rem;
}
.wp-block-post-content ul { list-style-type: disc; }
.wp-block-post-content ol { list-style-type: decimal; }
.wp-block-post-content li { margin-bottom: 0.4rem; }
.wp-block-post-content li::marker { color: var(--clr-navy); }

/* Separator */
.wp-block-post-content .wp-block-separator {
  border-color:  var(--rule) !important;
  margin-top:    var(--wp--preset--spacing--lg);
  margin-bottom: var(--wp--preset--spacing--lg);
}


/* ── 13. UTILITY BLOCKS ── */

.wp-block-separator {
  border-color: var(--rule) !important;
  opacity: 1 !important;
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  max-width: none;
}

.wp-block-table td,
.wp-block-table th {
  border-color: var(--rule);
  font-size:    var(--wp--preset--font-size--small);
  padding:      0.75rem 1rem;
}
.wp-block-table thead {
  background-color: var(--clr-graphite);
  color:            var(--clr-white);
}
.wp-block-table thead th {
  border-color:   rgba(255,255,255,0.1);
  font-family:    var(--wp--preset--font-family--mono);
  font-size:      var(--wp--preset--font-size--eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight:    400;
}
.wp-block-table tbody tr:nth-child(even) {
  background-color: var(--clr-silver);
}

.wp-block-code,
.wp-block-preformatted {
  font-family:   var(--wp--preset--font-family--mono);
  font-size:     var(--wp--preset--font-size--small);
  background:    var(--clr-graphite);
  color:         var(--clr-cloud);
  padding:       1.5rem;
  border:        none;
  border-radius: 0;
}

.wp-block-post-navigation-link a {
  font-family:     var(--wp--preset--font-family--mono);
  font-size:       var(--wp--preset--font-size--eyebrow);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  color:           var(--clr-navy) !important;
  text-decoration: none;
  transition:      opacity var(--t-base);
}
.wp-block-post-navigation-link a:hover { opacity: 0.6; }


/* ── 14. ANIMATIONS ── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-eyebrow { animation: fadeUp 0.5s var(--ease) both 0.1s; }
.hero-heading { animation: fadeUp 0.6s var(--ease) both 0.2s; }
.hero-desc    { animation: fadeUp 0.6s var(--ease) both 0.35s; }
.hero-actions { animation: fadeUp 0.6s var(--ease) both 0.5s; }
.hero-stats   { animation: fadeIn 0.7s var(--ease) both 0.3s; }

.reveal-on-scroll {
  opacity:   0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal-on-scroll.is-visible {
  opacity:   1;
  transform: translateY(0);
}


/* ── 14. FLUID SPACING — MOBILE PADDING FIX ──
 *
 * Root cause of "text squeezed into narrow column":
 * Sections use padding-left/right:var(--wp--preset--spacing--lg) = 3.5rem fixed.
 * On a 390px viewport: 2 × 56px = 112px eaten by padding → only 278px for content.
 *
 * Solution: override the spacing tokens themselves to fluid clamp() values.
 * These replace the fixed rem values in theme.json for responsive contexts.
 * We do this at :root so the var() calls in inline styles resolve to fluid values.
 *
 * lg: 3.5rem desktop → clamp(1rem, 4vw, 3.5rem)  [~15px at 390px]
 * xl: 5rem desktop   → clamp(1.5rem, 5vw, 5rem)   [~20px at 390px]
 */
:root {
  --wp--preset--spacing--lg: clamp(1rem,   4vw, 3.5rem);
  --wp--preset--spacing--xl: clamp(1.5rem, 5vw, 5rem);
}

/*
 * The above token override makes ALL lg/xl padding fluid automatically —
 * no media query needed, no attribute selectors, no !important.
 * Sections breathe on desktop and fit on mobile without any extra rules.
 */


/* ── 15. DARK MODE BLOCK OVERRIDES ── */

@media (prefers-color-scheme: dark) {
  body { background-color: var(--clr-cloud); }

  /* Cards on dark background */
  .wp-block-column.service-card {
    background-color: var(--clr-silver);
  }

  /* Pullquote */
  .wp-block-pullquote p { color: #7FB3D3; }

  /* Tables */
  .wp-block-table td,
  .wp-block-table th { border-color: var(--rule); }
  .wp-block-table tbody tr:nth-child(even) {
    background-color: var(--clr-silver);
  }

  /* Buttons — navy still reads well in dark mode */
  .wp-block-button:not([class*="is-style"]) .wp-block-button__link {
    background-color: var(--clr-navy-light);
  }
}


/* ── 16. MOBILE LAYOUT FIXES ──
 *
 * Footer and CTA band: previously used flex groups with WP-generated
 * nowrap container rules that required !important overrides to stack.
 * Both have been rewritten as wp:columns in the block markup — WP's
 * own column stacking at 781px handles mobile layout automatically.
 * No CSS intervention needed for those elements.
 *
 * Service image order: sections where image is in the right column
 * need it to appear first on mobile. CSS order property is the correct
 * tool here — it reorders within the stacked flow without affecting
 * desktop layout, and requires no !important.
 */

/* Service cards: image-right sections → image first on mobile */
@media (max-width: 781px) {
  .wp-block-columns.service-text-image > .wp-block-column:last-child {
    order: -1;
  }
}