/* ==========================================================================
   ORA REIZEN — page section widgets
   Handle: ora-sections. Depends on ora-widgets (which depends on ora-tokens).

   Split out from widgets.css so the chrome (header/footer, loaded on every
   page) stays separate from the page sections. Ported from
   design/src/partials/styles.html, every class .ora- prefixed and every token
   --ora-*: this loads inside Astra and WooCommerce, where .field, .chip,
   .pill, .step and .band are all names something else already uses.

   ⚠️ Before adding a class here, check both sheets:
       grep -oh "\.ora-[a-z0-9-]*" assets/css/*.css | sort -u
   ========================================================================== */

/* ==========================================================================
   1. SECTION PRIMITIVES
   ========================================================================== */

.ora-sect { padding: 96px 0; }
.ora-sect--cream { background: var(--ora-cream); }

.ora-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ora-gold);
  margin: 0 0 14px;
}
.ora-h-sec { font-size: clamp(1.75rem, 3.2vw, 2.6rem); margin: 0; }
.ora-lede { font-size: 1.045rem; max-width: 56ch; margin: 0; }

.ora-sect-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
}
.ora-sect-head--center { flex-direction: column; align-items: center; text-align: center; }

.ora-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ora-navy-800);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: gap .25s var(--ora-ease), color .2s;
}
.ora-more:hover { gap: 12px; color: var(--ora-red); }

.ora-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--ora-r-full);
  background: #fff;
  border: 1px solid var(--ora-line);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ora-body);
  text-decoration: none;
  cursor: pointer;
  transition: .2s;
}
.ora-chip:hover {
  border-color: var(--ora-navy-800);
  color: var(--ora-navy-800);
  background: var(--ora-cream);
}
.ora-chip.is-on {
  background: var(--ora-navy-800);
  border-color: var(--ora-navy-800);
  color: #fff;
}

.ora-pill {
  font-size: .73rem;
  font-weight: 600;
  color: var(--ora-body);
  background: var(--ora-cream);
  border: 1px solid var(--ora-cream-200);
  border-radius: var(--ora-r-full);
  padding: 5px 11px;
}

.ora-stars { display: inline-flex; gap: 3px; }
.ora-stars svg { width: 17px; height: 17px; fill: var(--ora-gold-400); stroke: none; max-width: none; }

.ora-filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 36px; }

/* ==========================================================================
   2. HERO
   ========================================================================== */

.ora-hero {
  position: relative;
  color: #fff;
  isolation: isolate;
  padding: 96px 0 150px;
  font-family: var(--ora-f);
}
.ora-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* ⚠️ `.ora-hero` repeated to beat `.elementor img { height: auto }`, which is
   the same (0,1,1) weight and loads later. Without it the hero photo rendered
   at its NATURAL height inside the box — 939px of image in a 647px frame — so
   `object-fit: cover` never applied and every hero was top-anchored and cropped
   at the bottom instead of centre-filled. Same root cause as the deal cards
   below; found by measuring, because a cropped hero still looks like a hero. */
.ora-hero .ora-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
}
/* The slow zoom is frontend-only: in the editor it would restart on every
   keystroke, and it has no business running behind a reduced-motion user. */
.ora-anim .ora-hero .ora-hero__media img { animation: oraHeroZoom 18s var(--ora-ease) forwards; }
@keyframes oraHeroZoom { to { transform: scale(1); } }

.ora-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(7,27,51,.94) 0%, rgba(7,27,51,.80) 34%, rgba(7,27,51,.38) 62%, rgba(7,27,51,.20) 100%);
}
.ora-hero__inner { max-width: 660px; }
.ora-hero .ora-eyebrow { color: var(--ora-gold-200); }
.ora-hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 5.6vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0;
}
.ora-hero h1 em { font-style: normal; color: var(--ora-gold-400); display: block; }

/* ---------------------------------------------------------------------------
   The compact band: the same hero with its photograph turned off.

   Used on the eleven pages that used to open with a white prose block. It is
   deliberately NOT a small hero -- the type steps down, the padding halves, and
   a gold hairline replaces the photograph as the thing that says "this page has
   a designed opening". On a legal page that is the right amount of ceremony.
   --------------------------------------------------------------------------- */
/* ⚠️ THE CLASS IS REPEATED, and it is not decoration. A later block in this
   same file carries "@media (max-width: 760px) { .ora-hero { padding: 64px 0
   130px } }" — (0,1,0), exactly the same weight as .ora-hero--band, and it
   comes AFTER. So the band inherited a 130px bottom padding on phones and
   rendered as a navy box with the title in the top third and nothing under it.
   (0,2,0) wins on weight rather than on position, so nothing here depends on
   where in the file it sits. */
