/*
 Theme Name:   Level Up Golf
 Theme URI:    https://levelupgolf.com
 Description:  Level Up Golf child theme
 Author:       Further Digital
 Template:     generatepress
 Version:      1.0.0
*/

/* =============================================================================
   01. Brand tokens
   ============================================================================= */

:root {
    /* Colours */
    --color-void:          #0F1014;
    --color-deep-forest:   #032E1C;
    --color-fairway:       #135226;
    --color-electric-turf: #1FCB60;
    --color-birdie-lime:   #B5EB79;
    --color-gold:          #D6AE5D;
    --color-white:         #FFFFFF;
    --color-green-white:   #F2F5F0;
    --color-green-tint:    #E8EDE5;
    --color-rough:         #D4D8D0;
    --color-graphite:      #2A2D2F;
    --color-caddy:         #6B7570;

    /* Typography — families */
    --font-display: 'Anton', sans-serif;
    --font-heading: 'Radio Canada Big', sans-serif;
    --font-body:    'Instrument Sans', sans-serif;

    /* Typography — scale */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.75rem;    /* 28px */
    --text-4xl:  2rem;       /* 32px */
    --text-5xl:  3rem;       /* 48px */
    --text-6xl:  4.5rem;     /* 72px */
    --text-7xl:  6.875rem;   /* 110px */

    /* Spacing */
    --space-1:  0.25rem;  /*   4px */
    --space-2:  0.5rem;   /*   8px */
    --space-3:  0.75rem;  /*  12px */
    --space-4:  1rem;     /*  16px */
    --space-6:  1.5rem;   /*  24px */
    --space-8:  2rem;     /*  32px */
    --space-12: 3rem;     /*  48px */
    --space-16: 4rem;     /*  64px */
    --space-24: 6rem;     /*  96px */
    --space-32: 8rem;     /* 128px */

    /* Layout */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-max: 1420px;

    --gutter:        40px;
    --gutter-tablet: 28px;
    --gutter-mobile: 20px;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;
}


/* =============================================================================
   02. Base reset
   ============================================================================= */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

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


/* =============================================================================
   03. Typography
   ============================================================================= */

h1, h2, h3,
h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1;
    margin: 0 0 var(--space-4);
}

h1, .h1 { font-size: var(--text-6xl); font-weight: 500; }
h2, .h2 { font-size: var(--text-5xl); font-weight: 500; }
h3, .h3 { font-size: var(--text-4xl); font-weight: 500; }
h4, .h4 { font-size: var(--text-3xl); font-weight: 600; }
h5, .h5 { font-size: var(--text-2xl); font-weight: 600; }
h6, .h6 { font-size: var(--text-xl);  font-weight: 600; }

.display {
    font-family: var(--font-display);
    font-size: var(--text-7xl);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

p {
    margin: 0 0 var(--space-4);
    /* max-width: 65ch; */
}

.large { font-size: var(--text-xl);   font-weight: 500; }
.small { font-size: 0.8125rem; }

a {
    color: var(--color-electric-turf);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover { color: var(--color-birdie-lime); }


/* =============================================================================
   04. Lists
   ============================================================================= */

.no-bull {
    list-style: none;
    padding: 0;
    margin: 0;
}

.horizontal li { display: inline-block; }

.no-bull.horizontal {
    display: flex;
    align-items: center;
    flex-direction: row;
}


/* =============================================================================
   05. Buttons
   ============================================================================= */

.button {
    display: inline-flex;
    position: relative;
    line-height: 1;
    padding: 0;
    margin-block-end: 1rem;
    background-color: transparent !important;
    transition: 0.3s ease-in-out;
}

.button span {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    padding: 1rem 2rem;
    border-radius: 9999px;
    background-color: var(--color-electric-turf);
    color: var(--color-deep-forest);
    transition: 0.3s ease-in-out;
}

.button--arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    inset-inline-end: 0;
    width: 3rem;
    height: 3rem;
    padding: initial !important;
    transition: 0.3s ease-in-out;
}

.button--arrow::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjI1NzQgMTMuMTY3TC02Ljg3NTY4ZS0wNSAxMy4xNjdMLTYuODU4ODJlLTA1IDEwLjE2NzVIMTguMjU3NEwxMC4yMTEzIDIuMTIxMzJMMTIuMzMyNiAtOS4wMTI0NmUtMDhMMjMuOTk5OCAxMS42NjczTDEyLjMzMjYgMjMuMzM0NUwxMC4yMTEzIDIxLjIxMzJMMTguMjU3NCAxMy4xNjdaIiBmaWxsPSIjMDMyRTFDIi8+Cjwvc3ZnPgo=");
            mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjI1NzQgMTMuMTY3TC02Ljg3NTY4ZS0wNSAxMy4xNjdMLTYuODU4ODJlLTA1IDEwLjE2NzVIMTguMjU3NEwxMC4yMTEzIDIuMTIxMzJMMTIuMzMyNiAtOS4wMTI0NmUtMDhMMjMuOTk5OCAxMS42NjczTDEyLjMzMjYgMjMuMzM0NUwxMC4yMTEzIDIxLjIxMzJMMTguMjU3NCAxMy4xNjdaIiBmaWxsPSIjMDMyRTFDIi8+Cjwvc3ZnPgo=");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: var(--color-deep-forest);
    transition: 0.3s ease-in-out;
}

