/* =========================================================
   DOTS MEDIA
   SITE-WIDE CONSISTENCY (inner pages)
   Same rules the home page uses (see the "HOME PAGE" blocks at
   the end of responsive.css): one heading size, one section
   spacing value, one content edge. Loaded last.
   ========================================================= */

:root {
    --site-title-size: clamp(30px, 3.4vw, 46px);
    --site-section-space: clamp(20px, 2.5vw, 32px);
}


/* ---------------------------------------------------------
   HEADINGS — page title (h1) and section titles (h2)
   #primary beats every page stylesheet's class selectors.
   Small h2s that are really card labels/subtitles are left out.
   --------------------------------------------------------- */

body:not(.home) #primary h1,
body:not(.home) #primary h2:not(.region-detail-subtitle):not(.contact-info-card h2) {
    font-size: var(--site-title-size);
    line-height: 1.1;
    letter-spacing: -1px;
}

/* Locations page sets its heading sizes with !important */
body:not(.home) #primary .locations-intro-left h1,
body:not(.home) #primary .locations-title {
    font-size: var(--site-title-size) !important;
    line-height: 1.1 !important;
}


/* ---------------------------------------------------------
   SECTION SPACING
   Every section after the hero gets the same top/bottom space.
   The hero keeps its top offset (it clears the fixed header).
   --------------------------------------------------------- */

body:not(.home) #primary > section:not(:first-child),
body:not(.home) #primary > div > section:not(:first-child) {
    padding-top: var(--site-section-space);
    padding-bottom: var(--site-section-space);
}

body:not(.home) #primary > section:first-child,
body:not(.home) #primary > div > section:first-child {
    padding-bottom: var(--site-section-space);
}


/* ---------------------------------------------------------
   CONTENT EDGES — same box as the header and home page:
   max 1400px wide, 60px from the screen edge on desktop,
   40px on tablet, 20px / 16px on phones.
   --------------------------------------------------------- */

