/* ============================================================
   styles.css — JStudio Party Rentals · Coming Soon Page
   ============================================================
   TABLE OF CONTENTS
   ---------------------------------------------------------
   1.  Design Tokens (CSS variables)
   2.  Reset & Base
   3.  Background Effects (grain, glow)
   4.  Page Shell
   5.  Header
   6.  Main Content Area
   7.  Hero — Tagline, Headline, Sub, Location Badge
   8.  Inventory Grid
   9.  Email Form
   10. Countdown Timer
   11. Pricing Strip
   12. Service Area Pills
   13. Social Links
   14. Footer
   15. Analytics Panel
   16. Responsive Breakpoints
   17. Accessibility — Reduced Motion
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   All colours, fonts, spacing, and layout values live here.
   Update this section to retheme the entire page.
   ============================================================ */
:root {
  /* Colours */
  --ink:      #12100e;               /* page background */
  --deep:     #1c1814;               /* card background */
  --gold:     #c9943a;               /* primary accent */
  --gold-lt:  #e2bb72;               /* lighter gold for hover / italic text */
  --cream:    #f8f3ec;               /* body text */
  --muted:    #8a7d70;               /* secondary / caption text */
  --border:   rgba(201, 148, 58, .22); /* gold-tinted dividers */
  --glass:    rgba(255, 255, 255, .05); /* form input background */

  /* Typography */
  --display: 'Cormorant Garamond', Georgia, serif; /* headlines */
  --ui:      'Inter', system-ui, sans-serif;       /* body / UI */

  /* Spacing scale (used for consistent rhythm) */
  --sp-xs: .5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 3rem;
  --sp-xl: 4.5rem;

  /* Layout */
  --max-w: 700px;                        /* content column cap */
  --side:  clamp(1rem, 5vw, 2.5rem);    /* horizontal page padding */
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* prevent iOS font inflation */
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--ui);
  font-weight: 300;
  line-height: 1.65;
  min-height: 100dvh;   /* dvh = dynamic viewport height — fixes mobile browser bars */
  overflow-x: hidden;
}

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


/* ============================================================
   3. BACKGROUND EFFECTS
   ============================================================ */

/* Subtle noise grain — gives the dark background texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

/* Radial gold glow behind the hero */
.glow {
  position: fixed;
  width: min(700px, 140vw);
  height: min(700px, 140vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 148, 58, .07) 0%, transparent 68%);
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}


/* ============================================================
   4. PAGE SHELL
   ============================================================ */
.page {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}


/* ============================================================
   5. HEADER
   ============================================================ */
header {
  padding: clamp(1rem, 3vw, 1.75rem) var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Logo link in header — replaces the old text brand lockup.
   Sized to occupy the same vertical space as the previous
   icon + text combo so the header layout doesn't shift. */
.navLogo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

.navLogo img {
  height: clamp(48px, 10vw, 52px); 
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 50px;
  border-width: 1cap;
  border-color: #c9943a;
}

/* Contact block — hidden on phones, shown on tablet+ */
.header-contact {
  font-size: .72rem;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  display: none;
  line-height: 1.5;
}

.header-contact a {
  color: var(--gold);
  text-decoration: none;
}


/* ============================================================
   6. MAIN CONTENT AREA
   ============================================================ */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 5rem) var(--side) clamp(3rem, 7vw, 5rem);
  width: 100%;
}

/* Cap all direct children to the content column width */
main > * {
  width: 100%;
  max-width: var(--max-w);
}


/* ============================================================
   7. HERO — Tagline, Headline, Sub, Location Badge
   ============================================================ */

/* "Launching 2026" pill with decorative lines */
.tagline-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.tagline-line {
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.tagline {
  font-size: clamp(.6rem, 1.4vw, .68rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* Main headline */
h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 10vw, 6.5rem);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -.01em;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-lt);
}

/* Sub-headline paragraph */
.sub {
  font-size: clamp(.88rem, 2.2vw, 1.05rem);
  color: var(--muted);
  margin-bottom: .85rem;
  line-height: 1.75;
}

/* Location badge pill */
.market-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(201, 148, 58, .1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: clamp(.65rem, 1.4vw, .72rem);
  letter-spacing: .07em;
  color: var(--gold-lt);
  margin-bottom: clamp(2rem, 5vw, 3rem);
  white-space: nowrap;
  align-self: center;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   8. INVENTORY GRID
   Always 3 columns — font sizes scale down via clamp() on
   small screens so cards never collapse or wrap.
   ============================================================ */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  background: var(--border); /* shows through the 1px gaps */
}

