/* ============================================================
   AMAA Designs — Wedding Site Stylesheet
   weddings.amaadesigns.com

   Sections:
     1.  CSS Custom Properties (Color Palette, Spacing, Typography)
     2.  Reset & Base Styles
     3.  Layout Utilities
     4.  Buttons
     5.  Site Header
     6.  Navigation (with mobile hamburger toggle)
     7.  Site Footer
     8.  Hero Section
     9.  Section Base Styles
     10. Service Package Cards
     11. Support Services List
     12. CTA Section
     13. Responsive Breakpoints
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   All color, spacing, and type tokens used site-wide.
   Changing a value here updates it everywhere.
   ============================================================ */

:root {

    /* --- Background Colors --- */
    --color-bg:            #FAF7FF;   /* main page background — near-white with lavender tint */
    --color-surface:       #FFFFFF;   /* card and panel backgrounds */
    --color-surface-alt:   #F0EAFF;   /* alternate section background */

    /* --- Brand / Primary Colors --- */
    --color-primary:       #9B7FD4;   /* main soft lavender */
    --color-primary-dark:  #7B5DB5;   /* deeper lavender — hover, active states */
    --color-primary-light: #E8DEFF;   /* pale lavender — highlights, tag backgrounds */

    /* --- Accent Colors --- */
    --color-accent:        #C9A0B8;   /* dusty rose */
    --color-accent-dark:   #B88AA4;   /* deeper rose — hover on accent elements */
    --color-accent-light:  #F5E6EF;   /* pale rose — section background, soft highlights */

    /* --- Text Colors --- */
    --color-text:          #2D2040;   /* primary text — deep plum */
    --color-text-muted:    #6B5A80;   /* secondary / muted text */
    --color-text-inverse:  #FFFFFF;   /* text on dark backgrounds */

    /* --- Border & Divider Colors --- */
    --color-border:        #DDD0F5;   /* default border color */
    --color-divider:       #EDE6FF;   /* section dividers */

    /* --- Navigation --- */
    --color-nav-bg:        #7B5DB5;   /* nav bar background */
    --color-nav-text:      #FFFFFF;   /* nav link text */
    --color-nav-hover-bg:  rgba(255, 255, 255, 0.12); /* nav link hover background */
    --color-nav-hover:     #E8DEFF;   /* nav link hover text */

    /* --- Header --- */
    --color-header-bg:     #FFFFFF;
    --color-header-border: #DDD0F5;

    /* --- Footer --- */
    --color-footer-bg:     #7B5DB5;   /* matches header/nav bar color */
    --color-footer-text:   #E8DEFF;   /* footer body text */
    --color-footer-muted:  #9B7FD4;   /* footer secondary text */
    --color-footer-border: #3D3050;   /* footer internal divider */

    /* --- Spacing Scale --- */
    --space-xs:   0.25rem;   /*  4px */
    --space-sm:   0.5rem;    /*  8px */
    --space-md:   1rem;      /* 16px */
    --space-lg:   1.5rem;    /* 24px */
    --space-xl:   2rem;      /* 32px */
    --space-2xl:  3rem;      /* 48px */
    --space-3xl:  4rem;      /* 64px */
    --space-4xl:  6rem;      /* 96px */

    /* --- Typography --- */
    --font-heading: 'Georgia', 'Times New Roman', serif;
    --font-body:    'Segoe UI', system-ui, -apple-system, sans-serif;

    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  2rem;       /* 32px */
    --text-4xl:  2.75rem;    /* 44px */
    --text-5xl:  3.5rem;     /* 56px */

    /* --- Layout --- */
    --max-width:  1100px;
    --radius:     4px;
    --radius-lg:  8px;
    --radius-xl:  12px;
}


/* ============================================================
   2. RESET & BASE STYLES
   Remove browser defaults; set a consistent baseline.
   ============================================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: 80px;   /* space for fixed header — matches header min-height */
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

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

a:hover {
    color: var(--color-primary-dark);
}

ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--color-text);
}


/* ============================================================
   3. LAYOUT UTILITIES
   ============================================================ */

/* Centers content with max-width and horizontal padding */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}


/* ============================================================
   4. BUTTONS
   Primary (solid lavender), outline, and size variants.
   ============================================================ */

.btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