@media (min-width: 1101px) {

    body:not(.home) .about-container,
    body:not(.home) .contact-container,
    body:not(.home) .locations-container {
        width: min(1400px, calc(100% - 120px));
        max-width: none;
    }

    body:not(.home) .region-detail-container {
        max-width: 1520px;
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {

    body:not(.home) .about-container,
    body:not(.home) .contact-container,
    body:not(.home) .locations-container {
        width: calc(100% - 80px);
        max-width: none;
    }
}

@media (max-width: 480px) {

    body:not(.home) .about-container,
    body:not(.home) .contact-container,
    body:not(.home) .locations-container {
        width: calc(100% - 32px);
    }
}


/* Contact page repeats its 110px header offset in every section;
   only the first one needs it. */
body:not(.home) .contact-page-content > section:not(:first-child) .contact-container {
    padding-top: 0;
}


/* Region pages: the "other regions" strip has no inner container,
   so cap it with side padding instead. */
@media (min-width: 1101px) {

    body:not(.home) .other-regions-section {
        padding-left: max(60px, calc((100% - 1400px) / 2));
        padding-right: max(60px, calc((100% - 1400px) / 2));
    }
}


/* ---------------------------------------------------------
   TEXT SIZES — inner pages brought up to the home page scale:
   body 16px, card text 14px, buttons/links 14px, tags 13px,
   card titles 15–17px. Selectors generated from a measured
   audit of every text element under 12.5px (some page CSS uses
   !important, hence !important here).
   --------------------------------------------------------- */

body:not(.home) #primary.about-page .map-location small {
    font-size: 11px !important;
    line-height: 1.4 !important;
}

body:not(.home) #primary.about-page span.about-eyebrow,
body:not(.home) #primary.about-page span.location-number,
body:not(.home) #primary.contact-page span.contact-eyebrow,
body:not(.home) #primary.contact-page .contact-field label,
body:not(.home) #primary.contact-page span.contact-info-label,
body:not(.home) #primary.contact-page span.contact-location-number,
body:not(.home) #primary.custom-booth-page div.cb-hero-tag,
body:not(.home) #primary.custom-booth-page div.cb-eyebrow,
body:not(.home) #primary.modular-booth-page div.mb-eyebrow,
body:not(.home) #primary.dd-page .dd-field label,
body:not(.home) #primary.dd-page label.dd-service-option,
body:not(.home) #primary.dd-page div.dd-contact-info-label,
body:not(.home) #primary.cp-page .cp-field label,
body:not(.home) #primary.cp-page label.cp-service-option,
body:not(.home) #primary.cp-page div.cp-contact-info-label,
body:not(.home) #primary.sb-page span.sb-service-label,
body:not(.home) #primary.sb-page .sb-field label,
body:not(.home) #primary.sb-page label.sb-service-option,
body:not(.home) #primary.sb-page div.sb-contact-info-label,
body:not(.home) #primary.sd-page .sd-field label,
body:not(.home) #primary.sd-page label.sd-service-option,
body:not(.home) #primary.sd-page div.sd-contact-info-label,
body:not(.home) #primary.gg-page span.gg-tag-sep,
body:not(.home) #primary.gg-page span.gg-hero-stat-label,
body:not(.home) #primary.gg-page span.gg-venue-card-label,
body:not(.home) #primary.gg-page .gg-field label,
body:not(.home) #primary.gg-page label.gg-service-option,
body:not(.home) #primary.gg-page div.gg-contact-info-label,
body:not(.home) #primary span.legend-num,
body:not(.home) #primary div.map-legend-item,
body:not(.home) #primary div.region-destinations-label,
body:not(.home) #primary.region-detail-page div.region-detail-tag,
body:not(.home) #primary.region-detail-page div.selected-work-tag,
body:not(.home) #primary.region-detail-page div.destinations-heading,
body:not(.home) #primary.region-detail-page div.other-regions-label,
body:not(.home) #primary.region-detail-page div.cta-tag,
body:not(.home) #primary.locations-page span.locations-deliverable-number {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

body:not(.home) #primary.about-page a.about-btn,
body:not(.home) #primary.about-page a.outline-btn,
body:not(.home) #primary.about-page a.outline-btn span,
body:not(.home) #primary.contact-page button.contact-submit,
body:not(.home) #primary.contact-page button.contact-submit span,
body:not(.home) #primary.contact-page a.contact-outline-btn,
body:not(.home) #primary.contact-page a.contact-outline-btn span,
body:not(.home) #primary.contact-page a.contact-btn,
body:not(.home) #primary.contact-page a.contact-btn span,
body:not(.home) #primary.custom-booth-page a.cb-btn-primary,
body:not(.home) #primary.custom-booth-page a.cb-btn-primary span,
body:not(.home) #primary.custom-booth-page a.cb-btn-secondary,
body:not(.home) #primary.modular-booth-page a.mb-btn,
body:not(.home) #primary.modular-booth-page a.mb-btn span,
body:not(.home) #primary.region-detail-page a.region-cta-button,
body:not(.home) #primary.region-detail-page a.region-cta-button span,
body:not(.home) #primary.upcoming-trade-shows-page a.ts-btn-primary,
body:not(.home) #primary.upcoming-trade-shows-page a.ts-btn-primary span,
body:not(.home) #primary.upcoming-trade-shows-page button.ts-filter,
body:not(.home) #primary.upcoming-trade-shows-page a.ts-btn-outline,
body:not(.home) #primary.upcoming-trade-shows-page a.ts-btn-outline span,
body:not(.home) #primary.locations-page a.locations-btn-primary,
body:not(.home) #primary.locations-page a.locations-btn-secondary {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

body:not(.home) #primary.about-page a.about-text-link,
body:not(.home) #primary.about-page .about-text-link span,
body:not(.home) #primary.about-page a.location-link,
body:not(.home) #primary.about-page .location-link span,
body:not(.home) #primary.contact-page .contact-check span,
body:not(.home) #primary.contact-page .contact-info-item a,
body:not(.home) #primary.contact-page a.contact-email-link,
body:not(.home) #primary.contact-page .contact-email-link span,
body:not(.home) #primary.contact-page span.contact-location-link,
body:not(.home) #primary.contact-page .contact-global-meta span,
body:not(.home) #primary.contact-page .contact-global-meta div,
body:not(.home) #primary.custom-booth-page div.cb-statement-note,
body:not(.home) #primary.modular-booth-page div.mb-statement-note,
body:not(.home) #primary.dd-page span.dd-structure-callout,
body:not(.home) #primary.region-detail-page .region-breadcrumb a,
body:not(.home) #primary.region-detail-page .region-breadcrumb span,
body:not(.home) #primary.region-detail-page .region-breadcrumb strong,
body:not(.home) #primary.region-detail-page a.all-regions-link,
body:not(.home) #primary.region-detail-page a.region-tab,
body:not(.home) #primary.region-detail-page .destinations-list span,
body:not(.home) #primary.region-detail-page .destinations-list b,
body:not(.home) #primary.region-detail-page .other-regions-nav a,
body:not(.home) #primary.upcoming-trade-shows-page .ts-logo-box span,
body:not(.home) #primary.upcoming-trade-shows-page a.ts-show-link,
body:not(.home) #primary.locations-page .locations-card-content span,
body:not(.home) #primary.locations-page .locations-barrier-row span {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body:not(.home) #primary.about-page .location-card-content p,
body:not(.home) #primary.contact-page .contact-info-item p,
body:not(.home) #primary.contact-page p.contact-info-note,
body:not(.home) #primary.contact-page .contact-location-card p,
body:not(.home) #primary.upcoming-trade-shows-page p.ts-show-date,
body:not(.home) #primary.upcoming-trade-shows-page p.ts-show-location,
body:not(.home) #primary.upcoming-trade-shows-page p.ts-show-venue,
body:not(.home) #primary.locations-page .locations-card-content p,
body:not(.home) #primary.locations-page .locations-market-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

body:not(.home) #primary.locations-page span.locations-work-name {
    font-size: 15px !important;
    line-height: 1.3 !important;
}

