/*
 * EUlimousine — Inner Page & Component Styles
 * Loaded after style.css. Reuses the same design tokens (--accent, --bg-dark,
 * --font-display, --font-body, spacing scale) so brand/typography changes
 * made in the Customizer apply here automatically.
 */

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs{ margin-bottom: var(--space-16); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap: 6px; list-style:none; margin:0; padding:0; }
.breadcrumbs li{ font-size: 0.8rem; color: var(--muted-on-dark); }
.breadcrumbs li a{ color: var(--muted-on-dark); opacity:0.85; }
.breadcrumbs li a:hover{ opacity:1; color: var(--accent); }
.breadcrumbs li.sep{ opacity:0.4; }
.breadcrumbs li span[aria-current]{ color: var(--text-on-dark); }
.on-surface .breadcrumbs li,
.on-surface .breadcrumbs li a{ color: var(--muted); }
.on-surface .breadcrumbs li span[aria-current]{ color: var(--text); }

/* ============================================
   INNER-PAGE HERO
   ============================================ */
.inner-hero{
  position:relative;
  background: var(--bg-dark);
  padding: calc(var(--nav-h) + var(--space-64)) 0 var(--space-64);
  overflow:hidden;
}
.inner-hero.has-media{ padding: calc(var(--nav-h) + var(--space-80)) 0 var(--space-80); }
.inner-hero-media{ position:absolute; inset:0; }
.inner-hero-media img{ width:100%; height:100%; object-fit:cover; opacity:0.55; }
.inner-hero.has-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,13,15,0.5) 0%, rgba(11,13,15,0.86) 100%);
}
.inner-hero-content{ position:relative; z-index:2; }
.inner-hero h1{
  color: var(--text-on-dark);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  margin-top: var(--space-12);
  max-width: 24ch;
}
.inner-hero .eyebrow{ color: var(--accent); }
.inner-hero-sub{ color: var(--muted-on-dark); margin-top: var(--space-16); max-width: 60ch; font-size: 1.05rem; }
.inner-hero.is-dark .inner-hero-media img{ opacity:0.4; }

.vehicle-hero{ padding-bottom: var(--space-64); }

/* ============================================
   SUBMENU DROPDOWN (desktop primary nav)
   ============================================ */
.primary-nav li.menu-item-has-children{ position:relative; }
.primary-nav .sub-menu{
  position:absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: rgba(11,13,15,0.97);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  list-style:none; margin:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 250;
}
.primary-nav li.menu-item-has-children:hover .sub-menu,
.primary-nav li.menu-item-has-children:focus-within .sub-menu,
.primary-nav a[aria-expanded="true"] + .sub-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.primary-nav .sub-menu li{ width:100%; }
.primary-nav .sub-menu a{
  display:block; padding: 10px 14px; font-size: 0.85rem; white-space:nowrap;
  border-radius: var(--radius-sm);
}
.primary-nav .sub-menu a::after{ display:none; }
.primary-nav .sub-menu a:hover{ background: rgba(184,155,99,0.12); color: var(--accent); }

/* ============================================
   SEARCH TOGGLE + OVERLAY
   ============================================ */
