/* =========================================================================
   Fortuity Coaching's theme, loaded after site.css (Site:Key = fortuity).
   Carries over the original site's look: a dark slate gray header with the
   name in light text, on a cornsilk page.

   Contrast (WCAG 2.2 AA; checked by ThemeContrastTests, keep it in step):
     Dark slate gray #2F4F4F on white/cornsilk   4.5:1+  links, headings, buttons
     Cornsilk        #FFF8DC on #2F4F4F          4.5:1+  text on dark surfaces
     Wheat           #F3E3B0 on #2F4F4F          4.5:1+  links/accents on dark surfaces
     Old gold        #C9A227 on #2F4F4F          3:1+    underline bars, borders (non-text)
     Teal            #2E7D8C on white/cornsilk   3:1+    focus rings
   ========================================================================= */

:root {
    --site-primary: #2F4F4F;
    --site-primary-rgb: 47, 79, 79;
    --site-primary-hover: #223b3b;
    --site-primary-hover-rgb: 34, 59, 59;
    --site-primary-active: #182b2b;
    --site-secondary: #2E7D8C;
    --site-secondary-rgb: 46, 125, 140;
    --site-accent: #C9A227;
    --site-accent-rgb: 201, 162, 39;
    --site-highlight: #F3E3B0;
    --site-highlight-rgb: 243, 227, 176;
    --site-on-primary: #FFF8DC;
    --site-shadow-tint: #8FA5A5;
    --site-shadow-tint-rgb: 143, 165, 165;

    --site-surface: #FFF8DC;      /* cornsilk page */
    --site-surface-alt: #F6EDCB;  /* alternating sections, a shade darker */
    --site-border: #E3D6AC;
}

/* Header: dark slate gray, as on the original site, with the name in cornsilk. */
.site-header {
    background-color: var(--site-primary);
    border-bottom-color: var(--site-primary-hover);
    backdrop-filter: none;
}

.site-header .navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 248, 220, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.site-header .navbar-brand-text {
    color: var(--site-on-primary);
    font-weight: 300;
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
    letter-spacing: 0.01em;
}

.site-header .nav-link {
    --bs-nav-link-color: var(--site-on-primary);
    --bs-nav-link-hover-color: var(--site-highlight);
    --bs-navbar-active-color: var(--site-on-primary);
}

.site-header .nav-link:hover {
    background-color: rgba(255, 248, 220, 0.12);
}

.site-header .navbar-toggler {
    border-color: rgba(255, 248, 220, 0.5);
}

.site-header :focus-visible {
    outline-color: var(--site-highlight);
}

/* The header's call-to-action button: light on the dark header. */
.site-header .btn-primary {
    --bs-btn-color: var(--site-primary);
    --bs-btn-bg: var(--site-on-primary);
    --bs-btn-border-color: var(--site-on-primary);
    --bs-btn-hover-color: var(--site-primary);
    --bs-btn-hover-bg: var(--site-highlight);
    --bs-btn-hover-border-color: var(--site-highlight);
    --bs-btn-active-color: var(--site-primary);
    --bs-btn-active-bg: var(--site-highlight);
    --bs-btn-active-border-color: var(--site-highlight);
}