@charset "UTF-8";
/* ======================================
   FRENCHTEAM — CSS GLOBAL (CLEAN & SIMPLE)
   + FORMINATOR UNIFIÉ + ANIMATION HÔTEL
====================================== */
/* --------------------------
   0) Variables globales
--------------------------- */
:root {
  --ft-header-desktop: 88px;
  --ft-header-mobile: 70px;
  --ft-page-bg: #f3fbfc;
  --ft-blue:#0070ba;
  --ft-deep:#004d7a;
  --ft-cyan:#00a8e8;
  --ft-card-bg:rgba(0,112,186,0.045);
  --ft-card-border:rgba(0,112,186,0.18);
  --ft-card-shadow:0 2px 8px rgba(0,112,186,0.08);
  --ft-soft-bg:#f5fbff;
  --ft-soft-border:#cfe8fb;
  /* Champs */
  --ft-input-radius:14px;
  --ft-input-border:1.5px solid var(--ft-blue);
  --ft-input-padding:12px 12px;
  --ft-input-shadow:0 2px 6px rgba(0,112,186,0.08);
}

/* --------------------------
   1) Nettoyage / cachages
--------------------------- */
.page-header {
  display: none !important;
}

div#xyzscriptis-credit {
  display: none !important;
}

.footer {
  display: none !important;
}

.ft-summary {
  display: none !important;
}

/* ✅ Menu toujours visible */
.navbar,
header,
.site-header,
.main-navigation,
.primary-navigation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix spécifique */
#post-719 {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* --------------------------
   2) Décalage contenu sous le menu
--------------------------- */
body:not(.home) .wp-site-blocks,
body:not(.home) #page,
body:not(.home) .site,
body:not(.home) #content,
body:not(.home) .site-content,
body:not(.home) .content-area,
body:not(.home) .site-main,
body:not(.home) #primary {
  padding-top: 0 !important;
}

@media (min-width: 769px) {
  body:not(.home) main,
  body:not(.home) article,
  body:not(.home) .entry-content,
  body:not(.home) .wp-block-post-content,
  body:not(.home) .wp-site-blocks > main {
    padding-top: var(--ft-header-desktop) !important;
  }
}
@media (max-width: 768px) {
  body:not(.home) main,
  body:not(.home) article,
  body:not(.home) .entry-content,
  body:not(.home) .wp-block-post-content,
  body:not(.home) .wp-site-blocks > main {
    padding-top: var(--ft-header-mobile) !important;
  }
}
html {
  scroll-padding-top: 110px;
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 90px;
  }
}
/* --------------------------
   3) Typo
--------------------------- */
.cert-title {
  font-size: clamp(18px, 1.6vw, 24px) !important;
}

/* ==============================
   HERO CINEMATIC — UPGRADE VISUEL
   (sans changer ton HTML)
============================== */
/* Le container hero devient une vraie "card" premium */
.ft-hero {
  position: relative;
  max-width: 980px;
  margin: 24px auto 28px;
  padding: clamp(22px, 4vw, 44px);
  border-radius: 22px;
  /* glass + profondeur */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  text-align: center;
  color: #fff;
  overflow: hidden;
}

/* Halo / glow derrière */
.ft-hero::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(600px 220px at 50% 0%, rgba(0, 168, 232, 0.35), transparent 65%), radial-gradient(520px 220px at 20% 30%, rgba(0, 112, 186, 0.25), transparent 70%);
  filter: blur(2px);
  opacity: 0.95;
  pointer-events: none;
}

/* Shine léger (ça fait “wow” sans être kitsch) */
.ft-hero::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 70%;
  height: 220%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  opacity: 0.85;
  pointer-events: none;
  animation: ftShine 5.5s ease-in-out infinite;
}