.search-toggle{
  background:none; border:none; color: var(--text-on-dark);
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
.search-toggle svg{ width:20px; height:20px; }
.search-overlay{
  position:fixed; inset:0; z-index: 320;
  background: rgba(11,13,15,0.98);
  display:flex; align-items:flex-start; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  padding-top: calc(var(--nav-h) + var(--space-48));
}
.search-overlay.is-open{ opacity:1; visibility:visible; transform:none; }
.search-overlay-inner{ position:relative; max-width:720px; width:100%; }
.search-overlay .eyebrow{ justify-content:center; margin-bottom: var(--space-24); }
.search-overlay-close{
  position:absolute; top:-56px; right:var(--space-16);
  background:none; border:none; color: var(--text-on-dark);
  width:40px; height:40px;
}
.search-overlay-hint{ color: var(--muted-on-dark); margin-top: var(--space-16); font-size:0.85rem; text-align:center; }
.eu-search-form{ display:flex; gap: var(--space-12); }
.eu-search-form input[type="search"]{
  flex:1; padding: 16px 20px; border-radius: var(--radius-sm);
  border:1px solid var(--border-on-dark); background: rgba(255,255,255,0.04);
  color: var(--text-on-dark); font-family: var(--font-body); font-size:1rem;
}
.eu-search-form input[type="search"]::placeholder{ color: var(--muted-on-dark); }
.eu-search-form .btn{ display:inline-flex; align-items:center; gap:8px; }
.eu-search-form .btn svg{ width:16px; height:16px; }

/* ============================================
   SERVICE LANDING / GENERIC SECTIONS
   ============================================ */
/* corp-benefits/corp-benefit ship dark-context colours by default (used on
   the homepage's dark corporate section) — override for light-background
   usage on the Corporate hub/account pages. */
.on-surface .corp-benefits, .corp-benefits.on-light{ margin-top:0; }
.on-surface .corp-benefit, .corp-benefits.on-light .corp-benefit{ border-color: var(--border); background: var(--surface); }
.on-surface .corp-benefit strong, .corp-benefits.on-light .corp-benefit strong{ color: var(--text); }
.on-surface .corp-benefit span, .corp-benefits.on-light .corp-benefit span{ color: var(--muted); }

.service-intro p{ font-size:1.15rem; color: var(--text); max-width: 68ch; line-height:1.7; }

.benefit-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24);
}
.benefit-card{
  padding: var(--space-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.benefit-card h3{ font-size:1.1rem; margin-top: var(--space-16); }
.benefit-card p{ color: var(--muted); margin-top: var(--space-8); font-size:0.92rem; }

.table-wrap{ overflow-x:auto; }
.compare-table{ width:100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-md); overflow:hidden; }
.compare-table th, .compare-table td{ text-align:left; padding: var(--space-16); border-bottom:1px solid var(--border); }
.compare-table th{ font-family: var(--font-body); text-transform:uppercase; letter-spacing:0.06em; font-size:0.75rem; color: var(--muted); background: var(--bg-light); }
.compare-table td a{ color: var(--text); font-weight:600; }
.compare-table td a:hover{ color: var(--accent); }
.compare-table tr:last-child td{ border-bottom:none; }

.route-list{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.route-list li{
  display:flex; align-items:center; gap: var(--space-12);
  padding: var(--space-16); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
}
.route-list svg{ width:20px; height:20px; color: var(--accent); flex-shrink:0; }

/* ============================================
   FLEET
   ============================================ */
.fleet-filter{ display:flex; flex-wrap:wrap; gap: var(--space-8); margin-bottom: var(--space-32); }
.fleet-filter button{
  padding: 10px 18px; border-radius: 999px; border:1px solid var(--border);
  background: var(--surface); font-size:0.85rem; font-weight:600; color: var(--muted);
  transition: all 0.25s var(--ease);
}
.fleet-filter button[aria-pressed="true"]{ background: var(--bg-dark); color: var(--text-on-dark); border-color: var(--bg-dark); }
.fleet-filter button:hover{ border-color: var(--accent); color: var(--accent); }
.fleet-filter button[aria-pressed="true"]:hover{ color: var(--text-on-dark); }

.fleet-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }

.vehicle-gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
.vehicle-gallery img{ border-radius: var(--radius-md); aspect-ratio: 4/3; object-fit:cover; }

.vehicle-detail-grid{ display:grid; grid-template-columns: 1fr 320px; gap: var(--space-48); align-items:start; }
.feature-list.plain{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-12); }
.feature-list.plain li{ display:flex; align-items:center; gap: var(--space-12); }
.feature-list.plain svg{ width:18px; height:18px; color: var(--accent); flex-shrink:0; }
.vehicle-sidebar-card{
  position:sticky; top: calc(var(--nav-h) + var(--space-24));
  padding: var(--space-24); border:1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-light);
}
.vehicle-price-note{ font-weight:600; color: var(--text); margin-bottom: var(--space-16); }

/* ============================================
   FAQ PAGE LAYOUT
   ============================================ */
.faq-layout{ display:grid; grid-template-columns: 220px 1fr; gap: var(--space-48); align-items:start; }
.faq-jump{ position:sticky; top: calc(var(--nav-h) + var(--space-24)); display:flex; flex-direction:column; gap: var(--space-8); }
.faq-jump a{ font-size:0.88rem; color: var(--muted); padding: 8px 0; border-bottom: 1px solid transparent; }
.faq-jump a:hover{ color: var(--accent); }
.faq-category{ margin-bottom: var(--space-48); }
.faq-category h2{ font-size:1.5rem; margin-bottom: var(--space-24); }
.faq-category:last-child{ margin-bottom:0; }

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-layout{ display:grid; grid-template-columns: 1fr 340px; gap: var(--space-48); align-items:start; }
.contact-sidebar{ display:flex; flex-direction:column; gap: var(--space-24); }
.contact-card{ padding: var(--space-24); border:1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-light); }
.contact-card h3{ font-size:1.1rem; margin-bottom: var(--space-16); }
.contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-12); }
.contact-list li{ display:flex; align-items:center; gap: var(--space-12); }
.contact-list svg{ width:18px; height:18px; color: var(--accent); flex-shrink:0; }
.contact-list a{ color: var(--text); }
.contact-list a:hover{ color: var(--accent); }
.contact-hours{ margin-top: var(--space-16); color: var(--muted); font-size:0.85rem; padding-top: var(--space-16); border-top:1px solid var(--border); }
.contact-alt{ text-align:center; padding-top: var(--space-32); border-top:1px solid var(--border); }
.contact-alt p{ color: var(--muted); margin-bottom: var(--space-8); }
.contact-alt a{ display:block; font-weight:600; color: var(--text); }
.contact-alt a:hover{ color: var(--accent); }