/* Hover state — slides arrow out */
.button:hover {
    margin: 0 -3rem 1rem 0;
}

.button:hover span {
    padding: 1rem 5rem 1rem 2rem;
}

.button:hover .button--arrow {
    inset-inline-end: 3rem;
    transform: rotate(360deg);
}

/* Variants */
.button--primary span                  { background-color: var(--color-birdie-lime); color: var(--color-deep-forest); }
.button--primary .button--arrow::after { background-color: var(--color-deep-forest); }

.button--secondary span                  { background-color: var(--color-deep-forest); color: var(--color-birdie-lime); }
.button--secondary .button--arrow::after { background-color: var(--color-birdie-lime); }

.button--gold span                  { background-color: var(--color-gold); color: var(--color-void); }
.button--gold .button--arrow::after { background-color: var(--color-void); }

.button--ghost span {
    background-color: transparent;
    border: 1.5px solid var(--color-birdie-lime);
    color: var(--color-birdie-lime);
    transition: all 0.3s ease-in-out;
}

/* Ghost button doesn't use the arrow-slide animation */
.button--ghost:hover {
    margin: 0 0 1rem;
}

.button--ghost:hover span {
    padding: 1rem 2rem;
    background-color: var(--color-birdie-lime);
    color: var(--color-deep-forest);
}


/* =============================================================================
   06. Container
   ============================================================================= */

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

.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.container--lg { max-width: var(--container-lg); }

/* GeneratePress grid container reset */
.container.grid-container {
    width: auto;
    max-width: none !important;
    padding: 0 !important;
}

.site-content {
    display: flex;
    flex-direction: column;
}


/* =============================================================================
   07. Grid
   ============================================================================= */

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
}

/* Column span utilities */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

/* Push utilities */
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* Centred column blocks */
.col-10-centered { grid-column: 2 / span 10; }
.col-8-centered  { grid-column: 3 / span 8; }
.col-6-centered  { grid-column: 4 / span 6; }

/* Header column overrides */
.col-6.logo,
.col-6.flex {
    grid-column: span 6 !important;
}

/* Alignment modifiers */
.grid--align-center { align-items: center; }
.grid--align-start  { align-items: start; }
.grid--align-end    { align-items: end; }

/* Gap modifiers */
.grid--gap-sm { gap: var(--space-4); }
.grid--gap-lg { gap: var(--space-12); }


/* =============================================================================
   08. Flexbox utilities
   ============================================================================= */

.flex          { display: flex; }
.flex--center  { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--start   { align-items: flex-start; }
.flex--end     { align-items: flex-end; }
.flex--wrap    { flex-wrap: wrap; }
.flex--col     { flex-direction: column; }
.flex--gap-sm  { gap: var(--space-4); }
.flex--gap-md  { gap: var(--space-6); }
.flex--gap-lg  { gap: var(--space-8); }


/* =============================================================================
   09. Section spacing
   ============================================================================= */

.section    { padding-block: var(--space-24); }
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: var(--space-32); }


/* =============================================================================
   10. Utility classes
   ============================================================================= */

