/*
 * Xả Ớt Noodle Bar - page-specific stylesheet
 * ALL rules scoped to .xo -- zero impact on other pages
 * Font: Kanit (loaded conditionally via functions.php)
 */

/* ═══════════════════════════════════════════
   CUSTOM PROPERTIES
═══════════════════════════════════════════ */
.xo {
    --xo-dark:  #1C1B0F;
    --xo-amber: #E8A030;
    --xo-cream: #FAF0E4;
    --xo-muted: #BFB49A;
    --xo-text:  #2E2A24;
    --xo-pad:   88px;
    --xo-t:     0.28s ease;

    font-family: 'Kanit', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    background: var(--xo-dark);
    color: var(--xo-cream);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.xo *, .xo *::before, .xo *::after { box-sizing: border-box; }
.xo img  { display: block; max-width: 100%; }
.xo a    { color: inherit; text-decoration: none; }
.xo ul   { list-style: none; margin: 0; padding: 0; }
.xo p    { margin: 0 0 1rem; }
.xo p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   CONTAINER
═══════════════════════════════════════════ */
.xo-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.xo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: 'Kanit', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--xo-t);
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

/* Amber fill - on dark bg */
.xo-btn--amber {
    background: var(--xo-amber);
    color: var(--xo-dark);
    border-color: var(--xo-amber);
}
.xo-btn--amber:hover {
    background: transparent;
    color: var(--xo-amber);
    border-color: var(--xo-amber);
}

/* Cream outline - on dark bg */
.xo-btn--cream-outline {
    background: transparent;
    color: var(--xo-cream);
    border-color: var(--xo-cream);
}
.xo-btn--cream-outline:hover {
    background: var(--xo-cream);
    color: var(--xo-dark);
    border-color: var(--xo-cream);
}

/* Amber outline - on dark bg */
.xo-btn--amber-outline {
    background: transparent;
    color: var(--xo-amber);
    border-color: var(--xo-amber);
}
.xo-btn--amber-outline:hover {
    background: var(--xo-amber);
    color: var(--xo-dark);
    border-color: var(--xo-amber);
}

/* Dark outline - on amber bg */
.xo-btn--dark-outline {
    background: transparent;
    color: var(--xo-dark);
    border-color: var(--xo-dark);
}
.xo-btn--dark-outline:hover {
    background: var(--xo-dark);
    color: var(--xo-amber);
    border-color: var(--xo-dark);
}

/* ═══════════════════════════════════════════
   IMAGE PLACEHOLDER
═══════════════════════════════════════════ */
.xo-placeholder {
    background: rgba(28,27,15,0.60);
    display: block;
}

/* ═══════════════════════════════════════════
   1. HERO - full-width, dark
═══════════════════════════════════════════ */
.xo-hero {
    position: relative;
    background-color: var(--xo-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88vh;
    overflow: hidden;
}

.xo-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(28,27,15,0.60);
    pointer-events: none;
}

.xo-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 80px 24px;
    max-width: 820px;
    width: 100%;
}

.xo-eyebrow {
    display: block;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--xo-amber);
    margin: 0 0 20px;
}

.xo-hero-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: clamp(40px, 6vw, 72px);
    color: var(--xo-cream);
    line-height: 1.15;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}

.xo-hero-sub {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: var(--xo-muted);
    letter-spacing: 0.04em;
    margin: 0 0 40px;
    line-height: 1.6;
}

.xo-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   2. INTRO - full-width, dark, centred
═══════════════════════════════════════════ */
.xo-intro {
    background: var(--xo-dark);
    padding: var(--xo-pad) 24px;
    text-align: center;
    border-top: 1px solid rgba(232,160,48,0.15);
}

.xo-intro-inner {
    max-width: 680px;
    margin: 0 auto;
}

.xo-intro-divider {
    width: 48px;
    height: 1px;
    background: var(--xo-amber);
    margin: 0 auto 36px;
}

.xo-intro p {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--xo-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
}
.xo-intro p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   3. WHAT WE SERVE - container, 2 cols
═══════════════════════════════════════════ */
.xo-serve {
    background: var(--xo-dark);
    padding: var(--xo-pad) 0;
    border-top: 1px solid rgba(232,160,48,0.15);
}

.xo-serve-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.xo-serve-heading {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--xo-amber);
    line-height: 1.2;
    margin: 0 0 20px;
    letter-spacing: 0.01em;
}

.xo-serve-text p {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--xo-muted);
    line-height: 1.8;
    margin-bottom: 28px;
}

.xo-serve-img-wrap { position: relative; }

.xo-serve-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

/* ═══════════════════════════════════════════
   4. QUOTE STRIPE - full-width, amber bg
═══════════════════════════════════════════ */
.xo-quote {
    background: var(--xo-amber);
    padding: 72px 24px;
    text-align: center;
}

.xo-quote-text {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 3vw, 28px);
    color: var(--xo-dark);
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    border: none;
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════
   5. FIND US - container, dark
═══════════════════════════════════════════ */
.xo-find-us {
    background: var(--xo-dark);
    padding: var(--xo-pad) 0;
    border-top: 1px solid rgba(232,160,48,0.15);
}

.xo-find-heading {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--xo-amber);
    margin: 0 0 40px;
    letter-spacing: 0.01em;
}

.xo-find-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
}

.xo-find-text p {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--xo-muted);
    line-height: 1.8;
    margin-bottom: 24px;
}

.xo-find-hours-label {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--xo-cream);
    margin: 0 0 8px;
}

.xo-find-cta {
    margin-top: 28px;
}

.xo-find-map iframe {
    width: 100%;
    height: 380px;
    border: 0;
    display: block;
    filter: grayscale(30%) contrast(1.1);
}

/* ═══════════════════════════════════════════
   6. CTA BAND - full-width, amber bg
═══════════════════════════════════════════ */
.xo-cta {
    background: var(--xo-amber);
    padding: 88px 24px;
    text-align: center;
}

.xo-cta-inner {
    max-width: 720px;
    margin: 0 auto;
}

.xo-cta-heading {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: clamp(24px, 4vw, 42px);
    color: var(--xo-dark);
    line-height: 1.2;
    margin: 0 0 36px;
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════
   RESPONSIVE - 1024px
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .xo-container    { padding: 0 32px; }
    .xo-serve-inner  { gap: 48px; }
    .xo-find-inner   { gap: 40px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE - 768px
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .xo { --xo-pad: 64px; }
    .xo-container { padding: 0 20px; }

    .xo-hero { min-height: 75vh; }
    .xo-hero-content { padding: 64px 20px; }

    .xo-serve-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    /* Image below text on mobile */
    .xo-serve-img-wrap { order: 1; }
    .xo-serve-text     { order: 0; }

    .xo-find-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .xo-find-map iframe { height: 300px; }

    .xo-quote { padding: 56px 20px; }
    .xo-cta   { padding: 64px 20px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE - 480px (covers 360px+)
═══════════════════════════════════════════ */
@media (max-width: 480px) {
    .xo { --xo-pad: 48px; }
    .xo-container { padding: 0 16px; }

    .xo-hero { min-height: 65vh; }
    .xo-hero-content { padding: 52px 16px; }
    .xo-hero-actions { flex-direction: column; align-items: center; }

    .xo-intro { padding: var(--xo-pad) 16px; }

    .xo-quote { padding: 44px 16px; }
    .xo-cta   { padding: 52px 16px; }
    .xo-cta-heading { margin-bottom: 28px; }
}