/*
Theme Name: Uganda Safaris ASV
Author: Uganda Safaris
Description: Classic PHP theme for Uganda Safaris. The African Safari Vacations layout (torn-paper hero, six-tile destination grid, featured packages with a promo panel, journey strip, gallery carousel, testimonial slider, FAQ accordion and a five-column footer) recoloured end to end into the Uganda Safaris deep-green and gold palette. Albert Sans (display) + Google Sans (text) + Caveat (accent).
Version: 1.6.4
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ugandasafaris-asv
Tags: travel, safari, one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================
   Design tokens.

   Structure and naming are inherited from the African Safari
   Vacations design; every value is a Uganda Safaris palette
   colour, or a documented tint of one. No olive-family colour
   from the source design survives.
   ========================================================== */
:root{
  /* --- Uganda Safaris palette (source token name -> palette colour) --- */
  --cream:#fcf2e3;         /* cream        */
  --cream2:#f3e1c9;        /* border       */
  --paper:#fffaf0;         /* bg           */
  --olive:#9c2f0d;         /* green        */
  --olive-dark:#6e1f06;    /* green-dark   */
  --ink:#241609;--ink-max:#000000;           /* green-dark   */
  --footer:#1f1409;        /* green-deep   */
  --gold:#a8750f;          /* gold-bright  */
  --gold-dark:#8a5f0c;     /* gold         */
  --tan:#f1b063;           /* gold-light   */
  --text:#5a4735;          /* text         */
  --muted:#6f5b44;         /* text, lifted */
  --line:#f3e1c9;          /* border       */

  /* --- derived neutrals: tints of the palette above --- */
  --rule:#d9c1a0;          /* hairline rules / inactive dots on cream */
  --on-dark:#d5bd9d;       /* body copy on the deep-green surfaces */
  --on-dark-soft:#c6ac8a;  /* meta copy on the deep-green surfaces */
  --on-dark-strong:#eeddc4;/* topbar copy on --footer */
  --dark-line:#3d2a16;     /* hairlines inside the deep-green footer */
  --sale-bg:#fae3c4;       /* pale field behind the gold sale tag (tint of --tan) */
  --cream-rgb:252,242,227;  /* --cream as an rgb triplet, for washes over photography */
  --shadow:36,22,9;       /* --olive-dark as rgb triplet, for shadows */

  /* TOKEN NAMES ARE HISTORICAL - READ BEFORE USING.
     --serif no longer holds a serif. The site moved to the owner's two
     families and both are sans-serifs; --serif is now the DISPLAY/heading face
     and --sans is the TEXT/UI face. The names are kept because they are
     referenced ~30 times here and again across the safaris plugin's
     --ato-font-* re-exports, and renaming them is a large risky sweep for no
     rendering gain. Read them as "display" and "text".

     Both faces ship a TRUE italic (Albert Sans ital axis 0,100..900;1,100..900,
     Google Sans ital axis), so font-style:italic is safe on either and the
     browser never has to synthesise a slant.

     Weights: keep display headings at 400. The axis goes down to 100, but the
     palette here is warm and low-contrast and anything under 300 disappears
     against it. 400 vs 500 changes advance width by only 0.3%, so weight is a
     colour decision, not a fitting one.

     Albert Sans covers latin + latin-ext only. Google Sans covers 25 subsets.
     Non-Latin copy must not be set in the display face. */
  --serif:'Albert Sans','Segoe UI',Arial,sans-serif;
  --sans:'Google Sans','Segoe UI',Arial,sans-serif;
  --navbar-h:104px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--text);font-size:16px;line-height:1.65}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer;border:none}
.pp-wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* The small-caps labels (.pp-sechead h3, .pp-colhead, .pp-cat-label b,
   .pp-footer h5, .pp-organize-title h2,.pp-organize-title h4) use the heading font deliberately.
   They inherited the body font for as long as the heading face was a
   high-contrast serif, which is fragile at 11.5px uppercase with wide
   tracking. The heading face is now a geometric sans that holds up at
   label sizes, so the exception has been retired. */

/* ---------- announcement bar ---------- */
.pp-topbar{background:var(--footer);color:var(--on-dark-strong);font-size:11.5px;letter-spacing:.06em}
.pp-topbar-in{max-width:1180px;margin:0 auto;padding:7px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pp-topbar b{color:#fff;font-weight:600}
.pp-topbar-msgs{display:flex;gap:22px;flex-wrap:wrap}
.pp-topbar-msgs span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.pp-topbar-social{display:flex;gap:12px;opacity:.85}
/* Below ~1000px the bar cannot hold two messages, the operator pill and four
   icons on one row, and it wrapped. The icons go first: the same four links are
   in the footer, and they are the only item here that is decoration rather than
   navigation. */
@media(max-width:1000px){.pp-topbar-social{display:none}}
/* At 820px the bar's content box is 749: the operator pill takes 243 and flex
   shrinks the message list to 490, while two messages need 511 and wrap inside
   it. Widening the list instead would overflow the bar into a horizontal
   scroll, so below 900 it carries one message. The survivor says what the site
   IS; the other says what happens after you find something. */
@media(max-width:900px){.pp-topbar-msgs span+span{display:none}}
.pp-topbar-social svg{width:12px;height:12px;fill:var(--on-dark-strong)}

/* ---------- header ---------- */
.pp-header{background:var(--paper);border-bottom:1px solid var(--line)}
.pp-header-in{max-width:1180px;margin:0 auto;padding:20px 28px 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.pp-search{display:flex;align-items:center;gap:8px;color:var(--text);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pp-search svg{width:15px;height:15px;stroke:var(--text)}
.pp-logo{text-align:center}
/* the_custom_logo() output. Height-driven so a re-upload at a different pixel
   size cannot change the header height; width follows the aspect ratio. */
.pp-logo .custom-logo-link{display:inline-block;line-height:0}
.pp-logo .custom-logo{height:58px;width:auto;max-width:100%;display:block}
.pp-logo h1{margin:0}
.pp-logo-mark{font-size:11px;color:var(--olive);letter-spacing:.2em}
.pp-logo h1,.pp-logo .pp-logo-title{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:.18em;color:var(--ink);white-space:nowrap}
.pp-logo .amp{color:var(--olive)}
.pp-logo-sub{font-size:9.5px;letter-spacing:.34em;color:var(--text);text-transform:uppercase;margin-top:4px}
.pp-header-right{display:flex;justify-content:flex-end;align-items:center;gap:22px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.pp-header-right .pp-cart{display:flex;align-items:center;gap:7px}
.pp-cart-badge{background:var(--olive);color:#fff;font-size:9px;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.pp-header-right svg{width:15px;height:15px;stroke:var(--text)}
.pp-nav{background:var(--paper)}
.pp-nav ul{max-width:1180px;margin:0 auto;padding:2px 28px 14px;list-style:none;display:flex;justify-content:center;gap:34px}
.pp-nav a{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text);font-weight:600;padding-bottom:4px;border-bottom:2px solid transparent;transition:.2s}
.pp-nav a:hover,.pp-nav a.on,.pp-nav .current-menu-item>a,.pp-nav .current_page_item>a,.pp-nav .current-menu-ancestor>a{color:var(--olive);border-color:var(--gold)}

/* ---------- hero ---------- */
.pp-hero{position:relative;background:var(--cream2);overflow:hidden}
.pp-hero-img{position:absolute;inset:0;background-position:center 60%;background-size:cover;background-repeat:no-repeat}
.pp-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--cream-rgb),.97) 0%,rgba(var(--cream-rgb),.93) 42%,rgba(var(--cream-rgb),.62) 62%,rgba(var(--cream-rgb),0) 86%)}
.pp-hero-in{position:relative;max-width:1180px;margin:0 auto;padding:60px 28px 64px;min-height:0;display:flex;align-items:center}
.pp-hero-copy{max-width:600px}
.pp-eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--olive);font-weight:600;margin-bottom:16px}
/* The headline is the one place on the page that should shout. 800 is a real
   drawn weight on Albert Sans\x27 100-900 axis, not a synthesised bold, and it
   stops short of 900 which starts closing the counters at this size.
   -0.015em tracking because geometric sans letterfit opens up as weight rises. */