body:not(.home) #primary.locations-page span.locations-deliverable-name {
    font-size: 16px !important;
    line-height: 1.3 !important;
}

body:not(.home) #primary.about-page .about-cta-inner p,
body:not(.home) #primary.contact-page p.contact-intro,
body:not(.home) #primary.contact-page .contact-global-heading p,
body:not(.home) #primary.contact-page .contact-final-inner p,
body:not(.home) #primary.region-detail-page p.region-detail-description,
body:not(.home) #primary.region-detail-page p.region-cta-description,
body:not(.home) #primary.upcoming-trade-shows-page .ts-section-heading p,
body:not(.home) #primary.upcoming-trade-shows-page .ts-cta-content p,
body:not(.home) #primary.locations-page .locations-intro-right p,
body:not(.home) #primary.locations-page .locations-market-heading p,
body:not(.home) #primary.locations-page .locations-barrier-content p,
body:not(.home) #primary.locations-page .locations-cta-right p {
    font-size: 16px !important;
    line-height: 1.7 !important;
}

body:not(.home) #primary.about-page .location-card-content h3,
body:not(.home) #primary.contact-page .contact-location-card h3,
body:not(.home) #primary.locations-page .locations-card-content h3,
body:not(.home) #primary.locations-page .locations-market-card h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
}

body:not(.home) #primary.contact-page .contact-field span {
    font-size: inherit !important;
}


/* ---------------------------------------------------------
   FORM FIELDS — 14px text in 46px fields, like the other
   service-page forms and the "Get in touch" popup.
   --------------------------------------------------------- */

body:not(.home) #primary :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 14px !important;
}

body:not(.home) #primary :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
    height: 46px !important;
}

body:not(.home) #primary textarea {
    min-height: 110px !important;
}


/* ---------------------------------------------------------
   HERO TOP OFFSET — a few heroes started under the fixed
   header (81–85px tall), hiding their first line.
   --------------------------------------------------------- */

body:not(.home) .region-detail-container {
    padding-top: 120px !important;
}

@media (max-width: 1199px) {
    body:not(.home) .region-detail-container {
        padding-top: 110px !important;
    }
}

@media (max-width: 767px) {
    body:not(.home) .region-detail-container {
        padding-top: 100px !important;
    }
}

@media (max-width: 600px) {
    body:not(.home) .ts-hero {
        padding-top: 110px;
    }
}


/* ---------------------------------------------------------
   DOTTED WORLD MAPS (About, Contact) — cropped to the band
   with land (y 8%–76% of the map) so they're not so tall.
   The inner layer is the full map; pins keep their % positions.
   --------------------------------------------------------- */

body:not(.home) :is(.global-map, .contact-map) {
    aspect-ratio: 147 / 47.6 !important;
    overflow: hidden;
}

body:not(.home) :is(.global-map, .contact-map) > .map-crop {
    position: absolute;
    left: 0;
    top: -11.8%;

    width: 100%;
    aspect-ratio: 147 / 70;
}

body:not(.home) :is(.global-map, .contact-map) > .map-crop > img {
    width: 100%;
    height: 100%;
}


/* ---------------------------------------------------------
   LOCATIONS PAGE — a little more air between sections
   --------------------------------------------------------- */

body:not(.home) #primary.locations-page > section:not(:first-child) {
    padding-top: clamp(32px, 4vw, 56px);
    padding-bottom: clamp(32px, 4vw, 56px);
}