/* ═══════════════════════════════════════════════════════════
   troqc-base.css
   Shared brand tokens and common component styles.
   
   Load this BEFORE any page-specific CSS.
   Enqueue in functions.php on all pages, or @import from
   each page stylesheet.
   
   Location: wp-content/themes/troqc/css/troqc-base.css
   ═══════════════════════════════════════════════════════════ */


/* ─── Brand Tokens ─── */

:root {
    /* Primary palette */
    --brand-teal:        #3F6D7D;
    --brand-teal-dark:   #34596A;
    --brand-teal-light:  #e4eef1;

    --brand-wine:        #481037;
    --brand-wine-dark:   #3a0c2c;
    --brand-wine-light:  #f0e4eb;

    /* Surfaces */
    --surface-page:      #f4efe6;   /* parchment background  */
    --surface-inner:     #f6f1ea;   /* slightly lighter inner */
    --surface-card:      #fff;      /* card/panel white       */
    --surface-border:    #e8e3db;   /* card borders           */

    /* Text scale (all black-based for consistency) */
    --text-heading:      #333;                    /* rgb(51,51,51)  */
    --text-body:         rgba(0, 0, 0, 0.68);     /* body copy      */
    --text-secondary:    rgba(0, 0, 0, 0.55);     /* subtitles/meta */
    --text-muted:        rgba(0, 0, 0, 0.40);     /* captions/hints */
    --text-faint:        rgba(0, 0, 0, 0.25);     /* decorative     */

    /* Fonts */
    --font-display:      'Playfair Display', serif;
    --font-handwritten:  'Caveat', cursive;
    --font-body:         Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Common radii and shadows */
    --radius-card:       10px;
    --radius-pill:       20px;
    --shadow-card:       0 2px 15px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 4px 20px rgba(90, 80, 70, 0.12);
}


/* ─── Shared Page Orientation Links ─── 
   Used on all three pages to crosslink The Story ↔ What's New.
   Styled as a subtle, centered line of text.                    */

.site-orientation,
.timeline-orientation,
.dispatches-orientation {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 auto;
    max-width: 500px;
}

/* Homepage version uses handwritten font to match surrounding copy */
.site-orientation {
    font-family: var(--font-handwritten);
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.site-orientation a,
.timeline-orientation a,
.dispatches-orientation a {
    color: var(--brand-teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.site-orientation a:hover,
.timeline-orientation a:hover,
.dispatches-orientation a:hover {
    border-bottom-color: var(--brand-teal);
}


/* ─── Shared Link / Button Accent Patterns ─── */

.brand-link {
    color: var(--brand-teal);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--brand-teal);
    transition: color 0.2s, border-color 0.2s;
}

.brand-link:hover {
    color: var(--brand-wine);
    border-bottom-color: var(--brand-wine);
}


/* ─── Shared Card Hover Pattern ─── */

.card-hover-teal {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-hover-teal:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--brand-teal);
    transform: translateY(-2px);
}

.card-hover-wine {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-hover-wine:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--brand-wine);
    transform: translateY(-2px);
}