.ora-hero.ora-hero--band {
  padding: 58px 0 54px;
  background: var(--ora-navy-900, #071b33);
  border-bottom: 3px solid var(--ora-gold-400, #c9a227);
}

/* No photo, so no scrim to lay over one. Left as a no-op element rather than
   removed, so nothing that counts children in this section has to change. */
.ora-hero--band .ora-hero__scrim { display: none; }

.ora-hero--band .ora-hero__inner { max-width: 780px; }

/* Steps down from clamp(2.5rem, 5.6vw, 4.15rem). A privacy statement does not
   want a 66px headline, and "Betalingsmogelijkheden" is a long word. */
.ora-hero--band h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  letter-spacing: -.02em;

  /* ⚠️ DUTCH COMPOUNDS OVERFLOW, AND THEY WILL KEEP DOING IT.
     "Annuleringsvoorwaarden" is 22 characters with nowhere to break, and at
     390px it pushed the page 37px sideways — the only one of 22 band pages that
     did, which is exactly how a layout bug hides. "Betalingsmogelijkheden" is
     the same length and happened to fit by a few pixels.

     Two belts: hyphens break the word properly where the browser knows the
     language (WordPress sets lang on <html>), and overflow-wrap guarantees a
     break even where it does not. Both only act on a word that would otherwise
     overflow, so nothing that already fits moves.

     ⚠️ Scoped to the BAND. The photographic hero's titles are ours and fit,
     and that hero is measured against the approved mockup at 0px (#50). */
  hyphens: auto;
  overflow-wrap: break-word;
}

.ora-hero--band .ora-hero__rate { margin: 14px 0 0; }

.ora-hero--band .ora-hero__sub {
  font-size: .95rem;
  color: rgba(255, 255, 255, .82);
}

@media (max-width: 782px) {
  .ora-hero.ora-hero--band { padding: 40px 0 38px; }
}

.ora-hero__rate { display: flex; align-items: center; gap: 13px; margin: 24px 0 10px; }
.ora-hero__sub {
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.ora-hero__usps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 40px;
  max-width: 620px;
}
.ora-hero__usp { display: flex; flex-direction: column; gap: 10px; }
.ora-hero__usp svg { stroke: var(--ora-gold-400); }
.ora-hero__usp span { font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.9); font-weight: 500; }

.ora-hero__badge {
  position: absolute;
  right: var(--ora-gut);
  bottom: 150px;
  background: #fff;
  border-radius: var(--ora-r-md);
  padding: 16px 22px;
  box-shadow: var(--ora-s-lg);
  color: var(--ora-ink);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ora-hero__badge b { font-size: 1.5rem; font-weight: 800; line-height: 1; display: block; }
.ora-hero__badge small { display: block; font-size: .75rem; color: var(--ora-muted); font-weight: 600; margin-top: 3px; }
.ora-hero__badge svg { fill: var(--ora-gold-400); stroke: none; width: 26px; height: 26px; max-width: none; }

/* ==========================================================================
   3. SEARCH BAR
   ========================================================================== */

.ora-search { position: relative; z-index: 20; font-family: var(--ora-f); }
/* Lifts the card over the hero above it. A control switches this off for
   pages where the search bar does not sit under a hero. */
.ora-search--overlap { margin-top: -72px; }

.ora-search__card {
  background: #fff;
  border-radius: var(--ora-r-lg);
  box-shadow: var(--ora-s-xl);
  overflow: hidden;
}
.ora-search__grid {
  display: grid;
  grid-template-columns: 1.3fr .95fr .8fr 1.15fr auto;
  align-items: stretch;
  padding: 10px;
}
.ora-field {
  position: relative;
  padding: 14px 18px;
  border-right: 1px solid var(--ora-line-2);
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  border-radius: var(--ora-r-sm);
  transition: background .2s;
  min-width: 0;
  margin: 0;
}
.ora-field:hover { background: var(--ora-cream); }
.ora-field:last-of-type { border-right: 0; }
.ora-field > svg { stroke: var(--ora-gold); }
.ora-field__txt { min-width: 0; flex: 1; }
.ora-field__txt > span:first-child {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ora-muted);
  margin-bottom: 5px;
}
/* ⚠️ Astra forces height:40px and its own border/background on selects, which
   crops these two-line fields. Every property is restated. */
.ora-field select,
.ora-field input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--ora-f);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ora-ink);
  background: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ora-field select:focus,
.ora-field input:focus { background: transparent; border: 0; box-shadow: none; }

.ora-search__submit { display: flex; align-items: center; padding: 6px; }
.ora-search__submit .ora-btn { height: 100%; padding: 0 34px; }

