/*
Theme Name: OG Signal Theme
Theme URI: https://ogsolutions.nl
Description: A premium Divi child theme built for thought leadership websites. GEO-optimized, authority-first design with reskinnable brand system. Part of the OG Solutions Visibility OS.
Author: Gina Dunn / OG Solutions
Author URI: https://ogsolutions.nl
Template: Divi
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: og-signal
*/

/* ==========================================================================
   OG SIGNAL THEME — Design Token System
   OG Solutions brand defaults. Reskinnable per client via admin panel.
   ========================================================================== */

/* ---- The Seasons — OG brand serif (served from ogsolutions.nl) ---- */
@font-face {
    font-family: 'The Seasons';
    src: url('https://ogsolutions.nl/wp-content/uploads/2025/01/TheSeasons-lt.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Brand Colors (OG Solutions defaults — reskinnable per client) ---- */
    --tl-primary:        #121516;     /* Deep dark — authority, depth */
    --tl-primary-rgb:    18, 21, 22;
    --tl-secondary:      #1A1A1A;     /* Near-black — depth */
    --tl-accent:         #7D0100;     /* OG Crimson — headings, CTAs */
    --tl-accent-hover:   #5A0000;     /* Crimson hover — deeper */
    --tl-warm:           #DBBE67;     /* OG Gold — prestige, dividers */
    --tl-light:          #FAF8F4;     /* Warm cream — breathing room */
    --tl-light-alt:      #F0EDE7;     /* Surface — card backgrounds */
    --tl-dark:           #1A1A1A;     /* Near-black — headlines */
    --tl-text:           #2D2A26;     /* Body text — warm, not harsh */
    --tl-text-muted:     #7A7570;     /* Captions, meta */
    --tl-border:         #E0DDD6;     /* Subtle dividers */
    --tl-white:          #ffffff;
    --tl-bg:             #FAF8F4;     /* Page background — warm cream */
    --tl-surface:        #F0EDE7;     /* Card/panel backgrounds */
    --tl-text-ghost:     #BCB6AE;     /* Fine print, metadata */
    --tl-success:        #10b981;     /* Positive signals */
    --tl-overlay:        rgba(18, 21, 22, 0.85);

    /* ---- Typography ---- */
    --tl-font-heading:   'The Seasons', Georgia, 'Times New Roman', serif;
    --tl-font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tl-font-mono:      'JetBrains Mono', 'Fira Code', monospace;

    /* Type Scale (Major Third — 1.25) */
    --tl-text-xs:        0.75rem;     /* 12px */
    --tl-text-sm:        0.875rem;    /* 14px */
    --tl-text-base:      1rem;        /* 16px */
    --tl-text-lg:        1.125rem;    /* 18px */
    --tl-text-xl:        1.25rem;     /* 20px */
    --tl-text-2xl:       1.563rem;    /* 25px */
    --tl-text-3xl:       1.953rem;    /* 31px */
    --tl-text-4xl:       2.441rem;    /* 39px */
    --tl-text-5xl:       3.052rem;    /* 49px */
    --tl-text-6xl:       3.815rem;    /* 61px */
    --tl-text-hero:      clamp(2.5rem, 5vw, 4.5rem);

    /* Line Heights */
    --tl-leading-tight:  1.15;
    --tl-leading-snug:   1.3;
    --tl-leading-normal: 1.6;
    --tl-leading-loose:  1.8;

    /* Letter Spacing */
    --tl-tracking-tight:  -0.02em;
    --tl-tracking-normal:  0;
    --tl-tracking-wide:    0.05em;
    --tl-tracking-wider:   0.1em;

    /* Font Weights */
    --tl-weight-normal:  400;
    --tl-weight-medium:  500;
    --tl-weight-semi:    600;
    --tl-weight-bold:    700;
    --tl-weight-black:   900;

    /* ---- Spacing ---- */
    --tl-space-xs:       0.25rem;
    --tl-space-sm:       0.5rem;
    --tl-space-md:       1rem;
    --tl-space-lg:       1.5rem;
    --tl-space-xl:       2rem;
    --tl-space-2xl:      3rem;
    --tl-space-3xl:      4rem;
    --tl-space-4xl:      6rem;
    --tl-space-5xl:      8rem;
    --tl-space-section:  clamp(4rem, 8vw, 8rem);

    /* ---- Layout ---- */
    --tl-max-width:      1200px;
    --tl-max-width-narrow: 800px;
    --tl-max-width-wide: 1400px;

    /* ---- Borders & Radius ---- */
    --tl-radius-sm:      0;           /* OG brand: squared edges */
    --tl-radius-md:      0;
    --tl-radius-lg:      0;
    --tl-radius-xl:      0;
    --tl-radius-full:    0;           /* No rounded buttons — OG brand */
    --tl-radius-round:   9999px;      /* Available for client overrides */

    /* ---- Shadows ---- */
    --tl-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
    --tl-shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --tl-shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --tl-shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --tl-shadow-glow:    0 0 30px rgba(var(--tl-primary-rgb), 0.15);

    /* ---- Transitions ---- */
    --tl-ease:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --tl-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --tl-duration-fast:  150ms;
    --tl-duration:       300ms;
    --tl-duration-slow:  500ms;
}


/* ==========================================================================
   BASE OVERRIDES — Strip Divi defaults, establish authority typography
   ========================================================================== */

body,
body.et-tb,
body.et-tb-has-header {
    font-family: var(--tl-font-body);
    font-size: var(--tl-text-base);
    line-height: var(--tl-leading-normal);
    color: var(--tl-text);
    background-color: var(--tl-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_slide_description .et_pb_slide_title,
.et_pb_fullwidth_header .header-content h1 {
    font-family: var(--tl-font-heading);
    font-weight: var(--tl-weight-normal);   /* The Seasons is always weight 400 */
    line-height: var(--tl-leading-snug);
    letter-spacing: 0.03em;
    color: var(--tl-dark);
}

h1, .et_pb_slide_description .et_pb_slide_title {
    font-size: var(--tl-text-5xl);
}
h2 { font-size: var(--tl-text-4xl); }
h3 { font-size: var(--tl-text-3xl); }
h4 { font-size: var(--tl-text-2xl); }
h5 { font-size: var(--tl-text-xl); }
h6 { font-size: var(--tl-text-lg); }

p, li, td, th, blockquote, .et_pb_text {
    font-size: var(--tl-text-lg);
    line-height: var(--tl-leading-normal);
    color: var(--tl-text);
}

a {
    color: var(--tl-accent);
    text-decoration: none;
    transition: color var(--tl-duration) var(--tl-ease);
}

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

/* Selection */
::selection {
    background: var(--tl-accent);
    color: var(--tl-white);
}


/* ==========================================================================
   HEADER — OG Brand: warm cream, clean nav, authority presence
   ========================================================================== */

/* ---- Hide default Divi header when Theme Builder header is active ---- */
.et-l--header ~ #page-container #main-header,
body.et-tb-has-header #main-header {
    display: none !important;
}

/* ---- Main Header Container (fallback when no Theme Builder header) ---- */
#main-header,
#main-header .container,
.et-fixed-header #main-header {
    background: var(--tl-bg) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--tl-border);
    transition: all 0.3s ease;
}

