/* ==========================================================================
   MarinOak — Brand foundation (single source of truth)
   Generated from the MarinOak Design System (.claude/skills/marinoak-design).
   Load this AFTER bootstrap.css / style.css so brand tokens win the cascade.
   Warm, restrained luxury: Deep Forest, brushed Brass, stone neutrals.
   ========================================================================== */

/* ---- Webfonts: Instrument Sans (body/UI) + Marcellus (Optima stand-in) ---- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Marcellus&display=swap');

:root {
  /* ---- Neutrals (raw) ---- */
  --warm-white:  #F7F5F1; /* primary background */
  --soft-stone:  #EFEAE2; /* secondary background */
  --white:       #FFFFFF; /* card background */
  --charcoal:    #1A1A1A; /* primary text */
  --slate-gray:  #5F6460; /* secondary text */
  --light-stone: #DDD8D0; /* borders / dividers */
  --placeholder: #8E8E8A; /* form placeholder */

  /* ---- Brand (raw) ---- */
  --deep-forest:     #1B2B24; /* primary brand */
  --forest-hover:    #24372E; /* primary button hover */
  --forest-pressed:  #16221D; /* primary button pressed */
  --brass:           #B9985A; /* accent (on light) */
  --champagne-brass: #C3A56B; /* brass on dark backgrounds */
  --bronze-deep:     #8C7653; /* monogram stroke / fine bronze line */
  --visited:         #6F6A63; /* visited link */

  /* ---- Semantic status (warm, not saturated) ---- */
  --success: #2E6B4B;
  --warning: #B87A24;
  --error:   #B3473D;

  /* ================= Semantic aliases ================= */
  --surface-page:    var(--warm-white);
  --surface-alt:     var(--soft-stone);
  --surface-card:    var(--white);
  --surface-inverse: var(--deep-forest);

  --text-primary:       var(--charcoal);
  --text-secondary:     var(--slate-gray);
  --text-on-inverse:    var(--warm-white);
  --text-muted-inverse: color-mix(in srgb, var(--warm-white) 70%, transparent);

  --accent:         var(--brass);
  --accent-on-dark: var(--champagne-brass);

  --border:          var(--light-stone);
  --border-strong:   var(--charcoal);
  --divider:         var(--light-stone);
  --divider-premium: var(--brass);

  --link:         var(--deep-forest);
  --link-hover:   var(--brass);
  --link-visited: var(--visited);

  --btn-primary-bg:      var(--deep-forest);
  --btn-primary-text:    var(--warm-white);
  --btn-primary-hover:   var(--forest-hover);
  --btn-primary-pressed: var(--forest-pressed);
  --btn-premium-bg:      var(--brass);
  --btn-premium-text:    var(--deep-forest);
  --btn-premium-hover:   var(--champagne-brass);

  --field-bg:          var(--white);
  --field-border:      var(--light-stone);
  --field-focus:       var(--brass);
  --field-placeholder: var(--placeholder);

  --icon:         var(--charcoal);
  --icon-hover:   var(--brass);
  --icon-on-dark: var(--warm-white);

  --focus-ring: color-mix(in srgb, var(--brass) 55%, transparent);

  /* ---- Type families ---- */
  --font-display: 'Marcellus', 'Optima', 'Palatino Linotype', 'Palatino', serif;
  --font-sans:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  --display-font: var(--font-display);
  --heading-font: var(--font-display);
  --body-font:    var(--font-sans);
  --ui-font:      var(--font-sans);

  /* ---- Weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Type scale (modular ~1.25) ---- */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem;
  --text-4xl: 4rem; --text-5xl: 5.25rem;

  /* ---- Line heights ---- */
  --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.18em;

  /* ---- Spacing (4px base) ---- */
  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;

  /* ---- Radii (restrained, never pill for containers) ---- */
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --radius-xl: 14px; --radius-pill: 999px;

  --border-width: 1px; --border-hair: 1px;

  /* ---- Layout ---- */
  --container-max: 1200px; --container-narrow: 720px;
  --section-pad-y: var(--space-10); --gutter: var(--space-5);

  /* ---- Shadows (warm-tinted, diffuse — never hard black) ---- */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.04);
  --shadow-sm: 0 1px 3px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md: 0 4px 16px rgba(27,43,36,0.07), 0 1px 3px rgba(26,26,26,0.04);
  --shadow-lg: 0 12px 36px rgba(27,43,36,0.10), 0 2px 8px rgba(26,26,26,0.05);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Motion (calm, no bounce) ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 400ms;
  --transition-color: color var(--dur-base) var(--ease-standard),
                      background-color var(--dur-base) var(--ease-standard),
                      border-color var(--dur-base) var(--ease-standard);
}

