/* GoPatooh Adventure & Safaris — responsive public typography scale
   2026-10-07
   Loaded after page-specific public CSS so heading sizes remain consistent
   across homepage, market pages and all public inner pages. */

:root{
  --eu-type-display:clamp(35px,3.3vw,51px);
  --eu-type-display-compact:clamp(31px,3vw,43px);
  --eu-type-section:clamp(26px,2.15vw,35px);
  --eu-type-section-compact:clamp(23px,1.9vw,30px);
  --eu-type-editorial:clamp(22px,1.65vw,27px);
}

/* Primary page / hero titles. */
.tc-hero-copy h1,
.market-hero-copy h1,
.public-hero-small h1,
.tours-page-hero h1,
.collection-page-hero-copy h1,
.package-hero-copy h1,
.destination-hero-copy h1,
.experience-page-scope .experience-hero-copy h1,
.destination-catalog-hero h1,
.hotel-catalog-hero h1,
.hotel-hero-content h1,
.blog-index-hero h1,
.experience-catalog-hero h1,
.enquiry-intro h1,
.public-form-copy h1,
.contact-hero h1,
.contact-hero-compact h1,
.gallery-intro-section h1,
.legal-hero h1,
.pay-online-copy h1,
.quote-share-head h1,
.start-here-hero h1,
.wildlife-hero h1,
.wildlife-detail-copy h1,
.eu-about-hero h1,
.error404-copy h1,
.wishlist-hero h1{
  font-size:var(--eu-type-display);
  line-height:1.05;
  letter-spacing:-.03em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Smaller page-title contexts such as account/auth/thank-you views. */
.client-auth-card h1,
.client-account-head h1,
.enquiry-thankyou-card h1,
.quote-share-error h1,
.client-quote-document-head h1{
  font-size:var(--eu-type-display-compact);
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Main section headings across the public website. */
.section-heading h2,
.home-intro h2,
.experience-grid>div:first-child h2,
.departures-copy h2,
.cta-section h2,
.market-section-heading h2,
.market-cta h2,
.market-planning-head h2,
.package-section-heading h2,
.package-list-heading h2,
.package-related-heading h2,
.destination-section-heading h2,
.experience-page-scope .experience-section-heading h2,
.destination-landing-copy-heading h2,
.destination-catalog-cta h2,
.blog-index-planning h2,
.experience-catalog-toolbar-copy h2,
.collection-editorial-heading h2,
.contact-section-heading h2,
.contact-form-heading h2,
.contact-map-copy h2,
.contact-final-cta h2,
.start-here-section-head h2,
.start-here-next h2,
.wildlife-results-heading h2,
.wildlife-section-heading h2,
.wildlife-planning-cta h2,
.wildlife-editorial h2,
.eu-about-prose h2,
.eu-about-section-head h2,
.eu-about-responsible h2,
.eu-about-faq-heading h2,
.eu-about-cta h2,
.hotel-section-heading h2,
.hotel-final-cta h2,
.destination-enquiry-head h2,
.experience-catalog-editorial-heading h2,
.experience-catalog-cta h2,
.contact-page-compact .contact-section-heading h2,
.contact-page-compact .contact-form-heading h2,
.contact-map-section-compact .contact-map-header h2{
  font-size:var(--eu-type-section);
  line-height:1.12;
  letter-spacing:-.022em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Experience collection accordions — intentionally calmer than page heroes. */
.experience-page-scope .experience-accordion-heading-copy > strong{
  font-size:clamp(26px,2.05vw,34px);
  line-height:1.12;
  letter-spacing:-.018em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Long-form / editorial subheadings. */
.collection-editorial-prose h2,
.contact-editorial-prose h2,
.legal-prose h2,
.start-here-copy h2,
.experience-page-scope .experience-prose h2,
.blog-article-prose h2,
.hotel-property-description .hotel-rich-copy h2{
  font-size:var(--eu-type-editorial);
  line-height:1.18;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.collection-editorial-prose h3,
.contact-editorial-prose h3,
.experience-page-scope .experience-prose h3,
.blog-article-prose h3,
.hotel-property-description .hotel-rich-copy h3{
  font-size:clamp(20px,1.45vw,25px);
  line-height:1.22;
}

/* Compact component headings that previously approached full section-title scale. */
.hotel-room-title-row h3,
.hotel-property-description-heading h3,
.hotel-booking-dialog-property h2,
.blog-index-card.is-lead h2,
.pay-online-card h2,
.pay-online-help h2{
  font-size:var(--eu-type-section-compact);
  line-height:1.16;
  letter-spacing:-.012em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* A few oversized feature headings that are not covered by the shared section classes. */
.cross-border-feature h3,
.destination-showcase-copy h3,
.eu-about-platform-card h3{
  font-size:clamp(23px,1.85vw,30px);
  line-height:1.16;
}

.testimonial-section blockquote{
  font-size:clamp(26px,2.45vw,34px);
  line-height:1.32;
}

/* Tablet: reduce display hierarchy before columns start stacking. */
@media(max-width:980px){
  :root{
    --eu-type-display:clamp(31px,4.4vw,41px);
    --eu-type-display-compact:clamp(28px,4vw,36px);
    --eu-type-section:clamp(24px,3vw,30px);
    --eu-type-section-compact:clamp(22px,2.7vw,27px);
    --eu-type-editorial:clamp(21px,2.7vw,25px);
  }

  .experience-page-scope .experience-accordion-heading-copy > strong{
    font-size:clamp(25px,3.6vw,32px);
  }
}

/* Phones: keep headings readable without taking over the viewport. */
@media(max-width:620px){
  :root{
    --eu-type-display:clamp(28px,7.3vw,35px);
    --eu-type-display-compact:clamp(26px,6.7vw,32px);
    --eu-type-section:clamp(22px,5.6vw,27px);
    --eu-type-section-compact:clamp(20px,5.2vw,25px);
    --eu-type-editorial:clamp(20px,5vw,24px);
  }

  .experience-page-scope .experience-accordion-heading-copy > strong{
    font-size:clamp(23px,6.1vw,28px);
    line-height:1.15;
  }

  .experience-page-scope .experience-accordion-heading-copy > small{
    font-size:11px;
    line-height:1.55;
  }

  .cross-border-feature h3,
  .destination-showcase-copy h3,
  .eu-about-platform-card h3{
    font-size:23px;
  }

  .testimonial-section blockquote{
    font-size:26px;
  }
}

@media(max-width:420px){
  :root{
    --eu-type-display:clamp(27px,7.4vw,32px);
    --eu-type-display-compact:clamp(25px,6.9vw,30px);
    --eu-type-section:clamp(21px,5.8vw,25px);
    --eu-type-editorial:clamp(19px,5.3vw,23px);
  }

  .experience-page-scope .experience-accordion-heading-copy > strong{
    font-size:clamp(22px,6.5vw,26px);
  }
}

/* Site-wide heading weight: apply after all page-specific typography rules.
   This stylesheet is shared by the homepage, market pages and inner pages.
   Keep externally embedded Trustindex widget typography unmodified. */
body :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.ti-widget *):not(.trustindex-widget *) {
  font-weight: 600 !important;
}

/* GoPatooh type hierarchy: applied last by the shared public head templates.
   Unified page-title size takes precedence over inherited large hero declarations.
   Individual card headings retain their smaller page-specific sizes. */
body h1 {
  font-size: var(--eu-type-display) !important;
  line-height: 1.13 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
  overflow-wrap: break-word;
}
body :is(
  .gp-about-reimagined h2,
  .gopatooh-approach-heading h2,
  .package-section-heading h2,
  .destination-section-heading h2,
  .destination-hero-refresh .destination-hero-copy h2,
  .destination-landing-copy-heading h2,
  .experience-page-scope .experience-section-heading h2,
  .contact-section-heading h2,
  .contact-page .contact-form-heading h2,
  .eu-about-section-head h2,
  .legal-section-heading h2,
  .market-section-heading h2,
  .section-heading h2,
  .gp-about-section-intro h2,
  .gp-about-story-heading h2,
  .gp-about-faq-side h2,
  .gp-about-final h2
) {
  font-size: var(--eu-type-section) !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* About Us display is a two-column editorial headline, not a full-bleed billboard. */
body .gp-about-reimagined .gp-about-opening h1 {
  font-size: var(--eu-type-display) !important;
  max-width: 17ch;
}
/* Avoid oversized line breaks on narrow phones without shrinking ordinary text. */
@media (max-width: 767px) {
  body h1 { line-height: 1.17 !important; }
  body :is(.gp-about-reimagined h2, .gopatooh-approach-heading h2,
           .package-section-heading h2, .destination-section-heading h2,
           .section-heading h2) { line-height: 1.23 !important; }
}