.ora-search__quick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 4px;
  margin-top: 20px;
}
.ora-search__quick > span { font-size: .8rem; color: var(--ora-muted); font-weight: 600; }

/* ==========================================================================
   4. USP STRIP
   ========================================================================== */

.ora-usps { background: var(--ora-cream); border-top: 1px solid var(--ora-cream-200); border-bottom: 1px solid var(--ora-cream-200); font-family: var(--ora-f); }
.ora-usps__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.ora-usp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 22px;
  border-right: 1px solid var(--ora-cream-200);
}
.ora-usp:last-child { border-right: 0; }
.ora-usp svg { stroke: var(--ora-gold); }
.ora-usp b {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ora-navy-800);
  line-height: 1.35;
  margin-bottom: 2px;
}
.ora-usp small { font-size: .77rem; color: var(--ora-muted); line-height: 1.4; display: block; }

/* ==========================================================================
   5. CARD GRID — destinations, categories, "why us"
   ========================================================================== */

.ora-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ora-card {
  position: relative;
  border-radius: var(--ora-r-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
  box-shadow: var(--ora-s-md);
  text-decoration: none;
}
.ora-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ora-ease); }
.ora-card:hover img { transform: scale(1.08); }
/* Strong enough to hold white text over the pale images too (Side, Bodrum). */
.ora-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(7,27,51,.96) 0%, rgba(7,27,51,.78) 32%, rgba(7,27,51,.30) 58%, rgba(7,27,51,.04) 82%);
}
.ora-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 26px 24px; color: #fff; }
.ora-card__body h3 { color: #fff; font-size: 1.4rem; letter-spacing: .03em; text-transform: uppercase; margin: 0; }
.ora-card__body p { font-size: .85rem; color: rgba(255,255,255,.82); margin: 7px 0 16px; line-height: 1.5; }
.ora-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: var(--ora-r-xs);
  transition: .25s;
}
.ora-card:hover .ora-card__cta { background: #fff; color: var(--ora-navy-800); border-color: #fff; }
.ora-card__price {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: rgba(255,255,255,.95);
  color: var(--ora-navy-800);
  border-radius: var(--ora-r-full);
  padding: 7px 15px;
  font-size: .78rem;
  font-weight: 800;
  box-shadow: var(--ora-s-sm);
}

/* ==========================================================================
   6. DEAL GRID
   ========================================================================== */

.ora-deals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ora-deal {
  background: #fff;
  border: 1px solid var(--ora-line);
  border-radius: var(--ora-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ora-ease), box-shadow .35s var(--ora-ease), border-color .3s;
}
.ora-deal:hover { transform: translateY(-6px); box-shadow: var(--ora-s-lg); border-color: transparent; }
.ora-deal__media { position: relative; aspect-ratio: 16/11; overflow: hidden; }
/* ⚠️ `.ora-deal` is repeated to win a specificity TIE, not for emphasis.
   Elementor ships `.elementor img { height: auto }` — (0,1,1), exactly the same
   weight as `.ora-deal__media img`, from a stylesheet that loads AFTER ours. So
   it won every tie and the image rendered at its natural height inside a
   correctly-sized 16/11 box: 215px of photo in a 260px frame for one hotel,
   172px for another, and cards that no longer lined up.
   This was always broken and invisible, because the placeholder images happened
   to be roughly 16/11 themselves. Real hotel photography is 1.76:1 and 2.2:1,
   and the gap showed up the moment two of them sat side by side.
   Counting the opposing specificity and matching it is the house rule here —
   never `!important`. Gotcha 1 and 8 in CLAUDE.md are the same shape. */
.ora-deal .ora-deal__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ora-ease); }
.ora-deal:hover .ora-deal__media img { transform: scale(1.07); }

/* No hotel photography yet (#104). Matches .ora-rc__nophoto on the search
   results page, so the site says the same thing the same way in both places. */