#main-header.et-fixed-header {
    background: rgba(250, 248, 244, 0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    border-bottom-color: transparent;
}

/* ---- Logo ---- */
#logo {
    max-height: 60px !important;
    width: auto !important;
    transition: all 0.3s ease;
}

.et-fixed-header #logo {
    max-height: 48px !important;
}

/* Logo area spacing */
.logo_container {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* Center logo when using centered header layout */
.centered-inline-logo-wrap {
    padding: 20px 0 10px !important;
}

/* ---- Navigation Links ---- */
#top-menu li a,
.et_pb_menu .et-menu > li > a {
    font-family: var(--tl-font-body) !important;
    font-weight: var(--tl-weight-normal) !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--tl-dark) !important;
    padding-bottom: 8px !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
}

#top-menu li a:hover,
#top-menu li.current-menu-item a,
.et_pb_menu .et-menu > li > a:hover {
    color: var(--tl-accent) !important;
    opacity: 0.8;
}

/* Active page indicator — subtle gold underline */
#top-menu li.current-menu-item a::after,
.et_pb_menu .et-menu > li.current-menu-item > a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--tl-warm);
    margin-top: 6px;
    border-radius: 0;
}

/* ---- Dropdown menus ---- */
.nav li ul.sub-menu,
.et_pb_menu .et-menu li ul.sub-menu {
    background: var(--tl-white) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 !important;
}

