/*
 * Hatta New World — Brand Design Tokens
 *
 * Source of truth: 00-Project-Docs/Technical-Specs/brand-guidlines.md
 * Volume I · Identity, Voice, and Editorial System · MMXXVI Edition · Rev. 01 / 04.2026
 *
 * All Divi module overrides, layout rules, and component styles reference
 * these custom properties. Never hard-code a colour or font size.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */

:root {

    /* ── Colour: Stone Palette (Light / Editorial) ─────────────────────── */
    --color-porcelain:  #FDFCF9;   /* Primary background         70% surface */
    --color-eggshell:   #F1EBDC;   /* Highlight / secondary bg   24% surface */
    --color-stone:      #E6DCC4;   /* Tertiary / imagery bg       6% surface */
    --color-ink:        #1A1410;   /* Body text, wordmark                    */
    --color-bronze:     #8A6A2E;   /* Accent on light surfaces               */

    /* ── Colour: Midnight Palette (reserved — not used in default theme) ─ */
    --color-midnight:   #0C1119;
    --color-nocturne:   #151B25;
    --color-bone:       #F3EDE3;
    --color-gilt:       #C9A35C;

    /* ── Colour: Utility ───────────────────────────────────────────────── */
    --color-border-light:   rgba(26, 20, 16, 0.10);  /* Dividers          */
    --color-overlay-light:  rgba(26, 20, 16, 0.04);  /* Subtle hover wash */

    /* ── Typography: Font Families ─────────────────────────────────────── */
    --font-display:  'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
    --font-body:     'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:     'JetBrains Mono', 'Courier New', monospace;

    /* ── Typography: Type Scale (desktop) ──────────────────────────────── */
    --text-display-xl:  112px;  /* Hero display                             */
    --text-display:      72px;  /* Section headers                          */
    --text-headline:     44px;  /* Article / page headlines                 */
    --text-title:        22px;  /* Card titles, subheads                    */
    --text-body:         16px;  /* Running text                             */
    --text-caption:      11px;  /* JetBrains Mono captions                  */
    --text-label:        10.5px; /* Eyebrow / utility labels                */

    /* ── Typography: Line Heights ──────────────────────────────────────── */
    --leading-display-xl:  108px;
    --leading-display:      74px;
    --leading-headline:     48px;
    --leading-title:        28px;
    --leading-body:         28px;
    --leading-caption:      16px;
    --leading-label:        14px;

    /* ── Typography: Letter Spacing ────────────────────────────────────── */
    --tracking-wordmark:   0.34em;   /* HATTA wordmark              */
    --tracking-eyebrow:    0.16em;   /* JetBrains Mono labels       */
    --tracking-display:    -0.01em;  /* Large Cormorant headings    */
    --tracking-body:        0;       /* Inter body — no tracking    */

    /* ── Typography: Weights ───────────────────────────────────────────── */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --grid-max:        1320px;   /* Editorial max width                      */
    --grid-columns:    12;
    --grid-gutter:     28px;
    --grid-margin:     56px;     /* Left/right page margin on desktop        */
    --section-pad-v:   140px;    /* Vertical section padding                 */
    --section-pad-v-sm: 80px;    /* Vertical section padding (tablet)        */
    --section-pad-v-xs: 56px;    /* Vertical section padding (mobile)        */
    --card-gap:         24px;    /* Gap between product cards                */

    /* ── Borders & Radius ───────────────────────────────────────────────── */
    --radius-none:   0;          /* Hatta uses hard edges — never round      */
    --border-width:  1px;

    /* ── Motion ─────────────────────────────────────────────────────────── */
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast:   160ms;
    --duration-base:   300ms;
    --duration-slow:   500ms;

    /* ── Z-index Scale ──────────────────────────────────────────────────── */
    --z-header:        100;
    --z-overlay:       200;
    --z-modal:         300;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. BASE RESETS & GLOBALS
   ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--color-porcelain);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: var(--weight-light);
    margin: 0;
}

img, video {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY HELPERS
   ───────────────────────────────────────────────────────────────────────── */

.h-display-xl {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    line-height: var(--leading-display-xl);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-display);
}

.h-display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    line-height: var(--leading-display);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-display);
}

.h-headline {
    font-family: var(--font-display);
    font-size: var(--text-headline);
    line-height: var(--leading-headline);
    font-weight: var(--weight-regular);
}

.h-title {
    font-family: var(--font-display);
    font-size: var(--text-title);
    line-height: var(--leading-title);
    font-weight: var(--weight-regular);
}

.h-body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: var(--weight-light);
}

.h-caption,
.h-label,
.h-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    line-height: var(--leading-label);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.h-caption {
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. LAYOUT HELPERS
   ───────────────────────────────────────────────────────────────────────── */

.h-container {
    width: 100%;
    max-width: var(--grid-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
}

.h-section {
    padding-top: var(--section-pad-v);
    padding-bottom: var(--section-pad-v);
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. DIVI MODULE OVERRIDES
   ───────────────────────────────────────────────────────────────────────── */

/* Reset Divi's default max-width to match brand grid */
#page-container .et_pb_section {
    padding: var(--section-pad-v) 0;
}

#page-container .et_pb_row {
    max-width: var(--grid-max);
}

/* Force Divi body font to brand stack */
body #page-container {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    color: var(--color-ink);
}