.pp-hero h1,.pp-hero h2{font-family:var(--serif);font-weight:800;font-size:46px;line-height:1.08;letter-spacing:-.015em;color:var(--ink-max);margin-bottom:18px}
.pp-hero p{font-size:15.5px;color:var(--text);max-width:520px;margin-bottom:20px}

/* Primary CTA.
   The source design used gold + white here, which only reaches 2.6:1.
   The nearest Uganda gold (#b08d4f) is 3.1:1, still short of 4.5:1, so the
   solid CTA takes the deep green (8.7:1) and gold stays as the accent that
   rings, underlines and marks things. .pp-btn-gold is the on-dark-green
   variant: pale gold field, deep green label (7.5:1). */
.pp-btn{display:inline-block;background:var(--olive);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:13px 26px;border-radius:3px;transition:.2s}
.pp-btn:hover{background:var(--olive-dark)}
.pp-btn-olive{background:var(--olive)}
.pp-btn-olive:hover{background:var(--olive-dark)}
.pp-btn-gold{background:var(--tan);color:var(--ink)}
.pp-btn-gold:hover{background:var(--cream)}
.pp-hero-tear{position:absolute;left:0;right:0;bottom:-2px;height:38px;background:var(--cream);clip-path:polygon(0 62%,3% 44%,7% 66%,11% 40%,15% 60%,19% 38%,24% 64%,28% 42%,33% 58%,37% 36%,42% 62%,47% 44%,52% 66%,56% 40%,61% 60%,65% 38%,70% 62%,74% 42%,79% 58%,83% 36%,88% 62%,92% 44%,96% 64%,100% 40%,100% 100%,0 100%)}

/* ---------- section headings ---------- */
.pp-sechead{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:34px}
.pp-sechead::before,.pp-sechead::after{content:"";width:64px;height:1px;background:var(--rule)}
.pp-sechead h2,.pp-sechead h3{font-family:var(--serif);font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);font-weight:600}

