/*
 * flags-visual.css — enqueued by inc/assets.php ONLY when agt_brand_fonts,
 * agt_brand_orange, agt_green_scheme or agt_dark_image_treatment is on. None of
 * these flags touch css/travel.css (production's file, read-only); every
 * override lives here, scoped under a body class header.php adds only when its
 * flag is on. All four default off: this file is not enqueued at all at
 * defaults, so the front end is byte-identical to production.
 *
 * Source of truth for colour and type: Tamm's
 * "Australian Geographic Brand Guidelines.pdf" (4 Dec 2025), not ag-theme-2026 —
 * where the two disagree, the PDF wins. See each block below for page numbers.
 *
 * agt_brand_orange and agt_brand_fonts are the two APPROVED fixes (Tamm plus
 * the business, 2026-09-28) and ship first. agt_green_scheme is a preview for
 * the brand team, not an approved colour — if both agt_brand_orange and
 * agt_green_scheme are on, green wins, because its block comes LAST in this
 * file: same specificity (one class on body), later source order wins.
 */

/* =========================================================================
 * BRAND PALETTE + ROLE TOKENS
 *
 * Palette = the colours, by real name and value (Brand Guidelines PDF p.39
 * unless noted). Roles = what a colour is FOR; rules below use roles only.
 * To recolour the site, change a role's palette pick, not the rules.
 * Declared on :root so they resolve for every rule in this file.
 * ========================================================================= */
:root {
  /* Palette: ONLY colours the Brand Guidelines list (section 8 "Colour", guide pp.37-40; text file
   * "Australian Geographic Brand Guidelines.md" lines 211-257). Names are the guide's names.
   * The guide gives tint STEPS (75%, 50%, 25%) but no hex for them; a tint below is the step
   * mixed with white (black for the neutral), computed, not a new colour. */
  --agt-brand-red-earth: #DB5223;        /* Primary "Red Earth", Pantone 7579 C (agt_brand_orange only) */
  --agt-brand-blue-adventure: #017085;   /* Secondary "Blue Adventure", Pantone 7468 C (not used yet) */
  --agt-brand-green-travel: #507D4B;     /* Secondary "Green Travel", Pantone 370 C */
  --agt-brand-green-travel-75: #7C9E78;  /* Green Travel, 75% tint step, on white */
  --agt-brand-black: #000000;            /* Neutral "Black", Black 6 C */
  --agt-brand-black-25: #BFBFBF;         /* Black, 25% tint step, on white */
  --agt-brand-white: #FFFFFF;            /* Neutral "White" */

  /* Roles */
  --agt-color-primary: var(--agt-brand-green-travel);          /* buttons, links, focus, active */
  --agt-color-primary-hover: var(--agt-brand-green-travel-75); /* hover / selected state (the guide's lighter green) */
  --agt-color-primary-soft: var(--agt-brand-green-travel);     /* tab fill; was #75B766, not in the guide, so solid Green Travel */
  --agt-color-on-primary: var(--agt-brand-white);              /* text on a primary fill */
  --agt-color-on-primary-hover: #222;                          /* text on the hover fill: white is 2.99:1 on Green Travel 75%, #222 is 5.32:1 */
  --agt-color-text: var(--agt-brand-black);
  --agt-color-frame: var(--agt-brand-black);                   /* 1-2px frames */
  --agt-color-surface: var(--agt-brand-white);
  --agt-color-idle: var(--agt-brand-black-25);                 /* idle map regions, unselected tabs; was #ddd, not in the guide */
}

/* =========================================================================
 * LEGACY NAMES — the ONLY place the old orange/coral names appear.
 * Legacy names used by travel.css; remove when the CSS is folded into
 * travel.css at go-live. They map onto the role tokens above; same
 * selectors and order as before (green scheme after orange, so it wins).
 * ========================================================================= */
.agt-brand-orange {
  --agt-burnt-orange: var(--agt-brand-red-earth);
  --agt-peachy-coral: var(--agt-brand-red-earth);
  --overlay-coral: rgba(219, 82, 35, 0.4);
}
.agt-green-scheme {
  --agt-burnt-orange: var(--agt-color-primary);
  --agt-peachy-coral: var(--agt-color-primary);
  --overlay-coral: rgba(80, 125, 75, 0.4); /* --agt-brand-green-travel at 40%, hover-only tint (was #75B766, not in the guide) */
}
body.agt-brand-fonts {
  --agt-burnt-orange: var(--agt-color-primary);
  --agt-peachy-coral: var(--agt-color-primary);
  --agt-orange: var(--agt-color-primary);
  --agt-light-orange: var(--agt-color-primary-hover);
}

/* =========================================================================
 * agt_brand_fonts — APPROVED
 *
 * Tamm: map by TYPE, not by the brand guide's stated role. AGT's current
 * defaults are one serif (headings) + one sans (body); this keeps that shape
 * and only swaps which licensed brand file lands in each slot:
 *   --font-heading: 'Quarto'      (serif) -> 'Proxima Sera' (serif, PDF p.49)
 *   --font-primary: 'Nimbus Sans L' (sans) -> 'Objektiv Mk1'  (sans, PDF p.47)
 * Per the brand guide itself the roles are reversed (Objektiv Mk1 for
 * headlines, Proxima Sera for body) — Tamm's instruction overrides that on
 * purpose, this file follows Tamm, not the PDF's suggested role.
 *
 * The correct files were already sitting unused in this repo's /fonts/
 * (root-served, same as /fonts/Quarto-Regular.woff2 in header.php) — travel.css
 * even names them in its dead `.font-objektiv` / `.font-proxima` utility
 * classes, but no @font-face for either family existed anywhere until now.
 *
 * These are desktop OTF cuts (ObjektivMk1-*.otf, ProximaSera-*.otf), not a
 * woff/woff2 web build — they render, but OPEN QUESTION for Tamm: confirm
 * Adobe Fonts / AG's licence covers embedding these particular files for web
 * delivery before this ships past local preview. No licence file ships beside
 * them in fonts/ to check against.
 *
 * Buttons and dropdown menus, sweep, and weight — Tamm, 2026-09-28:
 * Every button and every dropdown menu must render in Objektiv Mk1, and in
 * its XBold weight specifically. /fonts/Objektiv/Objektiv-XBold.woff exists
 * (an older weight-named cut of the same Objektiv family, already used
 * elsewhere via --font-objektiv-xbold), so that is the weight loaded below —
 * no fallback to a lesser weight was needed.
 *
 * Sweep of css/travel.css and css/ng-globals.css for font-family declarations
 * that bypass --font-primary / --font-heading (css/shared.css and css/style.css
 * are NOT enqueued anywhere in this theme — inc/block-writer.php confirms it —
 * so they are dead reference files, out of scope). ng-globals.css has none: it
 * only carries the @font-face rules themselves, already correctly named
 * 'Objektiv Mk1' / 'Proxima Sera'. travel.css bypasses the tokens in nine
 * places; each is overridden below, travel.css itself untouched:
 *
 *   BUTTON/DROPDOWN (-> Objektiv Mk1, weight 800/XBold, regardless of type):
 *     .btn                                    :7053: var(--font-heading), 400 (the
 *                                                     main BOOK NOW / CTA button class —
 *                                                     was about to become Proxima Sera
 *                                                     under the type-mapping above; this
 *                                                     is the exception that wins for it)
 *     .agt-header__cta                        : 795: 'Quarto', serif (button)
 *     .agt-header__nav-link a / span          : 546: 'Nimbus Sans L' (dropdown trigger)
 *     .agt-header__dropdown li a              : 644: no font-family set (dropdown menu)
 *     .mobile-navigation__list-item > a        : 979: 'Nimbus Sans L' (mobile dropdown)
 *     .mobile-navigation__summary              :1002: 'Nimbus Sans L' (dropdown toggle)
 *     .mobile-navigation__submenu li a         :1043: 'Nimbus Sans L' (dropdown submenu)
 *     klaviyo form submit button (data-testid) :7461: 'Quarto', sans-serif !important (button)
 *
 *   EVERYTHING ELSE SERIF (-> Proxima Sera, general type-mapping, no weight change):
 *     .agt-newsletter-signup__heading          :7145: 'Quarto', Georgia, serif
 *     .klaviyo-form form h1 *                  :7472: 'Quarto', sans-serif !important
 *                                                     (named sans in travel.css, but it's
 *                                                     Quarto — treated as the serif it is)
 *
 *   EVERYTHING ELSE SANS, not a button/dropdown (-> Objektiv Mk1, no weight change):
 *     .agt-header__phone a                     : 470: 'Nimbus Sans L'
 *
 *   Already correct, left alone: .font-objektiv / .font-proxima (travel.css:2804-5,
 *   already name the right families) and var(--font-objektiv-medium) (travel.css:5164,
 *   already the Objektiv family, just a different weight-named cut).
 * ========================================================================= */