@keyframes ftShine {
  0% {
    transform: translateX(-35%) rotate(20deg);
    opacity: 0.15;
  }
  35% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.35;
  }
  100% {
    transform: translateX(145%) rotate(20deg);
    opacity: 0.12;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ft-hero::after {
    animation: none;
    opacity: 0.25;
  }
}
/* TITRE plus impactant */
.ft-hero-title.cinematic {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(0, 160, 220, 0.35), 0 0 48px rgba(0, 90, 160, 0.25), 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Sous-ligne “ciné” plus visible */
.ft-hero-title.cinematic span {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.7em;
  letter-spacing: 0.18em;
  color: #a8edff;
}

.ft-hero-title.cinematic span::after {
  content: "";
  display: block;
  width: 170px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #a8edff, #0070ba, transparent);
  box-shadow: 0 10px 28px rgba(0, 168, 232, 0.25);
}

/* Subtitle : plus “pro”, meilleur contraste */
.ft-hero-subtitle {
  position: relative;
  z-index: 2;
  margin: 18px auto 0;
  max-width: 720px;
  font-size: 1.12rem;
  line-height: 1.6;
  opacity: 0.95;
  /* micro fond pour lisibilité */
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animation d’entrée (ton .ft-hero-anim) un peu plus “ciné” */
.ft-hero-anim {
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  animation: ftHeroIn 0.85s cubic-bezier(0.2, 0.9, 0.2, 1) 0.1s forwards;
}

@keyframes ftHeroIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* MOBILE PUNCHY */
@media (max-width: 768px) {
  .ft-hero {
    margin: 16px auto 18px;
    padding: 18px 16px 20px;
    border-radius: 18px;
  }
  .ft-hero-title.cinematic {
    font-size: clamp(2.15rem, 8.5vw, 3.25rem);
    letter-spacing: 0.04em;
  }
  .ft-hero-title.cinematic span {
    font-size: 0.78em;
    letter-spacing: 0.16em;
  }
  .ft-hero-title.cinematic span::after {
    width: 120px;
    margin-top: 12px;
  }
  .ft-hero-subtitle {
    font-size: 1.02rem;
    margin-top: 14px;
    padding: 10px 12px;
  }
}
/* --------------------------
   5) Pages PLANNING — FULL WIDTH + FADE
--------------------------- */
:is(.page-id-140, .page-id-4882, .page-id-3264, .page-id-1829, .page-id-3082) .entry-content {
  background-color: var(--ft-page-bg);
}

:is(.page-id-140, .page-id-4882, .page-id-3264, .page-id-1829, .page-id-3082) .wp-block-image.alignfull:first-of-type {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50%;
  transform: translateX(-50%);
}

:is(.page-id-140, .page-id-4882, .page-id-3264, .page-id-1829, .page-id-3082) .wp-block-image.alignfull:first-of-type img {
  display: block;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  margin: 0 !important;
}

:is(.page-id-140, .page-id-4882, .page-id-3264, .page-id-1829, .page-id-3082) .wp-block-image.alignfull:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(243, 251, 252, 0) 0%, rgba(243, 251, 252, 0) 58%, rgba(243, 251, 252, 0.35) 72%, rgba(243, 251, 252, 0.78) 88%, rgb(243, 251, 252) 100%);
}

@media (max-width: 768px) {
  :is(.page-id-140, .page-id-4882, .page-id-3264, .page-id-1829, .page-id-3082) .wp-block-image.alignfull:first-of-type::after {
    background: linear-gradient(to bottom, rgba(243, 251, 252, 0) 0%, rgba(243, 251, 252, 0) 62%, rgba(243, 251, 252, 0.75) 74%, rgb(243, 251, 252) 92%);
  }
}
/* ======================================================================
   6) FORMINATOR — Harmonisation totale (natif + injecté)
====================================================================== */
/* Conteneur global */
.forminator-container,
.forminator-ui.forminator-custom-form {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(4px);
}

/* Labels */
.forminator-field label {
  font-weight: 900 !important;
  color: var(--ft-deep) !important;
}