/* Text colour */
.text-center   { text-align: center; }
.text-void     { color: var(--color-void); }
.text-forest   { color: var(--color-deep-forest); }
.text-graphite { color: var(--color-graphite); }
.text-caddy    { color: var(--color-caddy); }
.text-turf     { color: var(--color-electric-turf); }
.text-lime     { color: var(--color-birdie-lime); }
.text-gold     { color: var(--color-gold); }
.text-offwhite { color: var(--color-green-white); }
.text-rough    { color: var(--color-rough); }
.text-white    { color: var(--color-white); }

/* Background colour */
.bg-void     { background-color: var(--color-void); }
.bg-forest   { background-color: var(--color-deep-forest); }
.bg-lime     { background-color: var(--color-birdie-lime); }
.bg-turf     { background-color: var(--color-electric-turf); }
.bg-offwhite { background-color: var(--color-green-white); }
.bg-rough    { background-color: var(--color-rough); }
.bg-white    { background-color: var(--color-white); }
.bg-gold     { background-color: var(--color-gold); }

/* Border radius */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =============================================================================
   11. Show / hide utilities
   ============================================================================= */

/* Default hidden state for show-* classes */
.show-tablet,
.show-mobile,
.show-mobile-sm,
.show-tablet-flex,
.show-mobile-flex,
.show-nav-flex {
    display: none !important;
}

/* Hide at breakpoints */
@media (max-width: 1024px) {
    .hide-tablet      { display: none !important; }
    .hide-tablet-flex { display: none !important; }
    .show-tablet      { display: block !important; }
    .show-tablet-flex { display: flex !important; }
}

@media (max-width: 768px) {
    .hide-mobile      { display: none !important; }
    .hide-mobile-flex { display: none !important; }
    .show-mobile      { display: block !important; }
    .show-mobile-flex { display: flex !important; }
}

@media (max-width: 480px) {
    .hide-mobile-sm { display: none !important; }
    .show-mobile-sm { display: block !important; }
}

/* Nav-specific breakpoint (1112px) */
@media (max-width: 1112px) {
    .hide-nav      { display: none !important; }
    .show-nav-flex { display: flex !important; }
}


/* =============================================================================
   12. Header
   ============================================================================= */

.main-header {
    position: absolute;
    z-index: 6;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 80px;
}

.main-header .button {
    padding: 1.5rem 4rem 0 0;
}

.header--logo {
    display: inline-block;
    margin: 1.5rem 0 0 3rem;
}

.header--logo img {
    max-height: 48px;
}

.separate-containers .site-main {
    margin: 0 !important;
}

@media (max-width: 1112px) {
    .main-header .col-6.flex {
        grid-column: span 6;
    }

    .header--logo {
        margin: 1rem 0 0 1rem;
    }
}


/* =============================================================================
   13. Sticky top nav
   ============================================================================= */

.top-nav-wrap {
    position: sticky;
    top: var(--space-6);
    z-index: 100;
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: -100px auto 0;
    pointer-events: all;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.top-nav-wrap.is-hidden {
    transform: translateY(-80px);
    pointer-events: none;
}

/* .is-visible kept for JS toggling clarity — matches default state */
.top-nav-wrap.is-visible {
    transform: translateY(0);
    pointer-events: all;
}

.top-nav {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    background-color: rgba(255 255 255 / 0.4);
    border-radius: var(--radius-full);
    backdrop-filter: blur(5px);
}

.top-nav a {
    display: block;
    padding: var(--space-3);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 500;
    backdrop-filter: invert(1);
    transition: color 0.2s ease;
}

.top-nav li:first-of-type a { padding-inline-start: var(--space-6); }
.top-nav li:last-of-type  a { padding-inline-end:   var(--space-6); }

.top-nav a:hover { color: var(--color-electric-turf); }


/* =============================================================================
   14. Hamburger
   ============================================================================= */

.hamburger {
    display: none; /* shown at ≤ 768px */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 8px;
    margin: 16px 16px 0 0;
    background-color: var(--color-deep-forest);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.hamburger:focus,
.hamburger:hover {
    background-color: var(--color-deep-forest) !important;
}

.hamburger__line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-birdie-lime);
    transform-origin: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.is-open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .hamburger { display: flex; }
}


/* =============================================================================
   15. Mobile nav overlay
   ============================================================================= */

