/**
 * Grading (page 52756, .tsa-gr) + FAQs (page 52721, .tsa-faq).
 *
 * Shared teal/cream info-page styling; markup in
 * templates/page-grading.html and templates/page-faqs.html.
 * FAQ tab switching is assets/js/faqs.js; accordions are native
 * <details>/<summary> — no other JS.
 */

.tsa-gr,
.tsa-faq {
    --in-cream: #F4EFE7;
    --in-card: #FBF8F2;
    --in-teal: #0E4A4E;
    --in-teal-mid: #146A6F;
    --in-amber: #E39A3B;
    --in-gold: #E9B96A;
    --in-ochre: #C77E22;
    --in-green: #4E8A47;
    --in-clay: #C25B4A;
    --in-ink: #1C2422;
    --in-body: #243330;
    --in-head-font: var(--tsa-font-display);
    --in-body-font: var(--tsa-font-body);
    --in-pad-x: clamp(20px, 4vw, 48px);
    background: var(--in-cream);
    color: var(--in-ink);
    font-family: var(--in-body-font);
    overflow: clip;
}

.tsa-gr ::selection,
.tsa-faq ::selection {
    background: var(--in-teal);
    color: var(--in-cream);
}

.tsa-gr a,
.tsa-faq a {
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tsa-gr h1,
.tsa-gr h2,
.tsa-gr h3,
.tsa-faq h1,
.tsa-faq h2,
.tsa-faq h3 {
    font-family: var(--in-head-font);
    font-weight: var(--tsa-font-display-weight, 800);
    padding: 0;
    margin: 0;
    color: var(--in-teal);
}

/* Dark photo hero (shared) */

.tsa-gr .tsa-in-hero,
.tsa-faq .tsa-in-hero {
    position: relative;
    min-height: 52vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}

.tsa-faq .tsa-in-hero {
    min-height: 44vh;
}

.tsa-gr .tsa-in-hero::before,
.tsa-faq .tsa-in-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 42, 41, 0.2) 30%, rgba(11, 42, 41, 0.88) 100%);
}

.tsa-gr .tsa-in-hero__inner,
.tsa-faq .tsa-in-hero__inner {
    position: relative;
    padding: calc(var(--wp--custom--header-height, 83px) + 40px) var(--in-pad-x) 56px;
    max-width: 900px;
}

.tsa-gr .tsa-in-hero .tsa-in-eyebrow,
.tsa-faq .tsa-in-hero .tsa-in-eyebrow {
    color: var(--in-gold);
}

.tsa-gr .tsa-in-eyebrow,
.tsa-faq .tsa-in-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.tsa-gr .tsa-in-hero h1,
.tsa-faq .tsa-in-hero h1 {
    font-size: clamp(2.4rem, 5.4vw, 4.75rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--in-cream);
    margin: 0 0 16px;
}

.tsa-gr .tsa-in-hero p,
.tsa-faq .tsa-in-hero p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(244, 239, 231, 0.88);
    max-width: 54ch;
    margin: 0;
}

/* ==================================================== Grading (.tsa-gr) */

.tsa-gr .tsa-gr-intro {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(52px, 7vw, 72px) 32px 30px;
    box-sizing: border-box;
}

.tsa-gr .tsa-gr-intro p {
    font-size: 18px;
    line-height: 1.78;
    color: var(--in-body);
    margin: 0 0 20px;
}

.tsa-gr .tsa-gr-callout {
    background: var(--in-teal);
    color: var(--in-cream);
    border-radius: 16px;
    padding: 24px 28px;
    font-size: 16.5px;
    line-height: 1.6;
    margin-top: 6px;
}

.tsa-gr .tsa-gr-callout strong {
    color: var(--in-gold);
}

/* Sticky grade chip bar */

.tsa-gr .tsa-gr-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--in-cream);
}

.tsa-gr .tsa-gr-nav__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--in-pad-x);
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(14, 74, 78, 0.14);
}

.tsa-gr .tsa-gr-nav a {
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
}