.corporate-split{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); align-items:start; }

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-layout{ display:grid; grid-template-columns: 220px 1fr; gap: var(--space-48); align-items:start; }
.legal-toc{ position:sticky; top: calc(var(--nav-h) + var(--space-24)); display:flex; flex-direction:column; gap: var(--space-8); }
.legal-toc a{ font-size:0.85rem; color: var(--muted); padding: 6px 0; border-left: 2px solid transparent; padding-left: var(--space-12); }
.legal-toc a.is-active, .legal-toc a:hover{ color: var(--accent); border-left-color: var(--accent); }
.legal-content{ max-width:760px; }
.legal-draft-notice{
  display:block; padding: var(--space-16) var(--space-20);
  background: rgba(184,155,99,0.1); border:1px solid var(--accent-soft);
  border-radius: var(--radius-sm); margin-bottom: var(--space-32); font-size:0.9rem; color: var(--text);
}
.legal-draft-notice strong{ display:block; margin-bottom:4px; color: var(--text); }

/* ============================================
   FORMS (shared: inquiry forms + booking wizard)
   ============================================ */
.eu-form, .wizard-step{ max-width: 100%; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.form-field{ margin-bottom: var(--space-16); }
.form-field label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom: 8px; color: var(--text); }
.form-field .req{ color: var(--error); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field input[type="time"],
.form-field input[type="number"],
.form-field select,
.form-field textarea{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-body); font-size: 0.95rem; color: var(--text);
  transition: border-color 0.2s var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color: var(--accent);
}
.form-field input.has-error, .form-field textarea.has-error{ border-color: var(--error); }
.field-error{ display:block; color: var(--error); font-size:0.78rem; margin-top:6px; }
.form-checkbox{ display:flex; align-items:flex-start; gap: 10px; font-size:0.88rem; color: var(--muted); margin: var(--space-16) 0; cursor:pointer; }
.form-checkbox input{ margin-top:3px; }
.form-checkbox a{ color: var(--accent); text-decoration:underline; }
.form-status{ min-height: 1.4em; font-size:0.9rem; margin: var(--space-16) 0; }
.form-status.is-success{ color: var(--success); }
.form-status.is-error{ color: var(--error); }
.form-empty{ color: var(--muted); text-align:center; padding: var(--space-48) 0; }

.eu-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.inquiry-form-wrap{ padding: var(--space-32); border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.inquiry-form-wrap h3{ font-size:1.4rem; margin-bottom: var(--space-8); }
.form-intro{ color: var(--muted); margin-bottom: var(--space-24); }

/* ============================================
   BOOKING WIZARD
   ============================================ */
.wizard-progress{
  display:flex; list-style:none; margin:0 0 var(--space-48); padding:0;
  border-bottom: 1px solid var(--border);
}
.wizard-progress-item{
  flex:1; text-align:center; padding-bottom: var(--space-16); position:relative;
  color: var(--muted); font-size:0.78rem;
}
.wizard-progress-item::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: transparent;
}
.wizard-progress-item.is-active::after{ background: var(--accent); }
.wizard-progress-item.is-done::after{ background: var(--border); }
.wp-index{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
  font-weight:700; margin-bottom:6px; color: var(--muted);
}
.wizard-progress-item.is-active .wp-index{ border-color: var(--accent); color: var(--accent); }
.wizard-progress-item.is-done .wp-index{ background: var(--accent); border-color: var(--accent); color:#17140C; }
.wp-label{ display:block; }

.wizard-step h2{ font-size:1.6rem; margin-bottom: var(--space-8); }
.step-note{ color: var(--muted); font-size:0.9rem; margin-bottom: var(--space-24); }

.widget-tabs{ margin-bottom: var(--space-24); }
/* Booking widget tabs are styled for a dark hero by default — override for
   the light-background wizard context. */
.wizard .widget-tabs{
  display:inline-flex; gap: var(--space-8); padding: 6px;
  background: var(--bg-light); border-radius: var(--radius-md); border: 1px solid var(--border);
}
.wizard .widget-tab{ color: var(--muted); }
.wizard .widget-tab:hover:not([aria-selected="true"]){ color: var(--text); }
.wizard .widget-tab[aria-selected="true"]{ background: var(--bg-dark); color: var(--text-on-dark); }

.field-destination, .field-return, .field-stops{ display:block; }
.trip-hourly .field-destination,
.trip-hourly .field-return,
.trip-one-way .field-return,
.trip-one-way .field-duration,
.trip-one-way .field-stops,
.trip-return .field-duration,
.trip-return .field-stops{ display:none; }
.field-duration{ display:none; }
.trip-hourly .field-duration{ display:block; }

.wizard-nav{ display:flex; align-items:center; justify-content:space-between; margin-top: var(--space-32); }

.wizard-vehicle-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.wizard-vehicle-card{
  position:relative; display:flex; gap: var(--space-16); align-items:center;
  padding: var(--space-16); border: 2px solid var(--border); border-radius: var(--radius-md);
  cursor:pointer; transition: border-color 0.2s var(--ease);
}
.wizard-vehicle-card:hover{ border-color: var(--accent-soft); }
.wizard-vehicle-card.is-selected{ border-color: var(--accent); background: rgba(184,155,99,0.06); }
.wizard-vehicle-card input{ position:absolute; top:16px; right:16px; }
.wvc-media{ width:88px; height:64px; border-radius: var(--radius-sm); overflow:hidden; flex-shrink:0; }
.wvc-media img{ width:100%; height:100%; object-fit:cover; }
.wvc-body{ display:flex; flex-direction:column; gap:2px; }
.wvc-class{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--accent); }
.wvc-body strong{ font-family: var(--font-display); font-size:1.05rem; }
.wvc-meta{ font-size:0.8rem; color: var(--muted); }
.wvc-price{ font-size:0.8rem; font-weight:600; color: var(--text); }