/* ---------- destinations ---------- */
.pp-cats{padding:56px 0 44px}
.pp-cats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.pp-cat{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(var(--shadow),.06);transition:.25s}
.pp-cat:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(var(--shadow),.12)}
.pp-cat-img{height:118px;background-size:cover;background-position:center}
.pp-cat-label{background:var(--olive);color:#fff;text-align:center;padding:11px 6px 12px}
.pp-cat-label b{font-family:var(--serif);display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.pp-cat-label span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
/* sixth tile: the gold "Special Offers" treatment. Pale gold field with a
   deep-green label so the 10px caps still clear 4.5:1. */
.pp-cat.sale .pp-cat-label{background:var(--tan);color:var(--ink)}
.pp-cat.sale .pp-cat-label span{opacity:.8}
.pp-cat.sale .pp-cat-img{display:flex;align-items:center;justify-content:center;background:var(--sale-bg)}
.pp-sale-tag{width:64px;height:64px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:24px;font-weight:700;transform:rotate(-8deg);box-shadow:0 6px 14px rgba(154,124,72,.35);position:relative}
.pp-sale-tag::before{content:"";position:absolute;top:7px;left:7px;width:8px;height:8px;border-radius:50%;background:var(--sale-bg)}

/* ---------- featured ---------- */
.pp-featured{padding:12px 0 56px}
.pp-featured-grid{display:grid;grid-template-columns:repeat(6,1fr) 300px;gap:16px;align-items:stretch}
@media(min-width:900px){.pp-featured-grid{grid-template-columns:repeat(3,1fr) 300px;grid-auto-rows:auto}}
.pp-featured-left{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:1/4}
.pp-product{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:10px 10px 14px;text-align:center;transition:.25s}
.pp-product:hover{box-shadow:0 8px 20px rgba(var(--shadow),.12)}
.pp-product-img{height:110px;border-radius:3px;background-size:cover;background-position:center;margin-bottom:10px}
.pp-product b{display:block;font-size:12.5px;letter-spacing:.04em;color:var(--ink);font-weight:600;line-height:1.4;min-height:36px}
.pp-price{font-family:var(--serif);font-size:18px;color:var(--olive);font-weight:700;margin:4px 0 2px}
.pp-stars{color:var(--gold-dark);font-size:11px;letter-spacing:2px}
.pp-promo{grid-column:4;grid-row:1/3;background:var(--olive);border-radius:4px;position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;padding:34px 28px}
.pp-promo::after{content:"";position:absolute;right:-30px;bottom:-30px;width:230px;height:200px;background-image:var(--promo-img);background-position:center;background-size:cover;border-radius:8px;transform:rotate(-6deg);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.pp-promo-spark{position:absolute;top:20px;right:26px;color:var(--tan);font-size:18px;letter-spacing:6px}
.pp-promo h3,.pp-promo h4{font-family:var(--serif);font-size:27px;line-height:1.12;font-weight:600;margin-bottom:14px;position:relative;z-index:1}
.pp-promo p{font-size:13.5px;opacity:.85;max-width:260px;margin-bottom:20px;position:relative;z-index:1}
.pp-promo .pp-btn{position:relative;z-index:1;align-self:flex-start;padding:11px 20px}
.pp-brush{position:absolute;left:-10px;bottom:36px;width:150px;height:34px;background:var(--gold);opacity:.85;border-radius:50% 40% 55% 45%/60% 50% 45% 55%;transform:rotate(-5deg)}

/* ---------- journey strip ---------- */
.pp-organize{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* minmax(0,1fr) on the middle track, for the same reason the header lockup
   needs it: a bare 1fr has min-width:auto, so between 821px (where the
   single-column rule stops applying) and ~940px it refused to shrink and
   pushed the Browse button 53px off the right of the viewport, giving the
   whole page a horizontal scrollbar. */
.pp-organize-in{max-width:1180px;margin:0 auto;padding:30px 28px;display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:28px;align-items:center}
.pp-organize-title h2,.pp-organize-title h4{font-family:var(--serif);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:700;line-height:1.5}
.pp-organize-title p{font-size:13px;color:var(--text);margin-top:6px}
.pp-organize-leaf{color:var(--olive);font-size:18px;margin-top:6px}
.pp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pp-step{display:flex;gap:12px;align-items:flex-start}
.pp-step-ic{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--olive);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--olive)}
.pp-step-ic svg{width:19px;height:19px;stroke:var(--olive);fill:none;stroke-width:1.6}
.pp-step b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pp-step small{font-size:12.5px;color:var(--text);line-height:1.5;display:block;margin-top:3px}
.pp-step .stars{color:var(--gold-dark);font-size:10px;letter-spacing:2px}

/* ---------- gallery carousel ---------- */
.pp-gallery{padding:52px 0 56px}
.pp-carousel{position:relative}
.pp-track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.pp-track::-webkit-scrollbar{display:none}
.pp-shot{flex:0 0 210px;height:150px;border-radius:4px;background-size:cover;background-position:center;border:1px solid var(--line);box-shadow:0 3px 10px rgba(var(--shadow),.08)}
.pp-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--cream);font-size:13px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.pp-arrow.prev{left:-12px}
.pp-arrow.next{right:-12px}

/* ---------- triple row ---------- */
.pp-triple{padding:0 0 54px}
.pp-triple-grid{display:grid;grid-template-columns:300px 330px 1fr;gap:34px}
.pp-colhead{font-family:var(--serif);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:16px}
.pp-sub-box p{font-size:14px;color:var(--text);margin-bottom:16px;max-width:280px}
.pp-envelope{color:var(--olive);margin:6px 0 12px}
.pp-envelope svg{width:44px;height:34px;stroke:var(--olive);fill:none;stroke-width:1.4}
.pp-field{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;max-width:280px}
.pp-field input{flex:1;border:none;outline:none;padding:12px 13px;font-size:13.5px;font-family:var(--sans);color:var(--text);background:transparent}
.pp-field button{background:var(--olive);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:0 16px;transition:.2s}
.pp-field button:hover{background:var(--olive-dark)}
.pp-quote-mark{font-family:var(--serif);font-size:44px;color:var(--tan);line-height:.6;margin-bottom:10px}
.pp-quote{font-size:14.5px;color:var(--text);line-height:1.75;font-style:italic;margin-bottom:14px}
.pp-quote-by{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.pp-dots{display:flex;gap:7px;margin-top:14px}
.pp-dot{width:7px;height:7px;border-radius:50%;background:var(--rule);cursor:pointer}
.pp-dot.on{background:var(--olive)}
.pp-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pp-mini{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:8px 8px 12px;text-align:center;position:relative}
.pp-mini-img{height:82px;border-radius:3px;background-size:cover;background-position:center;margin-bottom:8px}
.pp-new-badge{position:absolute;top:4px;left:4px;background:var(--tan);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:.1em;padding:3px 6px;border-radius:2px}
.pp-mini b{display:block;font-size:11.5px;color:var(--ink);font-weight:600;line-height:1.4;min-height:32px}
.pp-mini .pp-price{font-size:16px;margin:3px 0 0}
.pp-shopall{margin-top:16px;text-align:center}
.pp-ghost{display:inline-block;border:1px solid var(--ink);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:9px 20px;border-radius:2px;background:transparent;transition:.2s}
.pp-ghost:hover{background:var(--ink);color:var(--cream)}

/* ---------- faq + journal ---------- */
.pp-lower{padding:0 0 56px}
.pp-lower-grid{display:grid;grid-template-columns:340px 1fr;gap:44px}
.pp-faq-item{background:var(--paper);border:1px solid var(--line);border-radius:3px;margin-bottom:9px}
.pp-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;padding:14px 16px;font-size:13.5px;color:var(--ink);font-weight:600;letter-spacing:.03em;text-align:left;gap:12px}
.pp-faq-q span{color:var(--olive);font-size:13px;transition:.25s}
.pp-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:14px;color:var(--text);padding:0 16px}
.pp-faq-item.open .pp-faq-a{max-height:220px;padding:0 14px 12px}
.pp-faq-item.open .pp-faq-q span{transform:rotate(45deg)}
.pp-journal-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.pp-journal-head p{font-size:13.5px;color:var(--text)}
.pp-viewall{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px}
.pp-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pp-post{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.25s}
.pp-post:hover{box-shadow:0 8px 20px rgba(var(--shadow),.12)}
.pp-post-img{height:110px;background-size:cover;background-position:center}
.pp-post-body{padding:12px 14px 16px}
.pp-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border-radius:2px;margin-bottom:8px}
.pp-tag.g{background:var(--olive);color:#fff}
.pp-tag.y{background:var(--tan);color:var(--ink)}
.pp-post b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.45;min-height:38px}
.pp-post small{display:block;font-size:11px;color:var(--text);margin-top:7px}