/* Champs natifs (inputs/select/textarea + date + email etc) */
.forminator-ui input[type=text],
.forminator-ui input[type=email],
.forminator-ui input[type=tel],
.forminator-ui input[type=number],
.forminator-ui input[type=date],
.forminator-ui textarea,
.forminator-ui select {
  border-radius: var(--ft-input-radius) !important;
  border: var(--ft-input-border) !important;
  padding: var(--ft-input-padding) !important;
  box-shadow: var(--ft-input-shadow) !important;
  background: #fff !important;
  color: #0b2a3a !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Focus */
.forminator-ui input:focus,
.forminator-ui textarea:focus,
.forminator-ui select:focus {
  outline: none !important;
  border-color: #005f9e !important;
  box-shadow: 0 0 8px rgba(0, 95, 158, 0.3) !important;
}

/* Placeholder */
.forminator-ui input::placeholder,
.forminator-ui textarea::placeholder {
  color: #7aa9c9 !important;
}

/* Bouton submit */
.forminator-button-submit {
  background-color: var(--ft-blue) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  padding: 12px 24px !important;
  transition: 0.25s;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 12px rgba(0, 112, 186, 0.2);
  border: none !important;
  cursor: pointer;
}

.forminator-button-submit:hover {
  background-color: #005f9e !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 95, 158, 0.3);
}

@media (max-width: 600px) {
  .forminator-container,
  .forminator-ui.forminator-custom-form {
    padding: 18px;
  }
  .forminator-button-submit {
    width: 100%;
  }
}
/* Upload zone */
.forminator-upload {
  border: 2px dashed var(--ft-blue) !important;
  background-color: rgba(0, 112, 186, 0.05) !important;
  border-radius: var(--ft-input-radius) !important;
  padding: 12px !important;
  text-align: center;
  transition: 0.3s;
  color: var(--ft-deep) !important;
  font-weight: 800 !important;
}

.forminator-upload:hover {
  background-color: rgba(0, 112, 186, 0.1) !important;
  transform: scale(1.02);
}

/* Checkbox / radio */
.forminator-checkbox .forminator-checkbox-box,
.forminator-radio .forminator-radio-button {
  border-color: var(--ft-blue) !important;
}

.forminator-checkbox input:checked + .forminator-checkbox-box,
.forminator-radio input:checked + .forminator-radio-button {
  background: var(--ft-blue) !important;
  border-color: var(--ft-blue) !important;
}

/* Confirmation */
.forminator-response-message {
  border-radius: 14px;
  border: 1px solid var(--ft-soft-border);
  background: var(--ft-soft-bg);
  color: var(--ft-deep);
  padding: 14px 16px;
  font-weight: 800;
}

/* ======================================================================
   7) #ft-controller — Cards unifiées + animation hébergement
====================================================================== */
/* Cache de secours */
.ft-hidden {
  display: none !important;
}

/* Controller wrapper */
#ft-controller {
  margin: 14px 0 6px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0, 112, 186, 0.045);
  border: 1px solid rgba(0, 112, 186, 0.16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

/* Header count */
#ft-controller .ft-ctrl-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

#ft-controller label {
  color: var(--ft-deep);
  font-weight: 900;
}

#ft-controller select#ft-count {
  border: var(--ft-input-border);
  border-radius: var(--ft-input-radius);
  padding: 10px 12px;
  background: #fff;
  color: #0b2a3a;
  box-shadow: var(--ft-input-shadow);
}

/* Cards */
#ft-controller .ft-guest,
#ft-controller .ft-hotel,
#ft-controller #ft-total {
  background: var(--ft-card-bg);
  border: 1px solid var(--ft-card-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--ft-card-shadow);
}

#ft-controller .ft-guest {
  margin-bottom: 12px;
}

#ft-controller .ft-hotel {
  margin-top: 12px;
  position: relative;
}

#ft-controller #ft-total {
  margin: 12px 0 0;
}

/* Separator soft */
#ft-controller .ft-hotel::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 168, 232, 0), rgba(0, 168, 232, 0.55), rgba(0, 77, 122, 0.55), rgba(0, 168, 232, 0));
  opacity: 0.55;
}

/* Participant layout */
#ft-controller .ft-guest-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

#ft-controller .ft-col {
  flex: 1 1 180px;
  min-width: 0;
}

#ft-controller .ft-col-price {
  flex: 0 0 140px;
  text-align: right;
  font-weight: 900;
  color: var(--ft-deep);
}

/* Injected inputs = same as Forminator native */
#ft-controller input,
#ft-controller select,
#ft-controller textarea {
  border-radius: var(--ft-input-radius);
  border: var(--ft-input-border);
  padding: var(--ft-input-padding);
  box-shadow: var(--ft-input-shadow);
  background: #fff;
  color: #0b2a3a;
  box-sizing: border-box;
  min-width: 0;
}

/* Prices */
#ft-controller .ft-guest-price {
  color: var(--ft-deep);
  margin-top: 4px;
}

/* Hotel title */
#ft-controller .ft-hotel-title {
  margin-bottom: 10px;
  color: var(--ft-deep);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}

#ft-controller .ft-hotel-title::after {
  content: "";
  height: 2px;
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 168, 232, 0.65), rgba(0, 77, 122, 0.55), rgba(0, 168, 232, 0.15));
  opacity: 0.65;
}

#ft-controller .ft-mini {
  font-size: 13px;
  color: var(--ft-deep);
  font-weight: 900;
  display: block;
  margin: 0 0 6px;
  opacity: 0.95;
}

/* Hotel grid */
#ft-controller .ft-hotel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 6px;
}