/* Solid lavender button */
.btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
}

/* Outlined lavender button */
.btn--outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Size modifiers */
.btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: var(--text-sm);
}

.btn--lg {
    padding: 1rem 2.5rem;
    font-size: var(--text-lg);
}


/* ============================================================
   5. SITE HEADER
   Top bar displaying brand name and phone number.
   ============================================================ */

.site-header {
    background-color: var(--color-nav-bg);   /* purple — single combined bar like GP and wholesale */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* Flex row: brand left, nav right */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    min-height: 70px;
}

/* Brand name and sub-label stacked vertically */
.brand-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1;
    gap: 4px;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #FFFFFF;   /* white — header background is now dark purple */
}

.brand-sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);   /* translucent white on dark purple background */
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Clickable phone number in header */
.header-phone {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.header-phone:hover {
    color: var(--color-accent);
}


/* ============================================================
   6. NAVIGATION
   Horizontal nav bar. Mobile hamburger uses a hidden checkbox —
   no JavaScript required. Click the label to toggle the menu.
   ============================================================ */

.site-nav {
    background-color: var(--color-nav-bg);
}

.nav-inner {
    display: flex;
    align-items: center;
    position: relative;
}

/* Hidden checkbox — toggled by the hamburger label */
.nav-toggle {
    display: none;
}

/* Hamburger icon — only rendered on mobile via media query */
.nav-toggle-label {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: var(--space-md);
    cursor: pointer;
    margin-left: auto;
}

/* Three horizontal bars of the hamburger icon */
.hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-nav-text);
    border-radius: 2px;
}

/* Navigation link list — horizontal flex row matching GP and wholesale layout */
.nav-menu {
    display: flex;
    align-items: center;   /* center-align so links are pill buttons, not stretched blocks */
    gap: 8px;
}

/* Individual nav item links — pill button style matching amaadesigns.com and wholesale */
.nav-link {
    display: block;
    padding: 8px 12px;             /* compact padding like GP/wholesale */
    color: var(--color-nav-text);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 14px;           /* rounded pill shape */
    border: 1px solid rgba(255, 255, 255, 0.2);  /* subtle border like GP/wholesale */
    white-space: nowrap;
}

.nav-link:hover {
    background-color: var(--color-nav-hover-bg);
    color: var(--color-nav-hover);
}

/* "Book Now" — dusty rose highlight, pushed to the right */
.nav-link--cta {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    margin-left: auto;
    border-color: transparent;
}

.nav-link--cta:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-text-inverse);
}

/* "My Account" — lighter tone, sits after the CTA */
.nav-link--account {
    color: var(--color-primary-light);
    font-size: 0.8rem;
    opacity: 0.9;
}

.nav-link--account:hover {
    color: var(--color-nav-hover);
    background-color: var(--color-nav-hover-bg);
}


/* ============================================================
   7. SITE FOOTER
   Three-column grid: brand, quick links, services list.
   ============================================================ */

.site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding-top: var(--space-3xl);
}

/* Three equal columns */
.footer-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

/* Footer brand name */
.footer-brand {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary-light);
    display: block;
    margin-bottom: var(--space-sm);
}

.footer-tagline {
    font-size: var(--text-sm);
    color: var(--color-footer-muted);
    margin-bottom: var(--space-md);
}

/* Phone link in footer */
.footer-phone {
    display: block;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-primary-light);
    text-decoration: none;
}

.footer-phone:hover {
    color: var(--color-accent);
}

/* Column heading label */
.footer-heading {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-footer-muted);
    margin-bottom: var(--space-md);
}

/* Vertical list of links or items */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links li,
.footer-links a {
    font-size: var(--text-sm);
    color: var(--color-footer-text);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-primary-light);
}

/* Bottom bar — copyright and main site link */
.footer-bottom {
    border-top: 1px solid var(--color-footer-border);
    padding: var(--space-lg) 0;
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.footer-bottom p {
    font-size: var(--text-sm);
    color: var(--color-footer-muted);
}

.footer-main-link {
    color: var(--color-primary-light);
    text-decoration: none;
}

.footer-main-link:hover {
    color: var(--color-accent);
}


/* ============================================================
   8. HERO SECTION
   Full-width banner with brand intro, tagline, and CTA buttons.
   ============================================================ */

.hero {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-divider);
    padding: var(--space-4xl) 0;
    text-align: center;
}