.nav li li a,
.et_pb_menu .et-menu li li a {
    font-size: 13px !important;
    font-weight: var(--tl-weight-normal) !important;
    letter-spacing: 0.08em !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    color: var(--tl-text) !important;
}

.nav li li a:hover,
.et_pb_menu .et-menu li li a:hover {
    background: var(--tl-surface) !important;
    color: var(--tl-accent) !important;
}

/* ---- CTA button in nav ---- */
#top-menu li.tl-nav-cta a {
    background: var(--tl-dark) !important;
    color: var(--tl-light) !important;
    padding: 10px 24px !important;
    border-radius: 0 !important;
    font-weight: var(--tl-weight-normal) !important;
    letter-spacing: 0.15em !important;
    transition: all 0.2s ease !important;
    margin-left: 8px;
}

#top-menu li.tl-nav-cta a:hover {
    background: var(--tl-secondary) !important;
    transform: translateY(-1px);
    box-shadow: var(--tl-shadow-md);
}

#top-menu li.tl-nav-cta a::after {
    display: none !important;  /* No underline on CTA button */
}

/* ---- Mobile menu ---- */
.et_mobile_menu {
    background: var(--tl-bg) !important;
    border-top: 2px solid var(--tl-warm) !important;
    padding: 16px 0 !important;
}

.et_mobile_menu li a {
    font-family: var(--tl-font-body) !important;
    font-weight: var(--tl-weight-normal) !important;
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--tl-dark) !important;
    padding: 12px 5% !important;
    border-bottom: 1px solid var(--tl-border) !important;
}

.et_mobile_menu li a:hover {
    color: var(--tl-accent) !important;
    background: var(--tl-surface) !important;
}

/* Mobile menu toggle (hamburger) */
.mobile_menu_bar::before {
    color: var(--tl-dark) !important;
}

/* ---- Social icons in header (if used) ---- */
.et_pb_social_media_follow li a {
    color: var(--tl-text-muted) !important;
    transition: color 0.2s ease;
}

.et_pb_social_media_follow li a:hover {
    color: var(--tl-accent) !important;
}

/* ---- Hide Divi's default header search icon styling ---- */
#et_search_icon:before {
    color: var(--tl-text-muted) !important;
}

/* ---- Page container — prevent horizontal overflow ---- */
#page-container {
    overflow-x: hidden;
}


/* ==========================================================================
   BUTTONS — OG Brand: confident, direct, squared edges
   ========================================================================== */

.et_pb_button,
.et_pb_more_button {
    font-family: var(--tl-font-body) !important;
    font-weight: var(--tl-weight-normal) !important;
    font-size: 16px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    border-radius: 0 !important;                    /* OG brand: squared edges */
    border: 2px solid var(--tl-dark) !important;
    background: var(--tl-dark) !important;           /* Black primary CTA */
    color: var(--tl-light) !important;
    transition: all 0.2s ease !important;
    position: relative;
    overflow: hidden;
}

