/* ==========================================================================
   Bali Halal Food — "Emerald Atlas"
   Warm cream grounds, deep pine ink, emerald primary, brass accent.
   Fraunces (headings) + Manrope (text). Mobile first.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
    --bhf-ink: #0b2a25;
    --bhf-ink-2: #103a33;
    --bhf-ink-3: #174a41;
    --bhf-emerald: #0f5f4e;
    --bhf-emerald-d: #0a4a3d;
    --bhf-emerald-soft: #e2eee8;
    --bhf-gold: #d9a441;
    --bhf-gold-l: #ecc984;
    --bhf-gold-d: #8a6119;
    --bhf-cream: #f7f3ea;
    --bhf-paper: #fdfbf6;
    --bhf-sand: #efe8d8;
    --bhf-white: #ffffff;

    --bhf-text: #15231f;
    --bhf-text-soft: #3a4944;
    --bhf-muted: #586762;

    --bhf-line: rgba(11, 42, 37, .12);
    --bhf-line-2: rgba(11, 42, 37, .24);
    --bhf-line-inv: rgba(247, 243, 234, .16);
    --bhf-line-inv-2: rgba(247, 243, 234, .34);

    --bhf-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --bhf-sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    --bhf-r-sm: 10px;
    --bhf-r: 16px;
    --bhf-r-lg: 22px;
    --bhf-r-xl: 32px;

    --bhf-wrap: 1240px;
    --bhf-gutter: clamp(1.1rem, 4vw, 2.5rem);
    --bhf-sec: clamp(3.75rem, 8vw, 6.5rem);
    --bhf-header-h: 68px;
    --bhf-logo-h: 50px;
    --bhf-adminbar: 0px;
    --bhf-top: calc(var(--bhf-header-h) + var(--bhf-adminbar));
    --bhf-ease: cubic-bezier(.22, .61, .36, 1);
    --bhf-shadow-s: 0 1px 2px rgba(11, 42, 37, .05), 0 10px 28px -14px rgba(11, 42, 37, .2);
    --bhf-shadow-m: 0 2px 6px rgba(11, 42, 37, .06), 0 28px 50px -26px rgba(11, 42, 37, .38);
}
/* The logo is a stacked lockup (emblem over wordmark): give it room so the wordmark stays legible. */
@media (min-width: 640px) { :root { --bhf-header-h: 76px; --bhf-logo-h: 56px; } }
@media (min-width: 1280px) { :root { --bhf-header-h: 82px; --bhf-logo-h: 62px; } }

/* WordPress admin bar (only when logged in): 32px, 46px on narrow screens, static below 601px. */
html.wp-toolbar { --bhf-adminbar: 32px; }
@media (max-width: 782px) { html.wp-toolbar { --bhf-adminbar: 46px; } }
@media (max-width: 600px) { html.wp-toolbar { --bhf-adminbar: 0px; } }

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bhf-top) + 1rem);
    overflow-x: clip;
}
body.bhf {
    margin: 0;
    background: var(--bhf-cream);
    color: var(--bhf-text);
    font-family: var(--bhf-sans);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(15, 95, 78, .14);
    overflow-x: clip;
}
/* Resets use :where() so single-class component rules always win over them. */
:where(.bhf) :is(img, svg) { display: block; max-width: 100%; }
:where(.bhf) img { height: auto; }
:where(.bhf) a { color: inherit; }
.bhf a { text-decoration: none; }
:where(.bhf) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
:where(.bhf) :is(input, textarea, select) { font: inherit; color: inherit; }
:where(.bhf) p { margin: 0 0 1em; }
:where(.bhf) :is(ul, ol) { margin: 0; padding: 0; }
:where(.bhf) figure { margin: 0; }
.bhf :is(strong, b) { font-weight: 700; }
.bhf :focus-visible { outline: 2px solid var(--bhf-emerald); outline-offset: 3px; border-radius: 4px; }
.bhf-section--ink :focus-visible, .bhf-footer :focus-visible, .bhf-cta :focus-visible, .bhf-hero :focus-visible, .bhf-strap :focus-visible { outline-color: var(--bhf-gold-l); }
.bhf ::selection { background: var(--bhf-emerald); color: #fff; }
body.bhf-lock { overflow: hidden; }

.bhf-main { position: relative; display: block; }
.bhf-main:focus { outline: none; }

.bhf-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bhf-skip {
    position: fixed; top: .75rem; left: .75rem; z-index: 1000;
    padding: .75rem 1.1rem; background: var(--bhf-ink); color: #fff; border-radius: var(--bhf-r-sm);
    font-size: .85rem; font-weight: 700;
    transform: translateY(-160%); transition: transform .25s var(--bhf-ease);
}
.bhf-skip:focus { transform: none; }

/* 3. TYPOGRAPHY ------------------------------------------------------------ */
.bhf h1, .bhf h2, .bhf h3, .bhf h4 {
    font-family: var(--bhf-serif);
    font-weight: 500;
    font-optical-sizing: auto;
    color: inherit;
    margin: 0;
    text-wrap: balance;
    letter-spacing: -.018em;
    line-height: 1.12;
}
.bhf-h2 { font-size: clamp(1.85rem, 1.35rem + 2vw, 3rem); }
.bhf-h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); line-height: 1.2; }
.bhf p, .bhf li { text-wrap: pretty; }
.bhf-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.7; color: var(--bhf-text-soft); }

