/*
 * tertios-global.css
 * ─────────────────────────────────────────────────────────────
 * Global design tokens & utility classes for the Tertios site.
 * Loaded on EVERY page. Inner pages built with Gutenberg use
 * these variables and utility classes for on-brand styling.
 * ─────────────────────────────────────────────────────────────
 */

/* ===== DESIGN TOKENS ===== */
:root {
  --tl-navy:        #1a3a5c;
  --tl-navy-dark:   #122840;
  --tl-orange:      #f07820;
  --tl-orange-lt:   #ffa04a;
  --tl-orange-pale: rgba(240, 120, 32, 0.10);
  --tl-white:       #ffffff;
  --tl-off-white:   #f7f9fc;
  --tl-light-gray:  #eef2f7;
  --tl-text:        #1e2d3d;
  --tl-muted:       #5a7089;
  --tl-font-display: 'Sora', sans-serif;
  --tl-font-body:    'DM Sans', sans-serif;
  --tl-shadow:      0 4px 30px rgba(26, 58, 92, 0.10);
  --tl-shadow-lg:   0 12px 60px rgba(26, 58, 92, 0.18);
  --tl-radius:      12px;
  --tl-radius-lg:   20px;
}

/* ===== BASE OVERRIDES FOR GENERATEPRESS ===== */
body {
  font-family: var(--tl-font-body);
  color: var(--tl-text);
}

a { color: var(--tl-orange); }
a:hover { color: var(--tl-navy); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tl-font-display);
  color: var(--tl-navy);
  font-weight: 700;
}

/* ===== GENERATEPRESS NAVIGATION ===== */
.main-navigation .main-nav ul li a {
  font-family: var(--tl-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tl-navy);
  transition: color 0.2s;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--tl-orange);
}

/* Nav CTA button — add CSS class "tl-nav-cta" to a menu item
   via Appearance → Menus → Screen Options → CSS Classes */
.main-navigation .main-nav ul li.tl-nav-cta > a {
  background: var(--tl-orange);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 6px;
  transition: background 0.2s;
}
.main-navigation .main-nav ul li.tl-nav-cta > a:hover {
  background: var(--tl-navy);
}

/* ===== GUTENBERG BLOCK COLOUR SUPPORT ===== */
/* These map the Tertios palette slugs to actual colours
   for Gutenberg's has-{slug}-color / has-{slug}-background-color classes */
.has-tl-navy-color      { color: var(--tl-navy) !important; }
.has-tl-orange-color    { color: var(--tl-orange) !important; }
.has-tl-orange-lt-color { color: var(--tl-orange-lt) !important; }
.has-tl-text-color      { color: var(--tl-text) !important; }
.has-tl-muted-color     { color: var(--tl-muted) !important; }
.has-tl-white-color     { color: var(--tl-white) !important; }

.has-tl-navy-background-color      { background-color: var(--tl-navy) !important; }
.has-tl-orange-background-color    { background-color: var(--tl-orange) !important; }
.has-tl-orange-lt-background-color { background-color: var(--tl-orange-lt) !important; }
.has-tl-off-white-background-color { background-color: var(--tl-off-white) !important; }
.has-tl-white-background-color     { background-color: var(--tl-white) !important; }

/* ===== UTILITY CLASSES FOR GUTENBERG BLOCKS ===== */
/* Add these in any block's Advanced → Additional CSS Class(es) field */

/* Eyebrow / section label */
.tl-eyebrow {
  display: inline-block;
  font-family: var(--tl-font-display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tl-orange); margin-bottom: 12px;
}
.tl-eyebrow--light { color: var(--tl-orange-lt); }

/* Buttons */
.tl-btn-primary {
  display: inline-block;
  background: var(--tl-orange); color: var(--tl-white) !important;
  padding: 13px 30px; border-radius: 8px;
  font-family: var(--tl-font-display); font-weight: 700; font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(240,120,32,0.35);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.tl-btn-primary:hover {
  background: var(--tl-orange-lt); color: var(--tl-white) !important;
  transform: translateY(-2px); box-shadow: 0 8px 30px rgba(240,120,32,0.45);
}
.tl-btn-navy {
  display: inline-block;
  background: var(--tl-navy); color: var(--tl-white) !important;
  padding: 13px 30px; border-radius: 8px;
  font-family: var(--tl-font-display); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: background 0.25s, transform 0.25s;
}
.tl-btn-navy:hover { background: var(--tl-navy-dark); transform: translateY(-2px); color: var(--tl-white) !important; }

.tl-btn-outline {
  display: inline-block;
  border: 2px solid var(--tl-orange); color: var(--tl-orange) !important;
  padding: 11px 28px; border-radius: 8px;
  font-family: var(--tl-font-display); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: all 0.25s;
}
.tl-btn-outline:hover { background: var(--tl-orange); color: var(--tl-white) !important; }

/* Cards */
.tl-card {
  background: var(--tl-white); border-radius: var(--tl-radius);
  padding: 32px 28px; box-shadow: var(--tl-shadow);
  transition: transform 0.3s, box-shadow 0.3s;
}
.tl-card:hover { transform: translateY(-5px); box-shadow: var(--tl-shadow-lg); }
.tl-card--orange-top { border-top: 4px solid var(--tl-orange); }
.tl-card--bordered { border: 1.5px solid var(--tl-light-gray); box-shadow: none; }
.tl-card--dark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--tl-radius); padding: 32px 28px;
}

/* Feature checklist */
.tl-feature-list { list-style: none !important; margin: 0; padding: 0 !important; }
.tl-feature-list li {
  padding: 5px 0 5px 22px !important; position: relative;
  font-size: 0.92rem; color: var(--tl-muted);
}
.tl-feature-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--tl-orange); font-weight: 700;
}

/* Module badge */
.tl-module-badge {
  display: inline-block;
  background: var(--tl-orange-pale); color: var(--tl-orange);
  font-family: var(--tl-font-display); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 6px;
}

/* Orange accent top border on a Group block */
.tl-accent-bar { border-top: 4px solid var(--tl-orange); padding-top: 24px; }

/* Hover lift for any block */
.tl-hover-lift { transition: transform 0.3s, box-shadow 0.3s; }
.tl-hover-lift:hover { transform: translateY(-6px); box-shadow: var(--tl-shadow-lg); }

/* ===== GUTENBERG COLUMNS SPACING ===== */
.wp-block-columns { gap: 28px; }

/* ===== GUTENBERG BUTTON BLOCK ===== */
.wp-block-button__link {
  font-family: var(--tl-font-display) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.25s !important;
}

/* ===== GUTENBERG GROUP BLOCK BACKGROUNDS ===== */
.wp-block-group.tl-bg-navy      { background: var(--tl-navy); }
.wp-block-group.tl-bg-off-white { background: var(--tl-off-white); }
.wp-block-group.tl-bg-orange    { background: var(--tl-orange); }

/* ===== SMOOTH SCROLL ===== */
html { scroll-behavior: smooth; }