/* ===========================
   AMAA Designs — Wholesale Stylesheet
   wholesale.amaadesigns.com

   Palette: medium purple (#795BC0)
   Visually between the GP site's dark purple (#321c81, L=31%)
   and the wedding site's soft lavender (#9B7FD4, L=66%).
   Wholesale sits at L=56% — clearly lighter than GP, clearly
   more saturated than the wedding pastels.

   Sections:
     1.  CSS Custom Properties
     2.  Reset & Base
     3.  Layout Utilities
     4.  Site Header
     5.  Navigation (hamburger on mobile)
     6.  Site Footer
     7.  Hero Section
     8.  Card Component
     9.  Button Component
     10. Form Inputs
     11. Typography Utilities
     12. Notice / Alert Box
     13. Responsive Breakpoints
   =========================== */


/* ===========================
   1. CSS CUSTOM PROPERTIES
   Wholesale palette sits between GP dark purple and wedding soft lavender.
   GP bg: #321c81 (L=31%) | Wedding primary: #9B7FD4 (L=66%) | Wholesale: #795BC0 (L=56%)
   =========================== */
:root {
    /* --- Brand/Background --- */
    --ws-bg:              #795BC0;   /* medium purple — main background and header */
    --ws-bg-hover:        #8668C5;   /* brighter purple — nav/button hover state */

    /* --- Text on dark backgrounds --- */
    --ws-ink:             #ffffff;
    --ws-muted:           rgba(255, 255, 255, 0.70);

    /* --- Text on light backgrounds (cards) --- */
    --ws-ink-dark:        #1b1b1b;
    --ws-muted-dark:      rgba(0, 0, 0, 0.65);

    /* --- Card surfaces --- */
    --ws-card:            rgba(255, 255, 255, 0.90);
    --ws-card2:           rgba(255, 255, 255, 0.95);

    /* --- Borders and dividers --- */
    --ws-line:            rgba(255, 255, 255, 0.20);  /* dividers on dark bg */
    --ws-line-dark:       rgba(0, 0, 0, 0.12);        /* dividers inside cards */

    /* --- Accent for badges/highlights --- */
    --ws-accent:          #C4B0E8;   /* pale lavender — sits between GP white and wedding #E8DEFF */

    /* --- Shape and shadow --- */
    --ws-radius:          18px;
    --ws-shadow:          0 18px 40px rgba(0, 0, 0, 0.14);

    /* --- Layout --- */
    --ws-max:             1100px;

    /* --- Typography --- */
    --ws-font:            'Playfair Display', Georgia, serif;
}

/* Google Fonts — Playfair Display, matching the GP site */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');


/* ===========================
   2. RESET & BASE
   =========================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    font-family: var(--ws-font);
    font-size: 16px;
    color: var(--ws-ink);
    background: var(--ws-bg);
    padding-top: 120px;   /* space for fixed header */
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}


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

/* Centers content with max-width */
.container {
    max-width: var(--ws-max);
    margin: 0 auto;
    padding: 0 16px;
}

/* Responsive 3-column grid, collapses to 2 then 1 */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

/* Horizontal flex row */
.row {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Horizontal rule divider */
.hr {
    height: 1px;
    background: rgba(255, 255, 255, 0.20);
    margin: 14px 0;
}


/* ===========================
   4. SITE HEADER
   Fixed top bar — wholesale purple with blur backdrop.
   =========================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--ws-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ws-line);
    min-height: 85px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Inner header flex row: logo left, nav right */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    min-height: 85px;
}

/* Brand name link */
.brand-link {
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.2px;
    text-decoration: none;
    color: var(--ws-ink);
    padding: 8px 10px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Sub-label below brand name */
.brand-sub {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-muted);
}


/* ===========================
   5. NAVIGATION
   Desktop: horizontal pill links.
   Mobile: hamburger toggle (CSS-only checkbox pattern).
   =========================== */

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

/* Hamburger icon — only visible on mobile */
.nav-toggle-label {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--ws-ink);
    border: 1px solid var(--ws-line);
    border-radius: 10px;
}

/* Three horizontal bars */
.hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ws-ink);
    border-radius: 2px;
}

/* Nav link list — horizontal on desktop */
.site-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Individual nav link */
.nav-link {
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--ws-bg);
    border: 1px solid var(--ws-line);
    color: var(--ws-ink);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

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

/* Current page indicator */
.nav-link.active {
    background: var(--ws-bg-hover);
    outline: 2px solid rgba(255, 255, 255, 0.25);
}


/* ===========================
   6. SITE FOOTER
   Three-column grid: brand, quick links, account links.
   =========================== */
