/**
 * Socialgrowth Networks — Brand layer
 *
 * Single source of truth for the brand guidelines. Loaded last so it
 * overrides the component stylesheets.
 *
 *   Headings ........ Ubuntu Bold
 *   Body / UI ....... Montserrat Regular / Medium
 *   Corporate Navy .. #1E3A8A  primary: logo, headings, key UI
 *   Deep Navy ....... #0F172A  dark backgrounds, body text
 *   Tangerine ....... #FF6B35  accent: CTAs, highlights (use sparingly)
 *   Slate Grey ...... #475569  secondary text, captions, dividers
 *   White ........... #FFFFFF  primary background
 */

:root {
    /* Brand palette */
    --sgn-navy: #1E3A8A;
    --sgn-navy-rgb: 30, 58, 138;
    --sgn-deep-navy: #0F172A;
    --sgn-deep-navy-rgb: 15, 23, 42;
    --sgn-tangerine: #FF6B35;
    --sgn-tangerine-rgb: 255, 107, 53;
    --sgn-tangerine-hover: #E85A26;
    --sgn-slate: #475569;
    --sgn-white: #FFFFFF;
    --sgn-tint: #F1F4FA;           /* very light navy tint for alternating sections */

    /* Legacy component tokens -> brand palette */
    --sgn-blue: var(--sgn-navy);
    --sgn-blue-dark: #172E6E;
    --sgn-blue-light: #EEF2FA;
    --sgn-orange: var(--sgn-tangerine);
    --sgn-orange-dark: var(--sgn-tangerine-hover);
    --sgn-dark: var(--sgn-deep-navy);
    --sgn-dark-2: #16213D;
    --sgn-dark-blue: var(--sgn-deep-navy);
    --sgn-gray: var(--sgn-tint);
    --sgn-bg-light: var(--sgn-tint);
    --sgn-text: var(--sgn-deep-navy);
    --sgn-text-muted: var(--sgn-slate);
    --sgn-border: rgba(var(--sgn-navy-rgb), 0.12);

    /* Typography */
    --font-primary: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: "Ubuntu", "Montserrat", system-ui, sans-serif;

    /* Bootstrap bridge */
    --bs-primary: var(--sgn-navy);
    --bs-primary-rgb: var(--sgn-navy-rgb);
    --bs-secondary: var(--sgn-slate);
    --bs-secondary-rgb: 71, 85, 105;
    --bs-warning: var(--sgn-tangerine);
    --bs-warning-rgb: var(--sgn-tangerine-rgb);
    --bs-dark: var(--sgn-deep-navy);
    --bs-dark-rgb: var(--sgn-deep-navy-rgb);
    --bs-body-font-family: var(--font-primary);
    --bs-body-color: var(--sgn-deep-navy);
    --bs-body-bg: var(--sgn-white);
    --bs-secondary-color: var(--sgn-slate);
    --bs-link-color: var(--sgn-navy);
    --bs-link-color-rgb: var(--sgn-navy-rgb);
    --bs-link-hover-color: var(--sgn-tangerine-hover);
    --bs-border-color: rgba(var(--sgn-navy-rgb), 0.12);
    --bs-primary-text-emphasis: var(--sgn-navy);
    --bs-primary-bg-subtle: var(--sgn-blue-light);
    --bs-primary-border-subtle: rgba(var(--sgn-navy-rgb), 0.2);
}

/* ---------- Typography ---------- */
body {
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--sgn-deep-navy);
    background-color: var(--sgn-white);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.section-title, .hero-title, .sgn-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

p, li, label, input, select, textarea, button, .btn, .nav-link, .dropdown-item, small, .small, figcaption {
    font-family: var(--font-primary);
}

.text-muted, .text-secondary, figcaption, .caption { color: var(--sgn-slate) !important; }

/* Captions / labels — Montserrat Medium */
.badge, .eyebrow, .section-label, .text-uppercase.small, .extra-small {
    font-family: var(--font-primary);
    font-weight: 500;
}

/* Headings sit in Corporate Navy unless on a dark surface */
h1, h2, h3, .h1, .h2, .h3 { color: inherit; }
.text-primary { color: var(--sgn-navy) !important; }
.bg-primary   { background-color: var(--sgn-navy) !important; }
.bg-dark      { background-color: var(--sgn-deep-navy) !important; }
.text-dark    { color: var(--sgn-deep-navy) !important; }
.text-warning { color: var(--sgn-tangerine) !important; }
.border-primary { border-color: var(--sgn-navy) !important; }