/* ==========================================================================
   Brand component patterns — opt-in via .mo-* classes so they never collide
   with Bootstrap. Use these when converting pages to the new brand.
   ========================================================================== */

/* Headings default to the Marcellus display voice wherever brand.css loads,
   at regular weight (Marcellus ships 400 only) — lean on size/space, not bold. */
h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); font-weight: var(--fw-regular); }

/* Eyebrow / overline */
.mo-eyebrow {
  font-family: var(--ui-font);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.on-forest .mo-eyebrow { color: var(--accent-on-dark); }

/* Display headings (Marcellus) */
.mo-display {
  font-family: var(--heading-font);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

/* Buttons — primary (Forest), secondary (outline), premium (Brass, sparingly) */
.mo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--ui-font); font-weight: var(--fw-medium); font-size: var(--text-base);
  line-height: 1; text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 14px 26px; transition: var(--transition-color), transform var(--dur-fast) var(--ease-standard);
}
.mo-btn:focus-visible { outline: 2px solid var(--field-focus); outline-offset: 2px; }
.mo-btn--lg { padding: 17px 32px; font-size: var(--text-md); }

.mo-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.mo-btn--primary:hover { background: var(--btn-primary-hover); color: var(--btn-primary-text); }
.mo-btn--primary:active { background: var(--btn-primary-pressed); transform: translateY(0.5px); }

.mo-btn--secondary { background: transparent; color: var(--deep-forest); border-color: var(--deep-forest); }
.mo-btn--secondary:hover { background: var(--deep-forest); color: var(--warm-white); }
.on-forest .mo-btn--secondary { color: var(--warm-white); border-color: var(--warm-white); }
.on-forest .mo-btn--secondary:hover { background: var(--warm-white); color: var(--deep-forest); }

.mo-btn--premium { background: var(--btn-premium-bg); color: var(--btn-premium-text); }
.mo-btn--premium:hover { background: var(--btn-premium-hover); color: var(--btn-premium-text); }

/* Inverse (Deep Forest) section helper */
.on-forest { background: var(--surface-inverse); color: var(--text-on-inverse); }
.on-forest a { color: var(--text-on-inverse); }
.on-forest a:hover { color: var(--accent-on-dark); }

/* Card */
.mo-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.mo-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Premium divider */
.mo-divider { border: 0; border-top: var(--border-hair) solid var(--divider); margin: var(--space-7) 0; }
.mo-divider--premium { border-top-color: var(--divider-premium); }

/* Form fields */
.mo-field {
  width: 100%; font-family: var(--ui-font); font-size: var(--text-base);
  color: var(--text-primary); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--radius-md);
  padding: 12px 14px; transition: var(--transition-color), box-shadow var(--dur-base) var(--ease-standard);
}
.mo-field::placeholder { color: var(--field-placeholder); }
.mo-field:focus { outline: none; border-color: var(--field-focus); box-shadow: var(--shadow-focus); }

/* ==========================================================================
   Legacy overrides — neutralize old teal (#52d3aa) / charcoal (#333) brand
   baked into css/style.css (the shared compiled sheet). Selectors mirror
   style.css so specificity matches; brand.css loads AFTER style.css, so
   equal-specificity rules win on source order (and we re-assert !important
   where style.css used it). Naturally scoped: only pages that link brand.css
   receive these. Retire this block once style.css itself is tokenized.
   ========================================================================== */

/* Global links + text selection */
a { color: var(--link); transition: var(--transition-color); }
a:hover, a:active, a:focus { color: var(--link-hover); }
::-webkit-selection { color: var(--white); background: color-mix(in srgb, var(--brass) 28%, transparent); }
::-moz-selection    { color: var(--white); background: color-mix(in srgb, var(--brass) 28%, transparent); }
::selection         { color: var(--white); background: color-mix(in srgb, var(--brass) 28%, transparent); }

