/* ══════════════════════════════════════════
   0. BRAND COLOR TOKENS
   Maps Tailwind custom color names to real values
══════════════════════════════════════════ */
:root {
    --color-primary:                  #a43c12;
    --color-primary-container:        #ffdbcc;
    --color-on-primary:               #ffffff;
    --color-on-primary-container:     #3a0e00;
    --color-secondary:                #2a6769;
    --color-secondary-container:      #b2ecef;
    --color-secondary-fixed-dim:      #8fd0d3;
    --color-on-secondary:             #ffffff;
    --color-on-secondary-container:   #001f20;
    --color-tertiary:                 #944a00;
    --color-tertiary-container:       #ffdcbb;
    --color-tertiary-fixed:           #ffdcbb;
    --color-on-tertiary-fixed:        #2f1500;
    --color-background:               #f8f5f2;
    --color-on-background:            #1e1b18;
    --color-surface:                  #f8f5f2;
    --color-on-surface:               #1e1b18;
    --color-on-surface-variant:       #57423b;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low:    #f2ede9;
    --color-surface-container:        #ece7e3;
    --color-surface-container-high:   #e6e1dd;
    --color-surface-container-highest:#e0dbd7;
    --color-outline:                  #857065;
    --color-outline-variant:          #d9c2b8;
}

/*
 * GES Growth Engine Solutions – Theme Stylesheet
 * Elementor-only build — no typography overrides.
 * Elementor controls all font, colour, size and spacing.
 */

/* ══════════════════════════════════════════
   1. BASE FONT — Manrope as fallback only
   Elementor overrides this freely.
══════════════════════════════════════════ */
/* Body font — set as default, Elementor Site Settings can override */
body {
    font-family: 'Manrope', sans-serif;
}
/* Allow Elementor to override fonts on widgets */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-button .elementor-button,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description {
    font-family: inherit;
}

/* ══════════════════════════════════════════
   2. MATERIAL SYMBOLS ICONS
   Always protected — never overrideable.
══════════════════════════════════════════ */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.text-xs   { font-size: 14px !important; }
.material-symbols-outlined.text-sm   { font-size: 18px !important; }
.material-symbols-outlined.text-base { font-size: 20px !important; }
.material-symbols-outlined.text-lg   { font-size: 24px !important; }
.material-symbols-outlined.text-xl   { font-size: 28px !important; }
.material-symbols-outlined.text-2xl  { font-size: 32px !important; }