/* Divi heading overrides */
body #page-container h1,
body #page-container h2,
body #page-container h3,
body #page-container h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    color: var(--color-ink);
}

/* Divi link colour */
body #page-container a {
    color: var(--color-ink);
}

/* Remove Divi's default blue focus ring */
body #page-container a:focus {
    outline: 2px solid var(--color-bronze);
    outline-offset: 3px;
}

/* Divi button — CTA style: Bronze primary
   Uses !important to override Divi's inline styles from shortcode attributes.
   Consistent 14px 28px padding for both states prevents layout shift on hover. */
body #page-container .et_pb_button,
body #page-container .et_pb_button_one,
body #page-container .et_pb_button_two {
    background-color: var(--color-bronze) !important;
    color: var(--color-porcelain) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--text-label) !important;
    font-weight: var(--weight-regular) !important;
    letter-spacing: var(--tracking-eyebrow) !important;
    text-transform: uppercase !important;
    border: 1px solid var(--color-bronze) !important;
    border-radius: var(--radius-none) !important;
    padding: 14px 28px !important;
    line-height: 1.7em !important;
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
    /* Kill Divi's default arrow icon on hover */
    display: inline-block !important;
}

body #page-container .et_pb_button:after,
body #page-container .et_pb_button_one:after,
body #page-container .et_pb_button_two:after {
    display: none !important;   /* remove Divi's → arrow pseudo-element */
}

body #page-container .et_pb_button:hover,
body #page-container .et_pb_button_one:hover,
body #page-container .et_pb_button_two:hover {
    background-color: var(--color-stone) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-stone) !important;
    padding: 14px 28px !important;  /* lock padding — prevents Divi's right-padding shift */
}

/* Ghost / outline variant — transparent bg, ink border
   Apply via Divi module: bg transparent, text #1A1410, border #1A1410 */
body #page-container .et_pb_button.et_pb_bg_layout_light[style*="background-color: rgba(0"],
body #page-container .et_pb_button.hatta-btn-ghost {
    background-color: transparent !important;
    color: var(--color-ink) !important;
    border-color: var(--color-ink) !important;
}

body #page-container .et_pb_button.et_pb_bg_layout_light[style*="background-color: rgba(0"]:hover,
body #page-container .et_pb_button.hatta-btn-ghost:hover {
    background-color: var(--color-bronze) !important;
    color: var(--color-porcelain) !important;
    border-color: var(--color-bronze) !important;
}

.et_pb_button:hover,
.et_pb_button_one:hover,
.et_pb_button_two:hover {
    background-color: var(--color-stone) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-stone) !important;
    padding: 14px 28px !important;  /* lock padding — prevents Divi's right-padding shift */
}
/* ─────────────────────────────────────────────────────────────────────────────
   6. HEADER COMPONENT
   ───────────────────────────────────────────────────────────────────────── */

.hatta-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background-color: var(--color-porcelain);
    border-bottom: var(--border-width) solid var(--color-border-light);
    height: 72px;
    display: flex;
    align-items: center;
}

.hatta-header__inner {
    width: 100%;
    max-width: var(--grid-max);
    margin: 0 auto;
    padding: 0 var(--grid-margin);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--grid-gutter);
}

/* Centre nav */
.hatta-header__nav-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hatta-header__nav-primary a {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink);
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.hatta-header__nav-primary a:hover,
.hatta-header__nav-primary .current-menu-item > a {
    opacity: 1;
}

/* Logo (left) */
.hatta-header__wordmark {
    display: flex;
    align-items: center;
}

.hatta-header__wordmark a {
    display: flex;
    align-items: center;
}

.hatta-header__logo {
    height: 44px;
    width: auto;
}

/* Right utility nav */
.hatta-header__nav-utility {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hatta-header__nav-utility a {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink);
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.hatta-header__nav-utility a:hover {
    opacity: 1;
}

/* Enquire button */
.hatta-header__nav-utility .menu-item-enquire > a {
    background-color: var(--color-bronze);
    color: var(--color-porcelain);
    opacity: 1;
    padding: 9px 18px;
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}

.hatta-header__nav-utility .menu-item-enquire > a:hover {
    background-color: var(--color-stone);
    color: var(--color-ink);
}

/* Mobile hamburger */
.hatta-header__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
}

.hatta-header__burger span {
    display: block;
    width: 24px;
    height: 1px;
    background-color: var(--color-ink);
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out);
}

