/*
Theme Name: Twenty Twenty-One Child TBW
Template:   twentytwentyone
Version:    1.1.1
Description: Child theme for Triangle Bikeworks — transformation through challenge.
Author:     Triangle Bikeworks
Text Domain: twentytwentyone-child-tbw
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {

    /* --- Brand colours (Triangle Bikeworks Style Guide) ------------------
       The four organisational colours, used at their exact published values.
       Contrast ratios noted are against white unless stated.                */
    --green:     #4E9B44;   /* Brand green    — 3.44:1 on white → large text only  */
    --orange:    #F47A20;   /* Brand orange   — 2.74:1 on white → NEVER text on white */
    --blue:      #3B56A6;   /* Brand blue     — 6.85:1 on white → AA, safe for links  */
    --burgundy:  #9F1D20;   /* Brand burgundy — 7.86:1 on white → AAA                 */

    /* --- Derived shades ---------------------------------------------------
       Not in the style guide. Derived from brand green/orange/blue so large
       dark grounds and pale section fills stay inside the brand hues.       */
    --green-dark: #1E3B1A;  /* Hero overlays, impact band, footer CTA ground.
                               White on this = 12.38:1 (AAA).
                               Brand orange on this = 4.51:1 (AA).            */
    --sand:       #FEF7F2;  /* Warm light ground — orange tinted to 94% L      */
    --sky:        #E6EAF6;  /* Cool light ground — blue tinted to 88% L        */
    --ink:        #1A1A17;  /* Body text — 15.9:1 on white                     */
    --line:       #E7E4DE;  /* Hairlines, card borders                         */

    /* --- Legacy aliases ---------------------------------------------------
       The pre-brand token names, kept so no template breaks. Prefer the
       brand names above in new work.                                        */
    --forest:  var(--green-dark);
    --trail:   var(--burgundy);
    --river:   var(--blue);
    --sunrise: var(--orange);

    /* --- Typography scale --- */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  3rem;
    --text-hero: clamp(3rem, 6vw, 6rem);

    /* --- Font families ---------------------------------------------------
       Fraunces for display: a soft serif whose SOFT and WONK axes round the
       terminals and tilt the odd letter, so it carries historical weight
       without reading institutional. Archivo for body: a grotesque drawn for
       legibility at text sizes.                                             */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Display variation settings. Applied to every heading — without these
       Fraunces renders at its default optical size and stays formal.
       SOFT 30 softens the terminals; WONK 1 enables the tilted forms.       */
    --display-vf: 'SOFT' 30, 'WONK' 1, 'opsz' 120;

    /* --- Spacing scale (8 px base unit) --- */
    --space-xs: 0.5rem;   /*  8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 2rem;     /* 32px */
    --space-lg: 4rem;     /* 64px */
    --space-xl: 8rem;     /* 128px */
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

/* ==========================================================================
   BASE ELEMENTS
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size:   var(--text-base);
    line-height: 1.6;
    color:       var(--ink);
    background:  #ffffff;
    margin:      0;
}

h1,
h2,
h3 {
    font-family:             var(--font-display);
    font-variation-settings: var(--display-vf);
    font-weight:             700;
    line-height:             1.2;
    letter-spacing:          -0.015em;
    color:                   var(--ink);
    margin-top:              0;
}

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

h4,
h5,
h6 {
    font-family: var(--font-body);
    line-height: 1.3;
    margin-top:  0;
}

a {
    color:           var(--river);
    text-decoration: underline;
}

a:hover,
a:focus {
    color: var(--trail);
}

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

p {
    margin-top:    0;
    margin-bottom: var(--space-sm);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Section wrapper — vertical breathing room */
.tbw-section {
    padding: var(--space-lg) 0;
}

/* Content container — centered, max-width, horizontal padding */
.tbw-container {
    max-width:    1200px;
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--space-sm);
    padding-right: var(--space-sm);
}

/* Section heading */
.tbw-section__heading {
    font-family:   var(--font-display);
    font-variation-settings: var(--display-vf);
    font-size:     var(--text-2xl);
    color:         var(--ink);
    margin-bottom: var(--space-md);
}

/* Base button */
.tbw-btn {
    display:         inline-block;
    padding:         0.75rem 1.75rem;
    border-radius:   4px;
    font-family:     var(--font-body);
    font-size:       var(--text-base);
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    transition:      opacity 0.15s ease, transform 0.15s ease;
    line-height:     1;
}

.tbw-btn:hover,
.tbw-btn:focus {
    opacity:   0.88;
    transform: translateY(-1px);
    color:     inherit;
}

/* Primary CTA — brand burgundy. White on burgundy = 7.86:1 (AAA). */
.tbw-btn--primary {
    background: var(--burgundy);
    color:      #ffffff;
}

/* Secondary CTA — brand blue. White on blue = 6.85:1 (AA). */
.tbw-btn--secondary {
    background: var(--blue);
    color:      #ffffff;
}

/* High-energy CTA — brand orange.
   Orange carries "fun, youth, creativity" in the style guide, but white on
   orange is only 2.74:1 and fails WCAG AA. This variant therefore uses ink
   on orange (6.35:1, AA) rather than white. Do not override the colour. */
.tbw-btn--energy {
    background: var(--orange);
    color:      var(--ink);
}

/* Ghost CTA — for use on the dark green ground only. */
.tbw-btn--ghost {
    background:   transparent;
    color:        #ffffff;
    border:       2px solid rgba(255, 255, 255, 0.75);
}

.tbw-btn--ghost:hover,
.tbw-btn--ghost:focus {
    background: #ffffff;
    color:      var(--green-dark);
}

/* Category / post type badge on cards */
.tbw-badge {
    display:        inline-block;
    padding:        0.2rem 0.6rem;
    border-radius:  3px;
    background:     var(--forest);
    color:          #ffffff;
    font-size:      var(--text-xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom:  0.5rem;
}