/* ============================================================
   a365gift · gedeelde opmaak voor alle pagina's
   Ligt in themes/a365gift-child/a365.css
   Wordt door functions.php op elke pagina geladen.

   Alles wat op meer dan één pagina hetzelfde is, staat hier.
   Verandert er iets aan de lettertypes, de kleuren, de bovenbalk
   of de voettekst, dan wordt alleen dit bestand vervangen.
   ============================================================ */

/* ---------- lettertypes ---------- */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('Fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('Fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url('Fonts/inter-v20-latin-300.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('Fonts/inter-v20-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('Fonts/inter-v20-latin-500.woff2') format('woff2')}

/* ---------- de laag over de pagina ---------- */

.a365{
  position:fixed; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:99;
  background:#FCFAF7; color:#3A3733;
  font-family:'Inter',system-ui,sans-serif; font-weight:300;
  font-size:1.0625rem; line-height:1.75; text-align:left;
}
.a365 *{box-sizing:border-box}
.a365 img{max-width:100%;display:block;margin:0}
.a365 .wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}
@media(min-width:46rem){.a365 .wrap{padding:0 2rem}}

/* ---------- typografie ---------- */

.a365 h1,.a365 h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;margin:0;color:#3A3733}
.a365 h1{font-size:clamp(2.4rem,6vw,3.5rem);line-height:1.08;letter-spacing:-.01em}
.a365 h2{font-size:clamp(1.6rem,3.2vw,2rem);line-height:1.2;margin:3rem 0 1rem}
.a365 h3{font-family:'Inter',sans-serif;font-size:1rem;font-weight:500;margin:0 0 .35rem;color:#3A3733}
.a365 p{margin:0 0 1.15rem}
.a365 a{color:#9C6B45}

.a365 .eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:#9C6B45;font-weight:500;margin:0 0 1rem}

/* ---------- banden en vlakken ---------- */

.a365 .band{padding:3.5rem 0}
@media(min-width:46rem){.a365 .band{padding:5.5rem 0}}
.a365 .paper{background:#FCFAF7}
.a365 .panel{background:#F4EEE7}

/* ---------- knop ---------- */

.a365 .btn{display:inline-block;background:#9C6B45;color:#fff;text-decoration:none;
  font-size:.95rem;letter-spacing:.02em;padding:1rem 2.25rem;border-radius:2px;
  transition:background .18s ease}
.a365 .btn:hover,.a365 .btn:focus-visible{background:#845838;color:#fff}
.a365 .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- mededelingenbalk ---------- */

.a365 .mededeling{
  background:#9C6B45;color:#FAF5EE;
  font-size:.8rem;line-height:1.4;letter-spacing:.01em;text-align:center}
.a365 .mededeling .wrap{padding-top:.55rem;padding-bottom:.55rem}
.a365 .mededeling a{color:#FAF5EE;text-decoration:underline;text-underline-offset:.15em}
.a365 .mededeling a:hover{color:#fff}

/* ---------- bovenbalk ---------- */

.a365 .topbar{position:sticky;top:0;z-index:120;background:rgba(252,250,247,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid #E4DACE}
.a365 .topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
.a365 .topbar img{width:88px;height:auto}
.a365 .topbar nav{display:flex;align-items:center;gap:1.25rem}
.a365 .topbar a.lnk{font-size:.8rem;color:#6B655E;text-decoration:none}
.a365 .topbar a.lnk:hover{color:#9C6B45}
.a365 .topbar .btn{padding:.6rem 1.15rem;font-size:.82rem}
@media(max-width:32rem){.a365 .topbar nav a.lnk{display:none}}

/* ---------- zoekveld ---------- */

.a365 .verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.a365 .zoek{margin:0}
.a365 .zoek input{
  width:9rem;font-family:'Inter',system-ui,sans-serif;font-weight:300;font-size:.8rem;
  color:#3A3733;background:#fff;border:1px solid #E4DACE;border-radius:2px;
  padding:.4rem .65rem;-webkit-appearance:none;appearance:none;
  transition:border-color .18s ease,width .18s ease}
.a365 .zoek input::placeholder{color:#9A938A}
.a365 .zoek input:focus{outline:none;border-color:#9C6B45}
@media(min-width:46rem){.a365 .zoek-breed input:focus{width:13rem}}

/* Op een telefoon is het zoekveld een vergrootglas dat opengaat. */
.a365 .zoek-smal{position:relative}
.a365 .zoek-smal summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;
  color:#6B655E;padding:.35rem .1rem;
  border:0;background:none;-webkit-tap-highlight-color:transparent}
.a365 .zoek-smal summary::-webkit-details-marker{display:none}
.a365 .zoek-smal summary:focus{outline:none}
.a365 .zoek-smal summary:focus-visible{outline:2px solid #9C6B45;outline-offset:2px}
.a365 .zoek-smal[open] summary,.a365 .zoek-smal summary:hover{color:#9C6B45}
.a365 .zoeklaag{
  position:absolute;top:calc(100% + .6rem);right:0;z-index:140;
  background:#FCFAF7;border:1px solid #E4DACE;border-radius:2px;
  box-shadow:0 8px 26px rgba(58,55,51,.12);padding:.7rem}
.a365 .zoeklaag input{width:12rem}

/* Welke van de twee zichtbaar is. */
.a365 .zoek-breed{display:none}
.a365 .zoek-smal{display:block}
@media(min-width:46rem){
  .a365 .zoek-breed{display:block}
  .a365 .zoek-smal{display:none}
}

/* ---------- menuknop ---------- */

.a365 .merk{display:flex;align-items:center;gap:.9rem}

/* De menuknop is er alleen op een telefoon. Op een breed scherm staat
   'All journeys' in de balk en scrolt de rest gewoon in de voettekst. */
.a365 .menu{position:relative}
.a365 .menu summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;
  color:#6B655E;padding:.35rem .1rem;transition:color .18s ease;
  border:0;background:none;-webkit-tap-highlight-color:transparent}
.a365 .menu summary::-webkit-details-marker{display:none}
/* Geen kader dat na het aantikken blijft staan. Wie met het toetsenbord
   navigeert, krijgt het wel te zien. */
.a365 .menu summary:focus{outline:none}
.a365 .menu summary:focus-visible{outline:2px solid #9C6B45;outline-offset:2px}
.a365 .menu summary:hover,.a365 .menu[open] summary{color:#9C6B45}
.a365 .menu .menuwoord{display:none}
@media(min-width:46rem){.a365 .menu{display:none}}

/* 'All journeys' juist alleen op een breed scherm. */
.a365 .lnk.journeys{display:none}
@media(min-width:46rem){.a365 .lnk.journeys{display:inline}}

.a365 .menulaag{
  position:absolute;top:calc(100% + .6rem);left:0;z-index:140;
  min-width:13rem;background:#FCFAF7;border:1px solid #E4DACE;border-radius:2px;
  box-shadow:0 8px 26px rgba(58,55,51,.12);padding:.75rem 0}
.a365 .menulaag ul{list-style:none;margin:0;padding:0}
.a365 .menulaag li{margin:0}
.a365 .menulaag a,.a365 .menulaag span{
  display:block;padding:.5rem 1.1rem;font-size:.85rem;text-decoration:none;line-height:1.4}
.a365 .menulaag a{color:#3A3733}
.a365 .menulaag a:hover{background:#F4EEE7;color:#9C6B45}
.a365 .menulaag span{color:#9A938A}

/* ---------- voettekst ---------- */

.a365 .sitefoot{border-top:1px solid #E4DACE;padding:2.5rem 0 3.5rem;
  font-size:.85rem;color:#6B655E}
.a365 .sitefoot ul{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;
  gap:.5rem 1.15rem;font-size:.78rem}
.a365 .sitefoot a{color:#9C6B45;text-decoration:none}
.a365 .sitefoot a:hover{text-decoration:underline}
.a365 .sitefoot p{margin:0;font-size:.8rem}
.a365 .sitefoot .sociaal{margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;font-size:.78rem}

/* ---------- het waarschuwingsblok ---------- */

.a365 .fineprint{font-size:.875rem;line-height:1.7;color:#6B655E;padding:3rem 0 2.5rem}
.a365 .fineprint h3{font-size:.875rem;margin:0 0 .6rem}

/* ============================================================
   De tekstpagina — Terms, Privacy, Refund, Contact, About, 404
   ============================================================ */

.a365txt .col{max-width:34rem;margin:0 auto;padding:3.5rem 0 1rem}
@media(min-width:46rem){.a365txt .col{padding:5rem 0 1rem}}
.a365txt .col .dateline{font-size:.85rem;color:#6B655E;margin:1.25rem 0 2.5rem}
.a365txt .col h2:first-of-type{margin-top:0}
.a365txt .col ul{list-style:none;margin:0 0 1.15rem;padding:0}
.a365txt .col ul li{position:relative;padding-left:1.15rem;margin:0 0 .55rem;color:#6B655E}
.a365txt .col ul li::before{content:'\2014';position:absolute;left:0;color:#9C6B45}
.a365txt .col ul li strong{color:#3A3733;font-weight:500}

.a365txt .col .beeld{width:100%;height:auto;border-radius:2px;margin:2rem 0 2.5rem}
.a365txt .col .beeld.smal{max-width:22rem;margin-top:0}

.a365txt .note{background:#F4EEE7;border-radius:2px;padding:1.6rem 1.35rem;margin:2rem 0 1.5rem}
@media(min-width:46rem){.a365txt .note{padding:2rem 1.9rem}}
.a365txt .note h2{margin-top:0}
.a365txt .note p:last-child{margin-bottom:0}

/* De voettekst deelt op een tekstpagina de linkerlijn van de kolom. */
.a365txt .sitefoot{max-width:34rem;margin:4rem auto 0}

@media(prefers-reduced-motion:reduce){.a365 *{transition:none!important}}