/* ---------- Buttons ---------- */
.btn-primary {
    --bs-btn-bg: var(--sgn-navy);
    --bs-btn-border-color: var(--sgn-navy);
    --bs-btn-hover-bg: #172E6E;
    --bs-btn-hover-border-color: #172E6E;
    --bs-btn-active-bg: #172E6E;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--sgn-navy);
    --bs-btn-border-color: var(--sgn-navy);
    --bs-btn-hover-bg: var(--sgn-navy);
    --bs-btn-hover-border-color: var(--sgn-navy);
    --bs-btn-hover-color: #fff;
}

/*
 * Accessibility (guidelines §03): avoid small white text on orange —
 * orange CTAs carry Deep Navy text.
 */
.btn-warning,
.btn-sgn-orange,
.btn-topbar-orange,
.btn-main,
.bg-warning {
    background-color: var(--sgn-tangerine) !important;
    border-color: var(--sgn-tangerine) !important;
    color: var(--sgn-deep-navy) !important;
}
.btn-warning:hover,
.btn-sgn-orange:hover,
.btn-topbar-orange:hover,
.btn-main:hover {
    background-color: var(--sgn-tangerine-hover) !important;
    border-color: var(--sgn-tangerine-hover) !important;
    color: var(--sgn-deep-navy) !important;
}
.btn-warning i, .btn-sgn-orange i, .btn-topbar-orange i, .btn-main i, .bg-warning i { color: inherit !important; }

/* ---------- Logo (guidelines §02) ---------- */
/* Keep the lockup intact: no shadows, filters or effects; scale uniformly. */
.logo-main, .logo-black, .logo-white, .footer-logo-img,
.navbar-brand img, .custom-logo {
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    height: auto;
    width: auto;
    object-fit: contain;
}
.sgn-header .logo-main { max-height: 48px; min-width: 220px; }
.footer-logo-img { max-height: 48px; min-width: 220px; }
@media (max-width: 575.98px) {
    .sgn-header .logo-main { min-width: 0; max-width: 200px; }
}

/* Fallback text logo (only when no image logo is available) */
.logo-text-main, .logo-text-sub { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0; }
.logo-text-main { color: var(--sgn-navy); }
.logo-text-sub  { color: var(--sgn-tangerine); }

/* ---------- Surfaces ---------- */
.sgn-topbar { background: var(--sgn-deep-navy); }
.sgn-header { background: var(--sgn-white); }

/* Selection & focus */
::selection { background: rgba(var(--sgn-tangerine-rgb), 0.25); color: var(--sgn-deep-navy); }
:focus-visible { outline: 2px solid var(--sgn-tangerine); outline-offset: 2px; }

/* Code */
code, pre, kbd { font-family: "Fira Code", ui-monospace, monospace; }

/* ---------- Layout ---------- */
/* Generous, consistent gutters (guidelines §05: whitespace & alignment).
   Also stops g-lg-5 rows (-1.5rem margins) overflowing the viewport.
   !important needed: sgn.css forces 12px with !important. */
.container, .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
@media (min-width: 992px)  { .container, .container-fluid { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }
@media (min-width: 1400px) { .container { padding-left: 2rem !important; padding-right: 2rem !important; } }

/* Primary navigation text in Deep Navy; active/hover in Corporate Navy */
.sgn-header .navbar .nav-link { color: var(--sgn-deep-navy); }
.sgn-header .navbar .nav-link:hover,
.sgn-header .navbar .nav-link.active,
.sgn-header .navbar .current-menu-item > .nav-link { color: var(--sgn-navy); }

/* Quote page hero (Deep Navy surface) */
.quote-hero-bg { background: var(--sgn-deep-navy); color: #fff; }
.quote-hero-bg .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.5); }

/* Utilities referenced by templates but missing from Bootstrap */
.opacity-10 { opacity: .1 !important; }
.opacity-20 { opacity: .2 !important; }
.pointer-events-none { pointer-events: none !important; }

/* Desktop nav fits from 1200px: tighten spacing until there is room */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .sgn-header .navbar .nav-link { font-size: 12px !important; padding-left: 6px !important; padding-right: 6px !important; letter-spacing: 0 !important; }
    /* Shop stays reachable via the cart icon and the Resources menu */
    .sgn-header .navbar-nav > li.sgn-nav-shop { display: none !important; }
    .sgn-header .logo-wrapper { margin-right: .75rem !important; }
    .sgn-header .header-actions { gap: .35rem !important; }
}

/* Scroll animations (AOS fade-left/right) start off-canvas; clip so they never
   create horizontal scrolling. `clip` (not `hidden`) keeps the sticky header working. */
html, body { overflow-x: clip; }

/* Orange highlight words inside headings (e.g. "Core Values" on navy bands).
   Beats the legacy `.section-title h2 span { color: navy }` rule. */
h1 span.text-warning, h2 span.text-warning, h3 span.text-warning,
.section-title h1 span.text-warning, .section-title h2 span.text-warning { color: var(--sgn-tangerine) !important; }