.et_pb_button:hover {
    background: var(--tl-secondary) !important;
    border-color: var(--tl-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--tl-shadow-lg) !important;
}

/* Crimson button (secondary CTA) */
.et_pb_button.tl-btn-primary,
.et_pb_button.tl-btn-crimson,
.et_pb_bg_layout_dark .et_pb_button {
    background: var(--tl-accent) !important;
    color: var(--tl-light) !important;
    border: 2px solid var(--tl-accent) !important;
}

.et_pb_button.tl-btn-primary:hover,
.et_pb_button.tl-btn-crimson:hover {
    background: var(--tl-accent-hover) !important;
    border-color: var(--tl-accent-hover) !important;
}

/* Ghost button */
.et_pb_button.tl-btn-ghost {
    background: transparent !important;
    color: var(--tl-dark) !important;
    border: 2px solid var(--tl-dark) !important;
}

.et_pb_button.tl-btn-ghost:hover {
    background: var(--tl-dark) !important;
    color: var(--tl-light) !important;
}

/* Gold outline button (dark sections) */
.et_pb_button.tl-btn-gold,
.tl-section-dark .et_pb_button.tl-btn-ghost {
    background: transparent !important;
    color: var(--tl-warm) !important;
    border: 1px solid var(--tl-warm) !important;
}

.et_pb_button.tl-btn-gold:hover,
.tl-section-dark .et_pb_button.tl-btn-ghost:hover {
    background: var(--tl-warm) !important;
    color: var(--tl-dark) !important;
}


/* ==========================================================================
   SECTIONS — Breathing room, alternating backgrounds
   ========================================================================== */

.et_pb_section {
    padding: var(--tl-space-section) 0 !important;
}

/* Theme Builder header/footer — respect their own padding, not the section default */
.et_pb_section.tl-global-header,
.et_pb_section.tl-hero-section,
.et_pb_section.tl-about-split,
.et_pb_section.tl-footer-section {
    padding: 0 !important;
}

/* Header in Theme Builder context */
.et-l--header .et_pb_section {
    padding: 0 !important;
}

/* Footer in Theme Builder context */
.et-l--footer .et_pb_section {
    padding: 0 !important;
}

/* Re-apply specific footer section padding via its own custom_padding */
.et-l--footer .et_pb_section[style*="padding"] {
    /* Let inline Divi padding win */
}

.et_pb_section.tl-section-dark {
    background: var(--tl-primary) !important;
    color: var(--tl-white) !important;
}

.et_pb_section.tl-section-dark h1,
.et_pb_section.tl-section-dark h2,
.et_pb_section.tl-section-dark h3,
.et_pb_section.tl-section-dark h4 {
    color: var(--tl-white) !important;
}

.et_pb_section.tl-section-dark p,
.et_pb_section.tl-section-dark li {
    color: rgba(255, 255, 255, 0.85) !important;
}

.et_pb_section.tl-section-light {
    background: var(--tl-surface) !important;
}

.et_pb_section.tl-section-accent {
    background: var(--tl-primary) !important;
    background: linear-gradient(135deg, var(--tl-primary) 0%, var(--tl-secondary) 100%) !important;
}


/* ==========================================================================
   OG BRAND — Image Treatment (white border + drop shadow)
   ========================================================================== */

.et_pb_image .et_pb_image_wrap img,
.og-image {
    border: 4px solid var(--tl-white);
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.18);
}

/* Gold decorative divider */
.tl-gold-divider {
    border: none;
    height: 1px;
    width: 48px;
    background: var(--tl-warm);
    margin: var(--tl-space-lg) auto;
}

.tl-gold-divider-wide {
    border: none;
    height: 1px;
    background: var(--tl-warm);
    margin: var(--tl-space-2xl) 0;
}


/* ==========================================================================
   FOOTER — Clean, authoritative (Divi default footer)
   ========================================================================== */