.mobile-nav {
    display: none; /* switched to flex by JS */
    position: fixed;
    inset: 0;
    z-index: 4;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    background-color: var(--color-deep-forest);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-nav.is-open { opacity: 1; }

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mobile-nav ul li a {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 3.5rem);
    color: var(--color-white);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.mobile-nav ul li a:hover { color: var(--color-electric-turf); }

.mobile-nav .mobile-nav__cta { margin-block-start: var(--space-4); }

/* =============================================================================
   16. Post hero & archive
   ============================================================================= */

.post-hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 75vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.post-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(15 16 20 / 0.6);
}

.post-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-block-start: 2rem;
}

.post-hero__date {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-block-end: var(--space-4);
}

.post-hero__content h1 {
    color: var(--color-green-white);
    margin: 0 auto;
}

/* Archive variant */
.post-hero--archive {
    min-height: 300px;
    background-color: var(--color-green-white);
    z-index: 1;
}

.post-hero--archive .display {
    color: var(--color-deep-forest);
    margin-block-start: 12rem;
    margin-block-end: 0;
}

/* Archive pagination */
.archive-pagination {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-12);
}

/* =============================================================================
   17. Page hero
   ============================================================================= */

.page-hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(15 16 20 / 0.6);
}

.page-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-block-start: 2rem;
}

.page-hero__content h1 {
    color: var(--color-green-white);
    margin: 0 auto;
}


/* =============================================================================
   18. Post cards
   ============================================================================= */

.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-caddy);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.post-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

.post-card__title {
    font-weight: 500;
    line-height: 1.1;
    margin-block-end: var(--space-2);
}

.post-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--color-caddy);
    font-size: var(--text-base);
    line-height: 1.4;
    max-width: none;
}


/* =============================================================================
   19. Insights
   ============================================================================= */

.insights h2 { margin-block-end: 0; }

.insights .col-3 a {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-void);
}


/* =============================================================================
   20. Footer
   ============================================================================= */

footer .container {
    padding: var(--space-6) 0 var(--space-8);
    border-block-start: 1.5px solid var(--color-rough);
    color: var(--color-caddy);
    font-size: var(--text-sm);
    font-weight: 500;
}

footer .col-6.flex {
    flex-direction: row;
    justify-content: flex-end;
}

footer .social { margin-inline-start: var(--space-4); }

footer ul li {
    height: 20px;
    margin-inline-end: var(--space-4);
}

footer ul li:last-of-type { margin-inline-end: 0; }

footer ul li a {
    height: 20px;
    color: var(--color-caddy);
}

footer ul li a:hover,
footer ul li a svg { height: 20px; }

footer ul li a:hover,
footer ul li a:hover svg * {
    color: var(--color-void);
    fill: var(--color-void);
    height: 20px;
}


/* =============================================================================
   21. Gravity Forms buttons
   ============================================================================= */

/* Shared base */
.gform_next_button,
.gform_previous_button,
.gform_button[type="submit"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-block !important;
    position: relative !important;
    width: 100% !important;
    padding: 1rem !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    background-color: var(--color-electric-turf) !important;
    color: var(--color-deep-forest) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease-in-out !important;
}

/* Width overrides on multi-button rows */
.gform_previous_button       { width: 30% !important; background-color: var(--color-deep-forest) !important; color: var(--color-birdie-lime) !important; }
.gform_button[type="submit"] { width: 68% !important; }

/* Hover */
.gform_next_button:hover,
.gform_previous_button:hover,
.gform_button[type="submit"]:hover {
    background-color: var(--color-birdie-lime) !important;
    color: var(--color-deep-forest) !important;
}

/* Stack on narrow viewports */
@media (max-width: 1178px) {
    .gform_previous_button,
    .gform_button[type="submit"] {
        width: 100% !important;
    }
}


/* =============================================================================
   22. Article / blog content
   ============================================================================= */

.inside-article a { text-decoration: underline; }

/* NOTE: h1 below has a debug font-size (200px / red) — remove before go-live */
.inside-article h1, .inside-article .h1 { font-size: 200px; color: red; font-weight: 900; }
.inside-article h2, .inside-article .h2 { font-size: var(--text-4xl); font-weight: 500; margin: 1.5rem 0 0.5rem; }
.inside-article h3, .inside-article .h3 { font-size: var(--text-3xl); font-weight: 500; margin: 1rem 0 0.5rem; }
.inside-article h4, .inside-article .h4 { font-size: var(--text-2xl); font-weight: 600; margin: 1rem 0 0.5rem; }
.inside-article h5, .inside-article .h5 { font-size: var(--text-xl);  font-weight: 600; margin: 1rem 0 0.5rem; }
.inside-article h6, .inside-article .h6 { font-size: var(--text-lg);  font-weight: 600; margin: 1rem 0 0.5rem; }