.ora-deal__nophoto {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--ora-cream, #FBF6EC);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ora-gold, #B8862B);
}
.ora-deal__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ora-red);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--ora-r-xs);
}
.ora-deal__tag--gold { background: var(--ora-gold); }
.ora-deal__tag--green { background: var(--ora-green); }
.ora-deal__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  color: var(--ora-navy-800);
  cursor: pointer;
  transition: .2s;
}
.ora-deal__fav:hover,
.ora-deal__fav:focus-visible { background: #fff; color: var(--ora-red); }
.ora-deal__score {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: var(--ora-green);
  color: #fff;
  border-radius: var(--ora-r-xs);
  padding: 6px 11px;
  font-size: .82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ora-deal__score span { font-weight: 600; opacity: .85; }
.ora-deal__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.ora-deal__body .ora-stars { margin-bottom: 9px; }
.ora-deal__body .ora-stars svg { width: 14px; height: 14px; }
.ora-deal__body h3 { font-size: 1.12rem; line-height: 1.3; margin: 0; }
.ora-deal__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .83rem;
  color: var(--ora-muted);
  margin-top: 7px;
}
.ora-deal__loc svg { stroke: var(--ora-gold); width: 15px; height: 15px; }
.ora-deal__feats { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 18px; }
.ora-deal__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .79rem;
  color: var(--ora-muted);
  padding-top: 16px;
  border-top: 1px dashed var(--ora-line);
  margin-top: auto;
  flex-wrap: wrap;
}
.ora-deal__meta svg { stroke: var(--ora-gold); width: 14px; height: 14px; }
.ora-deal__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 16px; }
/* Deliberately INLINE, matching the mockup. As an inline span its line box is
   set by the parent's 16px/1.65 strut (26.4px), not by its own 12.8px — and
   display:block would shrink the row by 5px and shorten every deal card. The
   price below is display:flex, so it still starts on its own line. */
.ora-deal__was { font-size: .8rem; color: var(--ora-muted); text-decoration: line-through; }
.ora-deal__now {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ora-navy-800);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ora-deal__now small { font-size: .76rem; font-weight: 600; color: var(--ora-muted); }
.ora-deal__go {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--ora-r-sm);
  background: var(--ora-navy-800);
  color: #fff;
  display: grid;
  place-items: center;
  transition: .25s;
}
.ora-deal:hover .ora-deal__go { background: var(--ora-red); }

/* ==========================================================================
   7. NUMBERED STEPS — the "how it works" split
   ========================================================================== */

.ora-split { display: grid; grid-template-columns: 1fr 1.08fr; gap: 70px; align-items: center; }
.ora-split__media { position: relative; }
.ora-split__media img { border-radius: var(--ora-r-md); box-shadow: var(--ora-s-lg); width: 100%; }
.ora-split__float {
  position: absolute;
  right: -26px;
  bottom: -26px;
  background: var(--ora-navy-800);
  color: #fff;
  border-radius: var(--ora-r-md);
  padding: 24px 28px;
  box-shadow: var(--ora-s-lg);
  max-width: 230px;
}
.ora-split__float b { display: block; font-size: 2rem; font-weight: 800; color: var(--ora-gold-400); line-height: 1; }
.ora-split__float span { font-size: .83rem; color: rgba(255,255,255,.82); display: block; margin-top: 6px; line-height: 1.45; }

.ora-steps { display: flex; flex-direction: column; gap: 26px; margin-top: 34px; }
.ora-step { display: flex; gap: 20px; align-items: flex-start; }
.ora-step__num {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ora-gold-050);
  color: var(--ora-gold);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  border: 1.5px solid var(--ora-gold-200);
}
.ora-step h4 { font-size: 1.05rem; margin: 0 0 5px; }
.ora-step p { font-size: .92rem; line-height: 1.6; margin: 0; }

/* ==========================================================================
   8. REVIEWS
   ========================================================================== */

.ora-rev-top { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; margin-bottom: 44px; }
.ora-rev-score {
  background: var(--ora-navy-800);
  color: #fff;
  border-radius: var(--ora-r-md);
  padding: 28px 34px;
  text-align: center;
  min-width: 210px;
}
.ora-rev-score b { display: block; font-size: 3.1rem; font-weight: 800; line-height: 1; color: var(--ora-gold-400); }
.ora-rev-score .ora-stars { display: flex; justify-content: center; margin: 14px 0 10px; }
.ora-rev-score small { display: block; font-size: .79rem; line-height: 1.5; color: rgba(255,255,255,.75); }

.ora-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ora-rev {
  background: #fff;
  border: 1px solid var(--ora-line);
  border-radius: var(--ora-r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ora-ease), box-shadow .35s var(--ora-ease);
}
.ora-rev:hover { transform: translateY(-5px); box-shadow: var(--ora-s-lg); }
.ora-rev__quote { width: 34px; height: 34px; max-width: none; color: var(--ora-gold-200); margin-bottom: 14px; }
.ora-rev .ora-stars { margin-bottom: 14px; }
.ora-rev p { font-size: .93rem; line-height: 1.7; color: var(--ora-body); flex: 1; margin: 0; }
.ora-rev__who {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--ora-line-2);
}
.ora-rev__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ora-navy-800);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .9rem;
  flex-shrink: 0;
}
.ora-rev__who b { display: block; font-size: .9rem; color: var(--ora-ink); }
.ora-rev__who small { font-size: .78rem; color: var(--ora-muted); }

/* ==========================================================================
   9. CTA BAND
   ========================================================================== */