.site-footer {
    border-top: 1px solid var(--ws-line);
    background: var(--ws-bg);
    padding: 36px 0 0;
}

/* Three-column footer grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 24px;
    padding-bottom: 28px;
}
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* Footer column heading */
.footer-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ws-muted);
    margin-bottom: 12px;
}

/* Footer link list — vertical */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links li,
.footer-links a {
    font-size: 14px;
    color: var(--ws-muted);
}

.footer-links a:hover {
    color: var(--ws-ink);
    text-decoration: underline;
}

/* Footer brand name */
.footer-brand {
    font-size: 18px;
    font-weight: 900;
    color: var(--ws-ink);
    display: block;
    margin-bottom: 6px;
}

/* Footer tagline / descriptor */
.footer-tagline {
    font-size: 13px;
    color: var(--ws-muted);
    margin-bottom: 10px;
}

/* Bottom bar — copyright and admin link */
.footer-bottom {
    border-top: 1px solid var(--ws-line);
    padding: 16px 0;
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-bottom p {
    font-size: 13px;
    color: var(--ws-muted);
}

/* Admin / site links in footer bottom bar */
.footer-admin-link {
    color: var(--ws-muted);
    text-decoration: none;
    font-size: 13px;
}

.footer-admin-link:hover {
    color: var(--ws-ink);
    text-decoration: underline;
}

/* Separator dot between footer links */
.footer-sep {
    color: var(--ws-muted);
    font-size: 12px;
    padding: 0 4px;
    user-select: none;
}


/* ===========================
   7. HERO SECTION
   Full-width banner with value proposition and CTAs.
   =========================== */
.hero {
    padding: 56px 0 64px;
    text-align: center;
}

/* Constrain hero text to readable width */
.hero-inner {
    max-width: 700px;
    margin: 0 auto;
}

/* Eyebrow label above the title */
.hero-kicker {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ws-muted);
    margin-bottom: 12px;
}

/* Large serif hero title */
.hero-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--ws-ink);
    margin-bottom: 16px;
}

/* Hero subtitle / description */
.hero-subtitle {
    font-size: 18px;
    color: var(--ws-muted);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Side-by-side CTA buttons */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Value prop grid below hero */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 48px;
}
@media (max-width: 720px) { .value-grid { grid-template-columns: 1fr; } }


/* ===========================
   8. CARD COMPONENT
   Light-background cards with dark text (same pattern as GP site).
   =========================== */
.card {
    background: var(--ws-card);
    border: 1px solid var(--ws-line-dark);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow);
    color: var(--ws-ink-dark);
}

.card-pad {
    padding: 20px;
}

.card-pad-sm {
    padding: 14px;
}

/* Override text colors inside cards for dark-on-light contrast */
.card .muted  { color: var(--ws-muted-dark); }
.card .hr     { background: var(--ws-line-dark); }
.card .kicker { color: var(--ws-muted-dark); }


/* ===========================
   9. BUTTON COMPONENT
   Primary action button — wholesale purple, same shape as GP site.
   =========================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid var(--ws-line-dark);
    background: var(--ws-bg);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 14px;
    font-weight: 800;
    font-family: var(--ws-font);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn:hover {
    background: var(--ws-bg-hover);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Outlined / ghost button variant */
.btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.45);
    color: var(--ws-ink);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.10);
}


/* ===========================
   10. FORM INPUTS
   White inputs with dark text — same as GP site pattern.
   =========================== */
.input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--ws-line-dark);
    background: #ffffff;
    color: var(--ws-ink-dark);
    font-family: var(--ws-font);
    font-size: 15px;
}

.input::placeholder {
    color: rgba(0, 0, 0, 0.38);
}

/* Label above each input */
.field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ws-muted-dark);
    margin-bottom: 5px;
}

/* Spacing between form fields */
.field {
    margin-bottom: 14px;
}

/* Select dropdown — same styling as text input */
select.input {
    appearance: none;
    cursor: pointer;
}


/* ===========================
   11. TYPOGRAPHY UTILITIES
   =========================== */
.kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.70;
}

.h1 { font-size: 34px; margin: 10px 0 8px; }
.h2 { font-size: 24px; margin: 0; }
.h3 { font-size: 18px; margin: 0; }

.p {
    line-height: 1.55;
    color: var(--ws-muted);
    margin: 8px 0;
}

.small {
    font-size: 13px;
    color: var(--ws-muted);
}

