/*
 * VALDIER V3 — brand layer for the homepage (identity, not layout).
 *
 * Loaded after the base and site styles and the other Valdier sheets. Values
 * come from the design-system tokens (assets/valdier-island/booking.css
 * declares --v-* on :root); each var() has the default as fallback so the
 * page keeps its identity even without them.
 *
 * Font: Inter Tight, self-hosted (assets/fonts/inter-tight/). Changing the
 * brand font means loading another @font-face and overriding --v-font-sans:
 * nothing below names the family except the fallback.
 */

/* ---- Typography: one family for the whole page -------------------------- */
body,
.heading-style-h1,
.text-block {
  font-family: var(--v-font-sans, "Inter Tight", system-ui, sans-serif);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Inter Tight is already tight: the export's -0.15rem tracking was set for
   system-ui and closes the letters up too much at display size. */
.heading-style-h1 {
  letter-spacing: -0.035em;
  font-weight: 500;
}

/* ---- Navigation ------------------------------------------------------ */
.nav_link {
  font-weight: 450;
  letter-spacing: 0.005em;
}

/* js/valdier-site.js marks the link to the current page (Home) with
   .is-current, which the base styles paint blue; here it keeps the colour of
   its neighbours: light on the dark bar, #3d3d3d in the open mobile menu and
   on the hover pill (css/valdier-baseline-fixes.css). */
.nav_link.is-current {
  color: var(--vs-nav-ink, #f5f5f5);
}

.nav_link.is-current:hover {
  color: var(--vs-pill-ink, #3d3d3d);
}

@media screen and (max-width: 991px) {
  .nav_menu .nav_link.is-current {
    color: var(--vs-text, #3d3d3d);
  }
}

/* The page being viewed: the theme's colour as text on the footer, on a 12% tint of it (--v-footer-accent is
   derived by the server for the footer's real surface, Light and Dark: inc/palettes.php). */
.footer_button.is-current {
  color: var(--v-footer-accent, var(--vs-ink, #000));
  background-color: color-mix(in srgb, var(--v-footer-accent, #000) 12%, transparent);
}

/* Entries whose destination is not built yet: shown, not actionable. */
[aria-disabled='true'].nav_link,
[aria-disabled='true'].footer_button,
[aria-disabled='true'].banner_button,
[aria-disabled='true'].footer_legal-link,
.hero_button-group [aria-disabled='true'] {
  cursor: default;
}

/* ---- Announcement bar ---------------------------------------------------- */
/* The export's bar, with VALDIER copy: the orange template disc becomes a
   graphite one carrying a neutral icon. */
.banner_icon {
  background-color: var(--v-ink-hover, #2a2a2a);
  color: var(--v-white, #fff);
}

.banner_icon svg {
  display: block;
}

/* ---- Hero copy -------------------------------------------------------- */
#vario-header-02 .max-width-small {
  max-width: 32rem;
}

#vario-header-02 .hero_lead {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--v-muted, #6b6b6b);
}

#vario-header-02 .text-block {
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Service blocks: neutral icons, quiet hierarchy. The titles are h2 for the
   outline; the base h2 element rule must not reach them. */
#vario-header-02 .hero_feature-item {
  align-items: flex-start;
}

#vario-header-02 .hero_feature-item .icon-wrapper {
  color: var(--v-ink, #171717);
  padding: 0.6875rem;
}

#vario-header-02 .hero_feature-item .icon-medium svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

#vario-header-02 .hero_feature-item h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: var(--v-ink, #171717);
}

#vario-header-02 .hero_feature-item p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--v-muted, #6b6b6b);
}

/* ---- Hero actions: black primary, white outlined secondary ------------ */
#vario-header-02 .hero_button-group .button {
  height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: var(--v-radius-sm, 0.625rem);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  box-shadow: none;
}

/* The primary action is the theme's accent (Graphite by default). */
#vario-header-02 .hero_button-group .button:not(.is-outline) {
  background-color: var(--v-accent, #252525);
  color: var(--v-accent-fg, #fff);
}

#vario-header-02 .hero_button-group .button:not(.is-outline):hover {
  background-color: var(--v-accent-hover, #3b3b3b);
}

#vario-header-02 .hero_button-group .button.is-outline {
  background-color: var(--v-surface-raised, #fff);
  color: var(--v-ink, #171717);
  box-shadow: inset 0 0 0 1px var(--v-line-strong, rgba(0, 0, 0, 0.14));
}

/* ---- Sections below the hero ------------------------------------------ */
/* The export's orange accent (#ff4b0f) belonged to the finance template:
   every place it showed takes the theme's accent (Graphite by default). */
.feature_accent-line {
  background-color: var(--v-accent, #252525);
}

.faq_tab-link.is-active {
  border-inline-start-color: var(--v-accent, #252525);
}

.text-color-brand {
  color: var(--v-accent-text, #252525);
}

.form_input:focus {
  border-color: var(--v-accent, #252525);
}

/* Service and value icons: one neutral ink, Lucide strokes. */
.feature_tile .icon-outline,
.content_feature-large .icon-wrapper,
.feature_card-outline .icon-medium {
  color: var(--v-ink, #171717);
}

.feature_tile .icon-medium svg,
.content_feature-large .icon-medium svg,
.feature_card-outline .icon-medium svg {
  display: block;
}

/* Icon Style, one set of rules for every section with chosen icons (docs/ICONS.md; VALDIER → Website → Homepage and
   the Customizer): the Services (<section data-icon-style>) and the hero's highlights (<div class="icon-wrapper"
   data-icon-style>). Original is each section's rule above, untouched.
   Theme Icon: the neutral box, the icon in the theme's accessible text colour, a discreet edge of it.
   Theme Fill: the box in the theme's fill for the appearance, the icon in its label colour. Same size and
   place in every style: only colours change (no glow, no gradient). A new section adds its box's selector here. */
#vario-feature-04[data-icon-style='theme-icon'] .feature_tile .icon-outline,
#vario-header-02 .hero_feature-item .icon-wrapper[data-icon-style='theme-icon'] {
  color: var(--v-accent-text, #252525);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-accent-text, #252525) 24%, transparent), 0 1px 2px var(--vs-ring, #0000000f);
}

#vario-feature-04[data-icon-style='theme-fill'] .feature_tile .icon-outline,
#vario-header-02 .hero_feature-item .icon-wrapper[data-icon-style='theme-fill'] {
  background-color: var(--v-accent, #252525);
  color: var(--v-accent-fg, #fff);
}

/* The pre-footer's icons (.trust_strip, footer-content.php): no box in Original (the surface's ink, set below);
   Theme Icon the theme's text colour; Theme Fill a small plate of the theme's fill (the only box, chosen on purpose). */
#vario-footer-04 .trust_strip[data-icon-style='theme-icon'] .trust_icon {
  color: var(--v-accent-text, #252525);
}

#vario-footer-04 .trust_strip[data-icon-style='theme-fill'] .trust_icon {
  background-color: var(--v-accent, #252525);
  color: var(--v-accent-fg, #fff);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

/* Section titles are h2 and item titles h3 for the outline; the base
   element rules for h2/h3 must not reach them (the classes set the look). */
#vario-feature-04 h3,
#vario-content-03 h3,
#vario-footer-04 h3 {
  margin-top: 0;
  margin-bottom: 0;
}

/* The slide card shows the photograph instead of the template's app screen. */
.content_slide-card img.image-cover {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The statement between About and the FAQ: one considered sentence, centred,
   on a reading width, in place of the template's logos and testimonials. */
.valdier-statement {
  max-width: var(--v-container-reading, 50rem);
  margin: 0 auto;
}

.valdier-statement .heading-style-h3 {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.25;
  color: var(--v-ink, #171717);
  text-wrap: balance;
}

/* In-page destinations: land below the top edge, not under the bar. */
.valdier-anchor {
  scroll-margin-top: 1rem;
}

/* ---- Footer ------------------------------------------------------------ */
/* The only VALDIER logo file is light-on-dark; on the light footer it is
   shown as a black silhouette. The file itself is unchanged. */
.footer_logo-image {
  filter: brightness(0);
}

/* Three surfaces, each a step deeper: the page's sections (white), the
   pre-footer with the three information cards, the rounded footer plate.
   Semantic tokens with Graphite's values, neutral and never the accent; a
   white-label theme can set them on :root like any --v-* token. The texts
   and lines on the plate are tuned to it: copyright 5.0:1, legal links
   6.3:1 (WCAG AA for small text). */
:root {
  --v-section-prefooter: #f7f7f5;
  --v-section-footer: #eae8e3;
  --v-footer-text-muted: #64625d;
  --v-footer-link: #55534e;
  --v-footer-line: #d5d2ca;
  --v-footer-hover: #f7f7f5;
  --v-footer-pattern-opacity: 0.75;
}

.footer_block {
  background-color: var(--v-section-footer, #eae8e3);
  margin-top: 4rem;
}

.footer_divider {
  background-color: var(--v-footer-line, #d5d2ca);
}

.footer_legal-wrapper {
  color: var(--v-footer-text-muted, #64625d);
}

.footer_legal-link {
  color: var(--v-footer-link, #55534e);
  transition: color var(--v-duration, 200ms) ease;
}

.footer_button:hover {
  background-color: var(--v-footer-hover, #f7f7f5);
  border-color: var(--v-footer-line, #d5d2ca);
}

/* Links of the footer: neutral at rest; the theme's colour (accessible on the footer's surface) on hover and keyboard
   focus, with a discreet focus ring. Legal links never get a background. Inactive entries stay as they are. */
.footer_button {
  transition: background-color 0.3s, border-color 0.3s, color var(--v-duration, 200ms) ease;
}

.footer_button:not([aria-disabled='true']):is(:hover, :focus-visible),
.footer_legal-link:not([aria-disabled='true']):is(:hover, :focus-visible) {
  color: var(--v-footer-accent, var(--vs-ink, #000));
}

.footer_button:focus-visible,
.footer_legal-link:focus-visible {
  outline: 2px solid var(--v-footer-accent, currentColor);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

.footer_block .background-pattern {
  opacity: var(--v-footer-pattern-opacity, 0.75);
}

@media screen and (max-width: 767px) {
  .footer_block {
    margin-top: 3.5rem;
  }
}

/* ---- Section backgrounds: white / warm neutrals in rhythm ------------- */
/* Neutral, never the theme accent, so every White-Label preset works on
   them. Each section paints the full viewport width (the content stays in
   its container); the sections touch, so no white gaps appear between them.
   Hero + Booking white, Services ivory, About white, Testimonial stone,
   FAQ white, pre-footer and footer plate their own surfaces (Footer, above). The hero gets no background of its own: it is
   already white (the page), and its photograph sits behind the section
   (.hero_background, z-index below it), so a section background would hide
   it. */
:root {
  --v-section-white: #ffffff;
  --v-section-ivory: #f8f7f4;
  --v-section-stone: #f1f0ec;
}

#vario-content-03,
#vario-faq-02 {
  background-color: var(--v-section-white);
}

#vario-feature-04 {
  background-color: var(--v-section-ivory);
}

#vario-footer-04 {
  background-color: var(--v-section-prefooter, #f7f7f5);
}

/* ---- Pre-footer: the editorial trust strip -------------------------- */
/* Three borderless columns (icon, title, description), a thin divider and
   a discreet closing line, on the Pre-footer Surface: no card, border,
   shadow or motion. Every colour is a surface token — --vs-ink (titles,
   icons), --vs-muted (descriptions, closing line), --vs-dash (divider) —
   which Theme → Surfaces derives readable for a chosen colour on
   `#vario-footer-04 > .container-medium` (inc/white-label.php); the
   fallbacks are Light's. Compact: less air above it and before the plate
   than a full section. Desktop three columns; tablet one row per item
   (icon, title, description side by side); phone icon beside a stacked
   title and description. */
#vario-footer-04.section-medium {
  padding-top: 4.5rem;
}

#vario-footer-04 > .container-medium + .footer_block {
  margin-top: 3rem;
}

.trust_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4.5vw, 5rem);
  row-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
  margin: 0;
}

.trust_icon {
  color: var(--vs-ink, #171717);
  line-height: 0;
}

.trust_icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.trust_body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

#vario-footer-04 .trust_title {
  color: var(--vs-ink, #171717);
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.005em;
}

#vario-footer-04 .trust_text {
  max-width: 22rem;
  color: var(--vs-muted, #666);
}

.trust_closing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
}

.trust_grid + .trust_closing {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vs-dash, #dddbd6);
}

.trust_closing-text {
  margin: 0;
  color: var(--vs-muted, #666);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: 0.01em;
}

.trust_closing-text.is-right {
  margin-left: auto;
  text-align: right;
}

@media screen and (max-width: 991px) {
  .trust_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.75rem;
  }

  .trust_item {
    display: grid;
    grid-template-columns: auto minmax(9rem, 13rem) minmax(0, 1fr);
    align-items: start;
    column-gap: 1.25rem;
  }

  .trust_body {
    display: contents;
  }

  .trust_icon {
    margin-top: 0.125rem;
  }

  #vario-footer-04 .trust_text {
    max-width: 34rem;
  }
}

@media screen and (max-width: 767px) {
  #vario-footer-04.section-medium {
    padding-top: 3.5rem;
  }

  #vario-footer-04 > .container-medium + .footer_block {
    margin-top: 2.5rem;
  }

  .trust_grid + .trust_closing {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 599px) {
  .trust_item {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.25rem;
  }

  .trust_icon {
    grid-row: span 2;
  }

  #vario-footer-04 .trust_text {
    max-width: none;
  }

  .trust_closing {
    flex-direction: column;
    align-items: flex-start;
  }

  .trust_closing-text.is-right {
    margin-left: 0;
    text-align: left;
  }
}

#vario-testimonial-02 {
  background-color: var(--v-section-stone);
}