/* ══════════════════════════════════════════
   3. NAVIGATION BAR
   Styles the custom PHP header/nav only.
══════════════════════════════════════════ */
.geg-nav {
    position: fixed; top: 0; width: 100%; z-index: 999;
    background: rgba(249,250,247,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.geg-nav-inner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 2rem; max-width: 1280px; margin: 0 auto; height: 64px;
}
.geg-logo {
    font-size: 1.05rem; font-weight: 800; color: #a43c12;
    text-decoration: none; letter-spacing: -0.03em;
    font-family: 'Manrope', sans-serif;
    display: flex; align-items: center; gap: 10px;
}
.geg-menu {
    display: flex; align-items: center; gap: 0;
    list-style: none; margin: 0; padding: 0;
}
.geg-menu > li { position: relative; }
.geg-menu > li > a {
    display: flex; align-items: center; gap: 4px;
    padding: 0 16px; height: 64px;
    font-size: 0.875rem; font-weight: 500; color: #2a6769;
    text-decoration: none; white-space: nowrap;
    font-family: 'Manrope', sans-serif;
    transition: color 0.2s;
}
.geg-menu > li > a:hover,
.geg-menu > li.current-menu-item > a,
.geg-menu > li.current-menu-parent > a { color: #a43c12; }

/* Dropdown arrow */
.geg-menu > li.menu-item-has-children > a::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 18px; line-height: 1;
    font-weight: normal; font-style: normal;
    letter-spacing: normal; text-transform: none;
    white-space: nowrap; -webkit-font-smoothing: antialiased;
    transition: transform 0.2s; margin-left: 2px;
}
.geg-menu > li.menu-item-has-children:hover > a::after { transform: rotate(180deg); }

/* Dropdown panel */
.geg-menu > li > ul.sub-menu {
    display: none; position: absolute; top: 100%; left: 0;
    background: #fff; border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    min-width: 220px; padding: 8px;
    list-style: none; margin: 0; z-index: 1000;
}
.geg-menu > li:hover > ul.sub-menu { display: block; }
.geg-menu > li > ul.sub-menu li a {
    display: block; padding: 10px 14px;
    font-size: 0.85rem; font-weight: 500; color: #57423b;
    text-decoration: none; border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    transition: background 0.15s, color 0.15s;
}
.geg-menu > li > ul.sub-menu li a:hover { background: #f3f4f1; color: #a43c12; }
.geg-menu > li > ul.sub-menu li.current-menu-item a { color: #a43c12; font-weight: 700; }

/* Nav CTA button */
.geg-nav-cta {
    background: #a43c12; color: #fff;
    padding: 10px 22px; border-radius: 999px;
    font-size: 0.875rem; font-weight: 700;
    font-family: 'Manrope', sans-serif;
    text-decoration: none; white-space: nowrap;
    transition: background 0.2s;
}
.geg-nav-cta:hover { background: #f3882c; }

/* Mobile hamburger */
.geg-hamburger {
    display: none; background: none; border: none;
    cursor: pointer; padding: 8px; color: #191c1b;
}

/* Mobile menu */
.geg-mobile-menu {
    display: none; position: fixed; top: 64px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    z-index: 998; max-height: calc(100vh - 64px); overflow-y: auto;
}
.geg-mobile-menu.open { display: block; }
.geg-mobile-menu ul { list-style: none; margin: 0; padding: 12px; }
.geg-mobile-menu ul li a {
    display: block; padding: 12px 16px;
    font-size: 0.9rem; font-weight: 500; color: #57423b;
    text-decoration: none; border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    transition: background 0.15s;
}
.geg-mobile-menu ul li a:hover { background: #f3f4f1; color: #a43c12; }
.geg-mobile-menu ul li ul.sub-menu {
    list-style: none; margin: 0 0 8px 16px; padding: 0;
    border-left: 2px solid #aeeaec;
}
.geg-mobile-menu ul li ul.sub-menu li a {
    font-size: 0.85rem; padding: 8px 12px;
}
.geg-mobile-menu .geg-mobile-cta {
    display: block; margin: 12px 12px 16px; text-align: center;
    background: #a43c12; color: #fff;
    padding: 14px; border-radius: 999px;
    font-weight: 700; font-family: 'Manrope', sans-serif;
    text-decoration: none; transition: background 0.2s;
}
.geg-mobile-menu .geg-mobile-cta:hover { background: #f3882c; }

@media (max-width: 768px) {
    .geg-menu { display: none; }
    .geg-hamburger { display: flex; }
    .geg-desktop-cta { display: none; }
}

/* ══════════════════════════════════════════
   4. FOOTER
══════════════════════════════════════════ */
footer p, footer a, footer li {
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
}

/* ══════════════════════════════════════════
   5. UTILITY CLASSES
   Used in PHP templates and the 404 page.
══════════════════════════════════════════ */
.kinetic-gradient { background: linear-gradient(135deg, #a43c12 0%, #ff7f50 100%); }
.hide-mobile      { display: block; }

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

/* ══════════════════════════════════════════
   6. BLOG POST CONTENT STYLES
   Only applies to blog single posts.
══════════════════════════════════════════ */
.geg-post-content { font-family: 'Manrope', sans-serif; }
.geg-post-content h2 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 3rem; margin-bottom: 1.5rem; }
.geg-post-content h3 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
.geg-post-content p  { font-size: 1.125rem; line-height: 1.8; color: #57423b; margin-bottom: 1.5rem; }
.geg-post-content ul,
.geg-post-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; color: #57423b; line-height: 1.8; }
.geg-post-content li { margin-bottom: 0.5rem; }
.geg-post-content img { border-radius: 1rem; max-width: 100%; height: auto; margin: 2rem 0; }
.geg-post-content figcaption { text-align: center; font-size: 0.875rem; color: #57423b; font-style: italic; margin-top: 0.75rem; }
.geg-post-content blockquote { border-left: 4px solid #ff7f50; padding: 1.5rem 2rem; margin: 2.5rem 0; font-style: italic; }
.geg-post-content blockquote p { font-size: 1.5rem; font-weight: 500; color: #ff7f50; line-height: 1.4; margin: 0; }
.geg-post-content a,
.geg-post-content .elementor-widget-container a,
.geg-post-content .elementor-text-editor a,
.geg-post-content .elementor-icon-box-description a,
.geg-post-content p a { color: #ff7f50 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.geg-post-content a:hover,
.geg-post-content .elementor-widget-container a:hover,
.geg-post-content .elementor-text-editor a:hover,
.geg-post-content .elementor-icon-box-description a:hover,
.geg-post-content p a:hover { color: #2a6769 !important; }

/* Global inline link styles — covers Elementor widgets on all pages */
.elementor-icon-box-description a,
.elementor-text-editor a,
.elementor-widget-text-editor a,
.elementor p a { color: #ff7f50 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.elementor-icon-box-description a:hover,
.elementor-text-editor a:hover,
.elementor-widget-text-editor a:hover,
.elementor p a:hover { color: #2a6769 !important; }
.geg-post-content hr { border: none; border-top: 1px solid #e7e8e6; margin: 3rem 0; }

/* Blog post styles */
.geg-editorial > p:first-of-type::first-letter { font-size: 4rem; font-weight: 800; color: #a43c12; float: left; margin-right: 0.75rem; line-height: 1; }
.geg-editorial h2 { color: #2a6769; display: flex; align-items: center; gap: 0.75rem; }
.geg-editorial h2::before { content: ''; display: inline-block; width: 2rem; height: 4px; background: #ff7f50; border-radius: 2px; flex-shrink: 0; }
.geg-zen p { color: #004b4d; }
.geg-zen figure { margin-left: -2rem; margin-right: -2rem; }
@media(min-width: 768px) { .geg-zen figure { margin-left: -5rem; margin-right: -5rem; } }
.geg-zen blockquote p { font-size: 1.875rem; font-weight: 500; color: #ff7f50; line-height: 1.3; }
.geg-zen h2 { color: #004b4d; }
.geg-sidebar blockquote { background: #f3f4f1; border-left: 4px solid #ff7f50; padding: 2rem; border-radius: 0 1rem 1rem 0; }
.geg-sidebar blockquote p { font-size: 1.25rem; color: #2f6b6d; }
.geg-magazine h2 { color: #2a6769; font-size: 2.25rem; }
.geg-toc-active { color: #a43c12 !important; font-weight: 700 !important; border-left: 2px solid #ff7f50 !important; padding-left: 1rem !important; }

/* Blog pagination — works with paginate_links( type=plain ) */
.blog-pagination {
    display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: center; gap: 0.25rem;
}
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    font-weight: 700; font-size: 0.875rem; color: #2a6769;
    border: 1px solid rgba(42,103,105,0.2); transition: all 0.2s;
    text-decoration: none;
}
.blog-pagination a.page-numbers:hover { background: #2a6769; color: #fff; border-color: #2a6769; }
.blog-pagination span.page-numbers.current { background: #2a6769; color: #fff; border-color: #2a6769; }
.blog-pagination .page-numbers.dots { border: none; background: none; width: auto; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ══════════════════════════════════════════
   7. NAV MENU RESET
══════════════════════════════════════════ */
.nav-menu, .nav-menu ul { margin: 0; padding: 0; list-style: none; }
.nav-menu a {
    display: inline-block; color: #2a6769;
    font-weight: 500; font-size: 0.875rem;
    letter-spacing: -0.025em; transition: color 0.3s;
    font-family: 'Manrope', sans-serif;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a { color: #a43c12; }


/* ── Smooth scroll for TOC anchor links ── */
html { scroll-behavior: smooth; }
h2[id] { scroll-margin-top: 100px; }
h3[id] { scroll-margin-top: 100px; }


/* ══════════════════════════════════════════
   BLOG POST MOBILE + TOC FIXES
══════════════════════════════════════════ */

/* Mobile H1 — Manrope 36px */
@media (max-width: 768px) {
    .font-headline.font-extrabold,
    h1.font-headline,
    .geg-post-h1 {
        font-family:   'Manrope', sans-serif !important;
        font-size:     36px !important;
        line-height:   1.5em !important;
        letter-spacing: -1px !important;
    }
}

/* Prevent images from jumping when TOC anchor is clicked */
h2[id], h3[id], h4[id] {
    scroll-margin-top: 100px;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Fix images staying in place after anchor click */
.geg-post-content img,
article img {
    float:      none !important;
    max-width:  100% !important;
    height:     auto !important;
    display:    block !important;
    position:   relative !important;
}


/* ── Hide all TOC elements on single posts ── */
.single .wp-block-jetpack-table-of-contents,
.single .wp-block-table-of-contents,
.single nav.wp-block-table-of-contents,
.single .jetpack-toc,
.single .ez-toc-container,
.single .toc_container,
.single .wp-block-rank-math-toc-block,
.single [class*="table-of-contents"],
.single [class*="toc-block"] {
    display: none !important;
}