/* Constrain inner content to a readable width */
.hero-inner {
    max-width: 720px;
    margin-inline: auto;
}

/* Large serif heading */
.hero-title {
    font-size: var(--text-5xl);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-lg);
    line-height: 1.15;
}

.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xl);
    max-width: 560px;
    margin-inline: auto;
    line-height: 1.7;
}

/* Side-by-side CTA buttons, centered */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}


/* ============================================================
   9. SECTION BASE STYLES
   Shared padding and heading/subtitle styles for content sections.
   ============================================================ */

.section {
    padding: var(--space-3xl) 0;
}

/* Centered section heading */
.section-title {
    font-size: var(--text-3xl);
    text-align: center;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-sm);
}

/* Centered section descriptor */
.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-2xl);
}


/* ============================================================
   10. SERVICE PACKAGE CARDS
   Three-column grid of packages, each with a name, price, and CTA.
   ============================================================ */

.packages {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}

/* Three equal columns */
.package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

/* Individual package card */
.package-card {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    overflow: hidden;
}

/* Featured card — highlighted with primary color border and tinted background */
.package-card--featured {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

/* Inner padding and vertical layout */
.package-card-inner {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg);
    height: 100%;
}

/* Package name */
.package-name {
    font-size: var(--text-xl);
    color: var(--color-primary-dark);
    line-height: 1.3;
}

/* Price display block */
.package-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.price-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.price-amount {
    font-size: var(--text-4xl);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1;
}


/* ============================================================
   11. SUPPORT SERVICES LIST
   Pill-style tags listing additional services.
   ============================================================ */

.support-services {
    background-color: var(--color-accent-light);
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}

/* Centered, wrapping row of pill tags */
.support-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

/* Individual service pill */
.support-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text);
}


/* ============================================================
   12. CTA SECTION
   Dark lavender band with phone number and booking button.
   ============================================================ */

.cta-section {
    background-color: var(--color-primary-dark);
    text-align: center;
}

/* Vertically stacked, centered content */
.cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.cta-title {
    font-size: var(--text-3xl);
    color: var(--color-text-inverse);
}

.cta-text {
    font-size: var(--text-lg);
    color: var(--color-primary-light);
    line-height: 1.7;
}

/* Large clickable phone number */
.cta-phone {
    margin: 0;
}

.cta-phone-link {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary-light);
    text-decoration: none;
}

.cta-phone-link:hover {
    color: var(--color-accent-light);
}

/* CTA button — rose accent on dark lavender background */
.cta-section .btn--primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.cta-section .btn--primary:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}


/* ============================================================
   13. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Tablet: collapse package grid and footer columns --- */
@media (max-width: 900px) {

    .hero-title {
        font-size: var(--text-4xl);
    }

    /* Packages stack into a single centered column */
    .package-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-inline: auto;
    }

    /* Footer columns stack vertically */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Mobile: hamburger nav, smaller type, tighter spacing --- */
@media (max-width: 600px) {

    .hero {
        padding: var(--space-2xl) 0;
    }

    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-subtitle {
        font-size: var(--text-base);
    }

    .section {
        padding: var(--space-2xl) 0;
    }

    .section-title {
        font-size: var(--text-2xl);
    }

    /* Header wraps so nav-menu drops below the brand/hamburger row when open */
    .header-inner {
        flex-wrap: wrap;
    }

    /* Show hamburger label */
    .nav-toggle-label {
        display: flex;
    }

    /* Hide nav menu by default on mobile */
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    /* Reveal nav menu when the checkbox is checked (hamburger tapped) */
    .nav-toggle:checked ~ .nav-menu {
        display: flex;
    }

    /* Full-width nav links stacked vertically on mobile */
    .nav-link {
        padding: var(--space-md);
        border-radius: 0;                                  /* flat on mobile — stacked list */
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);  /* separator between items */
    }

    /* Reset "Book Now" auto-margin so it does not shift right */
    .nav-link--cta {
        margin-left: 0;
    }

    .cta-phone-link {
        font-size: var(--text-xl);
    }
}