.ora-band {
  position: relative;
  isolation: isolate;
  padding: 92px 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
  font-family: var(--ora-f);
}
.ora-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* ⚠️ A gradient is a background-IMAGE, and Elementor's lazy-load nulls
   background-image below the fold. Painted as a real element instead. */
.ora-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7,27,51,.86), rgba(7,27,51,.92));
}
.ora-band .ora-eyebrow { color: var(--ora-gold-200); }
.ora-band h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 0; }
.ora-band p { color: rgba(255,255,255,.85); margin: 16px auto 34px; max-width: 52ch; }
.ora-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Scoped through .ora-band so it outweighs `.ora-band p` above (two classes
   beat one class + one element). Unscoped, the paragraph rule wins and the
   note sits 10px too high. */
.ora-band .ora-band__note { margin-top: 26px; font-size: .85rem; color: rgba(255,255,255,.7); }
.ora-btn--light {
  border: 1.5px solid rgba(255,255,255,.5);
  background: transparent;
  color: #fff;
}
.ora-btn--light:hover,
.ora-btn--light:focus-visible { background: #fff; color: var(--ora-navy-800); border-color: #fff; }

/* ==========================================================================
   10. TRUST SEALS — the standalone strip
   The row itself is .ora-trust / .ora-seal from widgets.css, so it is the same
   strip as the one in the footer. These modifiers only change the framing.
   ========================================================================== */

.ora-trust--section { border-bottom: 0; padding: 72px 0; }
.ora-trust--section.ora-trust--cream { background: var(--ora-cream); }
.ora-trust--section.ora-trust--none  { background: transparent; }
[data-ora="trust-seals"] h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  text-align: center;
  margin: 0 0 28px;
}
.ora-seal svg { width: 20px; height: 20px; stroke: var(--ora-gold); margin-bottom: 2px; }

/* ==========================================================================
   11. FAQ — native <details>, no JavaScript
   ========================================================================== */

.ora-faq-sect { padding: 96px 0; }
.ora-faq-sect--cream { background: var(--ora-cream); }
.ora-faq-sect--white { background: #fff; }

.ora-faq {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--ora-line);
}
.ora-faq details { border-bottom: 1px solid var(--ora-line); }
.ora-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 2px;
  cursor: pointer;
  font-weight: 700;
  font-size: .96rem;
  color: var(--ora-ink);
  list-style: none;
}
.ora-faq summary::-webkit-details-marker { display: none; }
.ora-faq summary::marker { content: ""; }
.ora-faq summary svg {
  stroke: var(--ora-gold);
  flex-shrink: 0;
  transition: transform .3s var(--ora-ease);
}
.ora-faq details[open] > summary { color: var(--ora-red); }
.ora-faq details[open] > summary svg { transform: rotate(180deg); }
.ora-faq__a { padding: 0 2px 20px; max-width: 72ch; }
[data-ora="faq"] .ora-faq__a p {
  margin: 0 0 12px;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ora-body);
}
[data-ora="faq"] .ora-faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   12. STAT STRIP
   ========================================================================== */

