/* =====================================================
   DOUCE FRANCE – CUSTOM SUPPLEMENTAL STYLES
   Additions & overrides on top of style.css
   ===================================================== */

/* =====================================================
   HEADER: Force transparent on home hero
   ===================================================== */
.home .site-header:not(.scrolled) {
  background: transparent;
}

/* =====================================================
   DETAILS / FAQ accordion arrow animation
   ===================================================== */
details summary::-webkit-details-marker { display: none; }

details[open] summary span:last-child {
  transform: rotate(45deg);
  display: inline-block;
}

details summary span:last-child {
  transition: transform 0.2s ease;
}

/* =====================================================
   DATEPICKER custom styling
   ===================================================== */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* =====================================================
   SELECT arrow styling
   ===================================================== */
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5A5A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* =====================================================
   NUMBER input — remove arrows
   ===================================================== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
input[type="number"] { -moz-appearance: textfield; }

/* =====================================================
   GALLERY: keyboard focus ring
   ===================================================== */
.gallery-item:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
}

/* =====================================================
   CONCEPT sections: ensure proper stacking on mobile
   ===================================================== */
@media (max-width: 768px) {
  .concept-img { min-height: 280px; }
  .concept-body { padding: 2rem 1.5rem; }
  .concept-number { font-size: 3.5rem; }
}

/* =====================================================
   QUOTE SUMMARY: responsive collapse
   ===================================================== */
@media (max-width: 1024px) {
  .quote-summary {
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
  }
}

/* =====================================================
   SERVICE ITEM: add pointer cursor for entire row
   ===================================================== */
.service-item:not(.mandatory) { cursor: pointer; }

/* =====================================================
   HERO VIDEO: performance hints
   ===================================================== */
.hero__video-wrap video {
  will-change: opacity;
}

/* =====================================================
   PRINT STYLES: quote summary
   ===================================================== */
@media print {
  .site-header,
  .site-footer,
  .hero,
  .gallery-filters,
  .btn,
  .form-submit { display: none !important; }

  .quote-summary {
    background: #f5f5f5 !important;
    color: #000 !important;
    break-inside: avoid;
  }

  .quote-total__amount { color: #E05A2D !important; }
}

/* =====================================================
   ELEMENTOR OVERRIDES
   When Elementor is used on specific pages, reset padding
   ===================================================== */
.elementor-page .quote-page,
.elementor-page .section {
  padding-block: var(--space-xl);
}

/* =====================================================
   WPML Language switcher overrides
   ===================================================== */
.wpml-ls-legacy-list-horizontal {
  padding: 0 !important;
  border: none !important;
}

.wpml-ls-legacy-list-horizontal li {
  display: inline-flex !important;
}

.wpml-ls-legacy-list-horizontal a {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 0.25rem 0.4rem !important;
  border: none !important;
}

.wpml-ls-legacy-list-horizontal .wpml-ls-current-language a {
  color: var(--color-orange) !important;
}

/* =====================================================
   SMOOTH LOADING: prevent FOUC
   ===================================================== */
html { visibility: hidden; }
html.js-loaded { visibility: visible; }

/* =====================================================
   SKIP TO CONTENT (accessibility)
   ===================================================== */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--color-orange);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 700;
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 0;
}

/* =====================================================
   COOKIE BANNER (basic)
   ===================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26, 26, 26, 0.97);
  color: rgba(255,255,255,0.8);
  padding: 1rem var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  z-index: 9998;
  font-size: 0.85rem;
  backdrop-filter: blur(10px);
}

.cookie-banner.hidden { display: none; }

.cookie-banner p { margin: 0; }

.cookie-banner a { color: var(--color-orange); }

.cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }

@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    text-align: center;
  }
}