/* Site bar — now Warm White, so dark text + dark hamburger */
.site-bar { color: var(--text-primary); }
#site-bar .site-link, #site-bar .site-link.active { color: var(--text-primary); font-weight: var(--fw-medium); }
#site-bar .site-link:hover { color: var(--brass); opacity: 1; }
.site-bar-text { color: var(--text-secondary); }
.fh5co-bar { background: var(--charcoal); }
.fh5co-nav-toggle:focus-visible { outline-color: var(--brass); }

/* Footer — Deep Forest */
#fh5co-footer { background: var(--deep-forest); }
#fh5co-footer a:hover { color: var(--accent-on-dark); }
/* Compact the footer body a touch (Instrument Sans runs taller than Work Sans). */
#fh5co-footer { font-size: 16px; }
#fh5co-footer p { line-height: 1.45; }
/* Footer legal block — one evenly-spaced, calm, centered group. */
#fh5co-footer .footer-legal { margin-top: 30px; }
#fh5co-footer .footer-legal p { margin: 0 0 10px; line-height: 1.6; }
#fh5co-footer .footer-legal p:last-child { margin-bottom: 0; }
#fh5co-footer .footer-legal small { color: var(--text-muted-inverse); }
/* The legacy desktop footer is position:fixed; bottom:0; height:450px — a
   "reveal" panel that clips its last lines against the viewport edge / OS dock
   whenever content exceeds 450px. Make it a normal in-flow block on desktop
   with real bottom padding so it can never clip, regardless of content height. */
@media screen and (min-width: 993px) {
  #fh5co-wrap { margin-bottom: 0; }
  #fh5co-footer {
    position: static;
    height: auto;
    padding-top: 2.5em;
    padding-bottom: 1.75em;
  }
}

/* Sticky-header nav — old teal hover/active → brass */
body.not-on-top #fh5co-header nav li a:hover { color: var(--brass) !important; }
body.not-on-top #fh5co-header nav li a:hover span { border-bottom-color: var(--brass); }
body.not-on-top #fh5co-header nav li.fh5co-active a { color: var(--brass) !important; }
body.not-on-top #fh5co-header nav li.fh5co-active a span { border-bottom-color: var(--brass); }

/* Sticky header — solid Warm White with a soft warm shadow (desktop only;
   mobile keeps the transparent treatment that anchors the nav drawer). */
@media screen and (min-width: 769px) {
  body.not-on-top #fh5co-header {
    background-color: var(--warm-white) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: var(--shadow-md) !important;
    border-bottom: 1px solid var(--border);
  }
}

/* Mobile nav drawer — solid Deep Forest (not near-black glass), no blur,
   warm-white links, champagne "Login". The brand is material, not glassy. */
@media screen and (max-width: 768px) {
  #fh5co-main-nav {
    background: var(--deep-forest) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-top: 1px solid color-mix(in srgb, var(--champagne-brass) 22%, transparent) !important;
  }
  #fh5co-main-nav li a { color: var(--warm-white); }
  #fh5co-main-nav li.fh5co-owner-login a { color: var(--accent-on-dark); }
  body.not-on-top #fh5co-main-nav li a { color: var(--warm-white) !important; }
  body.not-on-top #fh5co-main-nav li.fh5co-owner-login a { color: var(--accent-on-dark) !important; }
  /* Hamburger bars + focus ring already set to charcoal/brass above; harden the
     drawer link border hairlines to the brand's translucent warm-white. */
  #fh5co-main-nav li a { border-bottom-color: color-mix(in srgb, var(--warm-white) 10%, transparent); }
}

/* Bootstrap .btn-primary → Forest (keeps any un-converted button on-brand) */
.btn-primary { background: var(--deep-forest); border-color: var(--deep-forest); color: var(--warm-white); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--forest-hover) !important; border-color: var(--forest-hover) !important; color: var(--warm-white); }
.btn-primary.btn-outline { background: transparent; color: var(--deep-forest); border-color: var(--deep-forest); }
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active { background: var(--deep-forest); color: var(--warm-white); }

/* Feature icons, checkmarks, form-control focus → brass */
.fh5co-feature .fh5co-icon i,
.fh5co-feature.fh5co-feature-sm .fh5co-icon i { color: var(--brass); }
.fh5co-check li:before { color: var(--brass); }
.form-control:active, .form-control:focus { border-color: var(--brass); }