/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  Quiet Corners of Australia — Light Theme System
 *  Complete audit & rebuild — all fixes scoped to [data-theme="light"]
 *  Dark theme is completely untouched.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Fix Map:
 *  1.  Dedicated theme tokens         — :root / [data-theme="light"] override
 *  2.  Hero overlay                   — lighter gradient, image visible
 *  3.  Glassmorphism cards            — warm ivory glass, not muddy grey
 *  4.  Contact card readability       — WCAG AA compliant text
 *  5.  Dropdown zig-zag fix           — clean select, no inherited pattern
 *  6.  Input fields                   — white bg, visible borders & focus
 *  7.  Form hierarchy / depth         — outer vs inner card distinction
 *  8.  Secondary button               — stronger border, better hover
 *  9.  Overlay text contrast          — phone, email, address readable
 *  10. Accessibility — focus rings, keyboard nav, reduced motion
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. DEDICATED LIGHT THEME TOKENS
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* backgrounds */
  --light-bg:           #F8F5F0;
  --light-bg-alt:       #F0EBE3;
  --light-card:         #FFFFFF;
  --light-card-warm:    #FDFAF6;
  --light-card-inner:   #F8F5F0;

  /* inputs */
  --light-input:        #FFFFFF;
  --light-input-hover:  #FAFAF8;

  /* borders */
  --light-border:       #E5DFD4;
  --light-border-focus: #1F4D3A;
  --light-border-input: rgba(31,77,58,0.22);

  /* text */
  --light-text:         #1A2420;
  --light-text-heading: #1F4D3A;
  --light-muted:        #5C5C5C;
  --light-subtle:       #7A756E;
  --light-placeholder:  #9A9590;

  /* accent */
  --light-accent:       #1F4D3A;
  --light-gold:         #B8882E;

  /* glass surface (luxury grade) */
  --light-glass:        rgba(255,255,255,0.72);
  --light-glass-border: rgba(255,255,255,0.45);
  --light-glass-shadow: 0 8px 32px rgba(31,77,58,0.10), 0 2px 8px rgba(0,0,0,0.06);

  /* glass surface on dark overlay sections */
  --light-overlay-glass:        rgba(255,255,255,0.82);
  --light-overlay-glass-border: rgba(31,77,58,0.18);
  --light-overlay-glass-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);

  /* contact-section overlay text (on dark bg image) */
  --light-overlay-heading:  #FFFFFF;
  --light-overlay-body:     rgba(255,255,255,0.92);
  --light-overlay-muted:    rgba(255,255,255,0.75);
  --light-overlay-label:    #DCC7A1;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. HERO SECTION — reduce overlay, let image breathe
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .hero__overlay {
  background:
    linear-gradient(105deg, rgba(22,58,44,0.32) 0%, rgba(22,58,44,0.12) 40%, transparent 65%),
    linear-gradient(to top, rgba(22,58,44,0.28) 0%, transparent 46%);
}

