/*
 Theme Name: GeneratePress Child – First Class Limo
 Theme URI: https://firstclasslimo.ch/
 Description: Child theme for an extravagant one-page site (black + gold) on GeneratePress.
 Author: Your Name
 Template: generatepress
 Version: 1.0
 Text Domain: firstclass-child
*/

/* Design tokens (not applied yet — safe for now) */
:root{
  --bg: #141B20;
  --gold: #A88751;
  --gold-dark: #8E7248;
  --gold-light: #D2AA6A;
  --text: #F3EFE7;
  --maxw: 1160px;
}


.container { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.section { padding: 56px 0; }
@media (min-width: 900px){ .section{ padding: 80px 0; } }

/* ==== FLUENT FORMS – First Class Limo (black + gold) ==== */
:root{
  --fcl-bg: #141B20;
  --fcl-panel: #0F1418;        /* glassy panel base */
  --fcl-text: #F3EFE7;
  --fcl-gold: #A88751;
  --fcl-gold-dark: #8E7248;
  --fcl-gold-light: #D2AA6A;
}

/* Panel wrapper (use the section around the form) */
#buchung .container{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(168,135,81,0.35);
  border-radius: 18px;
  padding: 20px 16px;
}
@media (min-width: 900px){
  #buchung .container{ padding: 28px 24px; }
}

/* Inputs */
.ff-el-group input,
.ff-el-group select,
.ff-el-group textarea{
  background: var(--fcl-panel);
  color: var(--fcl-text);
  border: 1px solid #293138;
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.4;
  width: 100%;
}
.ff-el-group textarea{ min-height: 120px; }

/* Labels */
.ff-el-group .ff-el-form-control .ff-el-input--label,
.ff-el-group .ff-el-input--label{
  color: var(--fcl-text);
  opacity: 0.95;
  font-weight: 500;
}

/* Focus ring (gold glow) */
.ff-el-group input:focus,
.ff-el-group select:focus,
.ff-el-group textarea:focus{
  border-color: var(--fcl-gold) !important;
  box-shadow: 0 0 0 3px rgba(168,135,81,0.25);
  outline: none;
}

/* Errors */
.ff-el-is-error .ff-el-input--content input,
.ff-el-is-error .ff-el-input--content select,
.ff-el-is-error .ff-el-input--content textarea{
  border-color: #d32f2f !important;
}
.ff-el-is-error .ff-el-input--error{
  color: #f0b0b0;
  font-size: 0.9rem;
  margin-top: 6px;
}

/* Submit button */
.ff-btn-submit{
  background: var(--fcl-gold) !important;
  color: #141B20 !important;
  border: 0;
  border-radius: 9999px;
  padding: 14px 20px;
  font-weight: 600;
  width: 100%;               /* full-width on mobile */
}
.ff-btn-submit:hover{
  background: var(--fcl-gold-light) !important;
  box-shadow: 0 0 12px rgba(168,135,81,0.45);
}

/* Spacing & mobile layout */
.ff-el-group{ margin-bottom: 14px; }
@media (min-width: 900px){
  .ff-el-group{ margin-bottom: 16px; }
}