/* Breakdown */
#ft-controller .ft-hotel-breakdown {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 112, 186, 0.18);
  box-shadow: 0 2px 10px rgba(0, 112, 186, 0.06);
  color: var(--ft-deep);
  display: grid;
  gap: 7px;
}

#ft-controller .ft-hotel-breakdown strong {
  float: right;
  font-weight: 900;
}

#ft-controller .ft-hotel-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ft-deep);
  opacity: 0.85;
}

/* Total */
#ft-controller #ft-total {
  background: linear-gradient(180deg, rgba(245, 251, 255, 0.9), rgba(245, 251, 255, 0.6));
  border: 1px solid var(--ft-soft-border);
}

#ft-controller #ft-total strong {
  font-weight: 900;
  float: right;
}

#ft-controller .ft-total-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ft-deep);
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 640px) {
  #ft-controller .ft-col-price {
    flex: 1 1 100%;
    text-align: left;
  }
  #ft-controller #ft-total strong {
    float: none;
  }
  #ft-controller .ft-hotel-breakdown strong {
    float: none;
    margin-left: 6px;
  }
}
/* ✅ Erreurs DOB */
.ft-error {
  margin-top: 6px;
  font-size: 12px;
  color: #b00020;
  font-weight: 900;
}

.ft-invalid {
  border-color: #b00020 !important;
  box-shadow: 0 0 0 2px rgba(176, 0, 32, 0.08) !important;
}

/* ======================================================================
   8) Animation hébergement (fade/slide)
   - La classe .ft-hotel-active est ajoutée via JS
====================================================================== */
#ft-controller .ft-hotel {
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
  opacity: 0.92;
  transform: translateY(6px);
  filter: saturate(0.96);
}

#ft-controller .ft-hotel.ft-hotel-active {
  opacity: 1;
  transform: translateY(0);
  filter: saturate(1);
}

@media (prefers-reduced-motion: reduce) {
  #ft-controller .ft-hotel {
    transition: none;
    transform: none;
  }
}
/* =========================
   FrenchTeam – Open Water (BLUE + readable)
   Scope: .ft-openwater-content only
========================= */
.ft-openwater-content {
  /* Palette */
  --ft-blue-900: #06243a;
  --ft-blue-800: #083353;
  --ft-blue-700: #0b4672;
  --ft-blue-600: #0f5a8f;
  --ft-cyan: #36c3ff;
  /* Cards */
  --ft-card: linear-gradient(180deg, rgba(54,195,255,.18), rgba(11,70,114,.10));
  --ft-card-solid: rgba(8,51,83,.12);
  --ft-border: rgba(11,70,114,.28);
  /* Text (dark for readability on light-ish blue cards) */
  --ft-text: #06243a;
  --ft-muted: rgba(6,36,58,.78);
  color: var(--ft-text);
}

/* Global typography */
.ft-openwater-content p,
.ft-openwater-content li {
  color: var(--ft-text);
  line-height: 1.65;
  font-size: 16px;
}

.ft-openwater-content p {
  color: var(--ft-muted);
}

/* Headings */
.ft-openwater-content h3.wp-block-heading {
  color: var(--ft-blue-900);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none; /* plus lisible */
  font-size: clamp(18px, 1.6vw, 22px);
  margin: 0 0 12px;
}

.ft-openwater-content h3.wp-block-heading strong {
  color: var(--ft-blue-900);
}

/* “INCLUS” badge title */
.ft-openwater-content h3.wp-block-heading.has-text-align-center.has-medium-font-size {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(54, 195, 255, 0.35);
  background: linear-gradient(135deg, rgba(54, 195, 255, 0.35), rgba(15, 90, 143, 0.18));
  color: var(--ft-blue-900);
  box-shadow: 0 14px 30px rgba(6, 36, 58, 0.1);
}

/* Columns = blue cards */
.ft-openwater-content .wp-block-columns.alignfull {
  gap: 22px !important;
  align-items: stretch;
  margin: 0;
}

.ft-openwater-content .wp-block-column {
  border: 1px solid var(--ft-border);
  background: var(--ft-card);
  border-radius: 20px;
  padding: 18px 18px;
  box-shadow: 0 14px 35px rgba(6, 36, 58, 0.1);
}

/* Images */
.ft-openwater-content figure.wp-block-image {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(54, 195, 255, 0.25);
  box-shadow: 0 16px 40px rgba(6, 36, 58, 0.12);
}