/* ============================================================
   HAMBURGER DRAWER NAV
   Slide-in panel from the left, triggered by 🍔 button in the header
   ============================================================ */

/* 🍔 toggle button in the header */
.burgerBtn {
    background: var(--color-nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--color-nav-text);
    font-size: 22px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    font-family: inherit;
}

/* Dark overlay — covers page behind the open drawer */
.burgerOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    /* Above the sticky header (9999) so overlay covers it when drawer is open */
    z-index: 10010;
}
.burgerOverlay.open { display: block; }

/* Slide-in drawer panel */
.burgerDrawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 260px;
    background: var(--color-nav-bg);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    /* Above the overlay (10010) so drawer sits on top of everything */
    z-index: 10011;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px 16px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}
.burgerDrawer.open { transform: translateX(0); }

/* Links inside the drawer — inherit .nav-link but override border for dark bg */
.burgerDrawer .nav-link {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
.burgerDrawer .nav-link:hover {
    background: var(--color-nav-hover-bg);
    color: var(--color-nav-hover);
}


/* ============================================================
   DARK MODE SUPPORT
   Overrides the light CSS custom properties with dark equivalents.
   The site's nav/footer already use a dark purple background and
   require no changes. Elements that DO need fixing are the white/
   near-white page and card backgrounds, light text, and light borders.
   Color-scheme:light dark declared so browsers use appropriate UI chrome.
   ============================================================ */
:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* --- Backgrounds --- */
        --color-bg:            #1a1128;   /* deep dark purple-black */
        --color-surface:       #231637;   /* dark card and panel background */
        --color-surface-alt:   #1e1032;   /* slightly darker alternate section bg */

        /* --- Brand / Primary --- */
        --color-primary:       #c0a8f0;   /* lightened lavender for visibility on dark */
        --color-primary-dark:  #d4bbf8;   /* even lighter — used for headings */
        --color-primary-light: #3a2260;   /* darkened — used for tinted card backgrounds */

        /* --- Accent --- */
        --color-accent:        #e8b5cc;   /* lighter rose for visibility on dark */
        --color-accent-dark:   #f0c4d8;   /* even lighter */
        --color-accent-light:  #2a1838;   /* dark rose-tinted section background */

        /* --- Text --- */
        --color-text:          #ede8ff;   /* near-white lavender for body text */
        --color-text-muted:    #a898c8;   /* muted lavender for secondary text */
        --color-text-inverse:  #1a1128;   /* dark text for use on light-colored buttons */

        /* --- Borders --- */
        --color-border:        #4a3568;   /* visible border on dark surfaces */
        --color-divider:       #3d2a5a;   /* subtle section divider */

        /* --- Header (already dark purple, keep consistent) --- */
        --color-header-bg:     #1a1128;
        --color-header-border: #3d2a5a;

        /* --- Footer (already dark purple, slight adjustment) --- */
        --color-footer-bg:     #3a2460;
        --color-footer-text:   #e0d4ff;
        --color-footer-muted:  #9b7fd4;
        --color-footer-border: #2a1848;
    }

    /* ── Hero section — already inherits updated --color-surface-alt ── */
    .hero {
        border-bottom-color: var(--color-divider);
    }

    /* ── Package cards — white bg needs to flip dark ── */
    .package-card {
        background-color: var(--color-surface);
        border-color:     var(--color-border);
    }

    /* Featured card — tinted highlight in dark mode */
    .package-card--featured {
        background-color: var(--color-primary-light);
        border-color:     var(--color-primary);
    }

    /* ── Support service pills — white bg needs to flip dark ── */
    .support-item {
        background-color: var(--color-surface);
        border-color:     var(--color-border);
        color:            var(--color-text);
    }

    /* ── Packages section outer bg ── */
    .packages {
        background-color: var(--color-surface);
        border-top-color:    var(--color-divider);
        border-bottom-color: var(--color-divider);
    }

    /* ── Support services outer bg ── */
    .support-services {
        border-top-color:    var(--color-divider);
        border-bottom-color: var(--color-divider);
    }

    /* ── Outline button — ensure border is visible on dark bg ── */
    .btn--outline {
        border-color: var(--color-primary);
        color:        var(--color-primary);
    }

    .btn--outline:hover {
        background-color: var(--color-primary);
        color:            var(--color-text-inverse);
    }
}