/* ==========================================================================
   ORANGE HOLIDAY EUROPE — page bodies. ONE sheet for this whitelabel.
   ==========================================================================

   Hoisted from the design exports' inline styles; declarations are the export's
   own, and only the `:hover` rules are added, because the export's
   `style-hover` attribute has no inline equivalent.

   THIS WAS TWO FILES. `faq.css` and `landing.css` each carried the whole design
   base AND its own copy of the header, the page-title band and the footer under
   separate generated names. The chrome is now `brand.css` — one file for both
   Orange whitelabels, holding orange-zen's calibrated values — and the global
   element rules are `base.css`; what is left here is only this partner's page
   BODY, which is the one thing that genuinely differs from Zen's.

   GONE WITH THE CHROME, and not replaced: `-2` … `-21` on both exports (the
   bar, its nav, and a hand-rolled language dropdown the shared `<details>`
   switcher replaced), `-23` … `-26` on the FAQ (the page-title band), the two
   footers, `landing-66` (the "Buy SIM Card" button — this whitelabel sells one
   product) and `faq-41` … `-44` (a prev/next Buy Now bar that was written
   against the retired positional slot table).
   ========================================================================== */

/* --- this whitelabel's own base rules -------------------------------------
   `base.css` carries only what BOTH Orange exports declare identically. These
   two are Orange Holiday's alone, and putting them there would change Orange
   Zen: this design marks an open accordion with a `+` / `−` drawn by CSS, where
   Zen renders two icons in the markup and would end up with both. */
ul,
ol { margin:0 0 1rem 0; padding-left:2rem; }

/* SCOPED TO THE ACCORDION. Unscoped, `details > summary::after` also hit the
   header's language switcher — which is a `<details>` too — so the switcher
   drew a floated `+` instead of its caret. */