/* ---------- newsletter band ---------- */
.pp-band{background:var(--olive-dark);color:#fff;position:relative;overflow:hidden}
.pp-band::after{content:"";position:absolute;right:0;top:0;bottom:0;width:300px;background-image:var(--band-img);background-position:center;background-size:cover;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.pp-band-in{max-width:1180px;margin:0 auto;padding:36px 28px;display:flex;align-items:center;gap:34px;position:relative;z-index:1}
.pp-band-ic svg{width:60px;height:44px;stroke:var(--on-dark);fill:none;stroke-width:1.2}
.pp-band h2,.pp-band h4{font-family:var(--serif);font-size:24px;letter-spacing:.12em;font-weight:600;margin-bottom:6px}
.pp-band p{font-size:13.5px;color:var(--on-dark);max-width:340px}
.pp-band .pp-field{margin-left:auto;background:var(--cream);min-width:340px;border:none}
/* the shadow keeps the gold script legible where the band photo runs bright */
.pp-hand{font-family:'Caveat',cursive;position:absolute;right:36px;bottom:14px;color:var(--tan);font-size:24px;transform:rotate(-6deg);z-index:2;text-shadow:0 1px 8px rgba(var(--shadow),.9)}

/* ---------- footer ---------- */
.pp-footer{background:var(--footer);color:var(--on-dark)}
.pp-footer-in{max-width:1180px;margin:0 auto;padding:48px 28px 34px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:36px}
.pp-flogo{font-family:var(--serif);font-size:19px;letter-spacing:.16em;color:var(--cream);font-weight:600;margin-bottom:10px;line-height:1.25}
/* Reversed logo. Height-driven like the header mark so a re-upload at a
   different pixel size cannot shift the footer layout. */
.pp-flogo-link{display:inline-block;line-height:0;margin-bottom:12px}
.pp-flogo-img{height:52px;width:auto;max-width:100%;display:block}
.pp-footer p.tag{font-size:13px;line-height:1.7;max-width:230px;margin-bottom:16px}
.pp-fsocial{display:flex;gap:12px}
.pp-fsocial a{width:26px;height:26px;border:1px solid var(--dark-line);border-radius:50%;display:flex;align-items:center;justify-content:center}
.pp-fsocial svg{width:11px;height:11px;fill:var(--on-dark)}
/* The footer column headings are h2 now, not h5: an h5 under the pages' h2 sections
   skipped two levels in the outline on every page. The h5 selector is kept so any
   stray one still inherits the same label styling rather than rendering as a heading. */
.pp-footer h5,.pp-footer .pp-footer-title{font-family:var(--serif);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);margin-bottom:14px;font-weight:700;line-height:1.3}
.pp-footer ul{list-style:none}
.pp-footer li{margin-bottom:8px}
.pp-footer li a{font-size:13.5px;transition:.2s}
.pp-footer li a:hover{color:#fff}
.pp-badges .pp-badge{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.pp-badge svg{width:22px;height:22px;stroke:var(--tan);fill:none;stroke-width:1.4;flex:0 0 22px}
.pp-badge b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.pp-badge small{font-size:11.5px;color:var(--on-dark-soft)}
.pp-bottombar{border-top:1px solid var(--dark-line)}
.pp-bottombar-in{max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.06em;color:var(--on-dark-soft)}
.pp-bottombar-in .links a{margin-left:22px}
.pp-bottombar-in .links a:hover{color:#fff}

/* ==========================================================
   WordPress additions
   ========================================================== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto;clip-path:none;color:var(--ink);display:block;font-size:12px;height:auto;left:6px;line-height:normal;padding:14px 22px;text-decoration:none;top:6px;width:auto;z-index:100000}
.alignwide{max-width:1180px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none;width:100%}
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:12px;color:var(--muted);margin-top:6px;text-align:center}

/* Inner pages */
.pp-pagehead{background:var(--cream2);border-bottom:1px solid var(--line);position:relative}
.pp-pagehead-in{max-width:1180px;margin:0 auto;padding:52px 28px 46px;text-align:center}
.pp-pagehead h1,.pp-pagehead h2.pp-pagetitle{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.14;color:var(--ink)}
.pp-pagehead .pp-eyebrow{margin-bottom:14px}
.pp-crumbs{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-top:14px}
.pp-crumbs a:hover{color:var(--olive)}
.pp-page{padding:52px 0 64px}
.pp-page-grid{max-width:780px;margin:0 auto}
.page-content{font-size:17px;line-height:1.8;color:var(--text)}
.page-content h2{font-family:var(--serif);font-size:29px;font-weight:600;color:var(--ink);line-height:1.2;margin:36px 0 14px}
.page-content h3{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--ink);line-height:1.25;margin:28px 0 12px}
.page-content h4{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:700;margin:24px 0 10px}
.page-content p{margin-bottom:18px}
.page-content ul,.page-content ol{margin:0 0 18px 20px}
.page-content li{margin-bottom:9px}
.page-content a{color:var(--olive);border-bottom:1px solid var(--tan)}
.page-content a:hover{color:var(--olive-dark)}
.page-content blockquote{border-left:3px solid var(--gold);padding-left:18px;margin:0 0 20px;font-family:var(--serif);font-size:19px;font-style:italic;color:var(--ink)}
.page-content img{border-radius:4px;margin:8px 0 18px}
.page-content table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:15px}
.page-content th,.page-content td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.page-content th{background:var(--cream2);color:var(--ink);font-weight:600}
.pp-featimg{border-radius:4px;overflow:hidden;margin-bottom:26px;border:1px solid var(--line)}
.pp-postmeta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-top:12px}
.pp-postnav{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.pp-postnav a:hover{color:var(--olive)}
.pp-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pp-pagination{margin-top:34px;text-align:center;font-size:12.5px;letter-spacing:.1em}
.pp-pagination .page-numbers{display:inline-block;padding:9px 14px;border:1px solid var(--line);border-radius:3px;margin:0 3px;background:var(--paper);color:var(--ink)}
.pp-pagination .page-numbers.current,.pp-pagination .page-numbers:hover{background:var(--olive);color:#fff;border-color:var(--olive)}

/* ---------- hamburger + mobile drawer ---------- */
.pp-burger{display:none;width:34px;height:30px;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:transparent;border-radius:3px;padding:0;flex:0 0 34px}

/* ---------- tap targets for the header controls ----------
   At 320px the account and saved icons measure 15x15 (their .pp-lbl text is
   hidden at <=560px) and the burger 34x30, all well under the ~44px floor.
   The boxes are left exactly where they are -- the header grid has little
   slack at 320px and resizing them shifts the icons -- and the hit area is
   extended with a transparent ::after instead. The widths below are chosen
   so the three zones abut without overlapping, which would be worse than a
   small target: acct 206.5-232.5, cart 233.5-259.5, burger 261-305. */
@media(max-width:820px){
  .pp-header-right .pp-acct,.pp-header-right .pp-cart{position:relative}
  .pp-header-right .pp-acct::after,.pp-header-right .pp-cart::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:100%;min-width:26px;height:44px;
  }
  .pp-burger{position:relative}
  .pp-burger::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;
  }
}
.pp-burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.pp-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pp-burger.is-open span:nth-child(2){opacity:0}
.pp-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* desktop dropdowns (only appear if a menu has children) */
.pp-nav li{position:relative}
.pp-nav .sub-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:190px;background:var(--paper);border:1px solid var(--line);border-radius:3px;box-shadow:0 10px 24px rgba(var(--shadow),.16);padding:8px 0;margin:0;z-index:120;flex-direction:column;justify-content:flex-start;gap:0;max-width:none}
.pp-nav li:hover>.sub-menu,.pp-nav li:focus-within>.sub-menu{display:flex}
.pp-nav .sub-menu li{width:100%}
.pp-nav .sub-menu a{display:block;padding:7px 16px;border-bottom:none;letter-spacing:.1em}