/* Success and error notice text */
.text-success { color: #28a745; font-weight: 700; }
.text-error   { color: #dc3545; font-weight: 700; }


/* ===========================
   12. NOTICE / ALERT BOX
   Used for confirmation messages and inline errors.
   Used both standalone on the dark purple page and inside light cards.
   Default styling targets the dark purple page background.
   =========================== */
.notice {
    background: rgba(255, 255, 255, 0.08); /* subtle tint visible on dark bg */
    border: 1px dashed var(--ws-line);     /* white-ish border readable on dark bg */
    border-radius: 14px;
    padding: 14px 16px;
    color: var(--ws-ink); /* white text — readable on dark purple background */
    font-size: 14px;
    line-height: 1.6;
}
/* When .notice sits inside a light card, restore dark text and dark border */
.card .notice {
    color: var(--ws-muted-dark);
    border-color: var(--ws-line-dark);
}

/* Success variant — green tint with readable text on dark bg */
.notice-success {
    background: rgba(40, 167, 69, 0.12);
    border-color: rgba(40, 167, 69, 0.45);
    color: #8fdf9a; /* light green — readable on dark purple background */
}

/* Error variant — red tint with readable text on dark bg */
.notice-error {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.45);
    color: #f5a0a8; /* light red/pink — readable on dark purple background */
}


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

/* --- Tablet (768px) --- */
@media (max-width: 768px) {

    /* Reduce body padding for shorter header */
    body {
        padding-top: 80px;
    }

    /* Header stacks logo above nav */
    .site-header {
        min-height: auto;
    }

    .header-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
        min-height: auto;
    }

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

    /* Hide nav menu by default on mobile */
    .site-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 6px;
        padding-bottom: 10px;
    }

    /* Reveal nav when checkbox is checked (hamburger tapped) */
    .nav-toggle:checked ~ .header-inner .site-nav,
    .nav-toggle:checked + .header-inner .site-nav {
        display: flex;
    }

    /* Full-width nav links on mobile */
    .nav-link {
        width: 100%;
        text-align: center;
        padding: 10px 12px;
    }

    /* Hero — smaller type */
    .hero-title    { font-size: 30px; }
    .hero-subtitle { font-size: 16px; }

    /* Footer grid — single column */
    .footer-grid { gap: 24px; }

    /* Typography */
    .h1 { font-size: 26px; }
    .h2 { font-size: 20px; }
}

/* --- Mobile (480px) --- */
@media (max-width: 480px) {

    body { padding-top: 70px; }

    .header-inner { padding: 8px 10px; }

    .brand-link { font-size: 18px; }

    .hero { padding: 36px 0 44px; }
    .hero-title    { font-size: 24px; }
    .hero-subtitle { font-size: 15px; margin-bottom: 24px; }

    .container { padding: 0 10px; }

    .card-pad    { padding: 14px; }
    .card-pad-sm { padding: 10px; }

    .btn { padding: 10px 14px; font-size: 14px; }

    .input {
        padding: 12px 14px;
        font-size: 16px;  /* prevents iOS zoom on focus */
    }

    select.input { font-size: 16px; }

    /* Footer bottom bar — stack on very small screens */
    .footer-bottom .container {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===========================
   Hamburger Drawer Nav
   Slide-in panel from the left, triggered by 🍔 button in the header
   =========================== */

/* 🍔 toggle button in the header */
.burgerBtn {
    background: var(--ws-bg);
    border: 1px solid var(--ws-line);
    color: var(--ws-ink);
    font-size: 22px;
    padding: 6px 10px;
    border-radius: 14px;
    cursor: pointer;
    line-height: 1;
    font-family: var(--ws-font);
}

/* 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(--ws-bg);
    border-right: 1px solid var(--ws-line);
    /* Above the overlay (10010) so drawer sits on top of everything */
    z-index: 10011;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 16px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}
.burgerDrawer.open { transform: translateX(0); }

/* Links inside the drawer — hover matches nav hover */
.burgerDrawer .nav-link:hover {
    background: var(--ws-bg-hover);
}


/* ===========================
   Dark Mode — Color Scheme Declaration
   The wholesale site uses a medium purple background by default,
   making it inherently dark-mode friendly. Declaring color-scheme:dark
   tells browsers not to apply forced dark mode transformations that
   can mangle explicit colors (buttons, cards, form inputs).
   =========================== */
:root {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    /* Cards have explicit near-white backgrounds by design and remain
       light even in OS dark mode — providing clear contrast against the
       medium purple page. Reduce opacity slightly so they are less
       jarring on screens used in dark environments. */
    .card {
        background: rgba(255, 255, 255, 0.82);
    }

    /* Inputs stay white — they sit inside cards and the contrast is
       intentional. Browser dark UI chrome (cursor, caret) will use
       dark mode styling automatically due to color-scheme:dark. */
}