.ora-stats-sect { padding: 72px 0; }
.ora-stats-sect--navy  { background: var(--ora-navy-800); }
.ora-stats-sect--cream { background: var(--ora-cream); }
.ora-stats-sect--white { background: #fff; }

.ora-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.ora-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.ora-stat svg { stroke: var(--ora-gold); margin-bottom: 6px; }
.ora-stat__v {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ora-ink);
}
.ora-stat__l {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ora-muted);
  max-width: 22ch;
}
.ora-stats__note {
  text-align: center;
  font-size: .8rem;
  color: var(--ora-muted);
  margin: 26px 0 0;
}
.ora-stats-sect--navy .ora-stat__v { color: #fff; }
.ora-stats-sect--navy .ora-stat__l { color: rgba(255, 255, 255, .66); }
.ora-stats-sect--navy .ora-stat svg { stroke: var(--ora-gold-400); }
.ora-stats-sect--navy .ora-stats__note { color: rgba(255, 255, 255, .5); }

/* ==========================================================================
   13. PROSE — the legal and service pages
   WARNING: every heading rule here is written as [data-ora="prose"] .x h2, not
   .x h2. The child theme resets [data-ora] h1-h6 to margin:0 to undo Astra's
   WooCommerce sheet, and it loads AFTER this file — a single-class rule ties
   on specificity and loses, and the page comes out as one wall of text.
   ========================================================================== */

.ora-prose-sect { padding: 80px 0 96px; }
.ora-prose-sect--cream { background: var(--ora-cream); }
.ora-prose-sect--white { background: #fff; }

.ora-prose { max-width: 68ch; margin: 0 auto; }
[data-ora="prose"] .ora-prose__title {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin: 0 0 10px;
}
.ora-prose__updated {
  font-size: .82rem;
  color: var(--ora-muted);
  margin: 0 0 34px;
}
.ora-prose__toc {
  background: var(--ora-cream);
  border: 1px solid var(--ora-cream-200);
  border-radius: var(--ora-r-md);
  padding: 22px 26px;
  margin: 0 0 40px;
}
[data-ora="prose"] .ora-prose__toc h2 {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ora-gold);
  margin: 0 0 12px;
}
.ora-prose__toc ol { margin: 0; padding: 0 0 0 1.1em; list-style: decimal; }
.ora-prose__toc li { margin: 0 0 7px; font-size: .9rem; }
.ora-prose__toc a { color: var(--ora-navy-700); text-decoration: none; }
.ora-prose__toc a:hover { color: var(--ora-red); text-decoration: underline; }

.ora-prose__body { font-size: 1rem; line-height: 1.8; color: var(--ora-body); }
[data-ora="prose"] .ora-prose__body h2 {
  font-size: 1.32rem;
  margin: 42px 0 12px;
  scroll-margin-top: 110px; /* the header is sticky; anchors must clear it */
}
[data-ora="prose"] .ora-prose__body h3 { font-size: 1.06rem; margin: 30px 0 10px; }
[data-ora="prose"] .ora-prose__body h2:first-child { margin-top: 0; }
.ora-prose__body p { margin: 0 0 16px; }
.ora-prose__body ul,
.ora-prose__body ol { margin: 0 0 18px; padding-left: 1.35em; }
.ora-prose__body ul { list-style: disc; }
.ora-prose__body ol { list-style: decimal; }
.ora-prose__body li { margin: 0 0 8px; }
.ora-prose__body a { color: var(--ora-navy-700); text-decoration: underline; }
.ora-prose__body a:hover { color: var(--ora-red); }
.ora-prose__body strong { color: var(--ora-ink); font-weight: 700; }
.ora-prose__body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: .92rem; }
.ora-prose__body th,
.ora-prose__body td { border: 1px solid var(--ora-line); padding: 10px 13px; text-align: left; }
.ora-prose__body th { background: var(--ora-cream); color: var(--ora-ink); font-weight: 700; }
.ora-prose__body blockquote {
  margin: 0 0 22px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ora-gold-200);
  color: var(--ora-ink);
}

/* ==========================================================================
   14. FORM SECTION — callback, contact, quote
   WARNING: inputs are styled explicitly, including :focus. Astra fills form
   controls and buttons on :hover AND :focus, and a keyboard user must not get
   Astra's blue halfway through a booking enquiry.
   ========================================================================== */

.ora-formsect { padding: 96px 0; }
.ora-formsect--cream { background: var(--ora-cream); }
.ora-formsect--white { background: #fff; }
.ora-formsect--navy { background: var(--ora-navy-800); }
.ora-formsect--navy .ora-h-sec { color: #fff; }
.ora-formsect--navy .ora-lede { color: rgba(255, 255, 255, .78); }
.ora-formsect--navy .ora-eyebrow { color: var(--ora-gold-400); }

.ora-formsect__grid { max-width: 760px; margin: 0 auto; }
.ora-formsect__grid--split {
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.ora-form {
  background: #fff;
  border: 1px solid var(--ora-line);
  border-radius: var(--ora-r-md);
  box-shadow: var(--ora-s-md);
  padding: 30px;
}
.ora-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ora-fld { display: flex; flex-direction: column; gap: 7px; }
.ora-fld--wide { grid-column: 1 / -1; }
.ora-fld > span {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ora-ink);
  letter-spacing: .01em;
}
.ora-fld input,
.ora-fld select,
.ora-fld textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ora-ink);
  background: #fff;
  border: 1.5px solid var(--ora-line);
  border-radius: var(--ora-r-sm);
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
.ora-fld textarea { resize: vertical; min-height: 108px; }
/* Astra pins single-line inputs to height:40px, at the same specificity as a
   single-class rule. Prefixing with [data-ora] outranks it; height:auto lets
   our own padding decide the size again. */
[data-ora] .ora-fld input,
[data-ora] .ora-fld select {
  height: auto;
  min-height: 48px;
  line-height: 1.4;
}
.ora-fld input:focus,
.ora-fld select:focus,
.ora-fld textarea:focus {
  outline: 0;
  border-color: var(--ora-gold-400);
  box-shadow: 0 0 0 3px rgba(210, 162, 75, .22);
}
.ora-fld input:-webkit-autofill { -webkit-text-fill-color: var(--ora-ink); }

.ora-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ora-body);
}
.ora-consent input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--ora-red);
}
.ora-consent a { color: var(--ora-navy-700); text-decoration: underline; }