/* ==========================================================
   Marketplace components.

   Added when the home page was reframed from "we run safaris"
   to "we list safaris other people run". Everything below
   reuses the existing tokens - no new colours, no new fonts.
   ========================================================== */

/* ---------- hero: secondary action + the honesty line ---------- */
.pp-hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pp-hero-link{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px;transition:.2s}
.pp-hero-link:hover{color:var(--olive)}
/* The "we do not sell or book these trips" line. Deliberately quiet but
   present in the first screen - it is the single most load-bearing sentence
   on the page, so it is not allowed to drop below 12.5px. */
.pp-hero-note{font-size:12.5px;line-height:1.6;color:var(--muted);max-width:400px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}

/* ---------- safari finder ---------- */
/* The finder as it appears inside the hero: its own paper panel, because the
   hero background is a photograph and the wash alone cannot be relied on to keep
   select controls legible at every viewport width. Two columns, so three selects
   and the button land as a tidy 2x2 rather than a cramped 4-up. */
.pp-hero-finder{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--olive);border-radius:4px;padding:16px 18px 17px;box-shadow:0 6px 20px rgba(var(--shadow),.09);max-width:560px}
.pp-hero-finder .pp-finder-form{grid-template-columns:1fr 1fr;gap:12px}
.pp-hero-finder .pp-finder-action{align-items:end}
.pp-hero-finder .pp-finder-submit{width:100%;justify-content:center}
.pp-finder{padding:30px 0 6px}
.pp-finder-box{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--olive);border-radius:4px;padding:22px 24px 20px;box-shadow:0 6px 20px rgba(var(--shadow),.07)}
.pp-finder-head{margin-bottom:16px}
.pp-finder-title{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);font-weight:700}
.pp-finder-sub{font-size:13.5px;color:var(--text);margin-top:6px;max-width:640px}
.pp-finder-form{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:14px;align-items:end}
.pp-finder-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pp-finder-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pp-finder-select{width:100%;font-family:var(--sans);font-size:13.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:3px;padding:11px 12px;line-height:1.3;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--olive) 50%),linear-gradient(135deg,var(--olive) 50%,transparent 50%);background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.pp-finder-select:focus{outline:2px solid var(--olive);outline-offset:1px;border-color:var(--olive)}
.pp-finder-action{display:flex}
.pp-finder-submit{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;white-space:nowrap}
.pp-finder-submit svg{width:15px;height:15px;flex:0 0 15px}
.pp-finder-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pp-finder-chips-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:2px}
.pp-finder-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:6px 13px;transition:.2s}
.pp-finder-chip span{font-size:11px;color:#fff;background:var(--olive);border-radius:999px;padding:1px 7px;font-weight:700}
.pp-finder-chip:hover{border-color:var(--olive);background:#fff}

/* ---------- real safari cards ---------- */
/* .pp-product / .pp-mini became links when the invented packages were
   replaced by real listings; they keep the card look and gain a focus ring. */
.pp-product,.pp-mini{display:block}
.pp-product:focus-visible,.pp-mini:focus-visible,.pp-finder-chip:focus-visible,.pp-hero-link:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.pp-product b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pp-mini b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pp-product-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.pp-product-by{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.pp-empty{grid-column:1/-1;font-size:14px;color:var(--muted);text-align:center;padding:26px 0}
/* the duration chip reuses the old "New" badge slot */
.pp-new-badge{white-space:nowrap}

/* ---------- operator list ---------- */
.pp-oplist-intro{font-size:13.5px;color:var(--text);margin-bottom:14px}
.pp-oplist{list-style:none;border-top:1px solid var(--line)}
.pp-oplist li{border-bottom:1px solid var(--line)}
.pp-oplist a{display:block;padding:10px 0;font-size:14px;color:var(--ink);font-weight:600;transition:.2s}
.pp-oplist a:hover{color:var(--olive);padding-left:6px}

/* ---------- closing band ---------- */
.pp-band-action{margin-left:auto}
.pp-band-action .pp-btn{white-space:nowrap}
.pp-band-ic svg circle{fill:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .pp-featured-grid{grid-template-columns:1fr}
  .pp-featured-left{grid-column:auto}
  .pp-promo{grid-column:auto;grid-row:auto;min-height:280px}
  .pp-triple-grid{grid-template-columns:1fr 1fr}
  .pp-minis{grid-column:1/-1}
  .pp-lower-grid{grid-template-columns:1fr}
  .pp-archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  /* two-up, then the button spanning the row: a 4-track search bar squeezes
     the selects below a usable width well before the 820px breakpoint. */
  .pp-finder-form{grid-template-columns:1fr 1fr}
  .pp-finder-action{grid-column:1/-1}
  .pp-finder-submit{width:100%;justify-content:center}
}
@media(max-width:820px){
  .pp-cats-grid{grid-template-columns:repeat(3,1fr)}
  .pp-band-action{margin-left:0;width:100%}
  .pp-featured-left{grid-template-columns:repeat(2,1fr)}
  .pp-organize-in{grid-template-columns:1fr}
  .pp-steps{grid-template-columns:repeat(2,1fr)}
  /* minmax(0,1fr) lets the logo track shrink; a bare 1fr has min-width:auto
     and refuses to go below the nowrap logo width, pushing the header
     utilities (and the hamburger) off-screen. */
  .pp-header-in{grid-template-columns:auto minmax(0,1fr) auto}
  .pp-nav ul{flex-wrap:wrap;gap:16px}
  .pp-triple-grid{grid-template-columns:1fr}
  .pp-posts{grid-template-columns:1fr}
  .pp-band-in{flex-wrap:wrap}
  .pp-band .pp-field{margin-left:0;min-width:0;width:100%}
  .pp-footer-in{grid-template-columns:1fr 1fr}
  .pp-hero h1,.pp-hero h2{font-size:34px}
  .pp-archive-grid{grid-template-columns:1fr}
  .pp-pagehead h1,.pp-pagehead h2.pp-pagetitle{font-size:32px}

  /* --- mobile nav: sticky header + hamburger drawer --- */
  .pp-header{position:sticky;top:0;z-index:100}
  .pp-logo h1,.pp-logo .pp-logo-title{font-size:22px;letter-spacing:.12em}
  .pp-logo .custom-logo{height:44px}
  .pp-burger{display:flex}
  .pp-header-right{gap:16px}
  .pp-nav{position:static}
  .pp-nav ul.pp-nav-list{display:none}
  .pp-nav ul.pp-nav-list.open{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    position:fixed;
    top:var(--navbar-h);
    left:0;right:0;bottom:0;
    width:100%;
    max-width:none;
    margin:0;
    height:calc(100vh - var(--navbar-h));
    height:calc(100dvh - var(--navbar-h));
    max-height:calc(100vh - var(--navbar-h));
    max-height:calc(100dvh - var(--navbar-h));
    background:var(--paper);
    border-top:1px solid var(--line);
    z-index:90;
    padding:14px 24px 96px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .pp-nav ul.pp-nav-list.open>li{width:100%;border-bottom:1px solid var(--line);position:static}
  .pp-nav ul.pp-nav-list.open>li:last-child{border-bottom:none}
  .pp-nav ul.pp-nav-list.open a{display:block;padding:16px 2px;font-size:13.5px;letter-spacing:.18em;border-bottom:none}
  .pp-nav ul.pp-nav-list.open>li>a{color:var(--ink)}
  .pp-nav ul.pp-nav-list.open .current-menu-item>a,
  .pp-nav ul.pp-nav-list.open .current_page_item>a{color:var(--olive)}
  /* sub-menus: always visible inside the drawer (no :hover on touch) */
  .pp-nav ul.pp-nav-list.open .sub-menu{
    display:block!important;
    position:static;
    transform:none;
    visibility:visible;
    opacity:1;
    background:rgba(18,85,75,.06);
    border:none;
    border-left:2px solid var(--gold);
    box-shadow:none;
    min-width:0;
    margin:0 0 10px 4px;
    padding:2px 0 2px 12px;
  }
  .pp-nav ul.pp-nav-list.open .sub-menu a{padding:12px 2px;font-size:12.5px;color:var(--text)}
  html.nav-open,body.nav-open{overflow:hidden!important;height:100%;touch-action:none}
}
@media(max-width:782px){
  body.admin-bar .pp-header{top:46px}
}
@media(max-width:560px){
  .pp-cats-grid{grid-template-columns:repeat(2,1fr)}
  .pp-finder{padding:22px 0 4px}
  .pp-finder-box{padding:18px 16px 16px}
  .pp-finder-form{grid-template-columns:1fr}
  .pp-hero-finder{padding:14px 14px 15px;max-width:none}
  .pp-hero-finder .pp-finder-form{grid-template-columns:1fr}
  .pp-hero-actions{gap:14px}
  .pp-hero-note,.pp-hero p{max-width:none}
  .pp-featured-left{grid-template-columns:1fr}
  .pp-minis{grid-template-columns:repeat(2,1fr)}
  .pp-steps{grid-template-columns:1fr}
  .pp-footer-in{grid-template-columns:1fr}
  .pp-flogo-img{height:42px}
  .pp-topbar-in{justify-content:center}
  .pp-lbl{display:none}
  .pp-logo h1,.pp-logo .pp-logo-title{font-size:17px;letter-spacing:.08em;white-space:normal}
  /* 1302x340 is 3.8:1, so at 34px tall it is ~130px wide and still clears the
     burger and the utility icons either side of it. */
  .pp-logo .custom-logo{height:34px}
  .pp-logo-sub{letter-spacing:.2em}
  .pp-header-right{gap:12px}
  .pp-header-in{padding:14px 20px 10px}
  .pp-wrap{padding:0 20px}
  .pp-hero h1,.pp-hero h2{font-size:29px}
  .pp-hero-in{padding:40px 20px 58px;min-height:0}
  /* the hero copy spans almost the full width on a phone, so carry the cream
     scrim further across than the desktop 75% stop or the text sits on photo */
  .pp-hero-img::after{background:linear-gradient(90deg,rgba(var(--cream-rgb),.97) 0%,rgba(var(--cream-rgb),.93) 45%,rgba(var(--cream-rgb),.72) 78%,rgba(var(--cream-rgb),.3) 100%)}
  .pp-pagehead h1,.pp-pagehead h2.pp-pagetitle{font-size:26px}
  .pp-bottombar-in{flex-direction:column;gap:8px;text-align:center}
  .pp-bottombar-in .links a{margin:0 10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pp-track{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ==========================================================
   Operator entry points (nav agent, v1.3.0)

   The marketplace recruits the tour companies whose safaris it
   lists, and until now nothing on the front end linked to that
   side of the site. Two entry points, both deliberately worded
   for operators rather than travellers:

   .pp-oplink  - announcement bar, every page, above the logo
   .pp-fop     - footer, sharing the fifth grid column with the
                 trust badges (adding a sixth child to the
                 five-track .pp-footer-in grid would wrap)

   Colours are existing tokens only: --tan on --footer is the
   same pairing the footer headings already use.
   ========================================================== */

/* the announcement bar splits into messages | (operator CTA + social) */
.pp-topbar-right{display:flex;align-items:center;gap:18px;flex:0 0 auto}

.pp-oplink{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  border:1px solid var(--dark-line);border-radius:999px;
  padding:4px 13px;line-height:1.4;transition:.2s;
}
.pp-oplink:hover,.pp-oplink:focus-visible{border-color:var(--tan);background:rgba(226,186,117,.12)}
/* lower case and unspaced on purpose: it has to read as a question addressed
   to a different visitor, not as another item of tracking-spaced nav chrome */
.pp-oplink-eyebrow{font-size:10.5px;letter-spacing:.02em;text-transform:none;color:var(--on-dark-soft)}
.pp-oplink-cta{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--tan)}
.pp-oplink:hover .pp-oplink-cta{color:#fff}

/* the account control, matching the .pp-cart utility beside it */
.pp-header-right .pp-acct{display:flex;align-items:center;gap:7px}

/* ---------- footer: for tour operators ---------- */
.pp-fop{margin-top:26px;padding-top:22px;border-top:1px solid var(--dark-line)}
.pp-fop-note{font-size:12.5px;line-height:1.6;color:var(--on-dark-soft);margin-bottom:13px}
/* two class selectors so the generic .pp-footer li a rules below it do not win */
.pp-footer .pp-fop-cta{
  display:inline-block;border:1px solid var(--tan);color:var(--tan);
  border-radius:999px;padding:7px 15px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;transition:.2s;
}
.pp-footer .pp-fop-cta:hover{background:var(--tan);color:var(--footer)}

@media(max-width:560px){
  /* the bar centres and wraps at this width; give the operator CTA its own
     full-width row rather than letting it share one with the messages */
  .pp-topbar-in{flex-wrap:wrap;row-gap:9px}
  .pp-topbar-msgs{flex:1 1 100%;justify-content:center;gap:14px}
  .pp-topbar-right{flex:1 1 100%;justify-content:center}
  /* .pp-lbl is hidden at this width, so the utilities are icon-only and the
     operator CTA is the only text in the header that is not the logo */
  .pp-oplink{padding:5px 15px}
}

/* Activity links in the triple section. Shares .pp-oplist's list styling; the
   count sits right-aligned so the names stay scannable as a column. */
.pp-actlist li a{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pp-actcount{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);flex:0 0 auto}

/* ---------- Browse By Activity: gateway to /things-to-do/ ----------
   The column leads with a card pointing at the activities page, because that
   page is the fuller resource, and then offers the busiest activity archives
   under the same group headings that page uses. Chips rather than another
   bordered list: the operator column beside it and the destinations block above
   it are both stacked lists, and a third one made the row read as one texture.

   The .pp-actlist rules above are what the flat list used and are left in place
   for any template still calling for them. */
.pp-ttd-card{position:relative;display:block;background:var(--paper);border:1px solid var(--cream2);border-left:3px solid var(--olive);border-radius:3px;padding:15px 50px 16px 17px;color:var(--ink);transition:.2s}
.pp-ttd-card:hover{background:var(--cream2);border-left-color:var(--olive-dark);box-shadow:0 6px 16px rgba(var(--shadow),.10)}
.pp-ttd-kicker{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--olive);margin-bottom:5px}
.pp-ttd-title{display:block;font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.14;color:var(--ink)}
.pp-ttd-meta{display:block;font-size:12.5px;line-height:1.5;color:var(--text);margin-top:6px}
.pp-ttd-go{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--olive);transition:.2s}
.pp-ttd-card:hover .pp-ttd-go{background:var(--olive);border-color:var(--olive);color:var(--cream)}

.pp-actlead{font-size:12.5px;line-height:1.55;color:var(--muted);margin:15px 0 11px}

.pp-actgroups{list-style:none;margin:0;padding:0}
.pp-actgroup{padding:9px 0;border-top:1px solid var(--line)}
.pp-actgroup:last-child{border-bottom:1px solid var(--line)}
.pp-actgroup-label{display:block;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:7px}
.pp-actchips{display:flex;flex-wrap:wrap;gap:6px}
.pp-actchip{display:inline-flex;align-items:baseline;gap:7px;max-width:100%;border:1px solid var(--cream2);border-radius:2px;background:var(--paper);padding:5px 10px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink);transition:.2s}
.pp-actchip:hover,.pp-actchip:focus-visible{background:var(--olive);border-color:var(--olive);color:#fff}
.pp-actchip .pp-actcount{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.pp-actchip:hover .pp-actcount,.pp-actchip:focus-visible .pp-actcount{color:var(--tan)}

@media(max-width:560px){
  .pp-ttd-card{padding:14px 44px 15px 15px}
  .pp-ttd-title{font-size:21px}
}

@media(min-width:821px) and (max-width:1080px){
  /* The triple row is 1fr 1fr in this band, so the activity column drops into a
     second row on its own with an empty cell beside it. That was survivable when
     the column was a short list; it is not now that the column carries a card and
     six groups. Give it the whole row and run the groups two up. */
  .pp-actcol{grid-column:1/-1}
  .pp-ttd-card{max-width:560px}
  .pp-actlead{max-width:560px}
  .pp-actgroups{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
  .pp-actgroup{border-top:none;border-bottom:1px solid var(--line)}
  .pp-actgroup:nth-child(1),.pp-actgroup:nth-child(2){border-top:1px solid var(--line)}
  .pp-actgroup:last-child{border-bottom:1px solid var(--line)}
}

/* A page whose content supplies its own <h1> (the planning pillars) gets the
   title rendered in the page head as a plain div, so the H1 in the content is
   the only one on the page. The div is aria-hidden because the real heading is
   a few hundred pixels below it and screen readers should meet it once.
   The content H1 is then hidden visually to avoid printing the title twice. */
.pp-pagetitle--incontent{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.14;color:var(--ink)}
.pp-page-grid > .page-content > h1:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:900px){.pp-pagetitle--incontent{font-size:32px}}
@media (max-width:560px){.pp-pagetitle--incontent{font-size:26px}}

/* ==========================================================================
   Planning hub  (template-planning-hub.php)
   A parent page whose children are the content. The default .pp-page-grid
   column is 780px, which is right for an article and wrong for a directory:
   it buried six guides inside a wall of prose. These rules give the guides a
   full-width band of their own above the text.
   ========================================================================== */

/* ---- hero ---- */
.ugsa-hub-hero{position:relative;min-height:430px;display:flex;align-items:flex-end;background-color:var(--footer);background-size:cover;background-position:center 58%;background-repeat:no-repeat}
.ugsa-hub-hero .pp-wrap{width:100%}
/* the photograph is bright at the top and the type sits at the bottom, so the
   scrim ramps rather than sitting flat, keeping the sky and still clearing AA */
.ugsa-hub-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,20,9,.12) 0%,rgba(31,20,9,.48) 52%,rgba(31,20,9,.86) 100%)}
.ugsa-hub-hero--plain{background-image:linear-gradient(140deg,var(--footer) 0%,var(--olive-dark) 100%)}
.ugsa-hub-hero--plain::after{display:none}
.ugsa-hub-hero .pp-wrap{position:relative;z-index:1}
.ugsa-hub-hero-in{padding:104px 0 44px;max-width:760px}
.ugsa-hub-hero .pp-eyebrow{color:var(--tan);margin-bottom:12px}
.ugsa-hub-h1{font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.10;color:#fff;margin:0 0 16px}
.ugsa-hub-lede{font-size:18px;line-height:1.66;color:var(--on-dark-strong);margin:0;max-width:60ch}
.ugsa-hub-crumbs{color:var(--on-dark-soft);margin-top:22px}
.ugsa-hub-crumbs a{color:var(--on-dark-soft)}
.ugsa-hub-crumbs a:hover{color:var(--tan)}

/* ---- the guide cards ---- */
.ugsa-hub-guides{background:var(--cream);padding:54px 0 58px;border-bottom:1px solid var(--line)}
.ugsa-hub-h2{font-family:var(--serif);font-size:33px;font-weight:600;line-height:1.14;color:var(--ink);margin:0 0 8px}
.ugsa-hub-h2-sub{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 30px;max-width:62ch}
.ugsa-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.ugsa-hub-card{display:flex;flex-direction:column;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;color:var(--ink);transition:transform .22s,box-shadow .22s,border-color .22s}
.ugsa-hub-card:hover,.ugsa-hub-card:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(var(--shadow),.15);border-color:var(--rule)}
.ugsa-hub-card:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
/* the card root is an <a>, so every child is a span and needs laying out by hand */
.ugsa-hub-card-img{display:block;width:100%;height:176px;object-fit:cover;background:var(--cream2)}
.ugsa-hub-card-img--none{height:176px}
.ugsa-hub-card-body{display:block;position:relative;flex:1;padding:16px 18px 52px}
.ugsa-hub-card-kicker{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);margin-bottom:7px}
.ugsa-hub-card-title{display:block;font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.12;color:var(--ink);margin-bottom:9px}
.ugsa-hub-card-blurb{display:block;font-size:14px;line-height:1.62;color:var(--text)}
.ugsa-hub-card-go{position:absolute;left:18px;bottom:16px;width:29px;height:29px;border-radius:50%;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--olive);transition:.2s}
.ugsa-hub-card:hover .ugsa-hub-card-go{background:var(--olive);border-color:var(--olive);color:var(--cream)}

/* ---- the prose below ---- */
.ugsa-hub-body{background:var(--paper);padding:52px 0 64px}
.ugsa-hub-prose{max-width:780px;margin:0 auto}
.ugsa-hub-prose > h2:first-child{margin-top:0}

/* ---- the three-step strip ---- */
.ugsa-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 8px}
.ugsa-step{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px;padding:16px 18px 18px}
.ugsa-step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--olive);color:var(--cream);font-family:var(--sans);font-size:13px;font-weight:700;margin-bottom:10px}
.page-content .ugsa-step h3{font-size:20px;margin:0 0 7px}
.page-content .ugsa-step p{font-size:14.5px;line-height:1.62;margin:0}