.wizard-review{ display:flex; flex-direction:column; }
.review-row{ display:flex; justify-content:space-between; gap: var(--space-16); padding: var(--space-12) 0; border-bottom: 1px solid var(--border); }
.review-row span{ color: var(--muted); font-size:0.88rem; }
.review-row strong{ text-align:right; }
.wizard-review-links{ display:flex; flex-wrap:wrap; gap: var(--space-16); margin: var(--space-16) 0; }
.wizard-review-links button{ background:none; border:none; font-size:0.82rem; color: var(--accent); text-decoration:underline; padding:0; }

.wizard{ position:relative; }
.wizard-confirmation{ text-align:center; padding: var(--space-48) 0; }
.confirmation-icon{ width:64px; height:64px; margin:0 auto var(--space-24); color: var(--success); }
.confirmation-icon svg{ width:100%; height:100%; }
.wizard-confirmation h2{ font-size:1.8rem; }
.wizard-confirmation p{ color: var(--muted); margin-top: var(--space-12); max-width:52ch; margin-left:auto; margin-right:auto; }
.confirmation-reference{ font-size:1.1rem; margin-top: var(--space-16); }
.confirmation-reference strong{ color: var(--accent); }

/* Service areas hub — allow a slightly larger 3-up grid when there are many locations */
.areas-grid-lg{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px){ .areas-grid-lg{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .areas-grid-lg{ grid-template-columns: 1fr; } }

/* Trust bar reused standalone on inner pages (outside the dark hero) */
.trust-bar-inline{
  background: var(--bg-dark);
  padding: var(--space-32) 0;
}

@media (max-width: 1023px){
  .benefit-grid{ grid-template-columns: repeat(2, 1fr); }
  .fleet-grid{ grid-template-columns: repeat(2, 1fr); }
  .vehicle-detail-grid{ grid-template-columns: 1fr; }
  .vehicle-sidebar-card{ position:static; }
  .faq-layout, .legal-layout{ grid-template-columns: 1fr; }
  .faq-jump, .legal-toc{ position:static; flex-direction:row; flex-wrap:wrap; margin-bottom: var(--space-32); }
  .contact-layout{ grid-template-columns: 1fr; }
  .corporate-split{ grid-template-columns: 1fr; gap: var(--space-32); }
  .route-list{ grid-template-columns: 1fr; }
  .wizard-vehicle-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .benefit-grid{ grid-template-columns: 1fr; }
  .fleet-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .vehicle-gallery{ grid-template-columns: 1fr 1fr; }
  .wizard-progress{ overflow-x:auto; }
  .wp-label{ font-size:0.68rem; }
  .wizard-nav{ flex-direction:column-reverse; gap: var(--space-12); align-items:stretch; }
  .wizard-nav .btn{ width:100%; }
  .wizard-nav span{ display:none; }
  .search-overlay{ padding-top: calc(var(--nav-h) + var(--space-24)); padding-left: var(--space-16); padding-right: var(--space-16); }
  .eu-search-form{ flex-direction:column; }
}