.tsa-gr .tsa-gr-nav a.g2 { background: var(--in-green); color: #F3F6EE; }
.tsa-gr .tsa-gr-nav a.g3 { background: var(--in-teal-mid); color: #EAF3F2; }
.tsa-gr .tsa-gr-nav a.g4 { background: var(--in-ochre); color: #FDF8EF; }
.tsa-gr .tsa-gr-nav a.g5 { background: var(--in-clay); color: #FBEEEA; }

.tsa-gr .tsa-gr-nav a.tours {
    border: 1.5px solid rgba(14, 74, 78, 0.3);
    color: var(--in-teal);
}

.tsa-gr .tsa-gr-nav a:hover {
    filter: brightness(1.08);
}

.tsa-gr .tsa-gr-grade1 {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px var(--in-pad-x) 6px;
    box-sizing: border-box;
}

.tsa-gr .tsa-gr-grade1 > div {
    background: var(--in-card);
    border: 1px dashed rgba(14, 74, 78, 0.3);
    border-radius: 16px;
    padding: 22px 26px;
    font-size: 16px;
    color: rgba(28, 36, 34, 0.7);
}

.tsa-gr .tsa-gr-grade1 strong {
    color: var(--in-teal);
}

/* Grade cards */

.tsa-gr .tsa-gr-grades {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px var(--in-pad-x) clamp(72px, 9vw, 100px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.tsa-gr .tsa-gr-grade {
    background: var(--in-card);
    border: 1px solid rgba(14, 74, 78, 0.12);
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    scroll-margin-top: 90px;
}

.tsa-gr .tsa-gr-grade__body {
    padding: clamp(26px, 3vw, 36px) clamp(24px, 3.4vw, 40px);
}

.tsa-gr .tsa-gr-grade__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.tsa-gr .tsa-gr-grade__num {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--in-head-font);
    font-weight: var(--tsa-font-display-weight, 800);
    font-size: 26px;
    flex-shrink: 0;
}

.tsa-gr .tsa-gr-grade--2 .tsa-gr-grade__num { background: var(--in-green); color: #F3F6EE; }
.tsa-gr .tsa-gr-grade--3 .tsa-gr-grade__num { background: var(--in-teal-mid); color: #EAF3F2; }
.tsa-gr .tsa-gr-grade--4 .tsa-gr-grade__num { background: var(--in-ochre); color: #FDF8EF; }
.tsa-gr .tsa-gr-grade--5 .tsa-gr-grade__num { background: var(--in-clay); color: #FBEEEA; }

.tsa-gr .tsa-gr-grade__title {
    font-size: 26px;
    line-height: 1;
}

.tsa-gr .tsa-gr-grade__label {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}

.tsa-gr .tsa-gr-grade--2 .tsa-gr-grade__label { color: var(--in-green); }
.tsa-gr .tsa-gr-grade--3 .tsa-gr-grade__label { color: var(--in-teal-mid); }
.tsa-gr .tsa-gr-grade--4 .tsa-gr-grade__label { color: var(--in-ochre); }
.tsa-gr .tsa-gr-grade--5 .tsa-gr-grade__label { color: var(--in-clay); }

.tsa-gr .tsa-gr-grade__body > p {
    font-size: 16px;
    line-height: 1.72;
    color: var(--in-body);
    margin: 0 0 18px;
}

.tsa-gr .tsa-gr-facts {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tsa-gr .tsa-gr-fact__label,
.tsa-gr .tsa-gr-loclabel {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(28, 36, 34, 0.5);
}

.tsa-gr .tsa-gr-fact__value {
    font-family: var(--in-head-font);
    font-weight: var(--tsa-font-display-weight, 800);
    font-size: 19px;
    color: var(--in-teal);
}

.tsa-gr .tsa-gr-loclabel {
    margin-bottom: 8px;
}

.tsa-gr .tsa-gr-locs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tsa-gr .tsa-gr-locs span {
    background: #EFE7D9;
    color: var(--in-teal);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;
}

.tsa-gr .tsa-gr-grade__media {
    background-size: cover;
    background-position: center;
    min-height: 280px;
}

/* Trips & tours */

.tsa-gr .tsa-gr-tours {
    background: var(--in-teal);
    padding: clamp(64px, 8vw, 90px) var(--in-pad-x);
    scroll-margin-top: 70px;
}

.tsa-gr .tsa-gr-tours__inner {
    max-width: 900px;
    margin: 0 auto;
}

.tsa-gr .tsa-gr-tours h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    color: var(--in-cream);
    margin: 0 0 16px;
}

.tsa-gr .tsa-gr-tours > .tsa-gr-tours__inner > p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(244, 239, 231, 0.82);
    margin: 0 0 30px;
}

.tsa-gr .tsa-gr-tourgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.tsa-gr .tsa-gr-tourcard {
    background: rgba(244, 239, 231, 0.07);
    border: 1px solid rgba(244, 239, 231, 0.16);
    border-radius: 16px;
    padding: 24px;
}

.tsa-gr .tsa-gr-tourcard b {
    font-family: var(--in-head-font);
    font-weight: var(--tsa-font-display-weight, 800);
    font-size: 22px;
    display: block;
}

.tsa-gr .tsa-gr-tourcard b.easy { color: #7FBF77; }
.tsa-gr .tsa-gr-tourcard b.moderate { color: var(--in-gold); }
.tsa-gr .tsa-gr-tourcard b.hard { color: var(--in-amber); }

.tsa-gr .tsa-gr-tourcard span {
    font-size: 15px;
    color: rgba(244, 239, 231, 0.82);
    margin-top: 6px;
    display: block;
}

.tsa-gr .tsa-gr-tours__foot {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(244, 239, 231, 0.72);
    margin: 30px 0 0;
}

.tsa-gr .tsa-gr-tours__foot a {
    color: var(--in-gold);
}

.tsa-gr .tsa-gr-tours__foot a:hover {
    color: var(--in-cream);
}

/* Amber CTA band */

.tsa-gr .tsa-gr-cta {
    background: var(--in-amber);
    padding: clamp(64px, 8vw, 88px) var(--in-pad-x);
}

.tsa-gr .tsa-gr-cta__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.tsa-gr .tsa-gr-cta h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    color: var(--in-ink);
    margin: 0 0 14px;
    line-height: 1.08;
}

.tsa-gr .tsa-gr-cta p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(28, 36, 34, 0.8);
    margin: 0 0 30px;
}

.tsa-gr .tsa-gr-cta a {
    display: inline-block;
    background: var(--in-teal);
    color: var(--in-cream);
    padding: 15px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
}

.tsa-gr .tsa-gr-cta a:hover {
    background: var(--in-cream);
    color: var(--in-teal);
}

/* ==================================================== FAQs (.tsa-faq) */

.tsa-faq .tsa-faq-tabs {
    max-width: 1000px;
    margin: 0 auto;
    padding: 48px 32px 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--in-cream);
}

.tsa-faq .tsa-faq-tabs__inner {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(14, 74, 78, 0.14);
}

.tsa-faq .tsa-faq-tab {
    background: transparent;
    color: var(--in-teal);
    border: 1.5px solid var(--in-teal);
    padding: 10px 22px;
    border-radius: 999px;
    font-family: var(--in-head-font);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.tsa-faq .tsa-faq-tab.is-active {
    background: var(--in-teal);
    color: var(--in-cream);
}

.tsa-faq .tsa-faq-panels {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 32px 40px;
    box-sizing: border-box;
}

.tsa-faq .tsa-faq-panel {
    display: none;
}

.tsa-faq .tsa-faq-panel.is-active {
    display: block;
}

.tsa-faq .tsa-faq-panel__intro {
    font-size: 15px;
    color: rgba(28, 36, 34, 0.65);
    margin: 0 0 22px;
    line-height: 1.6;
}

.tsa-faq .tsa-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tsa-faq details {
    background: var(--in-card);
    border: 1px solid rgba(14, 74, 78, 0.12);
    border-radius: 16px;
    overflow: hidden;
}

.tsa-faq summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    cursor: pointer;
    font-family: var(--in-head-font);
    font-weight: 700;
    font-size: 18px;
    color: var(--in-teal);
}

.tsa-faq summary::-webkit-details-marker {
    display: none;
}

.tsa-faq summary::after {
    content: "+";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(14, 74, 78, 0.1);
    color: var(--in-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--in-body-font);
}

.tsa-faq details[open] summary::after {
    content: "\2013";
    background: var(--in-amber);
    color: #0E3A38;
}

.tsa-faq details > div {
    padding: 0 26px 24px;
    font-size: 16px;
    line-height: 1.72;
    color: var(--in-body);
}

.tsa-faq details > div p {
    margin: 0 0 14px;
}

.tsa-faq details > div p:last-child {
    margin-bottom: 0;
}

/* Membership CTA panel */

.tsa-faq .tsa-faq-cta {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 32px clamp(64px, 8vw, 90px);
    box-sizing: border-box;
}

.tsa-faq .tsa-faq-cta__panel {
    background: var(--in-teal);
    border-radius: 22px;
    padding: clamp(30px, 4vw, 44px) clamp(28px, 4.2vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.tsa-faq .tsa-faq-cta__panel .tsa-in-eyebrow {
    color: var(--in-gold);
    margin-bottom: 10px;
    letter-spacing: 0.16em;
    font-size: 12.5px;
}

.tsa-faq .tsa-faq-cta__panel h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--in-cream);
    margin: 0 0 8px;
    line-height: 1.05;
}

.tsa-faq .tsa-faq-cta__panel p {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(244, 239, 231, 0.78);
    margin: 0;
    max-width: 52ch;
}

.tsa-faq .tsa-faq-cta__panel > a {
    background: var(--in-amber);
    color: #0E3A38;
    padding: 15px 30px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.tsa-faq .tsa-faq-cta__panel > a:hover {
    background: var(--in-cream);
    color: #0E3A38;
}

.tsa-faq .tsa-faq-cta__blog {
    text-align: center;
    font-size: 15px;
    color: rgba(28, 36, 34, 0.6);
    margin: 30px 0 0;
}

.tsa-faq .tsa-faq-cta__blog a {
    color: var(--in-teal);
    font-weight: 600;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 900px) {
    .tsa-gr .tsa-gr-grade {
        grid-template-columns: 1fr;
    }

    .tsa-gr .tsa-gr-grade__media {
        min-height: 220px;
        order: -1;
    }

    .tsa-gr .tsa-gr-tourgrid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
 * Footer recolour — amber subscribe + deep-teal links (pages 52756 + 52721)
 * ------------------------------------------------------------------------- */

body.page-id-52756 footer.wp-block-template-part .wp-block-cover.is-light .wp-block-cover__image-background,
body.page-id-52721 footer.wp-block-template-part .wp-block-cover.is-light .wp-block-cover__image-background {
    display: none !important;
}

body.page-id-52756 footer.wp-block-template-part .wp-block-cover.is-light,
body.page-id-52721 footer.wp-block-template-part .wp-block-cover.is-light {
    background: #F4EFE7;
}

body.page-id-52756 footer.wp-block-template-part .wp-block-cover.is-light .wp-block-cover__background,
body.page-id-52721 footer.wp-block-template-part .wp-block-cover.is-light .wp-block-cover__background {
    background-color: #F4EFE7 !important;
}

body.page-id-52756 footer.wp-block-template-part .has-darktext-background-color,
body.page-id-52721 footer.wp-block-template-part .has-darktext-background-color {
    background-color: #E39A3B !important;
}

body.page-id-52756 footer.wp-block-template-part .has-darktext-background-color .has-white-color,
body.page-id-52756 footer.wp-block-template-part .has-darktext-background-color h3,
body.page-id-52756 footer.wp-block-template-part .has-darktext-background-color p,
body.page-id-52756 footer.wp-block-template-part .has-darktext-background-color label,
body.page-id-52756 footer.wp-block-template-part .has-darktext-background-color .gfield_required_text,
body.page-id-52721 footer.wp-block-template-part .has-darktext-background-color .has-white-color,
body.page-id-52721 footer.wp-block-template-part .has-darktext-background-color h3,
body.page-id-52721 footer.wp-block-template-part .has-darktext-background-color p,
body.page-id-52721 footer.wp-block-template-part .has-darktext-background-color label,
body.page-id-52721 footer.wp-block-template-part .has-darktext-background-color .gfield_required_text {
    color: #0E4A4E !important;
}

body.page-id-52756 footer.wp-block-template-part .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]),
body.page-id-52756 footer.wp-block-template-part .gform_wrapper select,
body.page-id-52756 footer.wp-block-template-part .gform_wrapper textarea,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]),
body.page-id-52721 footer.wp-block-template-part .gform_wrapper select,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper textarea {
    background-color: #F4EFE7 !important;
    color: #0E4A4E !important;
    border-color: rgba(14, 74, 78, 0.35) !important;
}

body.page-id-52756 footer.wp-block-template-part .gform_wrapper input::placeholder,
body.page-id-52756 footer.wp-block-template-part .gform_wrapper textarea::placeholder,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper input::placeholder,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper textarea::placeholder {
    color: rgba(14, 74, 78, 0.6) !important;
    opacity: 1 !important;
}

body.page-id-52756 footer.wp-block-template-part .gform_wrapper .gfield_label,
body.page-id-52756 footer.wp-block-template-part .gform_wrapper legend,
body.page-id-52756 footer.wp-block-template-part .gform_wrapper .gfield_description,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper .gfield_label,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper legend,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper .gfield_description {
    color: #0E4A4E !important;
}

body.page-id-52756 footer.wp-block-template-part .gform_wrapper .gform_button,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper .gform_button {
    background-color: #0E4A4E !important;
    color: #F4EFE7 !important;
}

body.page-id-52756 footer.wp-block-template-part .gform_wrapper .gform_button:hover,
body.page-id-52721 footer.wp-block-template-part .gform_wrapper .gform_button:hover {
    background-color: #F4EFE7 !important;
    color: #0E4A4E !important;
    opacity: 1 !important;
}

body.page-id-52756 footer.wp-block-template-part .footer-container.has-background-dark-background-color,
body.page-id-52721 footer.wp-block-template-part .footer-container.has-background-dark-background-color {
    background-color: #12302F !important;
}

body.page-id-52756 footer.wp-block-template-part .footer-container a:hover,
body.page-id-52721 footer.wp-block-template-part .footer-container a:hover {
    color: #E9B96A;
}