/* Body offset when header is fixed */
body {
    padding-top: 72px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. FOOTER COMPONENT
   ───────────────────────────────────────────────────────────────────────── */

.hatta-footer {
    background-color: var(--color-eggshell);
    color: var(--color-ink);
    padding-top: 80px;
    padding-bottom: 0;
}

.hatta-footer__grid {
    max-width: var(--grid-max);
    margin: 0 auto;
    padding: 0 var(--grid-margin);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--grid-gutter);
    padding-bottom: 64px;
    border-bottom: var(--border-width) solid var(--color-border-light);
}

.hatta-footer__brand-col .hatta-footer__wordmark {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-wordmark);
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: 16px;
}

.hatta-footer__brand-col p {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    color: var(--color-ink);
    opacity: 0.55;
    max-width: 240px;
}

.hatta-footer__nav-col h6 {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-bronze);
    margin-bottom: 20px;
    font-weight: var(--weight-regular);
}

.hatta-footer__nav-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hatta-footer__nav-col ul a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-light);
    color: var(--color-ink);
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.hatta-footer__nav-col ul a:hover {
    opacity: 1;
}

.hatta-footer__base {
    max-width: var(--grid-max);
    margin: 0 auto;
    padding: 20px var(--grid-margin);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hatta-footer__base p,
.hatta-footer__base a {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink);
    opacity: 0.35;
}

.hatta-footer__base a:hover {
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. RESPONSIVE — TABLET (≤ 1024px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

    :root {
        --text-display-xl: 72px;
        --text-display:    52px;
        --text-headline:   36px;
        --section-pad-v:   var(--section-pad-v-sm);
        --grid-margin:     32px;
    }

    .hatta-header__nav-primary,
    .hatta-header__nav-utility {
        display: none;
    }

    .hatta-header__burger {
        display: flex;
    }

    .hatta-header__inner {
        grid-template-columns: 1fr auto;
    }

    .hatta-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. RESPONSIVE — MOBILE (≤ 640px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    :root {
        --text-display-xl: 48px;
        --text-display:    36px;
        --text-headline:   28px;
        --section-pad-v:   var(--section-pad-v-xs);
        --grid-margin:     20px;
    }

    .hatta-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hatta-footer__base {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. MOBILE NAV DRAWER
   ───────────────────────────────────────────────────────────────────────── */

.hatta-mobile-nav {
    position: fixed;
    inset: 0;
    background-color: var(--color-porcelain);
    z-index: calc(var(--z-header) + 1);
    display: flex;
    flex-direction: column;
    padding: 80px var(--grid-margin) var(--grid-margin);
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease-out);
}

.hatta-mobile-nav.is-open {
    transform: translateX(0);
}

.hatta-mobile-nav__close {
    position: absolute;
    top: 24px;
    right: var(--grid-margin);
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    cursor: pointer;
    color: var(--color-ink);
    opacity: 0.5;
}

.hatta-mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hatta-mobile-nav ul a {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: var(--weight-light);
    color: var(--color-ink);
    display: block;
    padding: 8px 0;
    border-bottom: var(--border-width) solid var(--color-border-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. ARTICLE SINGLE TEMPLATE (single.php)
   ───────────────────────────────────────────────────────────────────────── */

/* Article header — eggshell background, centres content to 840px */
.hatta-article-header {
    background-color: var(--color-eggshell);
    padding: var(--section-pad-v) var(--grid-margin);
}

.hatta-article-header__inner {
    max-width: 840px;
    margin: 0 auto;
}

.hatta-article-header__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-bronze);
    margin: 0 0 24px;
}

.hatta-article-header__eyebrow::before {
    content: '◆  ';
    font-size: 8px;
    vertical-align: middle;
}

.hatta-article-header__title {
    font-family: var(--font-display);
    font-size: var(--text-display);       /* 72px */
    line-height: var(--leading-display);  /* 74px */
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink);
    margin: 0 0 32px;
}

.hatta-article-header__meta {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    line-height: var(--leading-label);
    letter-spacing: 0.12em;
    color: var(--color-ink);
    opacity: 0.45;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hatta-article-header__meta-sep {
    opacity: 0.6;
}

/* Hero image — full-width, max 640px tall */
.hatta-article-hero {
    width: 100%;
    max-height: 640px;
    overflow: hidden;
    background-color: var(--color-eggshell);
}

.hatta-article-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hatta-article-hero__caption {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: 0.12em;
    color: var(--color-ink);
    opacity: 0.35;
    text-align: right;
    max-width: var(--grid-max);
    margin: 12px auto 0;
    padding: 0 var(--grid-margin);
}

/* Article body wrapper — Divi sections render inside here */
.hatta-article-body {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hatta-article-header__title {
        font-size: 52px;
        line-height: 56px;
    }

    .hatta-article-hero {
        max-height: 480px;
    }
}

@media (max-width: 640px) {
    .hatta-article-header {
        padding: var(--section-pad-v-xs) var(--grid-margin);
    }

    .hatta-article-header__title {
        font-size: 36px;
        line-height: 40px;
    }

    .hatta-article-hero {
        max-height: 320px;
    }
}