.orange-faq-30 > summary::after { content:"+"; float:right; font-size:1.2em; line-height:1; color:#6c757d; }
.orange-faq-30[open] > summary::after { content:"\2212"; }

/* --- landing ------------------------------------------------------------- */
.orange-landing-1 { background:#f6f9fa; overflow-x:hidden; }
.orange-landing-21 { background:#fff; }
.orange-landing-22 { background:#ff7900; color:#fff; }
.orange-landing-23 { max-width:1140px; margin:0 auto; padding:2rem 15px 0 15px; }
.orange-landing-24 { display:flex; flex-wrap:wrap; align-items:flex-end; gap:24px; }
.orange-landing-25 { flex:1 1 520px; min-width:300px; padding-left:5em; padding-bottom:2rem; align-self:center; }
.orange-landing-26 { color:#000; font-size:2.5rem; font-weight:700; line-height:1.2em; margin-bottom:.5rem; }
.orange-landing-27 { color:#fff; font-size:2rem; font-weight:700; margin-bottom:.5rem; }
/* The hero's spec bar (50GB · 31 Days · $49.90). The export padded it
   `0.6em` top against `0.4em` bottom, so the row sat 3px low in its own black
   box. Same 1em of vertical padding, split evenly, so the height is unchanged
   and the text is actually centred. */
.orange-landing-28 { display:inline-flex; flex-wrap:wrap; gap:0; list-style:none; background:#000; margin:.75rem 0; padding:0.5em 1em; }
.orange-landing-29 { padding:0 1rem; }
.orange-landing-30 { color:#fff; font-size:1.5rem; margin:0; font-weight:500; }
.orange-landing-31 { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.orange-landing-32 { display:inline-block; min-width:230px; text-align:center; font-size:1.2em; font-weight:700; border:3px solid #000; background:#fff; color:#000; border-radius:0; padding:.375rem .75rem .375rem .75rem; }
.orange-landing-32:hover { background:#000; color:#fff; }
.orange-landing-33 { flex:0 1 225px; min-width:150px; padding-bottom:.5rem; align-self:flex-end; }
.orange-landing-34 { display:block; width:100%; }
.orange-landing-35 { max-width:1140px; margin:1rem auto; padding:1rem 15px; background:#fff; border:1px solid #dee2e6; box-shadow:inset 0 0 10px 2px rgba(240,240,240,1); }
.orange-landing-36 { font-size:2rem; text-align:center; margin-bottom:1rem; }
.orange-landing-37 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap:8px; text-align:center; }
.orange-landing-38 { width:90%; margin:.5rem auto; }
.orange-landing-39 { font-size:1.2em; }
.orange-landing-40 { max-width:1140px; margin:1rem auto; padding:0 15px; }
.orange-landing-41 { background:url(/assets/sites/orange/img/orange.esim.bg.jpg) top left no-repeat; background-size:cover; padding:3rem 0; display:flex; flex-wrap:wrap; }
.orange-landing-42 { flex:0 1 380px; min-width:280px; padding:3rem 0; }
.orange-landing-43 { margin:1.5rem 0; padding-left:1rem; }
.orange-landing-44 { color:#fff; font-size:2.5rem; font-weight:700; line-height:0.9; letter-spacing:0.075em; }
.orange-landing-45 { color:#fff; }
.orange-landing-46 { display:inline-block; font-size:1.2em; font-weight:700; border:3px solid #fff; color:#fff; border-radius:0; padding:.375rem 3rem .375rem 3rem; }
.orange-landing-46:hover { background:#fff; color:#000; border-color:#000; }
.orange-landing-47 { font-size:2rem; text-align:center; padding:.5rem 0 1rem 0; }
/* A TRACK FLOOR IS NOT A MINIMUM WIDTH. `minmax(420px, 1fr)` means no column
   may ever be narrower than 420px — so on a 390px phone the video and every
   block under it laid out 420 wide and were chopped off at the right edge.
   `min(420px, 100%)` keeps the floor only while the container can afford it and
   drops to the full width when it cannot, which is what auto-fit is for. */
.orange-landing-48 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap:0 30px; }
.orange-landing-49 { display:block; width:100%; height:315px; border:0; }
.orange-landing-50 { padding:1rem 0; }
.orange-landing-51 { font-size:1.75rem; margin-top:.5rem; }
.orange-landing-52 { text-align:justify; margin-bottom:0; }
.orange-landing-53 { width:100%; display:block; }
.orange-landing-54 { margin:0 0 1rem 0; padding-left:2rem; }
.orange-landing-55 { padding-top:1rem; }
.orange-landing-56 { font-size:1.75rem; }
.orange-landing-57 { text-align:justify; }
.orange-landing-58 { color:#ff7900; }
.orange-landing-59 { background:#ff7900; }
.orange-landing-60 { max-width:1140px; margin:0 auto; padding:3rem 15px; color:#fff; text-align:center; }
.orange-landing-61 { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.orange-landing-62 { flex:1 1 420px; }
.orange-landing-63 { color:#fff; font-size:2rem; }
.orange-landing-64 { color:#fff; font-size:1.75rem; }
.orange-landing-65 { flex:1 1 420px; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.orange-landing-67 { display:inline-block; font-size:1.2em; font-weight:700; border:3px solid #000; background:#fff; color:#000; border-radius:0; padding:.375rem 3rem .375rem 3rem; }
.orange-landing-67:hover { background:#000; color:#fff; }
.orange-landing-68 { display:block; width:80%; margin:0 auto; padding:1rem; }
.orange-landing-69 { text-align:justify; padding-left:2rem; margin-bottom:1rem; }
.orange-landing-70 { font-size:80%; }
.orange-landing-71 { width:100%; margin:0 auto; text-align:center; border-collapse:collapse; }
.orange-landing-72 { border-bottom:1px solid #ff7900; }
.orange-landing-73 { padding-top:.4em; }
.orange-landing-74 { background:#f2f2f2; }
.orange-landing-75 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap:8px; margin-top:.5rem; }
.orange-landing-76 { margin:.5rem; padding:1.5rem; border:1px solid #dee2e6; border-radius:1em; }
.orange-landing-77 { display:flex; justify-content:space-between; align-items:center; opacity:.7; }
.orange-landing-78 { font-size:0.9em; }
.orange-landing-79 { color:#ffc107; }
.orange-landing-80 { margin:1.5rem 0; text-align:justify; }
.orange-landing-81 { opacity:.7; }
.orange-landing-82 { max-width:1140px; margin:0 auto; padding:3rem 15px; color:#fff; }
.orange-landing-83 { display:flex; flex-wrap:wrap; gap:24px; }
.orange-landing-84 { color:#fff; font-size:2rem; font-weight:700; }
.orange-landing-85 { padding-left:10%; margin:0 3em; }
.orange-landing-86 { border:1px solid rgba(255,255,255,.5); padding:.5rem 1.5rem; display:flex; flex-direction:column; gap:.25rem; }

/* White copy keeps its colour on hover — these sit on black or on orange. */
.orange-landing-22:hover { color: #fff; }
.orange-landing-27:hover { color: #fff; }
.orange-landing-30:hover { color: #fff; }
.orange-landing-44:hover { color: #fff; }
.orange-landing-45:hover { color: #fff; }
.orange-landing-46:hover { color: #fff; }
.orange-landing-60:hover { color: #fff; }
.orange-landing-63:hover { color: #fff; }
.orange-landing-64:hover { color: #fff; }
.orange-landing-82:hover { color: #fff; }
.orange-landing-84:hover { color: #fff; }

/* --- FAQ -----------------------------------------------------------------
   `-33` onwards are ANSWER wrappers: the stored answer HTML carries its own
   `div.orange-faq-33` or a `table.orange-faq-37`, so these class names appear
   in the database rather than in the component. */
.orange-faq-1 { background:#f6f9fa; overflow-x:hidden; }
/* The FAQ body. `padding-block` is here because this page's container is the
   foundation's `.container`, which sets none — the design's own container
   (`.orange-faq-27`, deleted with the rest of the chrome) is where the 1.5rem
   used to live, and without it the first group heading sat hard against the
   page-title band. Measured: zero gap here against Zen's 24px. */
.orange-faq-22 { background:#fff; padding-block:1.5rem; }
.orange-faq-28 { text-align:center; font-size:2rem; font-weight:700; color:#ff7900; margin-bottom:.5rem; }
.orange-faq-29 { margin-bottom:3rem; }
.orange-faq-30 { border-bottom:2px solid #eee; }
.orange-faq-31 { display:block; padding:1rem; color:#6c757d; }
.orange-faq-32 { font-size:1.1em; }
.orange-faq-33 { padding:0 1.5rem 1rem 1.5rem; }
.orange-faq-34 { max-width:420px; margin:.5rem 0 1.25rem 0; padding:2.5rem 1rem; background:repeating-linear-gradient(45deg,#f4f4f4,#f4f4f4 8px,#ececec 8px,#ececec 16px); border:1px solid #dee2e6; text-align:center; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8em; color:#6c757d; }
.orange-faq-35 { max-width:420px; margin:.5rem 0 0 0; padding:2.5rem 1rem; background:repeating-linear-gradient(45deg,#f4f4f4,#f4f4f4 8px,#ececec 8px,#ececec 16px); border:1px solid #dee2e6; text-align:center; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8em; color:#6c757d; }
.orange-faq-36 { padding:0 1.5rem 1rem 1.5rem; overflow-x:auto; }
.orange-faq-37 { width:100%; margin-top:1.5rem; text-align:center; border-collapse:collapse; border:1px solid #dee2e6; }
.orange-faq-38 { width:140px; padding:.75rem; border:1px solid #dee2e6; }
.orange-faq-39 { padding:.75rem; border:1px solid #dee2e6; }
.orange-faq-40 { padding:.75rem; border:1px solid #dee2e6; text-align:left; }

/* ==========================================================================
   RESPONSIVE

   The landing's own bands already wrap (`flex-wrap` and `auto-fit` grids), so
   only the two fixed-width FAQ blocks need a rule — the same pair orange-zen
   needs, for the same reason. Breakpoints are the foundation's five.
   ========================================================================== */

@media (max-width: 1024px) {
  .orange-landing-23,
  .orange-landing-35,
  .orange-landing-40,
  .orange-landing-60,
  .orange-landing-82 { padding-inline: var(--space-4); }
  /* The hero copy's 5em indent is a desktop flourish; it eats a phone column. */
  .orange-landing-25 { padding-left: 0; }
}

@media (max-width: 767px) {
  /* The coverage table has fixed 140px cells and cannot reflow — let it scroll
     inside its own box rather than widening the page. */
  .orange-faq-37 { display: block; overflow-x: auto; white-space: nowrap; }
  /* The QR mock-ups are fixed 420px panels; cap them to the column. */
  .orange-faq-34,
  .orange-faq-35 { max-width: 100%; }
  /* The top-up table is the landing's equivalent fixed block. */
  .orange-landing-71 { display: block; overflow-x: auto; white-space: nowrap; }
}