.ora-form__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 22px 0 0;
}
.ora-form__submit { border: 0; cursor: pointer; }
.ora-form__submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.ora-form__note { font-size: .8rem; color: var(--ora-muted); margin: 0; max-width: 34ch; }

.ora-form__msg {
  margin: 18px 0 0;
  padding: 12px 15px;
  border-radius: var(--ora-r-sm);
  background: #FCECEC;
  border: 1px solid #F3C9CB;
  color: #8E1017;
  font-size: .88rem;
  line-height: 1.5;
}
.ora-form__msg--server { margin: 0 0 18px; }

/* Which hotel this quote request is FOR, when the form was reached from
   a hotel page. Sits under the lede, above the form, so the visitor can
   see we already know it and does not retype it into the message box. */
.ora-form__for {
  margin: 14px 0 0;
  padding: 10px 16px;
  display: inline-block;
  background: var(--ora-cream);
  border: 1px solid var(--ora-gold-200, var(--ora-line));
  border-radius: var(--ora-r-sm);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ora-navy);
}
.ora-form__for strong { font-weight: 800; }

.ora-form__ok {
  background: #fff;
  border: 1px solid var(--ora-green-200);
  border-radius: var(--ora-r-md);
  box-shadow: var(--ora-s-md);
  padding: 44px 32px;
  text-align: center;
}
.ora-form__ok svg { stroke: var(--ora-green); margin: 0 auto 14px; display: block; }
[data-ora="form-section"] .ora-form__ok h3 {
  font-size: 1.25rem;
  margin: 0 0 10px;
  color: var(--ora-ink);
}
.ora-form__ok p { margin: 0 auto; max-width: 48ch; font-size: .94rem; line-height: 1.7; }

.ora-formside {
  background: var(--ora-navy-800);
  color: rgba(255, 255, 255, .76);
  border-radius: var(--ora-r-md);
  padding: 28px;
}
[data-ora="form-section"] .ora-formside h3 {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ora-gold-400);
  margin: 0 0 18px;
}
.ora-formside ul { margin: 0; padding: 0; list-style: none; }
.ora-formside li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; }
.ora-formside li:last-child { margin-bottom: 0; }
.ora-formside svg { stroke: var(--ora-gold-400); margin-top: 3px; }
.ora-formside small {
  display: block;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 2px;
}
.ora-formside b,
.ora-formside a { color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; }
.ora-formside a:hover { color: var(--ora-gold-400); text-decoration: underline; }

/* The honeypot. Off-screen rather than display:none — a bot that skips hidden
   fields still fills this one, and no person or screen reader ever sees it. */
.ora-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 1140px) {
  .ora-split { gap: 44px; }
}

@media (max-width: 1020px) {
  .ora-search__grid { grid-template-columns: 1fr 1fr; }
  .ora-field { border-right: 0; border-bottom: 1px solid var(--ora-line-2); }
  .ora-search__submit { grid-column: 1/-1; padding: 12px 6px 6px; }
  .ora-search__submit .ora-btn { width: 100%; padding: 18px; }
  .ora-cards { grid-template-columns: repeat(2, 1fr); }
  .ora-deals { grid-template-columns: repeat(2, 1fr); }
  .ora-revs { grid-template-columns: 1fr; }
  .ora-usps__row { grid-template-columns: repeat(2, 1fr); }
  .ora-usp { border-bottom: 1px solid var(--ora-cream-200); }
  .ora-usp:nth-child(2n) { border-right: 0; }
  .ora-split { grid-template-columns: 1fr; }
  .ora-split__float { right: 16px; bottom: -20px; }
  .ora-hero__badge { display: none; }
}

