/* ============================================================
   PB CATERERS — BASE
   Variables · Reset · Typography · Utilities
   ============================================================ */

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
    --wine:      #8B1538;
    --burgundy:  #A0153E;
    --crimson:   #C41E3A;
    --gold:      #DAA520;
    --gold-bright: #FFD700;
    --ivory:     #FFF5E6;
    --cream:     #FFF8E7;
    --champagne: #F7E7CE;
    --warm-white:#FAF9F6;
    --charcoal:  #2C2416;
    --soft-black:#1A1410;

    --font-display: 'Cinzel Decorative', serif;
    --font-heading: 'Playfair Display', serif;
    --font-body:    'Lora', serif;
    --font-accent:  'Cormorant', serif;
    --font-hindi:   'Noto Serif Devanagari', serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;

    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    --shadow-sm: 0 2px 12px rgba(139,21,56,0.08);
    --shadow-md: 0 4px 20px rgba(139,21,56,0.12);
    --shadow-lg: 0 8px 32px rgba(139,21,56,0.16);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --nav-height: 64px;
    --max-width:  1200px;
}

@media (min-width: 768px)  { :root { --nav-height: 80px; } }
@media (min-width: 1440px) { :root { --max-width: 1300px; } }
@media (min-width: 1920px) { :root { --max-width: 1400px; } }

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media (min-width: 1920px) { html { font-size: 18px; } }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--charcoal);
    background: var(--warm-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, iframe, embed, object { max-width:100%; height:auto; display:block; }

table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
    color: var(--wine);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
h1 { font-size: clamp(1.625rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.375rem, 4vw,   2.75rem); }
h3 { font-size: clamp(1.125rem, 3vw,   2rem);    }
h4 { font-size: clamp(1rem,     2vw,   1.625rem); }

p {
    margin-bottom: var(--spacing-sm);
    line-height: 1.75;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }

li, span, td, th { overflow-wrap: break-word; word-break: break-word; }

/* ── UTILITIES ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: clamp(0.875rem, 4vw, 1.5rem);
}
@supports (padding: max(0px)) {
    .container {
        padding-left:  max(clamp(0.875rem,4vw,1.5rem), env(safe-area-inset-left));
        padding-right: max(clamp(0.875rem,4vw,1.5rem), env(safe-area-inset-right));
    }
}

.skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--gold); color: var(--burgundy);
    font-weight: 700; padding: 0.75rem 1.25rem;
    z-index: 10000; border-radius: 0 0 8px 0;
}
.skip-link:focus { top: 0; }

/* ── SECTION DEFAULTS ──────────────────────────────────────── */
section { padding-block: clamp(4rem, 8vw, 9rem); }

/* ── SECTION HEADERS ───────────────────────────────────────── */
.section-header {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    max-width: 700px;
    margin-inline: auto;
}
.section-header::before {
    content: '❖';
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.section-label {
    display: inline-block;
    font-size: clamp(0.6875rem, 1.8vw, 0.875rem);
    font-weight: 700;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 0.5rem;
    position: relative;
    padding-inline: clamp(0.5rem, 2vw, 1.25rem);
}
.section-label::before,
.section-label::after { content:'✦'; position:absolute; color:var(--gold); font-size:0.75rem; top:50%; transform:translateY(-50%); }
.section-label::before { left:0; }
.section-label::after  { right:0; }

.section-title { font-size: clamp(1.375rem, 4vw, 3rem); margin-bottom: 0.75rem; }
.section-desc  { font-size: clamp(0.875rem, 1.8vw, 1rem); color: var(--charcoal); line-height: 1.7; opacity: 0.9; }

/* ── DIVIDERS ──────────────────────────────────────────────── */
.luxury-divider {
    padding-block: clamp(2rem, 5vw, 6rem);
    background: linear-gradient(135deg, var(--ivory) 0%, var(--champagne) 50%, var(--ivory) 100%);
    border-top: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
}
.luxury-divider-dark {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--burgundy) 50%, var(--charcoal) 100%);
}
.divider-text {
    font-family: var(--font-accent);
    font-size: clamp(1.125rem, 3.5vw, 2.75rem);
    text-align: center;
    color: var(--burgundy);
    font-style: italic;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.55;
    padding-inline: clamp(1rem, 4vw, 3rem);
}
.luxury-divider-dark .divider-text { color: var(--champagne); }

/* ── ANIMATIONS ────────────────────────────────────────────── */
.fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── FOCUS / ACCESSIBILITY ─────────────────────────────────── */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
body.using-mouse *:focus { outline: none; }

/* ── PRINT ─────────────────────────────────────────────────── */
@media print {
    .nav, .whatsapp-float, .scroll-top, .hero-bg, .hero-overlay { display: none !important; }
    body { background: white; color: black; }
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .fade-in { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}