@font-face {
  font-family: 'Objektiv Mk1';
  src: url('/fonts/Objektiv/Objektiv-XBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Objektiv Mk1';
  src: url('/fonts/ObjektivMk1-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Objektiv Mk1';
  src: url('/fonts/ObjektivMk1-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Objektiv Mk1';
  src: url('/fonts/ObjektivMk1-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Sera';
  src: url('/fonts/ProximaSera-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Sera';
  src: url('/fonts/ProximaSera-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Sera';
  src: url('/fonts/ProximaSera-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Sera';
  src: url('/fonts/ProximaSera-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

.agt-brand-fonts {
  --font-heading: 'Proxima Sera', Georgia, serif;
  --font-primary: 'Objektiv Mk1', system-ui, sans-serif;
  /* --font-body/--font-headings (travel.css:48-49) are aliases: `--font-body:
   * var(--font-primary)` etc. Custom-property var() refs resolve using the
   * cascade AT THE ELEMENT WHERE THEY'RE DECLARED, not at point of use — since
   * travel.css only declares them once, on :root, they permanently resolve to
   * the OLD --font-primary/--font-heading value there and every element that
   * inherits --font-body (not --font-primary directly, e.g.
   * .featured-card__subtitle) kept rendering Nimbus Sans L even with the flag
   * on. Redeclaring the aliases here re-resolves them against THIS scope's
   * --font-primary/--font-heading. */
  --font-body: var(--font-primary);
  --font-headings: var(--font-heading);
  /* General spacing scale — Tamm, 2026-09-29. Applied to featured-explore,
   * other sections later. 1rem = 16px base. */
  --agt-space: 2.5rem;
  --agt-space-half: calc(var(--agt-space) / 2);
  --agt-space-quarter: calc(var(--agt-space) / 4);
  --agt-space-double: calc(var(--agt-space) * 2);
  /* Tamm, 2026-09-29: the old space-4 step is the half space. */
  --space-4: var(--agt-space-half);
  /* Tamm, 2026-09-29: space-3 is the quarter space, space-5 the half space. */
  --space-3: var(--agt-space-quarter);
  --space-5: var(--agt-space-half);
}

/* Tamm, 2026-09-29: .agt-section gets the normal vertical space (was --space-12, 48px). Sides untouched. */
.agt-brand-fonts .agt-section {
  padding-block: var(--agt-space);
}

.agt-brand-fonts .btn,
.agt-brand-fonts .agt-header__cta,
.agt-brand-fonts .agt-header__nav-link a,
.agt-brand-fonts .agt-header__nav-link span,
.agt-brand-fonts .agt-header__dropdown li a,
.agt-brand-fonts .mobile-navigation__list-item > a,
.agt-brand-fonts .mobile-navigation__summary,
.agt-brand-fonts .mobile-navigation__submenu li a {
  font-family: 'Objektiv Mk1', system-ui, sans-serif;
  font-weight: 800;
}

/* Header overflow regression fix (Tamm, 2026-09-28). Objektiv Mk1 800 is
 * wider than the original Nimbus Sans L 700 on .agt-header__nav-link, so the
 * 5-item nav (travel.css:529-538, gap: var(--space-8) = 2rem/32px, 4 gaps)
 * grew wide enough to overflow .agt-header__bottom-inner and push the
 * right-aligned phone/CTA past the header's right edge.
 * Measured at 1200px viewport, agt.mallee.local, flag off vs on:
 *   .agt-header__nav-list width   717.8px -> 787.2px  (+69.4px)
 *   .agt-header__bottom-inner scrollWidth (clientWidth 1168px, fits at 1168)
 *                                  1168px  -> 1252px   (+84px, overflowing)
 *   .agt-header__cta   right      1186.4px -> 1267.7px (+81.3px, off-screen)
 *   .agt-header__phone right      1184px  -> 1184px    (unchanged box, but
 *                                                        visually shifted
 *                                                        because its flex
 *                                                        sibling overflowed)
 * Fix: claw back the growth from the nav-list's own gap, not from the
 * phone/CTA (those must stay their real box). gap: 2rem -> 0.6rem verified
 * in-browser (getBoundingClientRect) to bring bottom-inner's scrollWidth back
 * to exactly 1168px = clientWidth, and .agt-header__cta / .agt-header__phone
 * right edges back to 1184px — byte-identical to the flag-off position. */
.agt-brand-fonts .agt-header__nav-list {
  gap: 0.6rem;
}

/* Priority-plus nav (Tamm, 2026-09-29). From 1024px the nav shows as many items as
 * fit; the script at the end of site-header.php folds the rightmost item first
 * (class is-folded) and puts .agt-header--nav-folded on the header and
 * .is-nav-folded on the panel when any is folded. Then the hamburger shows and
 * the panel is available (travel.css forces the panel display:none from 1024px).
 * min-width:0 lets the nav take only the space left between logo and actions,
 * so the script can compare the items to it. */
@media (min-width: 1024px) {
  .agt-brand-fonts .agt-header__nav {
    min-width: 0;
  }
  .agt-brand-fonts .agt-header__nav-item.is-folded {
    display: none;
  }
  .agt-brand-fonts .agt-header--nav-folded .agt-header__mobile-toggle {
    display: flex;
  }
  .agt-brand-fonts .mobile-navigation.is-nav-folded {
    display: block !important;
  }
}

/* Nav text is one size at every width (Tamm, 2026-09-29). travel.css:562 sets
 * 12px from 1024px and :569 sets 15px from 1400px, so the nav shrank between
 * 1024px and 1399px. 15px is the size below 1024px and from 1400px. */
.agt-brand-fonts .agt-header__nav-link a,
.agt-brand-fonts .agt-header__nav-link span {
  font-size: 15px;
}

/* Button letter-spacing — 0.05em, on BUTTONS/CTAs only, not nav links. Two AG
 * precedents agree: ag-theme-2026's actual `.cta` button rule (css/blob.scss:197,
 * `.cta, .calloutbutton, .wp-block-button__link { letter-spacing: .05em; }` —
 * AG's real CTA button, uppercase, white-on-dark, border-radius 0) and the
 * older AustralianGeographic theme's `.piano-form-wrapper__button .btn`
 * (css/piano-override.css:55), same 0.05em. AG's own nav (`header.main-nav nav
 * a`, blob.scss:741-748) sets no letter-spacing at all, so nav/dropdown links
 * are deliberately left out of this rule — they keep the Objektiv XBold weight
 * from the block above, nothing else. */
.agt-brand-fonts .btn,
.agt-brand-fonts .agt-header__cta {
  letter-spacing: 0.05em;
}

/* Button text white on orange/green backgrounds (Tamm, 2026-09-28). travel.css
 * sets these black (`!important`) at defaults; hover states already flip to
 * white in travel.css, so hover needs no change here. */
.agt-brand-fonts .btn,
.agt-brand-fonts .btn--primary {
  color: #fff !important;
}

.agt-brand-fonts .agt-header__cta {
  color: #fff !important;
  /* Task 74: symmetric padding (was 4px/2px from .btn--sm) so the label
   * centres. Task 90: the margin-left that kept the last nav link off the
   * button moved to .agt-header__actions below. */
  padding-block: 0;
}

/* Task 90 (Tamm, 2026-09-29): space before the actions group (search/hamburger/
 * Book Now), and between its members. The fit() script in site-header.php reads
 * nav.clientWidth, which already shrinks by this margin, so it needs no change. */
.agt-brand-fonts .agt-header__actions {
  gap: var(--agt-space-half);
  margin-left: var(--agt-space-half);
}

.agt-brand-fonts .agt-newsletter-signup__heading {
  font-family: 'Proxima Sera', Georgia, serif;
}

.agt-brand-fonts .agt-header__phone a {
  font-family: 'Objektiv Mk1', system-ui, sans-serif;
}

/* Proxima Sera headings — mapped from AG's own heading typography,
 * css/blob.scss:334-343 (ag-theme-2026's real theme, not the newer "new/"
 * component CSS, which has no h1-h6 rule at all):
 *   h1, h2, h3, h4, h5 { font-weight: 400; line-height: 1.1; }
 * NO letter-spacing at all on AG's headings. AGT's own rule (travel.css:133-137)
 * carries `letter-spacing: 0.1em` — written for Quarto's uppercase tracking —
 * plus `line-height: 1.2`, both wrong for a normal-case serif. Font-weight was
 * already `normal` (matches AG) and font-size is untouched (AG's rem-based
 * scale is a different unit system, not something to copy 1:1 onto AGT's
 * existing rem values, and Tamm's "too wide" complaint was about tracking).
 * Font file check: fc-scan reports ProximaSera-Regular.otf as width class 100
 * (fontconfig "normal", not a condensed/expanded cut) — the four files in
 * fonts/ are Regular, Medium, Bold, Italic only, no wide/expanded weight exists
 * to swap to. */
.agt-brand-fonts h1,
.agt-brand-fonts h2,
.agt-brand-fonts h3,
.agt-brand-fonts h4,
.agt-brand-fonts h5,
.agt-brand-fonts h6 {
  letter-spacing: normal;
  line-height: 1.1;
}

/* Hero titles carry their own higher-specificity letter-spacing that the
 * element-selector reset above can't reach: travel.css .hero__title (6.4px,
 * ~0.1em at 64px) and .agt-tour-hero__title (0.1em) — same fix, same AG
 * source (blob.scss headings have no letter-spacing). */
.agt-brand-fonts .hero__title,
.agt-brand-fonts .agt-tour-hero__title {
  letter-spacing: normal;
}

/* travel.css also sets `.page-articles .agt-hero-component h1 { letter-spacing: 6.4px }`
 * at >=1024px (specificity 0,2,1), so the /articles hero alone kept tracking that the
 * other listing heroes lost. Same reset, same source. */
.agt-brand-fonts.page-articles .agt-hero-component h1 {
  letter-spacing: normal;
}

/* =========================================================================
 * agt_brand_orange — APPROVED
 *
 * the legacy coral token (BOOK NOW and most CTA buttons) is #EDA991 — a 50% tint,
 * not a brand colour in its own right. The PDF's full colour spec (p.39,
 * "Primary — Red Earth") gives the solid value as #DB5223 (RGB 219/82/35,
 * CMYK 8/80/96/0, Pantone 7579C). travel.css's own legacy burnt-orange token already
 * carries this correctly; this flag pins it explicitly and — the actual fix —
 * replaces the legacy coral token and its hover tint with it too,
 * so every coral/pink use becomes the real brand orange. travel.css defines
 * two more legacy aliases of these root tokens, so overriding the legacy names recolours every derived use
 * (buttons, links, borders, focus rings, hover) without touching travel.css.
 *
 * Contrast (WCAG 2.1 AA), #DB5223 against the backgrounds it actually sits on:
 *   - White text (#FFFFFF) on a #DB5223 button               4.00:1  PASS large text/UI (>=3:1)
 *                                                                     FAIL small text (>=4.5:1)
 *   - #DB5223 text on white (#FFFFFF)                        4.00:1  same verdict as above
 *   - #DB5223 on dark UI (--agt-dark-gray-1 #333333 / neutral-100 #232323)
 *                                                             3.9:1   same verdict as above
 * Solid Red Earth sits right at ~4:1 everywhere it is used: fine for buttons,
 * large headings and icons (all >=3:1), not for small body text set in it.
 * ========================================================================= */


/* =========================================================================
 * agt_green_scheme — PREVIEW ONLY, not approved
 *
 * Colour: PDF page 39 ("8. Colour" > "Secondary — Green Travel"):
 *   HEX #507D4B, RGB 80/125/75, CMYK 67/25/100/10, Pantone 370 C.
 * Matches ag-theme-2026's own --bb-green token exactly (css/blob.scss:40) —
 * no PDF/theme disagreement on this one. ag-theme-2026's other green,
 * --semantic-green (#75B766, tokens.css:38), is used below ONLY for the
 * translucent hover overlay, where contrast does not apply, because it reads
 * better against grey-toned travel photography than the darker solid green.
 *
 * Contrast (WCAG 2.1 AA), #507D4B against the backgrounds it actually sits on:
 *   - White text (#FFFFFF) on a #507D4B button              4.79:1  PASS (>=4.5 normal text)
 *   - #507D4B text on white (#FFFFFF)                        4.79:1  PASS (>=4.5 normal text)
 *   - #507D4B on dark UI (--agt-dark-gray-1 #333333 / neutral-100 #232323)
 *                                                             3.2-3.7:1  PASS large/bold text
 *                                                                        only (>=3:1); avoid for
 *                                                                        small green-on-dark text.
 * --semantic-green (#75B766) was rejected as the solid/text colour: white text on
 * it is only 2.41:1 and green text on white only 2.41:1 — both fail AA. It is
 * usable on dark backgrounds (6.5:1) but that is not most of AGT's UI.
 *
 * Placed LAST on purpose — see file header: if agt_brand_orange is also on,
 * this wins.
 * ========================================================================= */


/* =========================================================================
 * agt_dark_image_treatment
 *
 * Every hero/section scrim in travel.css that sits between a photo and its
 * text is a light 20-35% black tint — Tamm's photos read as "blurry, light"
 * where they are meant to read dark. Component-by-component, the rules this
 * darkens (selector : travel.css line : original -> darker):
 *
 *   .agt-hero__overlay, .agt-destination-hero__overlay,
 *     .agt-article-hero__overlay              : 1403-1409 : gradient 0.7/0.2/0.3 -> 0.85/0.5/0.6
 *   .agt-page-header__overlay                 : 1493      : rgba(0,0,0,0.5)      -> rgba(0,0,0,0.7)
 *   .agt-hero-component::after                 : ~2854     : rgba(0,0,0,0.2)      -> rgba(0,0,0,0.55)
 *   .agt-tours-hero::after                     : ~2962     : rgba(0,0,0,0.2)      -> rgba(0,0,0,0.55)
 *   .agt-expert-hero::before                   : ~3401     : rgba(0,0,0,0.2)      -> rgba(0,0,0,0.55)
 *   .hero::after                               : ~4430     : rgba(0,0,0,0.2)      -> rgba(0,0,0,0.55)
 *
 * The header's own blur (.agt-header::before backdrop-filter, travel.css:320)
 * is UI chrome behind the fixed nav bar, not an image treatment, and is out of
 * scope here.
 * ========================================================================= */

.agt-dark-image-treatment .agt-hero__overlay,
.agt-dark-image-treatment .agt-destination-hero__overlay,
.agt-dark-image-treatment .agt-article-hero__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.6) 100%);
}

.agt-dark-image-treatment .agt-page-header__overlay {
  background: rgba(0, 0, 0, 0.7);
}

.agt-dark-image-treatment .agt-hero-component::after,
.agt-dark-image-treatment .agt-tours-hero::after {
  background-color: rgba(0, 0, 0, 0.55);
}

/* Front-page .hero — Tamm's final spec, 2026-09-28 (replaces an earlier flat
 * 0.55 overlay, then a plain top/bottom gradient): top dark+blurred behind
 * the header, bottom dark+blurred behind the search bar/Find Trips, middle
 * clear so the video reads bright. Two layers, both masked to the same
 * top/bottom bands so the middle is untouched by either:
 *   ::after  — the dark colour (background-color -> background so the
 *              gradient replaces rather than layers under it)
 *   ::before — the blur (mask-image on backdrop-filter blurs only where the
 *              mask's alpha is non-zero, so the middle stays sharp)
 * .hero__title sits in the clear middle band (`.hero__container`,
 * travel.css:4472-4480, flex-centred) — it's the title colour override
 * below (black, Tamm's editorial default here) that needs it to read against
 * bright video, not this scrim. .hero__search sits in the bottom band. */
.agt-dark-image-treatment .hero::after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.agt-dark-image-treatment .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Single backdrop-filter, so blur radius is one value for the whole
   * element — can't vary radius by band. "Lighter blur" in the bottom
   * band is done by masking that band to a lower alpha (0.4 instead of
   * opaque #000), which blends the blurred layer with the sharp video
   * underneath instead of showing it at full strength. Top band's mask
   * stays #000 (opaque) — unchanged. */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 75%,
    rgba(0, 0, 0, 0.4) 82%,
    rgba(0, 0, 0, 0.4) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 75%,
    rgba(0, 0, 0, 0.4) 82%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Hero title colour is now an editorial block attribute on agt/home-hero
 * (Tamm, 2026-09-28) — "Title colour: white / black" in the block sidebar,
 * default white (adds no class at all; byte-identical to before the
 * attribute existed). This rule is intentionally NOT scoped under
 * .agt-brand-fonts any more — the block attribute is the only control now,
 * independent of any visual flag. See blocks/home-hero/block.json,
 * blocks/home-hero/render.php, components/home-hero.php and the
 * "agt/home-hero" panel in blocks/editor.js. */
.hero__title--black {
  color: var(--agt-color-text);
}

/* Search fields AND the Find Trips button were reading dim even above the
 * scrim. Two separate causes, both real:
 *
 * 1. `.book-now form select` (travel.css:4556) is `rgba(255,255,255,0.8)`,
 *    so the dark blurred band immediately behind it showed through the
 *    missing 20% alpha. Fixed with an opaque background.
 * 2. `.book-now` itself (travel.css:4522-4527) is `position: relative;
 *    z-index: 1` — the SAME z-index as `.hero::before`/`.hero::after`
 *    (both z-index: 1, added above). Tamm's first z-index fix targeted
 *    `.hero__search`, which turned out not to exist in any current markup
 *    (grepped every .php in the theme — dead selector, confirmed zero
 *    effect). With tied z-index values, paint order falls back to tree
 *    order, and `::after` — generated content — paints as if it were the
 *    LAST child of `.hero`, after `.book-now`'s real DOM position. So the
 *    dark/blurred `::before`/`::after` layers were compositing ON TOP of
 *    the button and fields regardless of the button's own (already
 *    correct) green background and white text. Fix: give `.book-now` a
 *    z-index clearly above the scrim layers.
 */
.agt-brand-fonts .book-now form select {
  background-color: var(--agt-color-surface);
}

.agt-brand-fonts .book-now {
  z-index: 2;
}

/* One container (Tamm, 2026-09-29): the hero search wraps its form in the legacy
 * `.container` (travel.css:4374, padding var(--space-4) = 16px), not `.agt-container`
 * (padding var(--space-8) = 32px, 16px <=768px). So the search bar sat 16px outside the
 * sidebar/results/footer edges. Give it the same padding as .agt-container. */
.agt-brand-fonts .book-now .container {
  padding: 0 var(--space-8);
}

@media (max-width: 768px) {
  .agt-brand-fonts .book-now .container {
    padding: 0 var(--space-4);
  }
}

/* /tours sidebar: travel.css:3143 gives .agt-tours-sidebar padding var(--space-6) on all sides.
 * Its white bg is invisible on the white page, so the visible edge (the 3px .agt-filter-group
 * frame) sat 24px inside the container edge. Drop the horizontal padding only; vertical padding
 * and the frame border are untouched. */
.agt-brand-fonts .agt-tours-sidebar {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* /tours filter frames: 2px (Tamm: 3px too broad). Apply filters: travel.css:3338 forces
 * color: rgb(0 0 0) !important on the green button; white text on green is the rule. */
.agt-brand-fonts .agt-filter-group {
  border-width: 2px;
}

.agt-brand-fonts .agt-filter-apply {
  color: #fff !important;
}

/* /tours filter checkbox (Tamm 2026-09-29): box and tick flush left (travel.css:3277 had 4px),
 * 2px green border. Label padding-left:30px untouched so the text stays put. */
.agt-brand-fonts .agt-filter-checkbox::before {
  left: 0;
  border: 2px solid var(--agt-color-primary);
}

.agt-brand-fonts .agt-filter-checkbox::after {
  left: 0;
}

/* Tamm 2026-09-29: no label padding-top or padding-bottom (row spacing moves to margin-bottom,
 * 4px + 4px = the 8px it was). Box and tick centred with top:50% + translateY(-50%); travel.css
 * had -62%. The tick is a scaled background, not a rotation, so scale rides on the same transform. */
.agt-brand-fonts .agt-filter-checkbox {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 8px;
}

.agt-brand-fonts .agt-filter-checkbox::before,
.agt-brand-fonts .agt-filter-checkbox::after {
  top: 50%;
}

.agt-brand-fonts .agt-filter-checkbox::before {
  transform: translateY(-50%);
}

.agt-brand-fonts .agt-filter-checkbox::after {
  transform: translateY(-50%) scale(0);
}

.agt-brand-fonts .agt-filter-checkbox:has(input[type="checkbox"]:checked)::after {
  transform: translateY(-50%) scale(1);
}

.agt-dark-image-treatment .agt-expert-hero::before {
  background-color: rgba(0, 0, 0, 0.55);
}

/* =========================================================================
 * agt_brand_fonts — no rounded corners (Tamm, 2026-09-28)
 *
 * Squares every border-radius in css/travel.css and css/blocks.css (128 + 1
 * uses) with one universal rule, scoped under .agt-brand-fonts, rather than
 * naming all 129 selectors — same fix AG already uses on its own button
 * (`.cta { border-radius: 0; }`, ag-theme-2026 css/blob.scss:199).
 *
 * Exceptions: 50%/circle icon controls left circular because squaring them
 * turns a round icon/dot/avatar into a visibly broken shape. Checked every
 * 50% (or 50%-equivalent) use in travel.css and left these alone:
 *   .agt-expert-profile__image / __placeholder  (round expert headshot/avatar)
 *   .testimonials-carousel__dot                  (round carousel dot)
 *   .why-agt__dot                                 (round carousel dot)
 *   .loyalty__arrow                               (round arrow button)
 *   .testimonials__main-image / __dot             (round headshot / dot)
 *   .carousel__btn / .carousel__dot               (round arrow button / dot)
 *   .lightbox__prev / __next                      (round arrow buttons)
 *   (a plain 36x36/48x48 close/arrow button, no class list needed — see
 *   travel.css ~7015 and ~6948)
 * Every other border-radius in the sweep (pills, cards, tour cards, inputs,
 * badges, the "PRIVATE" pill in blocks.css:288) is a straight rectangle/pill,
 * not an icon, and gets squared.
 * ========================================================================= */

.agt-brand-fonts *,
.agt-brand-fonts *::before,
.agt-brand-fonts *::after {
  border-radius: 0 !important;
}

.agt-brand-fonts .agt-expert-profile__image,
.agt-brand-fonts .agt-expert-profile__placeholder,
.agt-brand-fonts .testimonials-carousel__dot,
.agt-brand-fonts .why-agt__dot,
.agt-brand-fonts .loyalty__arrow,
.agt-brand-fonts .testimonials__main-image,
.agt-brand-fonts .testimonials__dot,
.agt-brand-fonts .carousel__btn,
.agt-brand-fonts .carousel__dot,
.agt-brand-fonts .lightbox__prev,
.agt-brand-fonts .lightbox__next {
  border-radius: 50% !important;
}

/* =========================================================================
 * agt_brand_fonts — measure tuning (Tamm, 2026-09-29)
 *
 * --agt-measure = 37em for target ~70 chars per line in Objektiv Mk1 17px.
 * 72ch rendered ~82-90 chars (ch unit based on "0" glyph wider than avg
 * char); 37em = 625px at 17px font ≈ 70 chars. Applied to text elements
 * (p, ul, ol) in running-text containers, not containers themselves.
 * ========================================================================= */

.agt-brand-fonts {
  --agt-measure: 37em;
}

/* One body-copy size (Tamm, 2026-09-29). travel.css had body 18px, article
 * text 17px (16px under 1024px) and the special-member card 16px. Body copy
 * inherits from body; the two elements travel.css sizes itself are pinned to
 * the same variable. Headings, eyebrows, buttons, labels and meta keep their
 * own sizes. */
body.agt-brand-fonts {
  --agt-body-size: 18px;
  font-size: var(--agt-body-size);
}

.agt-brand-fonts .element-content__body {
  font-size: var(--agt-body-size);
}

.agt-brand-fonts .why-agt__content p,
.agt-brand-fonts .why-agt__content ul,
.agt-brand-fonts .why-agt__content ol,
.agt-brand-fonts .agt-intro-box__content p,
.agt-brand-fonts .agt-intro-box__content ul,
.agt-brand-fonts .agt-intro-box__content ol,
.agt-brand-fonts .agt-article__content p,
.agt-brand-fonts .agt-article__content ul,
.agt-brand-fonts .agt-article__content ol,
.agt-brand-fonts .agt-about__text p,
.agt-brand-fonts .agt-about__text ul,
.agt-brand-fonts .agt-about__text ol,
.agt-brand-fonts .agt-contact-info__content p,
.agt-brand-fonts .agt-contact-info__content ul,
.agt-brand-fonts .agt-contact-info__content ol,
.agt-brand-fonts .agt-itinerary__description p,
.agt-brand-fonts .agt-itinerary__description ul,
.agt-brand-fonts .agt-itinerary__description ol,
.agt-brand-fonts .element-content__body p,
.agt-brand-fonts .element-content__body ul,
.agt-brand-fonts .element-content__body ol {
  max-width: var(--agt-measure);
}

/* =========================================================================
 * Centre text columns in freeform content (Tamm, 2026-09-29)
 *
 * Article body text (p, ul, ol, h2-h4, blockquote) is limited to
 * --agt-measure (37em) for readability. With margin-inline: auto, the
 * text blocks form a centred column (equal space left and right) while
 * text stays left-aligned. Images remain full-width.
 * ========================================================================= */

.agt-brand-fonts .element-content__body :is(p, ul, ol, h2, h3, h4, blockquote, .wp-block-quote) {
  margin-inline: auto;
}

/* Headings in the text column (Tamm, 2026-09-29, item 120). --agt-measure is em, so it grows with a
 * heading's larger font. This token is the same column in px (37 x --agt-body-size = 666px), so a
 * heading has the paragraphs' width and inset whatever its font size. Card, sidebar, hero and
 * full-width section titles are not listed and keep their own width. */
body.agt-brand-fonts {
  --agt-measure-px: calc(var(--agt-body-size) * 37);
}
.agt-brand-fonts :is(
  .element-content__body,
  .why-agt__content,
  .agt-intro-box__content,
  .agt-article__content,
  .agt-about__text,
  .agt-contact-info__content,
  .agt-itinerary__description
) :is(h1, h2, h3, h4, h5, h6),
.agt-brand-fonts :is(.element-highlights__title, .element-section-header h2),
.agt-brand-fonts .grid-layout__content .tags__heading {
  max-width: var(--agt-measure-px);
  margin-inline: auto;
}

/* Itinerary header with a reverse link (Tamm, 2026-09-29): the title sits inside
 * .itinerary__header, so the rule above insets it and the block's `margin: 0` removes the gap to
 * the accordion. The wrapper takes the gap; the title inside takes none. Like the FAQ title
 * (.element-faq__title, not in the measure list above) it is flush with the accordion's left edge:
 * no measure inset, or it sits ~55px right of the accordion. */
.agt-brand-fonts .itinerary__header {
  margin-bottom: var(--space-6);
}

.agt-brand-fonts .itinerary__header .itinerary__title {
  max-width: none;
  margin: 0;
}

/* =========================================================================
 * Body-text paragraph spacing (Tamm, 2026-09-29)
 *
 * A content paragraph gets margin-top = the bottom margin it had before
 * (travel.css: --space-4, or --space-6 in .agt-article__content, 1rem in
 * .video-with-content__info) and margin-bottom 0. No top margin as the
 * first child, right after a heading/title, or right after an element that
 * carries no margin (figure/img). Cards, buttons, forms, header, footer,
 * nav, hero and banners are excluded.
 * ========================================================================= */

.agt-brand-fonts :is(.element-content__body, .halfbox__content, .video-with-content__info, .agt-article__content, .agt-static-content, .agt-expert-profile__bio) p:not(:where([class*="card"], .btn, form, header, footer, nav, [class*="hero"], [class*="banner"]) p) {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.agt-brand-fonts .agt-article__content p:not(:where([class*="card"], .btn, form, header, footer, nav, [class*="hero"], [class*="banner"]) p) {
  margin-top: var(--space-6);
}

.agt-brand-fonts .video-with-content__info p:not(:where([class*="card"], .btn, form, header, footer, nav, [class*="hero"], [class*="banner"]) p) {
  margin-top: 1rem;
}

.agt-brand-fonts :is(.element-content__body, .halfbox__content, .video-with-content__info, .agt-article__content, .agt-static-content, .agt-expert-profile__bio) :is(h1, h2, h3, h4, h5, h6, [class*="__title"], [class*="__heading"], [class*="__subtitle"], figure, img, picture, .wp-block-image) + p:not(:where([class*="card"], .btn, form, header, footer, nav, [class*="hero"], [class*="banner"]) p),
.agt-brand-fonts :is(.element-content__body, .halfbox__content, .video-with-content__info, .agt-article__content, .agt-static-content, .agt-expert-profile__bio) p:first-child:not(:where([class*="card"], .btn, form, header, footer, nav, [class*="hero"], [class*="banner"]) p) {
  margin-top: 0;
}

/* =========================================================================
 * Centre point list (Tamm, 2026-09-29)
 *
 * Like element-content__body, point-list wrapper gets max-width and
 * margin-inline: auto for readability. Text stays left-aligned; images
 * or full-width siblings remain full-width.
 * ========================================================================= */

/* Wrapper font and paragraphs are both --agt-body-size (18px), so the list
 * edges line up with the paragraphs above it. The list sits in the
 * content column (beside the sidebar), so it is centred in that column, as
 * the paragraphs are. The 3-column grid variant keeps the full column. */
.agt-brand-fonts .element-point-list:not(:has(> .point-list--grid-3)),
.agt-brand-fonts .element-highlights__list,
.agt-brand-fonts .included-and-excluded .point-list {
  max-width: var(--agt-measure); /* wrappers are 17px now, same as the paragraphs: no 17/18 scaling. */
  margin-inline: auto;
}

/* =========================================================================
 * agt_brand_fonts — bullet alignment (Tamm, 2026-09-29)
 *
 * Both .point-list li::before and .element-highlights__item::before use
 * the same triangle glyph. Unified top offset: 0 (was -5px, tuned for old
 * font; new Proxima Sera requires no offset). Bullet vertical centre must
 * align with first line's x-height centre within 1px. Single rule, both
 * selectors, so they cannot drift.
 * ========================================================================= */

.agt-brand-fonts .point-list li::before,
.agt-brand-fonts .element-highlights__item::before {
  top: 0;
  /* Same triangle as travel.css:6206/6381, stroke Green Travel #507D4B instead of #DB5223. */
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4258 23.5658L16 23.3654L15.5742 23.5658L2.18467 29.8667L16 2.23607L29.8153 29.8667L16.4258 23.5658Z' stroke='%23507D4B' stroke-width='2'/%3E%3C/svg%3E");
}

/* =========================================================================
 * Scrolled header logo (Tamm, 2026-09-28) — was a black platypus silhouette
 *
 * travel.css:512, `.agt-header--scrolled .agt-header__logo-img { filter:
 * brightness(0); }`, blackens the WHOLE logo image on scroll. Inspected
 * images/logo-wide-white.svg (rsvg-convert render): it is not a plain
 * wordmark — the wordmark is 29 <path> elements, all `style="fill:#fff"`,
 * but the platypus mark is a base64 PNG photo embedded via <image>/<use> in
 * the same file. `filter` can't tell those apart; it repaints the raster
 * platypus black too, which is the "silhouette" Tamm saw.
 *
 * components/site-header.php now inlines this SVG (only when agt_brand_fonts
 * is on; the <img> tag is untouched at defaults) and adds an `agt-logo-svg`
 * class to its root. Every wordmark <path> is targetable directly; the
 * platypus <use>/<image> has no <path> element, so `path { fill: ... }` can
 * never reach it. `filter: brightness(0)` is cancelled and the wordmark
 * <path>s go solid black on scroll instead — the platypus keeps its own
 * brown/white/blue photo colours untouched, exactly as unscrolled.
 * ========================================================================= */

.agt-brand-fonts .agt-header--scrolled .agt-header__logo-img {
  filter: none;
}

.agt-brand-fonts .agt-header--scrolled .agt-logo-svg path {
  fill: #000 !important;
}

/* =========================================================================
 * Header scrim (Tamm, 2026-09-28) — white nav/phone text over hero photos
 * needs a dark backing at the top of the page. .agt-header::before
 * (travel.css:313-335) is already a full-width pseudo-element behind the
 * header, masked to fade out by 55% of its own height — reused here instead
 * of a new element. Scrolled state (.agt-header--scrolled::before,
 * travel.css:352-355) is explicitly left alone per Tamm: it already has its
 * own white/blur background from `.agt-header--scrolled` itself.
 * ========================================================================= */

.agt-brand-fonts .agt-header::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

.agt-brand-fonts .agt-header--scrolled::before {
  background: none;
}

/* =========================================================================
 * Hero height (Tamm, 2026-09-29): one responsive height for every content hero,
 * shorter than the 85vh of 2026-09-28. Scales with the viewport. No pixel values.
 *
 * Was: tour 440px, others 70vh, hero-component 440px, tours 70vh/500px,
 * article component 60vh (travel.css:1377, 2838, 2946, 5473, 8256).
 * .hero (travel.css:4416) is the front page, sized by agt_hero_90vh. .agt-404-hero
 * and .error-page are utility pages, left alone.
 * ========================================================================= */

.agt-brand-fonts {
  --agt-hero-height: 60vh;
}

.agt-brand-fonts .agt-hero,
.agt-brand-fonts .agt-tour-hero,
.agt-brand-fonts .agt-destination-hero,
.agt-brand-fonts .agt-article-hero,
.agt-brand-fonts .agt-hero-component,
.agt-brand-fonts .agt-hero-component--article {
  min-height: var(--agt-hero-height);
}

.agt-brand-fonts .agt-tours-hero {
  height: var(--agt-hero-height);
  min-height: var(--agt-hero-height);
}

/* =========================================================================
 * Trip selector (hero search/filter, .book-now, Tamm 2026-09-28)
 *
 * Font: travel.css:4558 sets `.book-now form select { font-family:
 * var(--font-heading) }` (Proxima Sera under the flag) — this is a
 * dropdown/select control, so it follows the same "buttons and dropdown
 * menus -> Objektiv Mk1 XBold" rule as every other dropdown in this file.
 *
 * (An earlier version of this comment cited `.hero__search`'s z-index as
 * already sufficient — that class doesn't appear in any current template;
 * the real stacking fix is on `.book-now` itself, above, near the scrim
 * rules.)
 * ========================================================================= */

.agt-brand-fonts .book-now form select {
  font-family: 'Objektiv Mk1', system-ui, sans-serif;
  font-weight: 500;
}
.agt-brand-fonts .book-now form button {
  font-family: 'Objektiv Mk1', system-ui, sans-serif;
  font-weight: 800;
}

/* Placeholder option transparency (Tamm, 2026-09-29): when the empty placeholder
 * is selected, fade the text to 60% opacity so empty selects read clearly different
 * from real choices. The dropdown options stay full opacity. */
.agt-brand-fonts .book-now form select:has(option[value=""]:checked) {
  color: rgba(0, 0, 0, 0.6);
}
.agt-brand-fonts .book-now form select option {
  color: initial;
}

/* FIND TRIPS was black text on the green button background (Tamm, 2026-09-28). */
.agt-brand-fonts .book-now form button {
  color: #fff;
}

/* =========================================================================
 * Every button, catch-all (Tamm, 2026-09-28): don't hunt every class by name.
 * button, input[type=submit], input[type=button], .wp-block-button__link, and
 * any <a> whose class contains "btn" or "button" all get Objektiv Mk1 800 +
 * uppercase. !important on all three: several of these are plain <button>
 * tags with inline `style="font-weight: ..."` (e.g. the footer newsletter
 * submit, components/site-footer.php:154-159, no class at all) — !important
 * in an external stylesheet beats a non-important inline style, but a plain
 * declaration never would. This also catches .agt-tours-search__button
 * (search-form.php, contains "button"), .agt-cta__button (unused in current
 * markup, kept for when it is), and every .btn variant already handled above
 * (belt and braces, not a conflict — same values).
 *
 * NOT caught by this catch-all — no <button>/<input> tag and no "btn"/
 * "button" in its class — covered explicitly below instead:
 *   .featured-card__link  ("VIEW TOUR"/"BOOK NOW", a <span> inside an <a>)
 *   .agt-header__cta      (already covered earlier in this file)
 * ========================================================================= */

.agt-brand-fonts button,
.agt-brand-fonts input[type="submit"],
.agt-brand-fonts input[type="button"],
.agt-brand-fonts .wp-block-button__link,
.agt-brand-fonts a[class*="btn"],
.agt-brand-fonts a[class*="button"] {
  font-family: 'Objektiv Mk1', system-ui, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* "VIEW TOUR" / "BOOK NOW" on the featured tour cards (featured-explore.php)
 * — travel.css:4721-4734 sets Proxima Sera (var(--font-heading)) and black
 * text on the orange button background. */
.agt-brand-fonts .featured-card__link {
  font-family: 'Objektiv Mk1', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

/* Footer (agt_brand_fonts)
 *
 * Every footer band fully black (Tamm, 2026-09-28). travel.css:1065 sets
 * .agt-footer to --agt-gray-900 (a dark grey, not black) and :1336 sets
 * .agt-footer__acknowledgement to --agt-gray-950 (darker, still not #000) —
 * both overridden here. .agt-footer__newsletter and .agt-footer__bottom
 * exist in travel.css but render nothing in components/site-footer.php's
 * current markup, so they're left alone.
 *
 * Headings (h3/h4 nav labels) already get Proxima Sera from the h1-h6 rule
 * above; body text, links and labels already get Objektiv Mk1 by inheriting
 * --font-body from .agt-brand-fonts (declared once, near the top of this
 * file) — none of the footer's own rules in travel.css set a hardcoded
 * font-family or bypass --font-body/--font-heading, so nothing to override
 * per-selector here. Text colours (--agt-white, --agt-gray-400/500) are
 * already white/light-grey and stay readable on true black; buttons are
 * already covered by the button catch-all above.
 */
.agt-brand-fonts .agt-footer {
  background-color: #000;
}

.agt-brand-fonts .agt-footer__acknowledgement {
  background-color: #000;
}

/* Featured cards alignment (agt_brand_fonts)
 *
 * Bug: travel.css:4677-4688 centres .featured-card__content vertically
 * (`justify-content: center`), so VIEW TOUR's height depends on how much
 * title/subtitle text that card has — two cards side by side land the
 * button at different heights.
 *
 * .featured-explore__grid is CSS Grid (travel.css:4642), so grid items
 * stretch to the row's tallest card by default (align-items: stretch) —
 * both .featured-card boxes are already equal height. Only the vertical
 * centring inside .featured-card__content needs to change: align content
 * to the top instead, then pin the button to the bottom of that now-equal
 * box with margin-top: auto. Text spacing above (the existing margin-bottom
 * on __badge/__subtitle/__title) is untouched.
 */
.agt-brand-fonts .featured-card__content {
  justify-content: flex-start;
}

.agt-brand-fonts .featured-card__link {
  margin-top: auto;
}

/* Hero title shadow (agt_brand_fonts) */
.agt-brand-fonts .hero__title:not(.hero__title--black) {
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.225), 0 0 12px rgba(0, 0, 0, 0.125);
}

/* Tour cards: image to border (agt_brand_fonts)
 *
 * travel.css:1576-1580 puts a 2px padding on .agt-tour-card itself (the
 * outer border), so the image sits 2px inset from that border on all
 * sides. Drop the padding so the image fills right up to the border.
 */
.agt-brand-fonts .agt-tour-card {
  padding: 0;
}

/* Eyebrows copied from the live /subscribe-w194/ page's subscribe-3.css:
 * Objektiv XBold, 11px, weight 800, uppercase, 0.12em tracking.
 * Its alias uses 93.68% size-adjust; keep that local to eyebrows. */
@font-face {
  font-family: 'AGT Eyebrow';
  src: url('/fonts/Objektiv/Objektiv-XBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  size-adjust: 93.68%;
}
/* ONE eyebrow rule, after AG's (ag-subscribe-3/assets/subscribe-3.css:401-422, "ONE eyebrow"):
 * Objektiv XBold, 800, uppercase, 0.12em. AG keeps size, face, weight, tracking and case in
 * one place; colour, margin and display stay with each component (AG: "colour stays
 * per-context"). Size is 0.75rem (AG uses 11px; agt sets 12px). Line-height 1.2 is AG's
 * breakout eyebrow (blob.scss .breakout-box__eyebrow). .agt-eyebrow is the class for the editor.
 * The :is() list carries the highest arg specificity (0,3,1 from span:first-child), so the
 * rule beats travel.css (.card-book-now__type-label > span:first-child, 0,2,1) and needs no !important. */
.agt-brand-fonts :is(
  .agt-eyebrow,
  .agt-tour-card__location,
  .agt-acknowledgement__kicker,
  .card-book-now__section-heading,
  .card-book-now__type-label > span:first-child,
  .card-book-now__type > span:first-child,
  .card-itinerary__date,
  .agt-article-card__meta,
  .blog-carousel__date,
  .blog-carousel__author,
  .card-posts__date,
  .blog-details__date,
  .agt-filters__label,
  .contact-form__subtitle,
  .header-and-social-links__trip-types,
  .agt-article-card__category,
  .agt-tour-card__badge,
  .icon-summary__title,
  .agt-hero-eyebrow,
  .agt-private-label,
  .card-special-member__title
) {
  font-family: 'AGT Eyebrow', 'Objektiv Mk1', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Itinerary date keeps its own size (travel.css:6276, 20px), not the 0.75rem eyebrow size. */
/* Specificity must beat the eyebrow :is() rule above (0,3,1); the old 0,2,0 selector lost, so 0.75rem showed. */
body.agt-brand-fonts.agt-brand-fonts p.card-itinerary__date {
  font-size: 1.25rem;
}

/* Booking card values serif (agt_brand_fonts, Tamm 2026-09-29)
 *
 * Labels are in the eyebrow rule above. Values: Proxima Sera (--font-heading), never under 1rem.
 */
.agt-brand-fonts .card-book-now .card-book-now__type-subtitle,
.agt-brand-fonts .card-book-now .card-book-now__date,
.agt-brand-fonts .card-book-now .card-book-now__details {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1rem;
}

/* Private tour badge centering (agt_brand_fonts, Tamm 2026-09-29)
 *
 * blocks.css:285-294 uses asymmetric padding (6.625px top, 2.375px bottom) to
 * visually centre the "PRIVATE" text with the old font. With agt_brand_fonts
 * on, the new Objektiv Mk1 eyebrow renders differently; proper flexbox centering
 * replaces the pixel hack.
 *
 * Removes vertical padding and uses inline-flex + align-items/justify-content
 * centring. Height: 1.25rem (20px) matches the other badge's computed height
 * (0.75rem font + 0.25rem padding × 2). Keeps horizontal padding-inline (0.75rem)
 * to match the regular badge and preserve glyph breathing room with the new font.
 */
.agt-brand-fonts .agt-tour-card__badge--private {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25rem;
  padding: 0;
  padding-inline: 0.75rem;
}

/* Tour facts values one step up (agt_brand_fonts)
 *
 * .icon-summary__title (Duration / Group size / Activity level) is now an
 * eyebrow, above. Tamm: its values ("5 days" / "8 people" / "Easy to
 * moderate", .icon-summary__detail, css/travel.css:5930) go one step larger
 * to read against it — old 14px, new 16px.
 */
.agt-brand-fonts .icon-summary__detail {
  font-size: 16px;
}

/* Nav dropdown chevron (agt_brand_fonts): 13x10 was large next to the menu text. */
.agt-brand-fonts .agt-header__dropdown-toggle svg {
  width: 8px;
  height: 6px;
}

/* Front hero CTA inverted (agt_brand_fonts): white button, green text. */
.agt-brand-fonts .hero__cta.btn {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--agt-color-primary) !important;
}

/* Expert card names (agt_brand_fonts): one line, cut with an ellipsis. */
.agt-brand-fonts .expert-card__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  right: 0; /* carousel card: the name bar spans the image width (left: 0 is in travel.css); border-box already */
}

/* One portrait card (agt_brand_fonts, Tamm 2026-09-29): the /tour-experts card (.agt-expert-card) and the
 * tour page card (.card-member) match. 2px black border, square photo inset 20px from it, big name under
 * the photo, short bio below, no top padding, one space (2.5rem) at the bottom, no p margin-bottom. */
.agt-brand-fonts .agt-expert-card,
.agt-brand-fonts .card-member {
  border: 2px solid var(--agt-color-frame);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 var(--agt-space);
  text-align: left;
}
/* body. prefix: the later "Card outlines" rule sets padding: 0 on .agt-expert-card at equal specificity. */
body.agt-brand-fonts .agt-expert-card {
  padding: 0 0 var(--agt-space);
}
.agt-brand-fonts .agt-expert-card__image {
  aspect-ratio: auto;
  overflow: visible;
}
.agt-brand-fonts .agt-expert-card__image img,
.agt-brand-fonts .card-member__profile {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  margin: 0; /* flush with the border: image is edge to edge, text carries the side padding */
}
.agt-brand-fonts .agt-expert-card__name-overlay {
  position: static;
  padding: 0 var(--agt-space-half);
  background: none;
}
.agt-brand-fonts .agt-expert-card__name,
.agt-brand-fonts .card-member__name {
  font-size: clamp(1.25rem, 5vw, 2rem);
  line-height: 1.2;
  text-transform: uppercase; /* as the expert card */
  color: inherit;
  margin: var(--agt-space-half) 0 0;
}
.agt-brand-fonts .card-member__name {
  padding: 0 var(--agt-space-half);
}
.agt-brand-fonts .agt-expert-card__excerpt,
.agt-brand-fonts .card-member__since {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--agt-blue-gray);
  margin: var(--agt-space-quarter) 0 0;
  padding: 0 var(--agt-space-half);
}
.agt-brand-fonts .card-member .btn {
  margin: var(--agt-space-half) var(--agt-space-half) 0;
}
/* List card only: four lines of bio so the rows stay even. The tour page card keeps the full bio. */
.agt-brand-fonts .agt-expert-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* Tab item states (agt_brand_fonts, Tamm 2026-09-29)
 *
 * No peach. Active = brand primary green #507D4B (Green Travel, brand guide p.39), white text 4.80:1.
 * Idle = Black 25% tint (#BFBFBF, was #ddd), dark text #222. Idle hover = 75% tint of #507D4B on white (#7C9E78, the guide's
 * own tint step); white on it is 2.99:1 (fails 4.5), so text is #222 (5.32:1). The guide gives tints,
 * not a named light-green hex. Active hover stays primary. The body. prefix (0,2,1) beats the
 * .agt-green-scheme .tab-item rules below (0,2,0 / 0,3,0).
 */
body.agt-brand-fonts .tab-item {
  background: var(--agt-color-idle);
  color: #222;
}

body.agt-brand-fonts .tab-item:hover {
  background: var(--agt-color-primary-hover);
  color: #222;
}

body.agt-brand-fonts .tab-item--active,
body.agt-brand-fonts .tab-item--active:hover {
  background: var(--agt-color-primary);
  color: var(--agt-color-on-primary);
}

/* Coral leaks (agt_green_scheme): travel.css hard-codes #EDA991 here instead of the token. */
.agt-green-scheme .icon-summary__icon,
.agt-green-scheme .card-special-member__link,
.agt-green-scheme .card-itinerary__header-icon,
.agt-green-scheme .card-faq__header-icon {
  color: var(--agt-color-primary);
}
.agt-green-scheme .tab-item {
  background: var(--agt-color-primary-soft);
  color: #fff;
}

.agt-green-scheme .tab-item:hover,
.agt-green-scheme .card-itinerary__header:hover,
.agt-green-scheme .card-faq__header:hover {
  background: var(--agt-color-primary);
  color: var(--agt-color-on-primary);
}
.agt-green-scheme .card-itinerary__date {
  background-color: var(--agt-color-primary);
  color: var(--agt-color-on-primary);
}
.agt-green-scheme .card-itinerary__header:hover .card-itinerary__title,
.agt-green-scheme .card-itinerary__header:hover .card-itinerary__date,
.agt-green-scheme .card-itinerary__header:hover .card-itinerary__header-icon,
.agt-green-scheme .card-faq__header:hover,
.agt-green-scheme .card-faq__header:hover * {
  color: #fff;
}
/* Hover: header goes green, disc stays white, so the icon glyph must go green or the disc reads empty. */
body.agt-brand-fonts.agt-green-scheme .card-itinerary__header:hover .card-itinerary__header-icon path[stroke="white"],
body.agt-brand-fonts.agt-green-scheme .card-faq__header:hover .card-faq__header-icon path[stroke="white"] {
  stroke: var(--agt-color-primary);
}

/* Itinerary/FAQ open state (agt_brand_fonts): the icon SVG draws a plus (both bars).
   Open = minus: hide the SVG glyph (stroke transparent, not display:none) and draw the bar
   with ::after. Bar box = svg viewBox 0 0 41 40: x 12.5..28.5, y 19..21 (centre 20.5, 20).
   Cross-browser, CSS only. Hover: disc goes white, so the bar goes green. */
body.agt-brand-fonts .card-itinerary__header-icon,
body.agt-brand-fonts .card-faq__header-icon {
  position: relative;
}
body.agt-brand-fonts .card-itinerary__header--active .card-itinerary__header-icon path[stroke="white"],
body.agt-brand-fonts .card-faq__header--active .card-faq__header-icon path[stroke="white"] {
  stroke: transparent;
}
/* Beats the hover stroke:#507D4B rule above, which would bring the plus back. */
body.agt-brand-fonts.agt-green-scheme .card-itinerary__header--active:hover .card-itinerary__header-icon path[stroke="white"],
body.agt-brand-fonts.agt-green-scheme .card-faq__header--active:hover .card-faq__header-icon path[stroke="white"] {
  stroke: transparent;
}
body.agt-brand-fonts .card-itinerary__header--active .card-itinerary__header-icon::after,
body.agt-brand-fonts .card-faq__header--active .card-faq__header-icon::after {
  content: "";
  position: absolute;
  left: 30.4878%; /* 12.5 / 41 */
  width: 39.0244%; /* 16 / 41 */
  top: 19px; /* svg is 40px tall from the span top; centre y 20 */
  height: 2px;
  background: var(--agt-color-surface);
  border-radius: 1px;
}
body.agt-brand-fonts.agt-green-scheme .card-itinerary__header--active:hover .card-itinerary__header-icon::after,
body.agt-brand-fonts.agt-green-scheme .card-faq__header--active:hover .card-faq__header-icon::after {
  background: var(--agt-color-primary);
}

/* Tour page spacing (agt_brand_fonts). */
.agt-brand-fonts .card-itinerary__content {
  padding-top: var(--space-5); /* travel.css sets 0: the open day's text touched the header. */
}
/* Day text keeps the reading measure; with no image it centres in the card, with
 * an image it stays beside it (auto margins only on a lone paragraph). */
.agt-brand-fonts .card-itinerary__content-inner > p {
  max-width: var(--agt-measure);
}
.agt-brand-fonts .card-itinerary__content-inner > p:only-child {
  margin-inline: auto;
}
.agt-brand-fonts .card-special-member__details {
  font-size: var(--agt-body-size); /* "Who is this tour for": the one body size, not 0.9rem. */
  line-height: 1.7;
}

/* "Who is this tour for?" (task 63): ONE spacer. Was section margin 30 + padding 30, grid margin-top 40,
 * card-inner padding 20 all round, details margin-bottom 12. Now: the section carries one --agt-space
 * margin; grid, card, inner and text carry none. Text sits in the 37em column, centred, left-aligned,
 * with or without the image. The heading uses the eyebrow rule (added to its :is() list above). */
.agt-brand-fonts .element-special-options {
  margin-block: var(--agt-space);
  padding: 0;
}
.agt-brand-fonts .special-options__grid {
  max-width: var(--agt-measure);
  margin: 0 auto;
  padding: 0;
}
.agt-brand-fonts .card-special-member {
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0;
}
.agt-brand-fonts .card-special-member__inner {
  padding: 0;
}
.agt-brand-fonts .card-special-member__title {
  margin: 0 0 var(--agt-space-quarter);
}
.agt-brand-fonts .card-special-member__content > :last-child {
  margin-bottom: 0;
}

/* Card outlines share the trip-card treatment, including the small chooser. */
.agt-brand-fonts .agt-tour-card,
.agt-brand-fonts .agt-destination-card,
.agt-brand-fonts .agt-article-card,
.agt-brand-fonts .blog-carousel__card,
.agt-brand-fonts .agt-expert-card,
.agt-brand-fonts .expert-card {
  border: 2px solid var(--agt-color-frame);
  padding: 0;
  box-shadow: none;
}
.agt-brand-fonts .agt-tour-card:hover,
.agt-brand-fonts .agt-destination-card:hover,
.agt-brand-fonts .agt-article-card:hover,
.agt-brand-fonts .agt-expert-card:hover,
.agt-brand-fonts .expert-card:hover {
  box-shadow: none;
}
.agt-brand-fonts .agt-article-card__title,
.agt-brand-fonts .agt-destination-card__title {
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Article cards (/articles, blog carousel) match the tour card: 4/3 image, 20px content padding,
 * eyebrow meta in the tour eyebrow colour with its 8px gap. */
.agt-brand-fonts .blog-carousel__title {
  font-size: 1.25rem; /* line-height stays the heading 1.1, as the tour card title */
}
.agt-brand-fonts .blog-carousel__image {
  aspect-ratio: 4 / 3;
}
.agt-brand-fonts .blog-carousel__content {
  padding: 20px;
}
.agt-brand-fonts .blog-carousel__meta {
  margin-bottom: 8px;
}
.agt-brand-fonts .blog-carousel__author,
.agt-brand-fonts .blog-carousel__date {
  color: #404040;
}

/* Open search (item 116): the header goes black and the bar fills the header's own box
 * (absolute inside the fixed header, so it takes no room: header and nav do not move).
 * The wrapper drops position:relative so the header is the bar's containing block. */
.agt-brand-fonts .agt-header__search {
  position: static;
}
.agt-brand-fonts .agt-header:has(.agt-header__search-bar.is-open) {
  background-color: #000;
  backdrop-filter: none;
  color: #fff;
}
.agt-brand-fonts .agt-header:has(.agt-header__search-bar.is-open)::before {
  display: none;
}
.agt-brand-fonts .agt-header__search-bar {
  position: absolute;
  inset: 0;
  background: #000;
  padding: 0 4.5rem 0 var(--space-4);
}
.agt-brand-fonts .agt-header__search-bar.is-open {
  display: flex;
  align-items: center;
}
.agt-brand-fonts .agt-header__search-bar .agt-header__search-form {
  flex: 1;
  min-width: 0;
}
.agt-brand-fonts .agt-header__search-bar .agt-header__search-input {
  min-width: 0;
}
@media (max-width: 600px) {
  .agt-brand-fonts .agt-header__search-form {
    gap: var(--space-2);
  }
  .agt-brand-fonts .agt-header__search-submit {
    padding: 0 var(--space-3);
  }
}
.agt-brand-fonts .agt-header__search-close {
  top: 50%;
  transform: translateY(-50%);
}
/* Open search sits above everything: the bar's z-index is trapped inside the
 * header's stacking context (header 1000), and modals/lightbox are 9999. */
.agt-brand-fonts .agt-header:has(.agt-header__search-bar.is-open) {
  z-index: 10000;
}
/* The banner stays visible always (item 116). With search open the header is 10000, above the
 * banner's 1001, so the scrolled header (slid up by --up, its bottom edge still over the banner)
 * covered it. The banner goes one higher. */
.agt-brand-fonts .agt-announcement-banner {
  z-index: 10001;
}
/* Header search field: white, no coral (travel.css:710 sets the legacy coral token). */
.agt-brand-fonts .agt-header__search-input {
  background: var(--agt-color-surface);
  color: var(--agt-color-text);
}
.agt-brand-fonts .agt-header__search-input::placeholder {
  color: #595959;
  opacity: 1;
}
/* Article sidebar search: same field/button as the form styling above
 * (2px border, 3rem tall, square, primary-green button), quarter-space gap. */
.agt-brand-fonts .blog-search-bar__input-wrap {
  gap: var(--agt-space-quarter);
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.agt-brand-fonts .blog-search-bar__input {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0 var(--agt-space-half);
  border: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
}
.agt-brand-fonts .blog-search-bar__input::placeholder {
  color: inherit;
  opacity: 0.7;
}
.agt-brand-fonts .blog-search-bar__btn {
  justify-content: center;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0 var(--agt-space-half);
  border: 0;
  border-radius: 0;
  background: var(--agt-color-primary);
  color: var(--agt-color-on-primary);
}
.agt-brand-fonts .blog-search-bar__btn:hover,
.agt-brand-fonts .blog-search-bar__btn:focus-visible {
  background: var(--agt-color-primary-hover);
}
/* Neutral map silhouettes. Scope excludes the tour's destination band/map. */
.agt-brand-fonts .agt-destination-card__map img,
.agt-brand-fonts .card-destination__map img {
  filter: brightness(0) saturate(100%) invert(87%);
}
/* Destinations list: the map sits half up onto the photo, left, smaller, Green Travel with a
 * black outline. Negative margin pulls the map up by half its height; the lower half keeps
 * its place in the flow. The filter chain turns any map into #7C9E78 (--agt-brand-green-travel-75);
 * four 2px drop-shadows then draw the black outline around it. */
.agt-brand-fonts .agt-destination-card__map {
  --agt-card-map-height: 7rem;
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  height: var(--agt-card-map-height);
  padding: 0 var(--space-4);
  background: transparent;
}
/* Bottom edge only: the card border already frames the other three sides. */
.agt-brand-fonts .agt-destination-card__image {
  border-bottom: 2px solid #000;
}
/* Only pull up when there is a photo to overlap. */
.agt-brand-fonts .agt-destination-card__image + .agt-destination-card__map {
  margin-top: calc(var(--agt-card-map-height) / -2);
}
.agt-brand-fonts .agt-destination-card__map img {
  height: 100%;
  filter: brightness(0) saturate(100%) invert(92%) sepia(89%) saturate(704%) hue-rotate(46deg) brightness(106%) contrast(23%)
    drop-shadow(0.125rem 0 0 #000) drop-shadow(-0.125rem 0 0 #000)
    drop-shadow(0 0.125rem 0 #000) drop-shadow(0 -0.125rem 0 #000);
}
/* Idle states only: hover and selected keep travel.css highlights (7260, 7268). */
.agt-brand-fonts .adventure-map .australia-map__state:not(:hover):not(.australia-map__state--selected) {
  fill: var(--agt-color-idle) !important;
}
/* Selected state: primary green, not the old burnt orange (#C4582C is a fill attribute in
 * adventure-chooser.php). Hover: the lighter green. The selected label keeps white text. */
.agt-brand-fonts .adventure-map .australia-map__state--selected {
  fill: var(--agt-color-primary);
  stroke: var(--agt-color-primary);
}
.agt-brand-fonts .adventure-map .australia-map__state:hover {
  fill: var(--agt-color-primary-hover) !important;
  stroke: var(--agt-color-primary-hover);
}
.agt-brand-fonts .adventure-map .australia-map__label {
  fill: #222;
}
.agt-brand-fonts .adventure-map .australia-map__label--highlighted {
  fill: #fff;
  /* travel.css gives the selected label a brown 3px halo; make it the region's green so a small region (ACT) reads as one solid shape. */
  stroke: var(--agt-color-primary);
}
.agt-brand-fonts .adventure-map .australia-map__ext-territories path {
  fill: var(--agt-color-idle);
  opacity: 1;
}
/* Tour destination band map (.header-and-social-links__map-container). Paths carry fill
 * ATTRIBUTES (#F5C4AE idle, #C4582C highlighted, tour-sections.php) and no state class, so
 * match the attribute values; a CSS fill beats a presentation attribute. */
.agt-brand-fonts .header-and-social-links__map-container .australia-map path[fill="#F5C4AE"] {
  fill: var(--agt-color-idle);
}
.agt-brand-fonts .header-and-social-links__map-container .australia-map path[fill="#C4582C"] {
  fill: var(--agt-color-primary);
}
.agt-brand-fonts .header-and-social-links__map-container .australia-map path:hover {
  fill: var(--agt-color-primary-hover);
}
/* NZ map is an <img> of an SVG with embedded #eda991 fills: only a filter can recolour it.
 * Same neutral silhouette filter as the destination cards above (renders ~#dedede). */
.agt-brand-fonts .header-and-social-links__map-container .new-zealand-map {
  filter: brightness(0) saturate(100%) invert(87%);
}
.agt-brand-fonts .card-destination__title {
  line-height: 1.3;
}

/* Location row: remove the old font's upward triangle offset. */
.agt-brand-fonts .agt-tour-card__location {
  line-height: 1.2;
  align-items: center;
}
/* Picker card is the same tour-card component; only travel.css:7332
 * (.adventure-chooser .agt-tour-card__location, accent colour) made it differ. */
.agt-brand-fonts .adventure-chooser .agt-tour-card__location {
  color: rgb(64 64 64);
}
/* Picker card = /tours card. Undo the picker-only overrides at travel.css:7314-7375. */
.agt-brand-fonts .adventure-chooser .agt-tour-card {
  display: block;
  min-height: auto;
  height: auto;
}
.agt-brand-fonts .adventure-chooser .agt-tour-card__link {
  color: var(--agt-dark-gray-1);
}
.agt-brand-fonts .adventure-chooser .agt-tour-card__image {
  aspect-ratio: 4 / 3;
}
.agt-brand-fonts .adventure-chooser .agt-tour-card__content {
  padding: var(--space-5);
}
.agt-brand-fonts .adventure-chooser .agt-tour-card__title {
  color: var(--agt-dark-gray-1);
  font-size: 1.25rem;
}
.agt-brand-fonts .adventure-chooser .agt-tour-card__price,
.agt-brand-fonts .adventure-chooser .agt-tour-card__duration,
.agt-brand-fonts .adventure-chooser .agt-tour-card__trip-type {
  color: var(--agt-gray-600);
}
.agt-brand-fonts .adventure-chooser .agt-tour-card__trip-type {
  font-size: 0.85rem;
}
.agt-brand-fonts .agt-tour-card__triangle {
  display: block;
  margin-top: 0;
  align-self: center;
}

/* Destination names remain headings below the category eyebrow. */
.agt-brand-fonts .header-and-social-links__trip-types {
  order: -1;
  margin: 0;
}

/* Featured explore spacing (agt_brand_fonts, Tamm, 2026-09-29)
 *
 * Section top/bottom padding (80px) is too large; reduce to 0 and use
 * margin instead. Since the section has a dark background, margin exposes
 * the page background (white by default), so visual effect must remain
 * sensible. Margin: 40px (var(--agt-space), half the old 80px padding).
 * Grid gap: 40px (var(--agt-space)).
 */
.agt-brand-fonts .featured-explore {
  padding-block: 0;
  margin-block: var(--agt-space);
}

/* One spacer between blocks (Tamm, 2026-09-29, /about)
 * travel.css: `.hero--md { margin-bottom: 100px }` at >=1024 beats `.hero--mb-none`, and
 * `.element { padding: 80px 0 }` stacks 80+80 between siblings. Plain (non-dark) .element
 * blocks now carry half a spacer each side, so two neighbours give one --agt-space; the one
 * straight after a hero carries a full spacer on top (hero bottom margin is 0). Dark bands
 * keep their own padding: it sits inside their paint. */
.agt-brand-fonts .agt-hero-component,
.agt-brand-fonts .hero {
  margin-bottom: 0;
}
.agt-brand-fonts .element:not(.element--bg-dark) {
  padding-block: var(--agt-space);
}
.agt-brand-fonts .element--pt-none:not(.element--bg-dark) {
  padding-top: 0;
}
.agt-brand-fonts :is(.agt-hero-component, .hero) + .element:not(.element--bg-dark, .element--pt-none) {
  padding-top: var(--agt-space);
}
.agt-brand-fonts .element:not(.element--bg-dark):last-child {
  padding-bottom: var(--agt-space);
}

/* Page-level dark (agt_brand_fonts, Tamm, 2026-09-29)
 *
 * The page theme (body[data-theme], inc/page-theme.php) paints the
 * background and sets the text colour. Sections that carry
 * .element--bg-dark become transparent and inherit that colour, so a
 * margin gap between blocks shows the page (dark or light), never white.
 * The hero keeps its own paint (video / overlay).
 */
.agt-brand-fonts[data-theme="dark"] {
  --agt-page-bg: var(--agt-black);
  --agt-page-fg: var(--agt-white);
}

/* Only the front page paints the whole page dark. Other pages pinned "dark" by
 * agt_migrate_page_theme() (About) only hold a dark section, so the section keeps its own black. */
.agt-brand-fonts.page-home[data-theme="dark"] {
  background-color: var(--agt-page-bg);
}

.agt-brand-fonts[data-theme="light"] {
  --agt-page-bg: var(--agt-white);
  --agt-page-fg: var(--agt-black);
}

.agt-brand-fonts.page-home .element--bg-dark:not(.hero) {
  background-color: transparent;
}
.agt-brand-fonts .element--bg-dark:not(.hero) {
  color: var(--agt-page-fg, var(--agt-white));
}

/* Free text in those sections hardcodes white in travel.css; follow the page.
 * Text laid over photos (featured-card__*, explore-item__title) stays white. */
.agt-brand-fonts .element--bg-dark:not(.hero) .section-title,
.agt-brand-fonts .why-agt__content,
.agt-brand-fonts .why-agt__content strong,
.agt-brand-fonts .animated-text__inner h2,
.agt-brand-fonts .animated-text__track span {
  color: var(--agt-page-fg, var(--agt-white));
}

.agt-brand-fonts .featured-explore__grid {
  gap: var(--agt-space);
}

/* =========================================================================
 * Header and hero title polish (Tamm, 2026-09-29)
 *
 * 1. Header scrim: reduce black opacity slightly (0.55 → 0.42, ~24% reduction)
 *    and backdrop blur (4px → 2.8px, ~30% reduction) to lighten the header
 *    region while keeping it readable.
 * 2. Menu text: add very subtle text-shadow so links stand out from the
 *    background, lighter than the front-page hero title shadow.
 * 3. Menu text offset: shift down 0.06em vertically for slight visual lift.
 * 4. Hero title shadow: define --agt-hero-title-shadow as a weaker version
 *    of the front-page hero shadow (alpha reduced ~18-20%), then apply to
 *    ALL hero title types for consistent scheme across templates.
 * ========================================================================= */

.agt-brand-fonts .agt-header::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(2.8px);
  -webkit-backdrop-filter: blur(2.8px);
  /* Scrim + blur cover exactly the header box (Tamm, 2026-09-29): no % of hero/viewport; the fade is a mask inside the box. */
  top: 0;
  bottom: 0;
  height: auto;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

/* Scrolled (white) header: no scrim. The rule above came later and undid the reset at ~line 607;
 * blur goes back to travel.css:352 (16px). */
.agt-brand-fonts .agt-header--scrolled::before {
  background: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Menu text links: subtle shadow for legibility */
.agt-brand-fonts .agt-header__nav-link a,
.agt-brand-fonts .agt-header__nav-link span,
.agt-brand-fonts .agt-header__dropdown li a,
.agt-brand-fonts .mobile-navigation__list-item > a,
.agt-brand-fonts .mobile-navigation__summary,
.agt-brand-fonts .mobile-navigation__submenu li a {
  text-shadow: rgba(0, 0, 0, 0.07) 0px 0px 8px;
}

/* Same padding top and bottom (travel.css:545 gave the top 0.25rem more). Height is unchanged. */
.agt-brand-fonts .agt-header__nav-link a,
.agt-brand-fonts .agt-header__nav-link span {
  padding-block: calc(var(--space-2) + 0.125rem);
}

/* Nav hover/focus (Tamm, 2026-09-29): travel.css:581,611,651 turn the text
 * the primary colour (#507D4B green under this flag), unreadable over the hero.
 * Now: solid black box, white text. Box lives on .agt-header__nav-link (link +
 * chevron together); the side padding is a box-shadow, so layout does not move. Dropdown rows are already #000, so their hover is #333. */
.agt-brand-fonts .agt-header__nav-item:hover .agt-header__nav-link,
.agt-brand-fonts .agt-header__nav-link:has(:focus-visible) {
  background: #000;
  box-shadow: -0.5rem 0 0 #000, 0.5rem 0 0 #000;
}
.agt-brand-fonts .agt-header__nav-item:hover .agt-header__nav-link a,
.agt-brand-fonts .agt-header__nav-item:hover .agt-header__nav-link span,
.agt-brand-fonts .agt-header__nav-item:hover .agt-header__dropdown-toggle,
.agt-brand-fonts .agt-header__nav-link:has(:focus-visible) a,
.agt-brand-fonts .agt-header__nav-link:has(:focus-visible) span,
.agt-brand-fonts .agt-header__nav-link:has(:focus-visible) .agt-header__dropdown-toggle {
  color: #fff;
}
/* Panel lines up with the black hover box (which extends 0.5rem left/right via
 * box-shadow) and is never narrower than it. */
.agt-brand-fonts .agt-header__nav-item.has-dropdown > .agt-header__dropdown {
  left: -0.5rem;
  min-width: calc(100% + 1rem);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.agt-brand-fonts .agt-header__dropdown li a:hover,
.agt-brand-fonts .agt-header__dropdown li a:focus-visible {
  color: #fff;
}
.agt-brand-fonts .agt-header__dropdown li a:hover,
.agt-brand-fonts .agt-header__dropdown li a:focus-visible {
  background-color: #333;
}

/* Hero title shadow: weaker version of front-page hero shadow (alpha reduced 18-20%) */
.agt-brand-fonts {
  --agt-hero-title-shadow: rgba(0, 0, 0, 0.18) 0px 0px 40px, rgba(0, 0, 0, 0.1) 0px 0px 12px;
}

/* Apply consistent hero title shadow to all hero types */
.agt-brand-fonts .hero__title:not(.hero__title--black),
.agt-brand-fonts .agt-hero__title,
.agt-brand-fonts .agt-tour-hero__title,
.agt-brand-fonts .agt-destination-hero__title,
.agt-brand-fonts .agt-article-hero__title,
.agt-brand-fonts .agt-hero-component__title,
.agt-brand-fonts .agt-tours-hero__title,
.agt-brand-fonts .agt-page-header__title,
.agt-brand-fonts .agt-404-hero__title,
.agt-brand-fonts .agt-hero-component h1,
.agt-brand-fonts .agt-tours-hero h1,
.agt-brand-fonts .agt-destination-hero h1 {
  text-shadow: var(--agt-hero-title-shadow);
}

/* =========================================================================
 * Explore accordion title wrapping fix (agt_brand_fonts, Tamm 2026-09-29)
 *
 * Problem: .explore-item width doubles on hover/active (min-width: 11.11% ->
 * 22.22%), causing .explore-item__title to wrap differently:
 *   - Collapsed (11.11%): title wraps to 2 lines
 *   - Expanded (22.22%): title wraps to 1 line (text shifts)
 *
 * Solution: Use CSS container queries to cap the title width proportionally
 * to the grid container, ensuring the title stays at 2 lines in both states.
 *
 * Make .explore-cards-grid__grid a size container (container-type: inline-size),
 * then apply max-width to .explore-item__title in container query width units
 * (cqw). Measured at both desktop breakpoints:
 *   - 1280px: grid 1256px, title width ~114.8px ≈ 9.14% ≈ 9.14cqw
 *   - 1440px: grid 1416px, title width ~135.6px ≈ 9.58% ≈ 9.58cqw
 * Using 9.14cqw (conservative) keeps titles at 2 lines in both states across
 * all breakpoints; tested 1024/1280/1440px desktop and 390px mobile.
 * ========================================================================= */

.agt-brand-fonts .explore-cards-grid__grid {
  container-type: inline-size;
}

/* Fixed width = the collapsed item's guaranteed text box (min-width 11.111% of
 * the grid, minus 4px+4px item padding and 20px+20px inner padding). Collapsed
 * and active items then wrap the title identically, so hover cannot change the
 * line count. */
.agt-brand-fonts .explore-item__title {
  width: calc(11.111cqw - 48px);
}

/* Below the 1024px accordion breakpoint (travel.css) the items are full-width
 * stacked bands, so the cqw cap above is far too narrow: drop it and balance. */
@media (max-width: 1023.98px) {
  .agt-brand-fonts .explore-item__title {
    width: auto;
    text-wrap: balance;
  }
}

/* =========================================================================
 * Hero eyebrow and excerpt (Tamm, 2026-09-29)
 *
 * Optional small label above a hero title and optional text under it, like AG's
 * hero eyebrow and standfirst. Emitted by agt_hero_eyebrow() / agt_hero_excerpt()
 * (inc/render.php) ONLY when the editor typed something, so with both empty
 * there is no element to style and the default markup is unchanged. The rules
 * live under .agt-brand-fonts as the rest of the hero polish does; without the
 * flag the elements still render, unstyled, inheriting the hero text colour.
 * ========================================================================= */

.agt-brand-fonts .agt-hero-eyebrow,
.agt-brand-fonts .agt-hero-excerpt {
  color: var(--agt-white, #fff);
  text-align: center;
  text-shadow: var(--agt-hero-title-shadow);
}

.agt-brand-fonts .agt-hero-eyebrow {
  margin: 0 0 0.6rem;
}

.agt-brand-fonts .agt-hero-excerpt {
  max-width: 52ch;
  margin: 0.9rem auto 1rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.45;
}

/* Expert hero (--bottom-left) is centred like every other hero (Tamm, 2026-09-29):
 * travel.css:2923 left-aligns __content; centre it, keep the excerpt block centred. */
.agt-brand-fonts .agt-hero-component--bottom-left .agt-hero-component__content,
.agt-brand-fonts .agt-hero-component--bottom-left .agt-hero-eyebrow,
.agt-brand-fonts .agt-hero-component--bottom-left .agt-hero-excerpt {
  text-align: center;
}

.agt-brand-fonts .agt-hero-component--bottom-left .agt-hero-excerpt {
  margin-inline: auto;
}

/* Home hero's black-title option: the small text follows it. */
.agt-brand-fonts .hero__content:has(.hero__title--black) .agt-hero-eyebrow,
.agt-brand-fonts .hero__content:has(.hero__title--black) .agt-hero-excerpt {
  color: var(--agt-color-text);
  text-shadow: none;
}

@media (min-width: 768px) {
  .agt-brand-fonts .agt-hero-excerpt {
    font-size: 1.25rem;
  }
}

/* Home hero, small screens: with the extra lines the centred block grows into the fixed header. */
@media (max-width: 767px) {
  .agt-brand-fonts .hero__container:has(.agt-hero-eyebrow, .agt-hero-excerpt) {
    padding-top: 11rem;
  }
}

/* =========================================================================
 * Tour card footer spacing (Tamm, 2026-09-29)
 *
 * .agt-tour-card__footer lists price and duration side by side.
 * No flex/gap before — items touched or wrapped unpredictably.
 * Footer: flex row, wrap, align center; gap var(--agt-space-quarter) on both axes,
 * ensures min >0px gap between price/duration items and allows wrap. Duration:
 * inline-flex, centre-aligned, with gap var(--agt-space-quarter) between icon
 * and text. Clock icon: flex-shrink: 0 so it never squashes.
 * ========================================================================= */

.agt-brand-fonts .agt-tour-card__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--agt-space-quarter);
  row-gap: var(--agt-space-quarter);
}

.agt-brand-fonts .agt-tour-card__duration {
  display: inline-flex;
  align-items: center;
  gap: var(--agt-space-quarter);
}

.agt-brand-fonts .agt-tour-card__clock {
  flex-shrink: 0;
}

/* =========================================================================
 * KLAVIYO NEWSLETTER FORM (agt_brand_fonts, Tamm, 2026-09-29)
 *
 * One section for the whole embedded form. It replaces the old Klaviyo rules
 * that used to sit in this file (button font/spacing/colour, h1 font) and it
 * neutralises the flag-off rules in css/travel.css:7385-7513 by overriding
 * them (that file is never edited). Klaviyo injects the form with inline
 * style="" attributes (white bg, 10px radius, Arial/objektiv-mk1 fonts, 36px
 * heading), so !important is needed wherever an inline style or a travel.css
 * !important rule is beaten. Each such property is marked "(!)" below.
 * Every selector carries .agt-brand-fonts + .klaviyo-form + form, one class
 * more than the travel.css rule it beats, so it wins on specificity too.
 *
 * Brand: square corners, no shadow (all radii 0, as the sweep at ~line 511),
 * Proxima Sera text, Objektiv 800 uppercase for inputs/buttons/labels,
 * primary button = the .btn colour (var(--agt-color-primary): #507D4B under
 * .agt-green-scheme), spacing from --agt-space*. No fixed light/dark paint:
 * text and the input border follow the page theme (--agt-page-fg/-bg, set
 * on body[data-theme]); the form itself is transparent.
 * ========================================================================= */

/* Holder: one space of margin, not padding (travel.css:7388), on white. */
.agt-brand-fonts .klaviyo-form__holder {
  padding-block: 0;
  margin-block: var(--agt-space);
  background-color: var(--agt-color-surface);
  --agt-page-fg: #222;
  --agt-page-bg: #fff;
}

/* Form shell. (!) bg + radius + padding: inline style and travel.css:7404. */
.agt-brand-fonts .klaviyo-form form {
  color: var(--agt-page-fg);
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Image half: Klaviyo's inline min-width:390px is wider than a phone. (!) inline style. */
.agt-brand-fonts .klaviyo-form form > div:first-child {
  min-width: 0 !important;
}

/* Text half (travel.css:7419 gave it #F3F3F3 and 30px gap). (!) as above. */
.agt-brand-fonts .klaviyo-form form > div:nth-child(2) {
  background-color: transparent !important;
  gap: var(--agt-space-half) !important;
  padding: var(--agt-space) var(--agt-space-half) !important;
}

@media (min-width: 1024px) {
  .agt-brand-fonts .klaviyo-form form > div:nth-child(2) {
    padding-inline: var(--agt-space) !important;
  }
}

/* Heading and body text. Replaces `form h1 *` and its 22/25px breakpoints.
 * (!) font + size: inline style on h1 / span, travel.css:7471/7502/7509. */
.agt-brand-fonts .klaviyo-form form h1,
.agt-brand-fonts .klaviyo-form form h1 span,
.agt-brand-fonts .klaviyo-form form h1 strong,
.agt-brand-fonts .klaviyo-form form p,
.agt-brand-fonts .klaviyo-form form p span {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  color: inherit !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
}

.agt-brand-fonts .klaviyo-form form h1,
.agt-brand-fonts .klaviyo-form form h1 span,
.agt-brand-fonts .klaviyo-form form h1 strong {
  font-size: 1.75rem !important;
}

.agt-brand-fonts .klaviyo-form form p,
.agt-brand-fonts .klaviyo-form form p span {
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

@media (min-width: 768px) {
  .agt-brand-fonts .klaviyo-form form h1,
  .agt-brand-fonts .klaviyo-form form h1 span,
  .agt-brand-fonts .klaviyo-form form h1 strong {
    font-size: 2rem !important;
  }
}

/* Row spacing: travel.css:7476 zeroed the vertical padding of each row.
 * Colour: Klaviyo's wrapper classes set their own text colour; pass the page
 * colour down through them so h1/p/label inherit it. */
.agt-brand-fonts .klaviyo-form form div[data-testid="form-component"] {
  padding-block: 0 !important;
}

.agt-brand-fonts .klaviyo-form form div[data-testid="form-row"],
.agt-brand-fonts .klaviyo-form form div[data-testid="form-component"],
.agt-brand-fonts .klaviyo-form form .klaviyo-form-richtext,
.agt-brand-fonts .klaviyo-form form .klaviyo-textinput,
.agt-brand-fonts .klaviyo-form form .klaviyo-emailinput {
  color: inherit !important;
}

/* Labels: eyebrow style. They are visually hidden by Klaviyo (sr-only), so
 * only the type is set, never display/size. */
.agt-brand-fonts .klaviyo-form form label {
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: inherit !important;
}

/* Inputs: transparent, 2px border in the page text colour (same 2px as the
 * cards). (!) radius/border/bg/padding: travel.css:7437 and Klaviyo classes. */
.agt-brand-fonts .klaviyo-form form input[type="text"],
.agt-brand-fonts .klaviyo-form form input[type="email"] {
  font-family: var(--font-primary) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  min-height: 3rem !important;
  box-sizing: border-box !important;
  color: inherit !important;
  background-color: transparent !important;
  border: 2px solid currentColor !important;
  border-radius: 0 !important;
  padding: 0 var(--agt-space-half) !important;
}

.agt-brand-fonts .klaviyo-form form input::placeholder {
  color: inherit;
  opacity: 0.7;
}

.agt-brand-fonts .klaviyo-form form input:focus-visible {
  outline: 2px solid var(--agt-color-primary);
  outline-offset: 2px;
}

/* Button: the site's primary button, in normal flow. The old rule floated it
 * inside the email field (position:absolute, right/top). (!) everything that
 * travel.css:7445-7470 set with !important. */
.agt-brand-fonts .klaviyo-form form div[data-testid="form-component"]:has(> button) {
  position: static !important;
}

.agt-brand-fonts .klaviyo-form form div[data-testid="form-component"]:has(> button) button {
  font-family: var(--font-primary) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  min-height: 3rem !important;
  box-sizing: border-box !important;
  height: auto !important;
  padding: 0.5rem var(--agt-space-half) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--agt-color-primary) !important;
  color: var(--agt-color-on-primary) !important;
}

/* Hover goes to the lighter green, like every other green button. */
.agt-brand-fonts .klaviyo-form form div[data-testid="form-component"]:has(> button) button:hover,
.agt-brand-fonts .klaviyo-form form div[data-testid="form-component"]:has(> button) button:focus-visible {
  background-color: var(--agt-color-primary-hover) !important;
  color: var(--agt-color-on-primary-hover) !important;
}

/* Validation and success messages: text only, page colour, no boxes. */
.agt-brand-fonts .klaviyo-form form [role="alert"],
.agt-brand-fonts .klaviyo-form form [role="alert"] * {
  font-family: var(--font-primary) !important;
  font-size: 0.875rem !important;
  border-radius: 0 !important;
  color: inherit !important;
}

/* Flat brand look: no drop shadows on cards or panels. Kept: dropdown menu,
   booking and private-tour modals (separation), focus rings, text-shadow. */
.agt-brand-fonts .card-book-now,
.agt-brand-fonts .card-member,
.agt-brand-fonts .blog-carousel__card,
.agt-brand-fonts .blog-carousel__card:hover,
.agt-brand-fonts .agt-expert-profile__image,
.agt-brand-fonts .agt-expert-profile__placeholder,
.agt-brand-fonts .agt-destination-card,
.agt-brand-fonts .agt-destination-card:hover,
.agt-brand-fonts .agt-feature-card,
.agt-brand-fonts .agt-newsletter-signup__inner,
.agt-brand-fonts .contact-form__inner,
.agt-brand-fonts .video-with-content .video-with-content__content,
.agt-brand-fonts .agt-booking-iframe-wrapper {
  box-shadow: none;
}

/* Sidebar top (Tamm 2026-09-29): travel.css sets .grid-layout__sidebar margin-top var(--space-6)
 * (plain rule and again at min-width 1024px), so the sidebar started 24px below the content column.
 * Blog and tour pages share it. */
.agt-brand-fonts .grid-layout__sidebar {
  margin-top: 0;
}

/* No sidebar: centre the column (Tamm 2026-09-29). travel.css keeps the 320px sidebar track at
 * >=1024px (grid-template-columns 1fr 320px) even when .grid-layout__sidebar is absent (page.php with
 * content only), so the column sat left of centre with an empty track beside it. Drop the track;
 * the column then spans the centred .container-sm and its children keep their own measure and
 * margin-inline: auto. The testimonials band stays inside the column (same width as before). Editor
 * has no .grid-layout, so it is unaffected. */
@media (min-width: 1024px) {
  .agt-brand-fonts .grid-layout__inner:not(:has(> .grid-layout__sidebar)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Destination sidebar top (item 130): the destination's first content section is
 * .element-content with padding-top 40px, so its text starts 40px below the grid top while the
 * sidebar card started at the grid top. Blog and tour content have no such padding. Side by side
 * only (>=1024px); sticky top (100px) is unchanged. */
@media (min-width: 1024px) {
  .agt-brand-fonts .grid-layout--destination .grid-layout__sidebar {
    margin-top: 40px;
  }
}

/* Right sidebar cards (agt_brand_fonts, Tamm 2026-09-29): same 3px green square frame as the /tours
 * filter box (.agt-filter-group). travel.css gave them 1px #ccc (article, destination) or 1px
 * rgba(64,64,64,.4) (tour booking card). One shared parent, .grid-layout__sidebar, so no one-offs.
 * .card-member is listed (green, Tamm 2026-09-29); its black rule above still applies off the sidebar. Search input, buttons: untouched. */
.agt-brand-fonts .grid-layout__sidebar :is(
  .card-book-now, .card-member, .blog-search-bar, .popular-posts, .tags--sidebar, .card-destination, .sections-list
) {
  border: 2px solid var(--agt-color-primary); /* Tamm 2026-09-29: 2px (3px was too broad) */
  border-radius: 0;
  box-shadow: none;
}
/* No green anywhere inside the frame. Booking card: no inner box, no lines between sections; the
 * frame's padding + a flex column gap do the spacing, so buttons and text share the same edges. */
.agt-brand-fonts .grid-layout__sidebar .card-book-now {
  display: flex;
  flex-direction: column;
  gap: var(--agt-space-half);
  padding: var(--agt-space-half);
}
.agt-brand-fonts .grid-layout__sidebar .card-book-now__inner {
  border: 0;
  border-radius: 0;
  margin: 0;
}
.agt-brand-fonts .grid-layout__sidebar .card-book-now__btn-holder,
.agt-brand-fonts .grid-layout__sidebar .card-book-now--book-now-first .card-book-now__btn-holder {
  padding: 0;
}
.agt-brand-fonts .grid-layout__sidebar .card-book-now__content {
  display: flex;
  flex-direction: column;
  gap: var(--agt-space-half);
}
.agt-brand-fonts .grid-layout__sidebar .card-book-now__content li {
  border: 0;
  padding: 0;
}
/* "Private only" label above the enquiry button: eyebrow type comes from the shared :is() rule; here
 * only layout + colour (green, as the frame). Its gap to the button is the flex gap of the holder. */
.agt-brand-fonts .grid-layout__sidebar .agt-private-label {
  display: block;
  color: var(--agt-color-primary);
  margin-bottom: var(--agt-space-quarter);
}
/* "Make a private tour" moves below the dates/prices (item 122). Book Now stays on top. The holder
 * dissolves into the card's flex column so its buttons become card rows; the enquiry button gets
 * order 1 (after .card-book-now__inner, order 0). Private tours (label present) keep the enquiry
 * button on top, it is their only action. To undo: delete this block. */
.agt-brand-fonts .grid-layout__sidebar .card-book-now--book-now-first .card-book-now__btn-holder:not(:has(.agt-private-label)) {
  display: contents;
}
.agt-brand-fonts .grid-layout__sidebar .card-book-now--book-now-first .card-book-now__btn-holder:not(:has(.agt-private-label)) [data-open-private-tour] {
  order: 1;
}
/* "See the other direction" (block agt/tour-reverse-link, variant button) follows the card as a
 * sibling. Make it the card's last row: the card drops its bottom edge and padding, the link box
 * draws the rest of the same 2px frame (no top line, no shadow, no radius) and holds a ghost button
 * (transparent, 2px green border, green text; hover fills green). Sized like .card-book-now__btn. */
.agt-brand-fonts .grid-layout__sidebar .card-book-now:has(+ .agt-reverse-link--button) {
  border-bottom-width: 0;
  padding-bottom: 0;
}
.agt-brand-fonts .grid-layout__sidebar .agt-reverse-link--button {
  padding: var(--agt-space-half);
  border: 2px solid var(--agt-color-primary);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
}
.agt-brand-fonts .grid-layout__sidebar .agt-reverse-link__btn {
  box-sizing: border-box;
  padding: 8px 20px;
  border: 2px solid var(--agt-color-primary);
  background: transparent;
  color: var(--agt-color-primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.agt-brand-fonts .grid-layout__sidebar .agt-reverse-link__btn:is(:hover, :focus-visible) {
  background: var(--agt-color-primary-hover);
  color: var(--agt-color-on-primary-hover);
  text-decoration: none;
}
/* /tours sort link: same green outline ghost button as .agt-reverse-link__btn above, weight 500. */
.agt-brand-fonts .agt-tours-sort,
.agt-brand-fonts .agt-filter-clear {
  /* small button tier: 16px text, 6px 16px (large = Make an enquiry / See the other direction, 20px+) */
  box-sizing: border-box;
  padding: 6px 16px;
  border: 2px solid var(--agt-color-primary);
  border-radius: 0;
  background: transparent;
  color: var(--agt-color-primary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.agt-brand-fonts .agt-tours-sort:is(:hover, :focus-visible),
.agt-brand-fonts .agt-filter-clear:is(:hover, :focus-visible) {
  background: var(--agt-color-primary-hover);
  color: var(--agt-color-on-primary-hover);
  text-decoration: none;
}
/* Solid green buttons: hover goes to the lighter green (Tamm, 2026-09-29). Outline buttons above do the same. */
body.agt-brand-fonts :is(.btn:not(.hero__cta), .agt-header__cta, .agt-filter-apply, .book-now form button, .agt-tours-search__button):is(:hover, :focus-visible) {
  background-color: var(--agt-color-primary-hover) !important;
  color: var(--agt-color-on-primary-hover) !important;
}
/* Twin share: price sits on the first line of the label, not centred on the two-line block. */
.agt-brand-fonts .grid-layout__sidebar .card-book-now__type {
  align-items: baseline;
}
/* Only the light grey hairlines between dates / list rows stay. */
.agt-brand-fonts .grid-layout__sidebar .card-book-now__date-row + .card-book-now__date-row {
  border-top: 1px solid #ccc;
}
.agt-brand-fonts .grid-layout__sidebar .card-destination__title {
  border-top: 0;
}
.agt-brand-fonts .grid-layout__sidebar .sections-list ul li {
  border-bottom: 0;
}
.agt-brand-fonts .grid-layout__sidebar .sections-list ul li + li {
  border-top: 1px solid #ccc;
}
.agt-brand-fonts .grid-layout__sidebar .card-posts__item {
  border-color: #ccc;
}

/* Pagination — AG's component, copied from ag-theme-2026/new/components/pagination/pagination.css
 * (markup: components/pagination.php under the flag). AG values kept: flat corners, black 1px
 * borders, black current page, #f0f0f0 hover, 70px min-width, 8px gap, 80px block margin
 * (= --agt-space-double). AG's --sans (nimbus-sans) maps to AGT's --font-primary; --text-sm is 16px. */
.agt-brand-fonts .ag26-pagination {
  margin-top: var(--agt-space-half);
  margin-bottom: 0;
  text-align: center;
}

.agt-brand-fonts .ag26-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.agt-brand-fonts .ag26-pagination .nav-links .page-numbers {
  align-items: center;
  border: 1px solid var(--agt-color-frame);
  border-radius: 0;
  box-shadow: none;
  color: #0c0c0c;
  display: inline-flex;
  font-family: var(--font-primary);
  font-size: 1rem;
  justify-content: center;
  min-width: 70px;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.agt-brand-fonts .ag26-pagination .nav-links .page-numbers.current {
  background-color: var(--agt-brand-black);
  color: var(--agt-brand-white);
}

.agt-brand-fonts .ag26-pagination .nav-links .page-numbers:not(.current):focus,
.agt-brand-fonts .ag26-pagination .nav-links .page-numbers:not(.current):hover {
  background-color: #f0f0f0;
}

.agt-brand-fonts .ag26-pagination .nav-links .page-numbers.dots {
  background: none;
  border: none;
  min-width: 0;
}

/* =========================================================================
 * Image fallback and empty results (Tamm, 2026-09-29)
 *
 * A card or hero with no image, or whose image fails to load, shows one designed panel: primary
 * green, a contour-line tile, and the AGT arrow (the tour card location mark) centred in white at 40%.
 * No asset file: both layers are inline SVG data URIs. `.agt-img-fallback` is emitted by
 * agt_image_fallback_html(); `.agt-img-missing` is put on a hero by agt_hero_missing_class(), and on a
 * card image box by the footer script in inc/render.php when the <img> errors. !important on the image
 * layers only so a failed inline background-image on a hero is replaced.
 * ========================================================================= */
.agt-brand-fonts :is(.agt-img-fallback, .agt-img-missing) {
  background-color: var(--agt-color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 47'%3E%3Cpath fill='%23fff' fill-opacity='.4' d='M47 47L23.5 0L0 47L23.5 35.9412L47 47Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%238FB58A' stroke-opacity='.45'%3E%3Cpath d='M0 12C20 0 40 0 60 12S100 24 120 12'/%3E%3Cpath d='M0 36C20 48 40 48 60 36S100 24 120 36'/%3E%3Cpath d='M0 60C20 48 40 48 60 60S100 72 120 60'/%3E%3Cpath d='M0 84C20 96 40 96 60 84S100 72 120 84'/%3E%3Cpath d='M0 108C20 96 40 96 60 108S100 120 120 108'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, repeat;
  background-position: center, 0 0;
  background-size: 3rem, 120px 120px;
}
.agt-brand-fonts .agt-img-fallback {
  display: block;
  width: 100%;
  height: 100%;
}
.agt-brand-fonts .agt-img-missing > img {
  visibility: hidden;
}
.agt-brand-fonts .agt-destination-card__image > .agt-img-fallback {
  aspect-ratio: 4 / 3;
}

.agt-brand-fonts .agt-empty-results {
  margin-block: var(--agt-space);
  text-align: center;
}
.agt-brand-fonts .agt-empty-results .agt-eyebrow {
  margin: 0 0 var(--agt-space-quarter);
  color: var(--agt-color-primary);
}
.agt-brand-fonts .agt-empty-results__title {
  margin: 0 0 var(--agt-space-half);
  font-family: var(--font-heading);
}
.agt-brand-fonts .agt-empty-results__help {
  margin: 0 0 var(--agt-space-half);
}
.agt-brand-fonts .agt-empty-results__search {
  max-width: 28rem;
  margin: 0 auto var(--agt-space-half);
}
.agt-brand-fonts .agt-empty-results__clear {
  color: var(--agt-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agt-brand-fonts .agt-empty-results__latest {
  margin: var(--agt-space) 0 var(--agt-space-half);
  font-family: var(--font-heading);
}
.agt-brand-fonts .agt-empty-results .blog-carousel {
  text-align: left;
}
/* A hero has its title over the middle, so it keeps the contour tile and drops the arrow. */
.agt-brand-fonts :is(.agt-hero-component, .agt-tour-hero).agt-img-missing {
  background-size: 0 0, 120px 120px;
}
/* Coral rip-out. travel.css aliases the legacy orange names to the
 * legacy burnt-orange / coral tokens ON :root, so the body-level remap in
 * .agt-green-scheme never reached them: every legacy orange var (logo, banner,
 * icons, links) kept #DB5223. Re-declare all four on body. */
/* travel.css:178 hard-codes rgb(237 169 145) on rich-text links. */
body.agt-brand-fonts .typography a:not(.btn) {
  color: var(--agt-color-primary);
}
body.agt-brand-fonts .typography a:not(.btn):hover {
  color: var(--agt-color-primary-hover);
}
/* Core makes #wpadminbar position:absolute under 601px, so it scrolls away while the fixed
 * banner and header stay offset by its 46px. Keep it fixed so nothing is left floating. */
@media (max-width: 600px) {
  body.agt-brand-fonts #wpadminbar {
    position: fixed;
  }
}

/* =========================================================================
 * Hero scrim + destination H1 (Tamm, 2026-09-29)
 *
 * One scrim for every hero: the front-page .hero::after gradient (dark band
 * behind the header, clear middle so the photo pops, dark band at the foot).
 * Replaces the flat rgba(0,0,0,.55) that .agt-dark-image-treatment put over
 * hero-component / tours heroes, and adds it to the tour hero, which had none.
 * The front page's blur layer (.hero::before) is header/search chrome and is
 * not copied. Keep the stops in step with .agt-dark-image-treatment .hero::after.
 * ========================================================================= */
.agt-brand-fonts {
  --agt-hero-scrim: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.agt-brand-fonts .agt-hero-component::after,
.agt-brand-fonts .agt-tours-hero::after,
.agt-brand-fonts .agt-hero__overlay,
.agt-brand-fonts .agt-destination-hero__overlay,
.agt-brand-fonts .agt-article-hero__overlay {
  background: var(--agt-hero-scrim);
}

.agt-brand-fonts .agt-tour-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--agt-hero-scrim);
}

/* =========================================================================
 * ONE hero header (Tamm, 2026-09-29). Replaces the page-body-class hacks
 * (.page-destinations / .page-destination-detail ... --bottom).
 * Two options, both keyed on the component, not the page:
 *   a) no Find Trips bar: the title block is vertically centred;
 *   b) Find Trips bar (.book-now) present: the bar is pinned to the bottom and
 *      the title block is centred in the space above it.
 * --center / --bottom / --bottom-left / --article now differ only in text-align.
 * Same h1 (size, tracking, line-height, margins) for the component, the tour
 * hero and the front-page hero; the tour hero's 2.5rem title margin is gone so
 * its title centres like the rest.
 * ========================================================================= */
.agt-brand-fonts .agt-hero-component {
  justify-content: center;
}

/* Find Trips bar: out of flow at the hero bottom, so the title centres in the FULL
 * hero exactly as on heroes without a bar (Tamm, 2026-09-29). No border-top. */
.agt-brand-fonts .agt-hero-component:has(.book-now) {
  position: relative;
}

.agt-brand-fonts .agt-hero-component .book-now {
  position: absolute;
  inset: auto 0 0;
  border-top: 0;
}

.agt-brand-fonts .agt-hero-component h1,
.agt-brand-fonts .agt-tour-hero__title,
.agt-brand-fonts .hero__title {
  font-size: 4rem;
  line-height: 1.1;
}

.agt-brand-fonts .agt-hero-component h1,
.agt-brand-fonts .agt-tour-hero__title {
  margin-block: 0;
}

.agt-brand-fonts .agt-tour-hero__content {
  padding-block: 0;
}

.agt-brand-fonts .agt-tour-hero .agt-hero-eyebrow {
  margin: 0 0 0.6rem;
}

/* One continuous hero height, no breakpoints (Tamm, 2026-09-29): 360px at 320px wide
 * rising to 540px at 1280px wide and staying there. Padding-top is 0 at every width so
 * the H1 centre is always height/2 and never jumps; the 360px floor keeps a 2-line H1
 * clear of the fixed header (132px on phones). travel.css sets a 70vh height and a 7rem
 * margin-top under 1024px/769px; both are overridden here. */
.agt-brand-fonts :is(.agt-hero-component, .agt-tour-hero) {
  height: clamp(360px, 18.75vw + 300px, 540px);
  min-height: 0;
  padding-top: 0;
}

@media (max-width: 1023px) {
  .agt-brand-fonts .agt-hero-component .agt-hero-component__content {
    margin-top: 0;
  }

  /* Find Trips bar stacks to ~284px under 1024px and would cover the H1 (Tamm,
   * 2026-09-29). Put the bar in flow under the title: the hero grows, the title
   * container keeps the normal hero height as its minimum and centres the H1 in
   * the space above the bar. At 1024px+ the bar is a slim out-of-flow strip again. */
  .agt-brand-fonts .agt-hero-component:has(.book-now) {
    height: auto;
  }

  .agt-brand-fonts .agt-hero-component:has(.book-now) > .agt-container {
    display: grid;
    align-items: center;
    flex: 1 0 auto;
    min-height: clamp(360px, 18.75vw + 300px, 540px);
  }

  .agt-brand-fonts .agt-hero-component .book-now {
    position: relative;
    inset: auto;
  }
}

@media (max-width: 768px) {
  .agt-brand-fonts .agt-hero-component h1,
  .agt-brand-fonts .agt-tour-hero__title,
  .agt-brand-fonts .hero__title {
    font-size: 2rem;
  }
}

/* Front-page hero height (Tamm, 2026-09-29): ~90vh, NOT the fluid clamp the inner-page heroes use.
 * An earlier version of this block forced the clamp height here and shrank the front hero to
 * 360-540px. Same numbers as blocks.css `.hero--90vh`: the announcement banner and the admin bar
 * sit above the hero in flow, so their height comes out of it. Height stays auto so a long title
 * or the in-flow Find Trips bar below 1024px can still grow it. */
.agt-brand-fonts .hero {
  height: auto;
  min-height: calc(90vh - var(--agt-announcement-height, 0px));
}

body.agt-brand-fonts:has(#wpadminbar) .hero {
  height: auto;
  min-height: calc(90vh - var(--agt-announcement-height, 0px) - var(--wp-admin--admin-bar--height, 32px));
}

@media (max-width: 782px) {
  body.agt-brand-fonts:has(#wpadminbar) .hero {
    min-height: calc(90vh - var(--agt-announcement-height, 0px) - var(--wp-admin--admin-bar--height, 46px));
  }
}

.agt-brand-fonts .hero .book-now {
  position: absolute;
  inset: auto 0 0;
  border-top: 0;
}

@media (max-width: 1023px) {
  .agt-brand-fonts .hero .book-now {
    position: relative;
    inset: auto;
  }
}

/* Header rules removed: travel.css:370 draws a 1px line under the top bar and
 * travel.css:658 a 1px vertical line right of the search toggle (between Book Now
 * and search). Neither is wanted under the brand look. */
.agt-brand-fonts .agt-header__top {
  border-bottom: 0;
}
.agt-brand-fonts .agt-header__search {
  border-right: 0;
}

/* Header top bar height (Tamm, 2026-09-29): travel.css min-height 68px becomes 2rem. */
.agt-brand-fonts .agt-header__top-inner {
  min-height: 2rem;
  padding-top: 1rem;
}

/* Header main row height (Tamm, 2026-09-29): travel.css min-height 70px becomes 4rem. */
.agt-brand-fonts .agt-header__bottom-inner {
  min-height: 4rem;
}

/* Search icon in the top row (Tamm, 2026-09-29). site-header.php prints the search
 * wrapper in the top row, between social links and phone, under this flag. The
 * top row is flex; the phone stays last (far right), search sits left of it. */
.agt-brand-fonts .agt-header__top-inner > .agt-header__search {
  margin-left: auto;
  margin-right: var(--agt-space-half);
}
/* Scrolled: travel.css hides the whole top bar, search included (Tamm, 2026-09-29:
 * the header must not grow taller to show the search when scrolled). The script at the
 * end of site-header.php moves the search wrapper into .agt-header__actions while
 * scrolled. It is the last thing to fold: hidden only when every nav item is folded
 * and the main row still overflows. */
.agt-brand-fonts .agt-header--search-folded .agt-header__search {
  display: none;
}
/* Folded search shows in the open hamburger panel instead (form printed in site-header.php,
 * class set by fit()). Hidden otherwise. */
.agt-brand-fonts .mobile-navigation__search {
  display: none;
}
.agt-brand-fonts .mobile-navigation.is-search-folded .mobile-navigation__search {
  display: flex;
  gap: var(--agt-space-half);
  padding: var(--agt-space-half) 24px 0;
}
.agt-brand-fonts .mobile-navigation__search-input {
  flex: 1;
  min-width: 0;
  background: var(--agt-color-surface);
  color: var(--agt-color-text);
}

/* Mobile side menu (Tamm, 2026-09-29): black panel, white text. travel.css paints it
 * the primary role token. Green on black is the
 * hover/current treatment. */
.agt-brand-fonts .mobile-navigation__inner {
  background-color: #000;
  color: #fff;
}
.agt-brand-fonts .mobile-navigation__header {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.agt-brand-fonts .mobile-navigation__logo img {
  filter: none; /* travel.css brightness(0) turned the white logo black */
}
.agt-brand-fonts .mobile-navigation__header button,
.agt-brand-fonts .mobile-navigation__list-item > a,
.agt-brand-fonts .mobile-navigation__summary,
.agt-brand-fonts .mobile-navigation__submenu li a {
  color: #fff;
}
.agt-brand-fonts .mobile-navigation__list-item {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.agt-brand-fonts .mobile-navigation__list-item:last-child {
  border-bottom: 0;
}
.agt-brand-fonts .mobile-navigation__list-item > a:hover,
.agt-brand-fonts .mobile-navigation__list-item > a:focus-visible,
.agt-brand-fonts .mobile-navigation__list-item > a[aria-current],
.agt-brand-fonts .mobile-navigation__summary:hover,
.agt-brand-fonts .mobile-navigation__details[open] > .mobile-navigation__summary,
.agt-brand-fonts .mobile-navigation__submenu li a:hover,
.agt-brand-fonts .mobile-navigation__submenu li a:focus-visible,
.agt-brand-fonts .mobile-navigation__submenu li a[aria-current] {
  color: var(--agt-color-primary);
  opacity: 1;
}
.agt-brand-fonts .mobile-navigation__header button:focus-visible,
.agt-brand-fonts .mobile-navigation__summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Get in touch page (agt_brand_fonts, Tamm 2026-09-28 + 2026-09-29)
 * Contact cards are cards: 2px #000 square outline like .agt-tour-card, one inner padding step, no
 * grey title panel, no giant labels. Card title = h2, rows = h3 (contact-line/render.php, flag on).
 * Form: white fields with a 2px #000 outline, intro at body size, box capped at 46rem. */
.agt-brand-fonts .card-contact {
  display: flex;
}
.agt-brand-fonts .card-contact__inner {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 2px solid var(--agt-color-frame);
  border-radius: 0;
  box-shadow: none;
  padding: var(--agt-space-half);
}
.agt-brand-fonts .card-contact__title {
  display: block;
  min-height: 0;
  background: none;
  padding: 0;
  margin: 0 0 var(--agt-space-half);
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  font-family: 'Objektiv Mk1', system-ui, sans-serif;
  font-weight: 700;
}
.agt-brand-fonts .card-contact__list {
  padding: 0;
  text-align: left;
}
.agt-brand-fonts .card-contact__list li {
  margin-bottom: var(--agt-space-half);
}
.agt-brand-fonts .card-contact__list li:last-child {
  margin-bottom: 0;
}
.agt-brand-fonts .card-contact__list-title {
  justify-content: flex-start;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 var(--agt-space-quarter);
}
.agt-brand-fonts .card-contact__list-title svg {
  width: 1.5rem;
  margin-right: var(--agt-space-quarter);
  flex: none;
}
.agt-brand-fonts .card-contact__list li a,
.agt-brand-fonts .card-contact__list li p {
  font-size: var(--agt-body-size);
}

.agt-brand-fonts .contact-form__inner {
  max-width: 46rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .agt-brand-fonts .contact-form__inner {
    padding-inline: 0; /* the 46rem cap is the field width */
  }
}
.agt-brand-fonts .contact-form__content {
  font-size: var(--agt-body-size);
}
.agt-brand-fonts .contact-form__form-item input,
.agt-brand-fonts .contact-form__form-item textarea {
  box-sizing: border-box;
  padding: var(--agt-space-quarter) var(--agt-space-half);
  border: 2px solid var(--agt-color-frame);
  border-radius: 0;
  background: var(--agt-color-surface);
  color: var(--agt-color-text);
  font-size: 1rem;
}
.agt-brand-fonts .contact-form__form-item input::placeholder,
.agt-brand-fonts .contact-form__form-item textarea::placeholder {
  color: inherit;
  opacity: 0.7;
}
.agt-brand-fonts .contact-form__form-item input:focus-visible,
.agt-brand-fonts .contact-form__form-item textarea:focus-visible {
  outline: 2px solid var(--agt-color-primary);
  outline-offset: 2px;
  border-color: var(--agt-color-frame);
}
.agt-brand-fonts .contact-form__form button[type="submit"] {
  border-radius: 0;
  background: var(--agt-color-primary);
  color: var(--agt-color-on-primary);
  font-weight: 800;
  text-transform: uppercase;
}

/* Current nav item (Tamm, 2026-09-29): travel.css:615 paints it green, unreadable over
 * the hero. White while the header is unscrolled; scrolled keeps its colour. The
 * underline shows only on the exact page (.is-exact, set in site-header.php). */
.agt-brand-fonts .agt-header:not(.agt-header--scrolled) .agt-header__nav-item.active > .agt-header__nav-link > a,
.agt-brand-fonts .agt-header:not(.agt-header--scrolled) .agt-header__nav-item.active > .agt-header__nav-link > span,
.agt-brand-fonts .agt-header:not(.agt-header--scrolled) .agt-header__nav-item.active > .agt-header__nav-link > .agt-header__dropdown-toggle {
  color: #fff;
}
.agt-brand-fonts .agt-header__nav-item.is-exact > .agt-header__nav-link > a,
.agt-brand-fonts .agt-header__nav-item.is-exact > .agt-header__nav-link > span {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* Captions copy Australian Geographic (ag-theme-2026 blob.scss "CAPTION COLOUR CONVENTION",
 * measured live 2026-09-29): grey band, 14px/1.4, weight 300, black, left. AG's #f4f2f0 band
 * and 14px have no AGT token; the sans slot is --font-primary, the text colour --agt-color-text.
 * Objektiv Mk1 has no 300 cut, so weight 300 renders as Regular. */
.agt-brand-fonts figcaption,
.agt-brand-fonts .wp-element-caption,
.agt-brand-fonts .author-info__caption {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--agt-color-text);
  text-align: left;
  background: #f4f2f0;
  padding: 0.5em 0.75em;
  margin: 0;
}

/* Image and caption flush, caption exactly as wide as the image. Copied from ag-theme-2026
 * css/blob.scss:2156-2161 (.wp-block-image display:table), :2209-2211 (img display:block,
 * max-width:100%) and :2044-2058 (figcaption display:table-caption, caption-side:bottom).
 * AGT-only: travel.css:7884 `.element-content__body img {margin: var(--space-6) 0}` put 24px
 * between image and caption; the img now has none and the figure carries half of it. Post body only. */
.agt-brand-fonts :is(.element-content__body, .agt-article__content) figure.wp-block-image {
  display: table;
  max-width: 100%;
  margin: var(--space-3) 0; /* half of travel.css:7884 --space-6, moved off the img onto the figure */
}
.agt-brand-fonts :is(.element-content__body, .agt-article__content) figure.wp-block-image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.agt-brand-fonts :is(.element-content__body, .agt-article__content) figure.wp-block-image figcaption {
  display: table-caption;
  caption-side: bottom;
}

/* Why AGT: no zoom on the slide image. travel.css:4917 runs zoomInOut (scale 1 to 1.1, 10s
 * loop). Only the image scales; the slide's translateX is the carousel slide, left alone. */
.agt-brand-fonts .why-agt__image,
.agt-brand-fonts .why-agt__image:hover,
.agt-brand-fonts .why-agt__slide:hover .why-agt__image {
  animation: none;
  transition: none;
  transform: none;
}

/* Arrows are Green Travel (Tamm, 2026-09-29, item 124): arrows that were black or grey on a
 * light background take the primary colour. White arrows on dark (dark hero, black nav panel,
 * lightbox) stay white. Colour only: no shape, size or position change. */
/* Nav chevron on the scrolled (white) header. Not while hovered/focused: that item is a black box
 * with white text (rule near "Nav hover/focus"), so the chevron stays white there. */
.agt-brand-fonts .agt-header--scrolled .agt-header__nav-item:not(:hover) .agt-header__dropdown-toggle:not(:focus-visible) {
  color: var(--agt-color-primary);
}
/* Tour gallery prev/next: black arrow on a white round button. */
.agt-brand-fonts .carousel__btn {
  color: var(--agt-color-primary);
}
/* Tour card location mark (the AGT arrow): dark grey on the white card. */
.agt-brand-fonts .agt-tour-card__triangle {
  color: var(--agt-color-primary);
}

/* =========================================================================
 * Hero bottom scrim = dark gradient + soft blur over the SAME band
 * (Tamm, 2026-09-29). Matches the menu scrim (.agt-header::before): blur
 * 2.8px, mask fades the blur out at the band's upper edge (no hard line).
 * The band is one fixed height, --agt-hero-scrim-bottom-height, shared by
 * gradient (::after) and blur (::before); no % of hero or viewport.
 * Covers .hero (front), .agt-hero-component (pages, destinations, experts,
 * posts), .agt-tours-hero, .agt-tour-hero, .agt-page-header--with-hero and
 * the .agt-*-hero__overlay divs (404). Hero-component blocks that pick their
 * own overlay (--overlay-*, --blur) keep the editor's choice.
 * Overlays are pointer-events: none; text and .book-now sit above them.
 * ========================================================================= */
.agt-brand-fonts {
  --agt-hero-scrim-bottom-height: 200px;
  --agt-hero-scrim-blur: 2.8px;
  --agt-hero-scrim-band: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  --agt-hero-scrim-mask: linear-gradient(to bottom, transparent 0%, #000 60%);
}

.agt-brand-fonts .hero::before,
.agt-brand-fonts .hero::after,
.agt-brand-fonts .agt-hero-component:not([class*="--overlay-"], .agt-hero-component--blur)::before,
.agt-brand-fonts .agt-hero-component:not([class*="--overlay-"], .agt-hero-component--blur)::after,
.agt-brand-fonts .agt-tours-hero::before,
.agt-brand-fonts .agt-tours-hero::after,
.agt-brand-fonts .agt-tour-hero::before,
.agt-brand-fonts .agt-tour-hero::after,
.agt-brand-fonts .agt-page-header--with-hero::before,
.agt-brand-fonts .agt-page-header--with-hero::after,
.agt-brand-fonts .agt-hero__overlay::before,
.agt-brand-fonts .agt-destination-hero__overlay::before,
.agt-brand-fonts .agt-article-hero__overlay::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--agt-hero-scrim-bottom-height);
  z-index: 1;
  pointer-events: none;
}

.agt-brand-fonts .agt-tour-hero::before,
.agt-brand-fonts .agt-tour-hero::after {
  z-index: 0; /* .agt-tour-hero__content is z-index 1 */
}

.agt-brand-fonts .hero::after,
.agt-brand-fonts .agt-hero-component:not([class*="--overlay-"], .agt-hero-component--blur)::after,
.agt-brand-fonts .agt-tours-hero::after,
.agt-brand-fonts .agt-tour-hero::after,
.agt-brand-fonts .agt-page-header--with-hero::after {
  background: var(--agt-hero-scrim-band);
}

.agt-brand-fonts .hero::before,
.agt-brand-fonts .agt-hero-component:not([class*="--overlay-"], .agt-hero-component--blur)::before,
.agt-brand-fonts .agt-tours-hero::before,
.agt-brand-fonts .agt-tour-hero::before,
.agt-brand-fonts .agt-page-header--with-hero::before,
.agt-brand-fonts .agt-hero__overlay::before,
.agt-brand-fonts .agt-destination-hero__overlay::before,
.agt-brand-fonts .agt-article-hero__overlay::before {
  backdrop-filter: blur(var(--agt-hero-scrim-blur));
  -webkit-backdrop-filter: blur(var(--agt-hero-scrim-blur));
  mask-image: var(--agt-hero-scrim-mask);
  -webkit-mask-image: var(--agt-hero-scrim-mask);
}

/* Overlay divs: the div itself is the gradient band; its ::before is the blur. */
.agt-brand-fonts .agt-hero__overlay,
.agt-brand-fonts .agt-destination-hero__overlay,
.agt-brand-fonts .agt-article-hero__overlay {
  inset: auto 0 0 0;
  height: var(--agt-hero-scrim-bottom-height);
  background: var(--agt-hero-scrim-band);
  pointer-events: none;
}

.agt-brand-fonts .agt-hero__overlay::before,
.agt-brand-fonts .agt-destination-hero__overlay::before,
.agt-brand-fonts .agt-article-hero__overlay::before {
  inset: 0;
  height: auto;
  z-index: 0;
}

/* Keep content above the blur: search bar (front) and page-header text. */
.agt-brand-fonts .hero .book-now {
  z-index: 2;
}

.agt-brand-fonts .agt-page-header--with-hero .agt-container {
  z-index: 2;
}