/* ===== Sticky Header (mobile-first) ===== */
.fcl-header{
  position: sticky; top: 0; z-index: 999;
  background: #141B20; /* charcoal */
  border-bottom: 1px solid rgba(168,135,81,.25); /* gold tint */
}
.fcl-nav{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px !important; }
.fcl-brand{ color: #A88751; text-decoration: none; font-family: Cinzel, serif; font-weight: 600; letter-spacing: .5px; }

/* Burger */
.fcl-burger{
  background: transparent; border: 0; width: 40px; height: 36px; padding: 0; display: grid; place-items: center; gap: 4px; cursor: pointer;
}
.fcl-burger span{ display: block; width: 24px; height: 2px; background: #A88751; border-radius: 2px; }
@media (min-width: 900px){ .fcl-burger{ display: none; } }

/* Menu */
.fcl-menu{
  position: fixed; inset: 56px 0 auto 0; /* below header on mobile */
  background: #141B20;
  border-top: 1px solid rgba(168,135,81,.15);
  display: none; flex-direction: column; gap: 12px; padding: 14px 16px;
}
.fcl-menu a{ color: #A88751; text-decoration: none; font-weight: 500; }
.fcl-menu a:hover{ color: #D2AA6A; }
.fcl-menu .fcl-cta{
  display: inline-block; background: #A88751; color: #141B20; padding: 10px 16px; border-radius: 9999px; font-weight: 600; text-align: center;
}
.fcl-menu.open{ display: flex; }

/* Desktop layout */
@media (min-width: 900px){
  .fcl-menu{
    position: static; display: flex !important; flex-direction: row; align-items: center; gap: 18px; padding: 0; background: transparent; border: 0;
  }
}

/* Smooth anchor offset: prevent titles being hidden under sticky bar */
section{ scroll-margin-top: 72px; }

/* ===== Preise cards (gold-framed, mobile-first) ===== */
.price-cards{
  display: grid;
  gap: 14px;
}
@media (min-width: 900px){
  .price-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

.price-card{
  border: 1px solid rgba(168,135,81,0.35); /* dark gold */
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.price-toggle{
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #A88751; /* gold */
  border: 0;
  padding: 14px 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.price-icon{ font-size: 18px; line-height: 1; opacity: .95; }
.price-title{ font-family: Cinzel, serif; letter-spacing: .4px; }
.price-caret{
  width: 10px; height: 10px; border-right: 2px solid #A88751; border-bottom: 2px solid #A88751; transform: rotate(45deg);
  transition: transform .2s ease;
}
.price-toggle[aria-expanded="true"] .price-caret{ transform: rotate(225deg); }

.price-body{
  padding: 4px 16px 14px 16px;
  color: #F3EFE7; /* warm white */
}
.price-body ul{ margin: 0; padding-left: 18px; }
.price-list{ list-style: none; padding: 0; margin: 0; }
.price-list li{
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed rgba(168,135,81,.25);
}
.price-list li:last-child{ border-bottom: 0; }

/* Accordion behavior: mobile collapsed by default; desktop open */
@media (max-width: 899.98px){
  .price-body[hidden]{ display: none; }
}
@media (min-width: 900px){
  .price-body{ display: block !important; }
  .price-toggle .price-caret{ display: none; } /* caret unnecessary on desktop */
}



/* Hide GeneratePress primary nav on home so our custom bar is the only one */
body.home .main-navigation { display: none; }

/* ==== Global dark base (ensure no white backgrounds) ==== */
html, body,
.site, .site-content, .content-area, .site-main {
  background: #141B20;   /* charcoal */
  color: #F3EFE7;        /* warm white text */
}

/* Headings & links in gold for contrast */
h1, h2, h3, h4 { color: #A88751; }
a { color: #A88751; }
a:hover { color: #D2AA6A; }

/* ==== Preise cards: force dark panel so white text is readable ==== */
.price-card {
  background: #0F1418;                        /* dark glassy panel */
  border: 1px solid rgba(168,135,81,0.35);    /* gold tint */
}

.price-body { color: #F3EFE7; }               /* ensure text is light */

/* Optional: make small notes slightly dimmer (if any) */
.price-note { color: #d8d0c2; }

/* ===== Global typography & spacing ===== */
:root{
  --fcl-bg:#141B20; --fcl-text:#F3EFE7;
  --fcl-gold:#A88751; --fcl-gold-dark:#8E7248; --fcl-gold-light:#D2AA6A;
  --fcl-max:1160px;
}
html, body, .site, .site-content, .content-area, .site-main{
  background:var(--fcl-bg); color:var(--fcl-text);
}
.container{ max-width:var(--fcl-max); margin:0 auto; padding:0 16px; }
.section{ padding:56px 0; }
@media (min-width:900px){ .section{ padding:88px 0; } }
h1,h2,h3{ color:var(--fcl-gold); letter-spacing:.4px; }
h1{ font-family:Cinzel,serif; font-weight:700; font-size:clamp(36px,6.5vw,64px); line-height:1.08; margin:0 0 8px; }
h2{ font-family:Cinzel,serif; font-size:clamp(22px,3.5vw,34px); margin:0 0 14px; }
p{ line-height:1.6; }

/* ===== Gold divider under section titles (no markup needed) ===== */
.section h2{
  position:relative; padding-bottom:12px; margin-bottom:18px;
}
.section h2::after{
  content:""; display:block; height:1px; margin-top:10px;
  background:linear-gradient(90deg,transparent,var(--fcl-gold),transparent);
}

/* ===== Hero (Intro) ===== */
#intro{ min-height:72vh; display:flex; align-items:center; }
#intro .container{ display:grid; gap:14px; }
#intro p{ max-width:680px; color:#e9e4da; }

/* CTA buttons (works with existing <a> in hero) */
#intro a[href^="#"], #intro a[href^="tel:"]{
  display:inline-block; text-decoration:none; border-radius:9999px; font-weight:600;
  padding:12px 20px; margin-right:10px; margin-top:6px;
}
#intro a[href^="#"]{ background:var(--fcl-gold); color:var(--fcl-bg); }
#intro a[href^="#"]:hover{ background:var(--fcl-gold-light); box-shadow:0 0 12px rgba(168,135,81,.45); }
#intro a[href^="tel:"]{ color:var(--fcl-gold); border:1px solid var(--fcl-gold); }
#intro a[href^="tel:"]:hover{ color:var(--fcl-bg); background:var(--fcl-gold); }

/* ===== Sticky header polish ===== */
.fcl-header{
  position:sticky; top:0; z-index:999;
  background:rgba(20,27,32,.92);
  border-bottom:1px solid rgba(168,135,81,.25);
  backdrop-filter:saturate(140%) blur(6px);
}
.fcl-brand{ color:var(--fcl-gold); text-decoration:none; font-family:Cinzel,serif; font-weight:700; }
.fcl-menu a{ color:var(--fcl-gold); }
.fcl-menu a:hover{ color:var(--fcl-gold-light); }
.fcl-menu .fcl-cta{
  background:var(--fcl-gold); color:var(--fcl-bg);
  padding:10px 16px; border-radius:9999px; font-weight:700;
}
.fcl-menu .fcl-cta:hover{ background:var(--fcl-gold-light); box-shadow:0 0 12px rgba(168,135,81,.45); }

/* ===== Preise cards (already added earlier, add subtle lift) ===== */
.price-card{ background:#0F1418; transition:transform .18s ease, box-shadow .18s ease; }
.price-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.35); }
.price-list li span{ flex:1; }

/* ===== Booking form panel (enhance corners; no markup changes) ===== */
#buchung .container{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(168,135,81,.35); border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.32);
  position:relative; overflow:hidden;
}
#buchung .container::before,
#buchung .container::after{
  content:""; position:absolute; width:18px; height:18px; border:1px solid var(--fcl-gold-dark);
}
#buchung .container::before{ top:10px; left:10px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; opacity:.6; }
#buchung .container::after{ bottom:10px; right:10px; border-left:0; border-top:0; border-radius:0 0 6px 0; opacity:.6; }

/* ===== Contact tiles (convert list to mobile-first cards) ===== */
#kontakt ul{
  list-style:none; padding:0; margin:0; display:grid; gap:12px;
}
@media (min-width:900px){
  #kontakt ul{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
}
#kontakt li{
  background:#0F1418; border:1px solid rgba(168,135,81,.35); border-radius:16px;
  padding:14px 16px; display:flex; align-items:center; gap:10px;
}
#kontakt li a{ color:#f0e7d7; text-decoration:none; font-weight:600; }
#kontakt li a:hover{ color:var(--fcl-gold-light); }
#kontakt p{ margin-top:10px; color:#d8d0c2; }

/* ===== Links & focus states (accessibility) ===== */
a:focus{ outline:none; box-shadow:0 0 0 3px rgba(210,170,106,.35); border-radius:8px; }

/* ===== Reduce motion support ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Skip link (visible on keyboard focus) */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; z-index:10000;
  background:#A88751; color:#141B20; padding:10px 14px; border-radius:8px;
  width:auto; height:auto; outline:none; text-decoration:none; font-weight:700;
}

/* Active nav state */
.fcl-menu a.is-active,
.fcl-menu a[aria-current="true"]{
  color: var(--fcl-gold-light);
  text-underline-offset: 4px;
  text-decoration: underline;
}

/* Header shadow on scroll */
.fcl-header.scrolled{
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

/* Floating CTA (mobile) */
.fcl-fab{
  position: fixed; right: 14px; bottom: 14px; z-index: 999;
  background: var(--fcl-gold); color: #141B20; text-decoration: none;
  padding: 12px 18px; border-radius: 9999px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.fcl-fab:hover{ background: var(--fcl-gold-light); box-shadow: 0 12px 28px rgba(0,0,0,.4); color: #141B20;}
@media (min-width: 900px){ .fcl-fab{ display: none; } } /* desktop hides it */

/* Keep numbers aligned in prices (elegant column feel) */
.price-list strong{ font-variant-numeric: tabular-nums; }

/* Footer links polish */
footer a{ color: var(--fcl-gold); text-decoration: none; }
footer a:hover{ color: var(--fcl-gold-light); text-decoration: underline; }

/* Focus ring everywhere (keyboard users) */
:where(a, button, input, select, textarea):focus-visible{
  outline: none; box-shadow: 0 0 0 3px rgba(210,170,106,.35);
  border-radius: 8px;
}

.inside-header, .inside-site-info {
    display: none;
}

/* ==== INTRO: single background image + charcoal tint + Ken Burns ==== */
#intro{
  position: relative;
  min-height: 80vh;              /* tall, cinematic */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* The villa photo */
#intro::before{
  content: "";
  position: absolute; inset: 0;
  background: url("assets/images/hero-bg.png") center 58% / cover no-repeat; /* replace with your Media URL if not in theme */
  /* push photo into background so text stands out */
  filter: saturate(.75) brightness(.70) blur(0.8px);
  transform: scale(1);
  transform-origin: 60% 40%;     /* where the slow pan pivots */
  z-index: 0;
  will-change: transform;
  animation: heroKen 18s ease-in-out infinite alternate;
}

/* Charcoal tint (brand dominates) */
#intro::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(20,27,32,0.82);   /* #141B20 at 82% */
  z-index: 1;
}

/* Put intro text above all overlays */
#intro .container{ position: relative; z-index: 2; }

/* Gentle Ken Burns */
@keyframes heroKen{
  0%   { transform: scale(1) translate3d(0,0,0); background-position: 80% 50%;}
  100% { transform: scale(1.06) translate3d(-1.5%, -1.5%, 0); background-position: 20% 50%; }
}

/* Mobile crop & sizing */
@media (max-width: 900px){
  #intro{ min-height: 72vh; margin: 0 -5%;}
  #intro::before{ background-position: 72% center; animation-duration: 18s; }
}
@media (max-width: 480px){
  #intro::before{ background-position: 78% center; }
}

/* Respect "Reduce Motion" */
@media (prefers-reduced-motion: reduce){
  #intro::before{ animation: none; transform: none; }
}