/* Design system layer — loaded last on every page so these shared rules win over the
   older page-by-page styles. Keep values here as tokens; change the look in one place.
   Step 1: colours, corner radius, buttons. */
:root{
  --terracotta:#a54d30;--terracotta-dark:#8a3f27;
  --forest:#153e35;--forest-2:#24584a;
  --radius-sm:6px;--radius:12px;--radius-pill:999px;
  --control-h:48px;
}

/* Buttons: two styles, one shape and one height.
   Filled = terracotta (main action). Outline = forest border (secondary action). */
.hz-button,.hero-search button,.explore-controls button,.hz-hero .hz-hero-search button,
.detail-action,.secondary-button,.pagination button,.save-place-button,
.immersive-hero .destination-hero-actions a,.destination-hero-actions .detail-action{
  border-radius:var(--radius-pill);min-height:var(--control-h);
}
.hz-button,.detail-action,.secondary-button,.pagination button,.save-place-button,.destination-hero-actions .detail-action{padding-inline:22px;font-size:15px;font-weight:700}
.hz-button{min-height:var(--control-h)}

/* Filled */
.hz-button-primary,.hero-search button,.explore-controls button,.home-hero-v3 .hero-search button,
.hz-hero .hz-hero-search button,.detail-action.primary{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.hz-button-primary:hover,.hero-search button:hover,.explore-controls button:hover,.home-hero-v3 .hero-search button:hover,
.hz-hero .hz-hero-search button:hover,.detail-action.primary:hover{background:var(--terracotta-dark);border-color:var(--terracotta-dark);color:#fff}

/* Outline */
.secondary-button,.pagination button,.save-place-button{border:1.5px solid var(--forest);background:transparent;color:var(--forest)}
.secondary-button:hover,.pagination button:hover:not(:disabled),.save-place-button:hover:not(:disabled){background:var(--forest);color:#fff}
.save-place-button[aria-pressed="true"]{background:var(--forest);color:#fff}

/* WhatsApp keeps its own brand colour, in the shared shape. */
.detail-action.whatsapp-action{background:#075e54;border-color:#075e54;color:#fff}

/* Form fields beside pill buttons: a soft, matching corner. */
.explore-controls input,.explore-controls select{border-radius:var(--radius-sm)}

/* Buttons on dark photo heroes keep their ivory hover (forest text) for contrast. */
.home-hero-v3 .hero-search button:hover,.immersive-hero .destination-hero-actions a:hover,
.vf-page .destination-hero-actions .primary:hover{background:var(--ivory);color:var(--forest);border-color:var(--ivory)}

/* Footer social: round icon buttons. */
.footer-social-title{margin:22px 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c9d6cf}
.footer-social-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.site-footer .footer-social{display:inline-grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1.5px solid rgba(237,242,236,.45);border-radius:var(--radius-pill);color:#edf2ec;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.site-footer .footer-social:hover,.site-footer .footer-social:focus-visible{background:#edf2ec;border-color:#edf2ec;color:var(--forest)}
.site-footer .footer-social:focus-visible{outline:3px solid var(--ochre,#e4b46d);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.site-footer .footer-social{transition:none}}

/* Step 2: headings and spacing. Six heading sizes, one eyebrow, one section rhythm.
   Selectors repeat the older page rules so these values win; colour and margins stay local. */
:root{
  --type-hero:clamp(46px,6.4vw,92px);   /* h1 on full-photo heroes */
  --type-page:clamp(38px,5vw,64px);     /* h1 on plain pages */
  --type-section:clamp(32px,4vw,52px);  /* main section h2 */
  --type-sub:clamp(24px,2.6vw,32px);    /* sub-section h2 */
  --type-feature:clamp(24px,2.2vw,32px);/* h3 on large photo tiles */
  --type-card:clamp(20px,1.7vw,26px);   /* h3 on cards and small tiles */
  --section-y:clamp(64px,8vw,96px);
}

/* Hero titles */
.hero h1,.home-hero-v3 h1,.hz-hero h1,.immersive-hero h1,.vf-page .immersive-hero h1,.sw-hero h1,.travel-view .sw-hero h1{
  font-size:var(--type-hero);line-height:1;letter-spacing:-.035em}

/* Page titles */
.detail-view>h1,.destination-places-heading h1,.profile-hero h1,.vf-collection-hero h1,.trip-view h1,.safaris-view h1,.info-view h1,.pm-intro h1{
  font-size:var(--type-page);line-height:1.05;letter-spacing:-.03em}

/* Section headings */
.section-heading h2,.about h2,.destinations .section-heading h2,.explore-section .section-heading h2,
.hz-section h2,.zm-copy h2,.ls-heading h2,.pd-head h2,.ex-hero h2,
.vf-page .vf-section h2,.vf-page .vf-chapter-heading h2,.vf-moments-intro h2,
.vf-story-copy h2,.vf-collection-planning h2,.vf-collection-next h2,.sw-view h2,.things-feature-text h2{
  font-size:var(--type-section);line-height:1.06;letter-spacing:-.03em}

/* Sub-section headings */
.info-view h2,.listing-gallery h2,.contextual-discovery h2,.safaris-group h2,.safaris-parks h2,.safaris-choose h2,
.place-showcase h2,.travel-view .travel-topics h2,.pl-interest-about h2,.trip-ideas h2,.pm-panel h2,.pm-guides h2,
.credit-head h2,.detail-summary h2,.trip-unavailable h2,.sw-card h2{
  font-size:var(--type-sub);line-height:1.15;letter-spacing:-.02em}

/* Card titles */
.place-card h2,.place-card h3,.hz-shelf .place-card h3,.pd-panel .hz-shelf .place-card h3,.vf-page .vf-place-grid .place-card h3,
.ps-tile h3,.sw-view h3,.sw-stories h3,.vf-moment h3,.place-notes h3,.dz-page .dz-moments h3{
  font-size:var(--type-card);line-height:1.2;letter-spacing:-.01em}

/* Large photo-tile titles */
.destination-card h3,.destination-card .destination-overlay h3,.story h3,.hz-destination h3,.zm-preview h3,
.ls-copy h3,.pd-panel .hz-intro h3,.ps-lead h3,.sw-span-2x2 h3,.sw-five h3,.vf-page .vf-section h3{
  font-size:var(--type-feature);line-height:1.12;letter-spacing:-.02em}

/* One eyebrow style (colour stays per section). */
.eyebrow,.hz-intro p.eyebrow,.immersive-hero-eyebrow,.vf-page .vf-section .eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;line-height:1.5;margin:0 0 12px;text-transform:uppercase}

.hz-intro p.eyebrow{color:var(--terracotta)}
/* One section rhythm: about 96px on desktop, 64px on phones. */
.section,.hz-section{padding-block:var(--section-y)}
.sw-band{margin-top:var(--section-y);padding-block:var(--section-y)}

/* Step 3: cards. One radius, one border, one shadow, 3:2 photos, one hover. */
:root{
  --card-border:1px solid rgba(21,62,53,.12);
  --shadow-card:0 1px 2px rgba(19,50,42,.05),0 4px 14px rgba(19,50,42,.05);
  --shadow-card-hover:0 14px 34px rgba(19,50,42,.14);
}

/* Content cards (white or sand panels). */
.place-card,.sw-card,.sw-tile-light,.vf-next-card,.vf-highlight-card,.dz-nearby-card a{
  border-radius:var(--radius);border:var(--card-border);box-shadow:var(--shadow-card)}
.vf-planning-card{border-radius:var(--radius);box-shadow:var(--shadow-card)}
.vf-page .vf-place-grid .place-card{border-radius:var(--radius)}
.place-card{background:#fff}
.place-card:before{content:none}  /* the old top colour stripe; the photo now leads the card */

/* Card photos: 3:2 everywhere. */
.place-card .place-illustration,.hz-shelf .place-card .place-illustration,.pd-panel .hz-shelf .place-card .place-illustration{aspect-ratio:3/2;border-radius:var(--radius-sm)}

/* Card titles: serif, forest, card size (set in step 2). */
.place-card h2,.place-card h3{font-family:Georgia,serif;font-weight:500;color:var(--forest)}
.place-card h2 a,.place-card h3 a{color:inherit}

/* One hover: a small lift and a deeper shadow. Photo tiles get the same shadow. */
.place-card,.vf-next-card,.dz-nearby-card a,.destination-card,.ex-tiles a,.hz-why-tiles a,.sw-tile-photo,.ps-tile{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.place-card:hover,.place-card:focus-within,.vf-next-card:hover,.dz-nearby-card a:hover,.dz-nearby-card a:focus-visible{
  transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:rgba(165,77,48,.45)}
.destination-card:hover,.ex-tiles a:hover,.hz-why-tiles a:hover,.sw-tile-photo:hover,.ps-tile:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
@media(prefers-reduced-motion:reduce){
  .place-card,.vf-next-card,.dz-nearby-card a,.destination-card,.ex-tiles a,.hz-why-tiles a,.sw-tile-photo,.ps-tile{transition:none}
  .place-card:hover,.place-card:focus-within,.vf-next-card:hover,.dz-nearby-card a:hover,.dz-nearby-card a:focus-visible,
  .destination-card:hover,.ex-tiles a:hover,.hz-why-tiles a:hover,.sw-tile-photo:hover,.ps-tile:hover{transform:none}
}
/* Printed trip keeps its flat list. */
@media print{.place-card{box-shadow:none;transform:none}}

/* Nav photo menus: every item keeps the same text height, so all menus open at one size. */
@container site-header (min-width:721px){
  .site-nav .nav-panel-photos a>strong{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.35}
  .site-nav .nav-panel-photos a>span:not(.nav-thumb){line-height:1.4;min-height:2.8em}
}

/* Language switcher (EN | FR). */
.lang-switch{display:flex;align-items:center;gap:2px;flex:none;padding:3px;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:13px;font-weight:700;letter-spacing:.04em}
.lang-switch a,.lang-switch span{display:inline-grid;place-items:center;min-width:40px;min-height:32px;padding:0 10px;border-radius:var(--radius-pill);color:var(--forest);text-decoration:none}
.lang-switch [aria-current]{background:var(--forest);color:#fff}
.lang-switch a:hover{background:#eee9db}
.lang-switch a:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}
@container site-header (max-width:720px){
  .site-header:has(.lang-switch){grid-template-columns:minmax(0,1fr) auto auto}
  .site-header>.lang-switch{grid-column:2;grid-row:1;align-self:center}
  .site-header:has(.lang-switch)>.menu-toggle{grid-column:3}
  .lang-switch a,.lang-switch span{min-width:36px;padding:0 8px}
}

/* Events through the year (/things-to-do/events and the Things to Do teaser). */
.ev-coming{margin:var(--section-y) 0 0}
.ev-coming-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:8px 24px}
.ev-coming-head h2{margin:0}
.ev-next{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 0;padding:0}
.ev-next a{display:grid;gap:4px;height:100%;padding:20px 22px;border:var(--card-border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-card);color:var(--forest);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.ev-next a:hover,.ev-next a:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.ev-next .ev-when{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta)}
.ev-next strong{font-family:Georgia,serif;font-weight:500;font-size:var(--type-card);line-height:1.2}
.ev-next span:last-child{color:var(--muted);font-size:15px}
.ev-month{margin-top:var(--section-y);scroll-margin-top:90px}
.ev-list{list-style:none;display:grid;gap:18px;margin:18px 0 0;padding:0}
.ev-card{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);border:var(--card-border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-card);overflow:hidden;scroll-margin-top:90px}
.ev-card:not(:has(.ev-photo)){grid-template-columns:minmax(0,1fr)}
.ev-photo{position:relative;margin:0;min-height:220px}
.ev-photo .sw-pic,.ev-photo .sw-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-photo .sw-credit{position:absolute;left:10px;right:10px;bottom:8px;font-size:10px;color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ev-photo .sw-credit a{color:inherit}
.ev-copy{padding:24px 28px}
.ev-copy h3{margin:0 0 4px;font-family:Georgia,serif;font-weight:500;font-size:var(--type-feature);line-height:1.12;color:var(--forest)}
.ev-copy p{margin:0 0 10px}
.ev-where{font-weight:700;color:var(--forest)}
.ev-dates{color:var(--forest)}
.ev-source{font-size:14px;color:var(--muted)}
@media(max-width:820px){.ev-next{grid-template-columns:1fr}.ev-card{grid-template-columns:1fr}.ev-photo{min-height:0;aspect-ratio:3/2}}
@media(prefers-reduced-motion:reduce){.ev-next a{transition:none}.ev-next a:hover,.ev-next a:focus-visible{transform:none}}

/* Destination gallery (_gallery.html): a swipeable row of credited photos of the area. */
.dz-gallery-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,320px);gap:16px;margin:24px 0 0;padding:0 0 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.dz-gallery-grid:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.dz-gallery-item{scroll-snap-align:start}
.dz-gallery-item figure{margin:0}
.dz-gallery-item img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);background:rgba(21,62,53,.08)}
.dz-gallery-item figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.dz-gallery-item figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Area photos on cards: a credited photo of the destination, labelled as the area. */
.place-area-link picture{display:block}
.place-area-media{display:block;position:relative;overflow:hidden}
.place-area-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}