/* ---- the marketplace mechanics panel ---- */
.ugsa-panel{background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:28px 30px;margin:44px 0 0}
.page-content .ugsa-panel h2{font-size:28px;margin:0 0 6px}
.page-content .ugsa-panel h3{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--olive);margin:22px 0 7px}
.page-content .ugsa-panel p{font-size:15px;line-height:1.72;margin-bottom:12px}
.page-content .ugsa-panel p:last-child{margin-bottom:0}

/* ---- responsive ---- */
@media (max-width:1000px){
  .ugsa-hub-grid{grid-template-columns:repeat(2,1fr)}
  .ugsa-hub-h1{font-size:39px}
  .ugsa-hub-hero-in{padding:88px 0 40px}
}
@media (max-width:900px){
  /* three 220px columns at tablet width wrapped every step heading to three
     lines; stacking reads as the sequence it is */
  .ugsa-steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ugsa-hub-h2{font-size:28px}
}
@media (max-width:620px){
  .ugsa-hub-grid{grid-template-columns:1fr}
  .ugsa-hub-h1{font-size:29px}
  .ugsa-hub-lede{font-size:16.5px}
  .ugsa-hub-hero-in{padding:64px 0 32px}
  .ugsa-hub-hero{min-height:340px}
  .ugsa-hub-guides{padding:40px 0 44px}
  .ugsa-hub-card-img,.ugsa-hub-card-img--none{height:196px}
  .ugsa-panel{padding:22px 20px}
}