.faq-q {
    margin: 0 0 var(--space-1) !important;
    font-weight: 500 !important;
}

/* WordPress block table */
.wp-block-table table {
    overflow: hidden;
    text-align: left;
    border: 1px solid var(--color-rough);
    border-radius: 6px;
    border-collapse: separate !important;
}

.wp-block-table thead {
    border: 0;
    color: var(--color-white);
    background-color: var(--color-deep-forest); /* was --deep-forest (missing prefix) */
}

.wp-block-table td,
.wp-block-table th {
    border: 0;
    padding: 0.25em;
}

th strong,
td strong { font-weight: 600 !important; }

tr:nth-child(even) {
    background-color: var(--color-green-white); /* was --green-white (missing prefix) */
    border: 0;
}
/* =============================================================================
   23. Legal
   ============================================================================= */

.legal {
    background-color: var(--color-green-white)!important;
}
.legal .col-8 {
    background-color: var(--color-white);
    padding: var(--space-4);
    margin: var(--space-6) 0;
    border-radius: var(--radius-lg);
}


/* =============================================================================
   24. Responsive overrides
   ============================================================================= */

/* — Tablet landscape (≤ 1024px) ——————————————————————————————————————————— */
@media (max-width: 1024px) {
    .container { padding-inline: var(--gutter-tablet); }

    .col-3, .col-4 { grid-column: span 6; }
    .col-5, .col-6 { grid-column: span 6; }
    .col-7, .col-8 { grid-column: span 12; }

    .col-8-centered,
    .col-10-centered { grid-column: 1 / span 12; }

    .post-hero--archive .display,
    .page-hero--archive .display { margin-block-start: 8rem; }

    .legal .col-8 {margin: var(--space-6) var(--space-2);}

}

/* — Tablet portrait (≤ 768px) ————————————————————————————————————————————— */
@media (max-width: 768px) {
    .container { padding-inline: var(--gutter-mobile); }

    .grid { gap: var(--gutter-mobile); }

    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }

    .display { font-size: var(--text-5xl); }

    [class*="col-"],
    .col-6-centered,
    .col-8-centered,
    .col-10-centered { grid-column: span 12; }

    .section    { padding-block: var(--space-16); }
    .section--lg { padding-block: var(--space-24); }

    .col-4 { grid-column: span 12; }

    .post-hero--archive .display,
    .page-hero--archive .display { margin-block-start: 6rem; }

    /* Footer */
    ul.copyright {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start;
        margin-inline-start: var(--space-6);
        gap: 1rem;
    }

    footer .col-6            { grid-column: span 6 !important; gap: 1rem; }
    footer .col-6.flex       { flex-direction: column; justify-content: flex-end; align-items: flex-end; margin-inline-end: var(--space-6); }
}

/* — Mobile (≤ 480px) ————————————————————————————————————————————————————— */
@media (max-width: 480px) {
    h1 { font-size: var(--text-5xl); font-weight: 500; }
    h2 { font-size: var(--text-4xl); font-weight: 500; }
    h3 { font-size: var(--text-3xl); font-weight: 500; }
    h4 { font-size: var(--text-2xl); font-weight: 600; }
    h5 { font-size: var(--text-xl);  font-weight: 600; }
    h6 { font-size: var(--text-lg);  font-weight: 600; }

    .display     { font-size: var(--text-5xl); }
    .large       { font-size: var(--text-lg); }
    .section--sm { padding-block: var(--space-8); }

    .button span { padding: 1rem 1.3rem; }

    .post-card__body { padding: var(--space-4); }

    /* Footer */
    footer .col-6 { grid-column: span 12 !important; gap: 0; }
    footer .col-6:first-of-type { order: 2; }
    footer .col-6.flex { flex-direction: column; justify-content: center; grid-column:span 12!important; align-items: center; margin-inline-end: 0; }

    ul.copyright {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center;
        margin-inline-start: 0;
        gap: 0;
    }

    .copyright li:first-of-type { order: 2; margin: 0.5rem 0 0; }
    ul.legal { order: 2; margin-block-start: 0.5rem; }
    footer .social {margin-inline-start: 0; margin-block-start: var(--space-4);}
}