@media (max-width: 760px) {
  .ora-sect { padding: 64px 0; }
  .ora-hero { padding: 64px 0 130px; }
  .ora-hero__usps { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .ora-sect-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .ora-cards { grid-template-columns: 1fr; gap: 18px; }
  .ora-card { aspect-ratio: 16/11; }
  .ora-deals { grid-template-columns: 1fr; }
  .ora-rev-top { grid-template-columns: 1fr; gap: 24px; }
  .ora-search__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1020px) {
  .ora-formsect__grid--split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ora-faq-sect { padding: 64px 0; }
  .ora-formsect { padding: 64px 0; }
  .ora-prose-sect { padding: 56px 0 72px; }
  .ora-trust--section { padding: 56px 0; }
  .ora-stats-sect { padding: 56px 0; }
  .ora-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .ora-form { padding: 22px 18px; }
  .ora-form__grid { grid-template-columns: 1fr; }
  .ora-form__foot { gap: 12px; }
  .ora-form__submit { width: 100%; justify-content: center; }
  /* ⚠️ `.ora-btn` sets `white-space: nowrap`, which makes a button label an
     unshrinkable MIN-CONTENT FLOOR for everything around it. A short English
     label hides that; a German one does not. "Halten Sie mich auf dem
     Laufenden" forced `.ora-form__foot` to 371px, which forced the whole form
     to 409px inside a 390px phone and gave the page 39px of sideways scroll —
     on the German offers page only, while Dutch and English passed.
     The button is already `width: 100%` here, so wrapping is the correct
     behaviour anyway. Repeat the class so this wins on WEIGHT (0,2,0) rather
     than on load order, which is the thing most likely to change (gotcha 49).
     ⚠️ And the overflow probe blamed `.ora-hp`, then the nav drawer — the
     drawer was innocent for the THIRD time (gotchas 13, 50).
     ⚠️ 2026-09-13: FIXING ONE BUTTON DID NOT FIX THE CAUSE. The same floor
     came back in a different widget: the Turkish "Önce konuşmayı mı tercih
     edersiniz?" split-section button measured 381px inside a 350px column on
     /tr/teklif-talebi/ (11px of sideways scroll), and the German label in the
     same slot had only 8px to spare. So on a phone EVERY `.ora-btn` may wrap.
     `normal` only breaks a label that does not fit, so nothing that fits
     today moves; `text-align` keeps a two-line label centred. */
  .ora-btn.ora-btn { white-space: normal; text-align: center; }
  .ora-form__note { max-width: none; }
}

/* ==========================================================================
   DROPDOWNS, SITE-WIDE — 2026-09-07
   ==========================================================================
   Client: "overall site dropdowns look like 19's website things, no class no
   advance and premium look."

   He was right, and there were two different faults:

   1. `.ora-fld select` — the contact, quote and callback forms — had no
      `appearance` reset at all, so it kept the operating system's grey arrow
      next to a field with our own border, radius and gold focus ring. On
      Windows/Chrome the OS arrow is what the eye lands on.
   2. `.ora-field select` — the search bar — DID reset `appearance`, which
      removes the arrow and draws nothing in its place. That is worse than the
      default: the control then looks like plain text and nothing says it
      opens.

   Both now use the same drawn chevron. It is a background SVG rather than an
   extra element, so no markup changes and nothing to keep in sync.
   ========================================================================== */

/*
 * One chevron, defined once. `--ora-chevron` is a URL, so it can be dropped
 * into any `background-image` without repeating the escaped SVG.
 */
:root {
  --ora-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- the form widget: contact, quote, callback -------------------------- */
.ora-fld select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: var(--ora-chevron);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 13px 8px;
}
.ora-fld select::-ms-expand { display: none; }

/*
 * ⚠️ Astra styles `select` from its inline block and can repaint the
 * background on focus, which would take the chevron with it. Restating the
 * image on focus costs one declaration and removes the whole class of bug.
 */
.ora-fld select:focus {
  background-image: var(--ora-chevron);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 13px 8px;
}

/* ---- the search bar ----------------------------------------------------- */
/*
 * ⚠️ NO CHEVRON HERE. The search widget already renders a real <svg>
 * chevron after the select (`#ora-i-chev-d`), so adding a background one gave
 * every field TWO arrows side by side — obvious in a screenshot and invisible
 * in every automated check. Its `appearance: none` is correct as it stands.
 *
 * What this field DID still need is the native date-picker glyph removed: the
 * widget draws its own calendar icon on the leading edge, so the browser's one
 * on the trailing edge was a second calendar in the same box, and it squeezed
 * "dd/mm/yyyy" until it clipped.
 */
.ora-field { position: relative; }

.ora-field input[type="date"] { cursor: pointer; }
.ora-field input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ora-field input[type="date"]::-webkit-inner-spin-button,
.ora-field input[type="date"]::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}

/* ---- dates and numbers, wherever a form uses them ----------------------- */
.ora-fld input[type="date"] {
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px 17px;
}
.ora-fld input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ora-fld { position: relative; }

.ora-fld input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.ora-fld input[type="number"]::-webkit-outer-spin-button,
.ora-fld input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- checkboxes, drawn rather than left to the OS ----------------------- */
/*
 * The consent tickbox is the last native control on the form pages. Same
 * treatment as the booking card's, so the two read as one system.
 */
.ora-consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  border: 1.5px solid var(--ora-line);
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ora-consent input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 7px;
  border-left: 2.2px solid #fff;
  border-bottom: 2.2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .15s;
}
.ora-consent input[type="checkbox"]:checked {
  background: var(--ora-red);
  border-color: var(--ora-red);
}
.ora-consent input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.ora-consent input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(210, 162, 75, .3);
}