/* ---------- tap targets for the footer icons and the gallery arrows ----------
   Same case as the header controls above: the visible box stays where it is
   and a transparent ::after carries the hit area.

   #7 The footer icons are 26x26 on a 38px pitch (26 plus a 12px gap), so a
   44px zone would overlap its neighbour and the wrong icon would take the tap.
   The trade-off taken: below 820px the gap widens to 18px, which puts the
   pitch at exactly 44 and lets the four zones abut without overlapping. That
   moves the three right-hand icons right by up to 18px inside the footer's
   first column, which is 319px wide at 375px and carries nothing else on that
   row, so no other element moves. Above 820px the gap is left at 12px and the
   zone is capped at that 38px pitch, so the desktop footer is byte-identical:
   38 wide rather than 44, but 44 tall and still guaranteed not to steal a
   neighbour's tap. The zone width is derived from the same custom property as
   the gap, so the two cannot drift apart.

   #8 The gallery arrows are 30x30 and already position:absolute, so a 44x44
   zone costs no layout whatever. At 320px the prev zone reaches x=1 and the
   next zone x=319, both inside the viewport, so nothing overflows the page.
   The extra area sits over .pp-shot tiles, which are inert divs, so no link
   loses a click. */
.pp-fsocial{--fsoc-gap:12px;gap:var(--fsoc-gap)}
.pp-fsocial a{position:relative}
.pp-fsocial a::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + var(--fsoc-gap));height:44px}
@media(max-width:820px){.pp-fsocial{--fsoc-gap:18px}}
.pp-arrow::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}