.bhf-eyebrow {
    display: inline-flex; align-items: center; gap: .65rem;
    margin: 0 0 1rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--bhf-emerald);
}
.bhf-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--bhf-gold); border-radius: 2px; flex: none; }
.is-light .bhf-eyebrow, .bhf-section--ink .bhf-eyebrow, .bhf-cta .bhf-eyebrow, .bhf-phead .bhf-eyebrow { color: var(--bhf-gold-l); }

/* 4. LAYOUT ---------------------------------------------------------------- */
.bhf-wrap { width: 100%; max-width: calc(var(--bhf-wrap) + var(--bhf-gutter) * 2); margin-inline: auto; padding-inline: var(--bhf-gutter); }
.bhf-section { position: relative; padding-block: var(--bhf-sec); }
.bhf-section--paper { background: var(--bhf-paper); }
.bhf-section--sand { background: var(--bhf-sand); }
.bhf-section--cream { background: var(--bhf-cream); }
.bhf-section--ink { background: var(--bhf-ink); color: #eef3ef; }
.bhf-section__more { margin: 2rem 0 0; text-align: center; }

.bhf-sechead { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.bhf-sechead__copy { max-width: 46rem; }
.bhf-sechead__text { margin: .9rem 0 0; color: var(--bhf-text-soft); font-size: 1.05rem; }
.bhf-sechead.is-light .bhf-sechead__text, .bhf-section--ink .bhf-sechead__text { color: rgba(238, 243, 239, .78); }
.bhf-sechead.is-center { text-align: center; }
.bhf-sechead.is-center .bhf-sechead__copy { margin-inline: auto; }
.bhf-slider__head .bhf-sechead { margin-bottom: 0; }

/* 5. BUTTONS + CHIPS + LINKS ----------------------------------------------- */
.bhf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 48px; padding: .8rem 1.4rem;
    border-radius: 999px; border: 1.5px solid transparent;
    font-size: .92rem; font-weight: 800; letter-spacing: .005em; line-height: 1.2; text-align: center;
    transition: background .2s var(--bhf-ease), color .2s var(--bhf-ease), border-color .2s var(--bhf-ease), transform .2s var(--bhf-ease), box-shadow .2s var(--bhf-ease);
}
.bhf-btn .ti { font-size: 1.2em; }
.bhf-btn:hover { transform: translateY(-1px); }
.bhf-btn--sm { min-height: 42px; padding: .55rem 1.05rem; font-size: .85rem; }
.bhf-btn--block { width: 100%; }
.bhf-btn--primary { background: var(--bhf-emerald); color: #fff; }
.bhf-btn--primary:hover { background: var(--bhf-emerald-d); box-shadow: 0 10px 24px -12px rgba(15, 95, 78, .7); }
.bhf-btn--gold { background: var(--bhf-gold); color: var(--bhf-ink); }
.bhf-btn--gold:hover { background: var(--bhf-gold-l); box-shadow: 0 10px 24px -12px rgba(217, 164, 65, .8); }
.bhf-btn--outline { border-color: var(--bhf-line-2); color: var(--bhf-ink); }
.bhf-btn--outline:hover { background: var(--bhf-ink); border-color: var(--bhf-ink); color: #fff; }
.bhf-btn--ghost-light { border-color: rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .08); }
.bhf-btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--bhf-ink); }
.bhf-btn--outline-light { border-color: var(--bhf-line-inv-2); color: #fff; }
.bhf-btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--bhf-ink); }
.bhf-btn--light { background: #fff; color: var(--bhf-ink); }

.bhf-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .95rem; border-radius: 999px;
    background: var(--bhf-emerald-soft); color: var(--bhf-emerald-d);
    font-size: .85rem; font-weight: 700; line-height: 1.2;
    transition: background .2s var(--bhf-ease), color .2s var(--bhf-ease);
}
a.bhf-chip:hover { background: var(--bhf-emerald); color: #fff; }

.bhf-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 800; font-size: .95rem; color: var(--bhf-emerald);
    border-bottom: 2px solid var(--bhf-gold); padding-bottom: 2px;
    transition: color .2s var(--bhf-ease), gap .2s var(--bhf-ease);
}
.bhf-link:hover { color: var(--bhf-ink); gap: .65rem; }

.bhf-note {
    display: flex; gap: .6rem; align-items: flex-start;
    margin: 1.5rem 0 0; font-size: .95rem; color: var(--bhf-text-soft);
}
.bhf-note .ti { flex: none; margin-top: .2em; color: var(--bhf-gold-d); font-size: 1.15em; }
.bhf-note--light { color: rgba(238, 243, 239, .8); }
.bhf-note--light .ti { color: var(--bhf-gold-l); }

.bhf-checks { list-style: none; display: grid; gap: .7rem; margin: 1.4rem 0 1.6rem; }
.bhf-checks li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; color: var(--bhf-text); }
.bhf-checks .ti { flex: none; margin-top: .18em; color: var(--bhf-emerald); font-size: 1.25em; }

/* 6. MOTION ---------------------------------------------------------------- */
html.js .bhf-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--bhf-ease), transform .55s var(--bhf-ease); }
html.js .bhf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .bhf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .bhf *, .bhf *::before, .bhf *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
    .bhf-strap, .bhf-header, .bhf-sheet, .bhf-dock, .bhf-float-wa, .bhf-slider__nav { display: none !important; }
    html.js .bhf-reveal { opacity: 1; transform: none; }
}