[data-theme="light"] .hero__bg::after {
  background: linear-gradient(to top, rgba(22,58,44,0.18) 0%, transparent 100%);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. CONTACT SECTION — glassmorphism premium upgrade
   ───────────────────────────────────────────────────────────────────────── */

/* Remove previous partial fix — superseded by rules below */

/* --- Overlay text: headings, desc, labels still on dark bg image --- */
[data-theme="light"] .contact__title {
  color: var(--light-overlay-heading);
  text-shadow: 0 2px 16px rgba(14,24,20,0.45);
}
[data-theme="light"] .contact__desc {
  color: var(--light-overlay-body);
}
[data-theme="light"] .contact__eyebrow {
  color: var(--light-overlay-label);
}

/* --- Quick contact card --- */
[data-theme="light"] .contact__quick-card {
  background: var(--light-overlay-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--light-overlay-glass-border);
  box-shadow: var(--light-overlay-glass-shadow);
}
[data-theme="light"] .contact__quick-heading {
  color: var(--light-text-heading);
}
[data-theme="light"] .contact__quick-label {
  color: var(--light-gold);
  letter-spacing: 0.12em;
}
/* WCAG AA: phone, email, address — dark text on white glass */
[data-theme="light"] .contact__quick-value {
  color: var(--light-text);
  font-weight: 500;
}
[data-theme="light"] a.contact__quick-value {
  color: var(--light-accent);
}
[data-theme="light"] a.contact__quick-value:hover {
  color: #163A2C;
  text-decoration: underline;
}
[data-theme="light"] .contact__quick-icon {
  background: rgba(31,77,58,0.10);
  color: var(--light-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   4. FORM CARD — depth hierarchy: outer glass → inner ivory card
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .contact__form-card {
  background: var(--light-overlay-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--light-overlay-glass-border);
  box-shadow: var(--light-overlay-glass-shadow);
}
[data-theme="light"] .contact__form-title {
  color: var(--light-text-heading);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

/* --- Inner form grid: slightly warmer background for depth --- */
[data-theme="light"] .contact__form-grid {
  background: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. INPUT FIELDS — white bg, visible border, no disabled look
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .contact__input-wrap input,
[data-theme="light"] .contact__input-wrap textarea {
  background: var(--light-input);
  color: var(--light-text);
  border: 1.5px solid var(--light-border-input);
  border-radius: 10px;
  min-height: 48px;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
[data-theme="light"] .contact__input-wrap input::placeholder,
[data-theme="light"] .contact__input-wrap textarea::placeholder {
  color: var(--light-placeholder);
  opacity: 1;
}
[data-theme="light"] .contact__input-wrap input:hover,
[data-theme="light"] .contact__input-wrap textarea:hover {
  border-color: rgba(31,77,58,0.38);
}
[data-theme="light"] .contact__input-wrap input:focus,
[data-theme="light"] .contact__input-wrap textarea:focus {
  outline: none;
  border-color: var(--light-border-focus);
  box-shadow: 0 0 0 3px rgba(31,77,58,0.14);
  background: var(--light-input);
}

/* --- Icon colours --- */
[data-theme="light"] .contact__input-icon {
  color: rgba(31,77,58,0.50);
}

/* --- Date input --- */
[data-theme="light"] .contact__input-wrap input[type="date"] {
  color: var(--light-text);
}
[data-theme="light"] .contact__input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.6;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────
   5b. DROPDOWN FIX — destroy zig-zag, clean luxury select
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .contact__input-wrap select {
  /* Reset ALL background properties — kill any inherited pattern */
  background-color: var(--light-input) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231F4D3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px 8px !important;
  color: var(--light-text);
  border: 1.5px solid var(--light-border-input);
  border-radius: 10px;
  min-height: 48px;
  padding-right: 2.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="light"] .contact__input-wrap select:hover {
  border-color: rgba(31,77,58,0.38);
}
[data-theme="light"] .contact__input-wrap select:focus {
  outline: none;
  border-color: var(--light-border-focus);
  box-shadow: 0 0 0 3px rgba(31,77,58,0.14);
}
/* Fix option dropdown on Windows */
[data-theme="light"] .contact__input-wrap select option {
  background: #FFFFFF;
  color: #1A2420;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. FORM ACTION BUTTONS
   ───────────────────────────────────────────────────────────────────────── */
/* WhatsApp — keep as-is */
[data-theme="light"] .contact__btn--whatsapp {
  background: #25D366;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(37,211,102,0.3);
}
[data-theme="light"] .contact__btn--whatsapp:hover {
  background: #1ebe5a;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.4);
}

/* Secondary / Messenger — stronger, visible on white glass */
[data-theme="light"] .contact__btn--messenger {
  background: transparent;
  color: var(--light-accent);
  border: 2px solid var(--light-accent);
  font-weight: 600;
}
[data-theme="light"] .contact__btn--messenger:hover {
  background: var(--light-accent);
  color: #FFFFFF;
  border-color: var(--light-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(31,77,58,0.25);
}

/* ─────────────────────────────────────────────────────────────────────────
   7. BOTTOM ROW CARDS — video & social
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .contact__video-card,
[data-theme="light"] .contact__social-card {
  background: var(--light-overlay-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--light-overlay-glass-border);
  box-shadow: var(--light-overlay-glass-shadow);
}
[data-theme="light"] .contact__video-title,
[data-theme="light"] .contact__social-title {
  color: var(--light-text-heading);
}
[data-theme="light"] .contact__video-desc {
  color: var(--light-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   8. BOOKING ENGINE FORM FIELDS (multi-step engine inside rooms section)
      Fix Room Type + Duration dropdowns — zig-zag / inherited pattern
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .form-sel,
[data-theme="light"] .form-inp,
[data-theme="light"] .form-txa {
  background-color: var(--light-input);
  color: var(--light-text);
  border: 1.5px solid rgba(31,77,58,0.18);
}
[data-theme="light"] .form-sel {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231F4D3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  -webkit-appearance: none;
  appearance: none;
}
[data-theme="light"] .form-sel option {
  background: #FFFFFF;
  color: #1A2420;
}
[data-theme="light"] .form-inp:focus,
[data-theme="light"] .form-sel:focus,
[data-theme="light"] .form-txa:focus {
  border-color: var(--light-accent);
  box-shadow: 0 0 0 3px rgba(31,77,58,0.12);
}
[data-theme="light"] .form-lbl {
  color: var(--light-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   9. GENERAL FORM ELEMENTS (layout.css .form-group)
      Covers any other form groups not in the contact section
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
  background: var(--light-input);
  color: var(--light-text);
  border-color: var(--light-border-input);
}
[data-theme="light"] .form-group select {
  background-color: var(--light-input);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231F4D3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  color: var(--light-text);
  border-color: var(--light-border-input);
  -webkit-appearance: none;
  appearance: none;
}
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
  color: var(--light-placeholder);
}
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] .form-group select:focus {
  outline: none;
  border-color: var(--light-accent);
  box-shadow: 0 0 0 3px rgba(31,77,58,0.12);
}

/* ─────────────────────────────────────────────────────────────────────────
   10. BOOKING SECTION FORMS (luxury.css .booking__form)
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .booking__form .form-group input,
[data-theme="light"] .booking__form .form-group textarea {
  background: #FFFFFF;
  color: #1A2420;
  border: 1.5px solid rgba(31,77,58,0.18);
}
[data-theme="light"] .booking__form .form-group select {
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231F4D3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px 8px !important;
  color: #1A2420;
  border: 1.5px solid rgba(31,77,58,0.18);
  -webkit-appearance: none;
  appearance: none;
}
[data-theme="light"] .booking__form .form-group select option {
  background: #FFFFFF;
  color: #1A2420;
}
[data-theme="light"] .booking__form .form-group input:focus,
[data-theme="light"] .booking__form .form-group textarea:focus,
[data-theme="light"] .booking__form .form-group select:focus {
  border-color: #C89B3C;
  box-shadow: 0 0 0 3px rgba(200,155,60,0.16);
}

/* ─────────────────────────────────────────────────────────────────────────
   11. CALENDAR ROOM SELECT DROPDOWN (inside visual calendar header)
   ───────────────────────────────────────────────────────────────────────── */
/* Calendar sits on dark green header — keep as-is, no override needed */

/* ─────────────────────────────────────────────────────────────────────────
   12. ENGINE WRAP & BOOKING ENGINE (rooms section)
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .engine-wrap {
  background: var(--light-card);
  border-color: var(--light-border);
  box-shadow: 0 4px 24px rgba(31,77,58,0.08);
}
[data-theme="light"] .engine-title {
  color: var(--light-text-heading);
}

/* ─────────────────────────────────────────────────────────────────────────
   13. PRICING CARDS
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .pricing-card {
  background: var(--light-card);
}
[data-theme="light"] .pricing-card--featured {
  background: var(--light-card);
  border-color: #C89B3C;
}

/* ─────────────────────────────────────────────────────────────────────────
   14. GENERAL SURFACE OVERRIDES — section backgrounds & cards
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .about {
  background: var(--light-bg);
}
[data-theme="light"] .about__highlight {
  background: var(--light-card);
}
[data-theme="light"] .feature-card {
  background: var(--light-card);
}
[data-theme="light"] .testimonial-card {
  background: var(--light-card);
}
[data-theme="light"] .pricing__tier-table {
  background: var(--light-card);
}
[data-theme="light"] .pricing__tier-title,
[data-theme="light"] .pricing__tier-header {
  background: var(--light-bg-alt);
}
[data-theme="light"] .review-item {
  background: var(--light-bg-alt);
}
[data-theme="light"] .byo-row {
  background: rgba(200,155,60,0.08);
}
[data-theme="light"] .byo-row:hover {
  background: rgba(200,155,60,0.15);
}

/* ─────────────────────────────────────────────────────────────────────────
   15. ACCESSIBILITY — focus rings (visible keyboard navigation)
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] *:focus-visible {
  outline: 2px solid #1F4D3A;
  outline-offset: 3px;
}
[data-theme="light"] .contact__input-wrap input:focus-visible,
[data-theme="light"] .contact__input-wrap select:focus-visible,
[data-theme="light"] .contact__input-wrap textarea:focus-visible,
[data-theme="light"] .form-inp:focus-visible,
[data-theme="light"] .form-sel:focus-visible,
[data-theme="light"] .form-txa:focus-visible {
  outline: none; /* box-shadow focus ring already applied above */
}
[data-theme="light"] .contact__btn:focus-visible,
[data-theme="light"] .btn:focus-visible {
  outline: 2px solid #1F4D3A;
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────
   16. REDUCED MOTION — respect system preference
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] *,
  [data-theme="light"] *::before,
  [data-theme="light"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   17. MOBILE RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  [data-theme="light"] .contact__form-card {
    padding: 1.25rem;
  }
  [data-theme="light"] .contact__form-actions {
    grid-template-columns: 1fr;
  }
  [data-theme="light"] .contact__btn {
    width: 100%;
  }
}