/*
 * Toss Wok brand colour theme.
 * Overrides tosswok / Bootstrap 5.3 "--theme-*" design tokens so the whole
 * site (buttons, badges, links, alerts, utilities) follows the Toss Wok palette.
 * Loaded after app.min.css and qontento-brand.css so these tokens win.
 *
 * Palette
 *   Rice White   #FAF9F6  main background
 *   Wok Orange   #FF751F  buttons / CTA   (primary)
 *   Sakura Red   #FF3131  important / spicy tags (danger)
 *   Matcha Green #A3B18A  category highlights (success)
 *   Stone Beige  #E8DED2  article cards / soft sections
 *   Light Stone  #D6D3D1  borders / dividers
 *   Ink Black    #2D2D2D  main text
 */

:root {
    /* Raw brand palette (use these in bespoke markup) */
    --tw-rice-white: #FAF9F6;
    --tw-wok-orange: #FF751F;
    --tw-wok-orange-dark: #E86410;
    --tw-sakura-red: #FF3131;
    --tw-sakura-red-dark: #E11D1D;
    --tw-matcha-green: #A3B18A;
    --tw-matcha-green-dark: #8C9B72;
    --tw-stone-beige: #E8DED2;
    --tw-light-stone: #D6D3D1;
    --tw-ink-black: #2D2D2D;
}

/* Retarget tosswok's light-theme tokens to the Toss Wok palette. */
:root,
[data-bs-theme="light"] {
    /* Surfaces & text */
    --theme-body-bg: #FAF9F6;
    --theme-body-bg-rgb: 250, 249, 246;
    --theme-bg-body: #FAF9F6;            /* used by brand chrome fallbacks */
    --theme-body-color: #2D2D2D;
    --theme-body-color-rgb: 45, 45, 45;
    --theme-emphasis-color: #2D2D2D;
    --theme-emphasis-color-rgb: 45, 45, 45;
    --theme-secondary-color: rgba(45, 45, 45, 0.75);

    /* Borders / dividers */
    --theme-border-color: #D6D3D1;
    --theme-border-color-translucent: rgba(45, 45, 45, 0.12);

    /* Cards / soft sections */
    --theme-card-bg: #E8DED2;
    --theme-card-border-color: #D6D3D1;
    --theme-tertiary-bg: #E8DED2;

    /* Primary = Wok Orange (buttons / CTA) */
    --theme-primary: #FF751F;
    --theme-primary-rgb: 255, 117, 31;
    --theme-primary-text-emphasis: #E86410;   /* hover / active */
    --theme-primary-bg-subtle: #FFE7D6;
    --theme-primary-border-subtle: #FFC79E;

    /* Links follow the CTA colour */
    --theme-link-color: #FF751F;
    --theme-link-color-rgb: 255, 117, 31;
    --theme-link-hover-color: #E86410;
    --theme-link-hover-color-rgb: 232, 100, 16;

    /* Danger = Sakura Red (important / spicy) */
    --theme-danger: #FF3131;
    --theme-danger-rgb: 255, 49, 49;
    --theme-danger-text-emphasis: #E11D1D;
    --theme-danger-bg-subtle: #FFDADA;
    --theme-danger-border-subtle: #FFA3A3;

    /* Success = Matcha Green (category highlights) */
    --theme-success: #A3B18A;
    --theme-success-rgb: 163, 177, 138;
    --theme-success-text-emphasis: #7C8C63;
    --theme-success-bg-subtle: #ECEFE4;
    --theme-success-border-subtle: #CBD4BB;
}

/* Page background (tosswok applies bg via token, but pin it explicitly too) */
body {
    background-color: var(--theme-body-bg);
    color: var(--theme-body-color);
}

/* Links: keep "Read more" (link-primary) and footer / nav-link hovers on brand
   orange. tosswok hardcodes a teal hover on .link-primary, so override it. */
.link-primary { color: var(--tw-wok-orange) !important; }
.link-primary:hover,
.link-primary:focus { color: var(--tw-wok-orange-dark) !important; }
.nav-link:hover,
.nav-link:focus { color: var(--tw-wok-orange); }
.section-footer a:hover,
.section-footer a:focus,
.footer a:hover,
.footer a:focus { color: var(--tw-wok-orange) !important; }

/* Matcha is a mid-tone green, so use dark ink text on solid Matcha surfaces
   for legible contrast (white on Matcha fails WCAG). */
.btn-success {
    --theme-btn-color: #2D2D2D;
    --theme-btn-hover-color: #2D2D2D;
    --theme-btn-active-color: #2D2D2D;
    --theme-btn-disabled-color: #2D2D2D;
}
.text-bg-success {
    color: #2D2D2D !important;
}

/* Article cards / soft sections -> Stone Beige on Light Stone borders */
.card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border-color);
}
.section-soft {
    background-color: var(--tw-stone-beige);
    border: 1px solid var(--tw-light-stone);
}

/* Dividers */
hr {
    border-color: var(--tw-light-stone);
    opacity: 1;
}

/* ---- Semantic brand helpers for bespoke markup ---- */

/* Important labels / spicy tags */
.tag-spicy {
    display: inline-block;
    background-color: var(--tw-sakura-red);
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.35em 0.6em;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Category highlights */
.tag-category {
    display: inline-block;
    background-color: var(--tw-matcha-green);
    color: var(--tw-ink-black);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.35em 0.6em;
    border-radius: 0.375rem;
}
.text-category { color: var(--tw-matcha-green-dark) !important; }
.bg-category { background-color: var(--tw-matcha-green) !important; color: var(--tw-ink-black) !important; }

/* ── Landing hero banner ─────────────────────────────────────────── */
.home-hero {
    position: relative;
    overflow: hidden;
    background-color: #faf6ef;   /* matches the banner cream so any letterbox blends */
    min-height: 520px;
    display: flex;
    align-items: center;
}
.home-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;           /* fill the full hero width/height */
    object-position: center;     /* keep centered horizontally and vertically */
    z-index: 0;
}
.home-hero-content {
    position: relative;
    z-index: 1;
}
.home-hero-logo {
    width: 60%;
    max-width: 230px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}