.inv-card {
  background: var(--deep);
  padding: clamp(.9rem, 3vw, 1.5rem) clamp(.6rem, 2vw, 1.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  transition: background .2s;
}

.inv-card:hover {
  background: rgba(201, 148, 58, .07);
}

.inv-num {
  font-family: var(--display);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

.inv-label {
  font-size: clamp(.6rem, 1.4vw, .72rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

.inv-price {
  font-size: clamp(.65rem, 1.4vw, .8rem);
  color: var(--gold-lt);
  margin-top: .2rem;
}


/* ============================================================
   9. EMAIL FORM
   ============================================================ */
.form-section {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.form-heading {
  font-family: var(--display);
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
  font-weight: 600;
  margin-bottom: .4rem;
}

.form-caption {
  font-size: clamp(.75rem, 1.8vw, .82rem);
  color: var(--muted);
  margin-bottom: 1.1rem;
  line-height: 1.6;
}

.input-row {
  display: flex;
  gap: .5rem;
  width: 100%;
}

input[type="email"] {
  flex: 1;
  min-width: 0;              /* prevents overflow in flex container */
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 8px;
  padding: .85rem 1rem;
  color: var(--cream);
  font-family: var(--ui);
  font-size: 1rem;           /* 16px — prevents iOS auto-zoom on focus */
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}

input::placeholder {
  color: var(--muted);
}

input:focus {
  border-color: var(--gold);
}

.btn-notify {
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  padding: .85rem 1.4rem;
  font-family: var(--ui);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}

.btn-notify:hover  { background: var(--gold-lt); }
.btn-notify:active { transform: scale(.97); }

/* Success confirmation message (shown after submit) */
.success-msg {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: var(--gold-lt);
  font-size: .9rem;
  margin-top: .6rem;
}

.success-msg.show {
  display: flex;
}


/* ============================================================
   10. COUNTDOWN TIMER
   ============================================================ */
.countdown-label {
  font-size: clamp(.58rem, 1.3vw, .65rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  flex-wrap: nowrap;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(44px, 10vw, 72px);
}

.cd-num {
  font-family: var(--display);
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  display: block;
  width: 100%;
  text-align: center;
}

.cd-lbl {
  font-size: clamp(.5rem, 1.1vw, .6rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
  text-align: center;
}

/* Colon separator between countdown units */
.cd-sep {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  color: var(--border);
  line-height: 1;
  padding-top: .05em;
  flex-shrink: 0;
}


/* ============================================================
   11. PRICING STRIP
   2-column on phones (< 560px), 4-column on tablet+
   ============================================================ */
.pricing-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.price-card {
  background: var(--deep);
  padding: clamp(.9rem, 3vw, 1.4rem) clamp(.6rem, 2vw, 1rem);
  text-align: center;
}

.price-card-label {
  font-size: clamp(.58rem, 1.2vw, .65rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}

.price-card-val {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.5vw, 1.65rem);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

.price-card-note {
  font-size: clamp(.58rem, 1.2vw, .68rem);
  color: var(--muted);
  margin-top: .3rem;
  line-height: 1.4;
}


/* ============================================================
   12. SERVICE AREA PILLS
   ============================================================ */
.area-heading {
  font-size: clamp(.58rem, 1.2vw, .65rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .75rem;
}

.service-area {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.area-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .28rem .85rem;
  font-size: clamp(.62rem, 1.3vw, .7rem);
  letter-spacing: .05em;
  color: var(--muted);
  white-space: nowrap;
}

/* Primary market gets a highlighted gold variant */
.area-pill.primary {
  border-color: rgba(201, 148, 58, .45);
  color: var(--gold-lt);
  background: rgba(201, 148, 58, .07);
}


/* ============================================================
   13. SOCIAL LINKS
   ============================================================ */
.social-row {
  display: flex;
  gap: clamp(.9rem, 3vw, 1.5rem);
  justify-content: center;
}

.soc-link {
  color: var(--muted);
  text-decoration: none;
  font-size: clamp(.65rem, 1.4vw, .72rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  -webkit-tap-highlight-color: transparent;
}

.soc-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}


/* ============================================================
   14. FOOTER
   ============================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: clamp(1rem, 3vw, 1.5rem) var(--side);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: clamp(.6rem, 1.3vw, .68rem);
  color: var(--muted);
  letter-spacing: .05em;
  flex-shrink: 0;
}

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


/* ============================================================
   15. ANALYTICS PANEL
   Triggered by pressing Alt+A (desktop) or Escape to close.
   Floats in bottom-right corner on desktop; full-width
   bottom sheet on mobile.
   ============================================================ */
#apanel {
  display: none;
  position: fixed;
  z-index: 300;
  background: rgba(16, 13, 11, .97);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem 1.4rem;
  backdrop-filter: blur(14px);
  font-size: .78rem;

  /* Desktop: bottom-right corner */
  bottom: 1.25rem;
  right: 1.25rem;
  width: min(280px, calc(100vw - 2rem));
}

#apanel h3 {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
  padding-right: 1.5rem; /* keeps text clear of the close button */
}

.arow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .32rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: var(--muted);
  gap: .5rem;
}

.arow:last-child {
  border: none;
}

.aval {
  color: var(--cream);
  font-weight: 500;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aclose {
  position: absolute;
  top: .7rem;
  right: .9rem;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: .25rem;
  -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   16. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Small phones: stack form, center footer ── */
@media (max-width: 420px) {
  .input-row {
    flex-direction: column;
  }

  .btn-notify {
    width: 100%;
    justify-content: center;
  }
}

/* ── Phones only: center footer, full-width analytics sheet ── */
@media (max-width: 480px) {
  /* Analytics panel becomes a bottom sheet */
  #apanel {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 14px 14px 0 0;
    padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 500px) {
  footer {
    flex-direction: column;
    text-align: center;
    gap: .3rem;
  }
}

/* ── Tablet+: show header contact info ── */
@media (min-width: 540px) {
  .header-contact {
    display: block;
  }
}

/* ── Tablet+: pricing switches from 2×2 to 4-column ── */
@media (min-width: 560px) {
  .pricing-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================
   17. ACCESSIBILITY — REDUCED MOTION
   Respects the user's OS-level "reduce motion" preference.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}