.ft-openwater-content figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lists: clean + cyan bullets */
.ft-openwater-content ul.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.ft-openwater-content ul.wp-block-list > li {
  position: relative;
  padding: 10px 12px 10px 46px;
  border-radius: 14px;
  border: 1px solid rgba(54, 195, 255, 0.22);
  background: linear-gradient(180deg, rgba(54, 195, 255, 0.18), rgba(255, 255, 255, 0.55));
  /* ↑ léger blanc mais “bleuté”, très lisible */
  color: var(--ft-blue-900);
}

.ft-openwater-content ul.wp-block-list > li::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #032033;
  background: linear-gradient(135deg, var(--ft-cyan), rgba(255, 255, 255, 0.95));
  box-shadow: 0 10px 22px rgba(54, 195, 255, 0.18);
}

/* Strong inside list */
.ft-openwater-content ul.wp-block-list li strong {
  color: var(--ft-blue-900);
}

/* Long paragraph highlight card */
.ft-openwater-content .alignwide .wp-block-column > p {
  border: 1px solid rgba(54, 195, 255, 0.25);
  background: linear-gradient(135deg, rgba(54, 195, 255, 0.2), rgba(11, 70, 114, 0.08));
  border-radius: 18px;
  padding: 18px !important;
  color: rgba(6, 36, 58, 0.82);
}

/* Reduce huge spacers a bit */
.ft-openwater-content .wp-block-spacer {
  height: 18px !important;
}

/* Optional: 2-column “INCLUS” list on desktop */
@media (min-width: 860px) {
  .ft-openwater-content h3.wp-block-heading.has-medium-font-size + .wp-block-list {
    grid-template-columns: 1fr 1fr;
  }
}
/* Mobile tweaks */
@media (max-width: 860px) {
  .ft-openwater-content .wp-block-columns.alignfull {
    gap: 14px !important;
  }
  .ft-openwater-content .wp-block-column {
    padding: 16px;
  }
}
/* =========================
   Typo hierarchy – clearer titles / readability
========================= */
/* Base text */
.ft-openwater-content {
  --ft-h3-size: clamp(20px, 2vw, 28px);
  --ft-h3-size-small: clamp(18px, 1.7vw, 22px);
  --ft-body: 16px;
  --ft-body-small: 15px;
  --ft-line: 1.7;
}

/* Main section titles (all h3) */
.ft-openwater-content h3.wp-block-heading {
  font-size: var(--ft-h3-size);
  line-height: 1.15;
  margin: 0 0 14px;
  text-transform: none;
  letter-spacing: 0;
}

/* The “INCLUS” title should stay compact like a badge */
.ft-openwater-content h3.wp-block-heading.has-medium-font-size {
  font-size: var(--ft-h3-size-small) !important;
  line-height: 1.1;
  padding: 10px 18px;
}

/* Make numbered titles clearer: “1.” gets a badge look */
.ft-openwater-content h3.wp-block-heading.has-text-align-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Style the number at the start of titles: "1." "2." ... */
.ft-openwater-content h3.wp-block-heading.has-text-align-center {
  position: relative;
}

/* This targets the first text node visually by styling the whole title,
   but we can emphasize the number using a trick: */
.ft-openwater-content h3.wp-block-heading.has-text-align-center {
  padding-top: 2px;
}

/* Better visual emphasis for titles inside cards */
.ft-openwater-content .wp-block-column h3.wp-block-heading {
  border-bottom: 1px solid rgba(54, 195, 255, 0.22);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

/* Paragraph blocks */
.ft-openwater-content p {
  font-size: var(--ft-body);
  line-height: var(--ft-line);
  margin: 10px 0 0;
}

/* The long intro paragraph (alignwide) slightly bigger for readability */
.ft-openwater-content .alignwide .wp-block-column > p {
  font-size: 16.5px;
  line-height: 1.75;
}

/* Lists */
.ft-openwater-content ul.wp-block-list {
  gap: 10px;
  margin-top: 12px;
}

.ft-openwater-content ul.wp-block-list > li {
  font-size: var(--ft-body);
  line-height: 1.55;
}

/* If list item is very long, make it a bit smaller so it’s not chunky */
.ft-openwater-content ul.wp-block-list > li:has(> strong) {
  font-size: var(--ft-body-small);
}

/* On mobile: keep titles strong but not huge */
@media (max-width: 860px) {
  .ft-openwater-content h3.wp-block-heading {
    font-size: clamp(18px, 5vw, 22px);
  }
  .ft-openwater-content p,
  .ft-openwater-content ul.wp-block-list > li {
    font-size: 15.5px;
  }
}
.ft-openwater-content .wp-block-group.alignfull {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}