/*
Theme Name: HBI Capital (Elementor)
Theme URI: https://hbi.fertile.build
Description: HBI Capital child theme for Hello Elementor. Carries the self-hosted
  Inter + Cormorant Garamond webfonts (with metric-matched fallbacks for a
  zero-CLS swap) and the charcoal/cream/gold design tokens. Pages are built in
  Elementor; this theme supplies fonts, tokens and base resets only.
Author: Fertile Frog
Template: hello-elementor
Version: 1.0.0
Text Domain: hbi-capital-child
*/

/* --------------------------------------------------------------------------
 * Self-hosted fonts. Extracted from the design bundle (latin + latin-ext
 * subsets — UK audience; other scripts fall back to system fonts). Paths are
 * relative to THIS stylesheet, so no __THEME__ token is needed.
 * ------------------------------------------------------------------------ */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url("assets/fonts/872f7ca8-9222-488c-8451-86f6ec0e687c.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url("assets/fonts/b9c27baf-c8d9-4ef4-8bd0-51d984dc48b0.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500 600;
    font-display: swap;
    src: url("assets/fonts/c93367ba-3987-49c7-a1bf-b0eacd92ec1a.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500 600;
    font-display: swap;
    src: url("assets/fonts/68dda23c-29f2-4658-af1a-9acbaa77b47c.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallbacks — text renders at the correct size before the
   woff2 arrives, so the swap causes zero layout shift. */
@font-face {
    font-family: "Inter-fallback";
    src: local("Arial");
    size-adjust: 107.06%;
    ascent-override: 90.49%;
    descent-override: 22.56%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Cormorant-fallback";
    src: local("Georgia");
    size-adjust: 88%;
    ascent-override: 104%;
    descent-override: 28%;
    line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
 * Design tokens. Mirrored in Elementor → Site Settings → Global Colors /
 * Global Fonts, so widgets styled in the editor and any hand-written CSS
 * resolve to the same values. Change a colour here AND there.
 * ------------------------------------------------------------------------ */
:root {
    --hbi-bg: #121214;
    --hbi-bg-hero: #101012;
    --hbi-bg-panel: #1b1b1f;
    --hbi-cream: #f5f2ec;
    --hbi-cream-72: rgba(245, 242, 236, 0.72);
    --hbi-cream-45: rgba(245, 242, 236, 0.45);
    --hbi-gold: #b08d4f;
    --hbi-gold-bright: #c9a56a;
    --hbi-ink: #121214;
    --hbi-line-dark: rgba(245, 242, 236, 0.08);
    --hbi-max: 1280px;
    --hbi-font-body: "Inter", "Inter-fallback", system-ui, sans-serif;
    --hbi-font-head: "Inter", "Inter-fallback", system-ui, sans-serif;
    --hbi-font-quote: "Cormorant Garamond", "Cormorant-fallback", Georgia, serif;

    /* Capitalised aliases: site.css (the Elementor-era section rules) references
       these names with fallbacks, e.g. var(--Heading, sans-serif). Defining them
       here makes those resolve to the real brand values instead of the fallback
       — most importantly it puts custom headings on Inter rather than system
       sans-serif. Colours are unchanged (the fallbacks already matched). */
    --Heading: var(--hbi-font-head);
    --Font: var(--hbi-font-body);
    --Gold: var(--hbi-gold);
    --Gold-Bright: var(--hbi-gold-bright);
    --Cream: var(--hbi-cream);
    --Cream-72: var(--hbi-cream-72);
    --Cream-45: var(--hbi-cream-45);
    --Charcoal: var(--hbi-bg);
    --Line-Dark: var(--hbi-line-dark);
}

/* --------------------------------------------------------------------------
 * Base. Deliberately minimal: Elementor owns layout and section styling.
 * Only the dark ground, default type and link colour live here, so a page
 * never flashes white before Elementor's CSS loads.
 * ------------------------------------------------------------------------ */
body {
    font-family: var(--hbi-font-body);
    background: var(--hbi-bg);
    color: var(--hbi-cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html,
body {
    overflow-x: clip; /* clip not hidden — hidden breaks position:sticky */
}

a {
    color: var(--hbi-gold);
}

/* Gold accent inside a heading, e.g. <span class="hbi-accent">capital</span>. */
.hbi-accent {
    color: var(--hbi-gold);
}

/* Eyebrow label: small gold caps with a leading rule. Reused across sections;
   apply to an Elementor heading/text widget via its CSS Classes field. */
.hbi-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--hbi-font-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--hbi-gold);
    text-transform: uppercase;
}

.hbi-eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--hbi-gold);
}