#main-footer {
    background: var(--tl-dark) !important;
}

#footer-widgets .footer-widget {
    color: rgba(255, 255, 255, 0.7);
}

#footer-widgets .footer-widget h4 {
    font-family: var(--tl-font-body) !important;
    font-size: var(--tl-text-sm) !important;
    font-weight: var(--tl-weight-semi) !important;
    letter-spacing: var(--tl-tracking-wider) !important;
    text-transform: uppercase !important;
    color: var(--tl-white) !important;
    margin-bottom: var(--tl-space-lg) !important;
}

#footer-widgets .footer-widget a {
    color: rgba(255, 255, 255, 0.6) !important;
}

#footer-widgets .footer-widget a:hover {
    color: var(--tl-accent) !important;
}

#footer-bottom {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--tl-text-sm);
}

#footer-info {
    color: rgba(255, 255, 255, 0.4);
}

/* ---- In-layout Footer Section (tl-footer-section) ---- */
.tl-footer-section {
    padding: 60px 0 40px !important;
}

.tl-footer-section a:hover {
    color: var(--tl-warm) !important;
    opacity: 1 !important;
}

.tl-footer-section p {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
}


/* ==========================================================================
   HERO — Full-viewport split layout
   ========================================================================== */

.tl-hero-section {
    padding: 0 !important;
}

.tl-hero-section .et_pb_row {
    padding: 0 !important;
}

/* ---- Belief cards — thick warm border on images ---- */
.tl-beliefs-section .et_pb_image .et_pb_image_wrap img {
    border: 10px solid var(--tl-border) !important;
    box-shadow: none !important;
}

/* ---- About split — full-bleed columns ---- */
.tl-about-split {
    padding: 0 !important;
}

.tl-about-split .et_pb_row {
    padding: 0 !important;
}

.tl-about-split .et_pb_image .et_pb_image_wrap img {
    border: 12px solid var(--tl-white) !important;
    box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.25) !important;
}

/* ---- Content hub — staggered grid ---- */
.tl-content-hub .et_pb_column:last-child {
    padding-top: 80px;
}

/* ---- Quote section ---- */
.tl-quote-section {
    position: relative;
}

/* ---- Newsletter border box ---- */
.tl-newsletter-section .et_pb_text_inner > div {
    transition: border-color var(--tl-duration) var(--tl-ease);
}

.tl-newsletter-section .et_pb_text_inner > div:hover {
    border-color: var(--tl-warm);
}

/* ---- Stats section ---- */
.tl-stats-section .et_pb_code_inner {
    text-align: center;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
    h1, .et_pb_slide_description .et_pb_slide_title {
        font-size: var(--tl-text-4xl);
    }
    h2 { font-size: var(--tl-text-3xl); }
    h3 { font-size: var(--tl-text-2xl); }

    .et_pb_section {
        padding: var(--tl-space-3xl) 0 !important;
    }

    /* Hero: stack on tablet */
    .tl-hero-section .et_pb_column {
        min-height: 400px !important;
    }

    /* About split: stack, reset padding */
    .tl-about-split .et_pb_column {
        padding: 8% 8% !important;
    }

    /* Content hub: remove stagger on tablet */
    .tl-content-hub .et_pb_column:last-child {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    h1, .et_pb_slide_description .et_pb_slide_title {
        font-size: var(--tl-text-3xl);
    }
    h2 { font-size: var(--tl-text-2xl); }
    h3 { font-size: var(--tl-text-xl); }

    .et_pb_section {
        padding: var(--tl-space-2xl) 0 !important;
    }

    /* Hero: reduce height on mobile */
    .tl-hero-section .et_pb_column[style*="background-image"] {
        min-height: 300px !important;
    }

    /* Newsletter box: tighter padding on mobile */
    .tl-newsletter-section .et_pb_text_inner > div {
        padding: 40px 24px !important;
    }
}