/*
 Theme Name:   GeneratePress Child — Andaspain
 Theme URI:    https://andaspain.com
 Description:  Child theme for Andaspain. Parent: GeneratePress Premium.
 Author:       Andaspain
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/

/*
 ============================================================
 CONTENTS
 ============================================================
 1.  Custom properties — dark mode (default)
 2.  Custom properties — light mode overrides
 3.  Skip link
 4.  Global resets and base styles
 5.  Typography scale (clamp values; overrides GP customiser)
 6.  Buttons
 7.  Mode toggle
 8.  Focus styles
 9.  Light mode — element-level overrides
 10. Navigation
 11. Links
 12. Tweaks
 13. Accordions
 14. Guided tours archive page
 15. Individual guided tour template
 16. Visually hidden utility
 17. Gravity Forms tweaks
 18. Back to top button
 19. Notes and rules
 ============================================================
*/


/* ============================================================
   1. Custom properties — dark mode (default)
   These are the site defaults. The page loads in dark mode
   regardless of the user's OS preference.
   ============================================================ */

:root {
  --bg-base:      #333333;
  --bg-alt:       #5c5c5c;
  --bg-deep:      #1f1f1f;
  --text-primary: #fcfcfc;
  --accent:       #ffd400;
  --accent-hover: #1a1a1a;
  --trust-text:   #1f1f1f;
  --border:       rgba(252, 252, 252, 0.1);
  --nav-bg:       #1f1f1f;
  --footer-link:  #fcfcfc;
  --mid-divider:  #858585;
  --bg-subtle: #d6d6d6;
  --bg-tint-yellow: #fffae3;
}


/* ============================================================
   2. Custom properties — light mode overrides
   Applied when the user activates the toggle.
   Stored in localStorage under the key 'andasMode'.

   YELLOW IN LIGHT MODE — RULE:
   Yellow (#ffd400) may only appear as a BACKGROUND colour
   with #1f1f1f text on top (buttons, active pills, badges,
   open accordion triggers). It must NEVER appear as a
   foreground colour — not as text, not as an icon colour,
   not as a keyline. Those elements use #333333 instead.
   ============================================================ */

body.light-mode {
  --bg-base:      #fcfcfc;
  --bg-alt:       #e8e6e0;
  --bg-deep:      #fcfcfc;
  --text-primary: #1a1a1a;
  --accent:       #333333;    /* replaces yellow for foreground/text contexts */
  --accent-hover: #1a1a1a;
  --trust-text:   #fcfcfc;
  --border:       rgba(0, 0, 0, 0.1);
  --nav-bg:       #fcfcfc;
  --footer-link:  #333333;
  --mid-divider:  #858585;
}


/* ============================================================
   3. Skip link
   Visually hidden until focused. Always the first focusable
   element in the DOM, before the nav.
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  background: var(--accent);
  color: var(--trust-text);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  padding: 12px 24px;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}


/* ============================================================
   4. Global resets and base styles
   ============================================================ */

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  transition: background 0.3s, color 0.3s;
}


/* ============================================================
   5. Typography scale
   GeneratePress stores font sizes in px in its customiser
   and does not support clamp() natively. These declarations
   override the customiser output using fluid clamp values.
   All Oswald headings are weight 700.
   No letter-spacing on any element.
   ============================================================ */

body.admin-bar {
  font-size: 18px;
}

h1, h2, h3, h4, .gbp-section__headline {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--text-primary);
}

/* H1 — page/hero title. One per page. */
h1, .gbp-section__headline {
  font-size: clamp(2.8rem, 4vw, 3.6rem);
}

/* H2 — major section headings */
h2 {
  font-size: clamp(2rem, 2.8vw, 2.7rem);
}

/* H3 — card titles, pillar headings, tour card names.
   Previous range (1.05–1.5rem) was too close to body size.
   Increased to give clear visual hierarchy. */
h3 {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
}

/* H4 — footer column headings, sub-section labels */
h4 {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
}

/* Body */
p {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  line-height: 1.7;
  letter-spacing: normal;
}

/* Section intro — slightly larger body text used under h2 */
.section-intro {
  font-size: 1.1rem;
  line-height: 1.75;
  letter-spacing: normal;
}

/* Section label — descriptor above the real heading.
   Use <p class="section-label">, never a heading element. */
.section-label {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;  /* no wide tracking */
  color: var(--text-primary);
}

/* Eyebrow — small descriptor, Atkinson not Oswald */
.eyebrow {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: normal;  /* no wide tracking */
  color: var(--text-primary);
}

/* Small labels */
.label-small {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--text-primary);
}

/* Blockquote */
blockquote p {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-style: italic;
  line-height: 1.65;
  letter-spacing: normal;
}

/* Price */
.price {
  font-family: 'Oswald', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: normal;
}

/* Score */
.score {
  font-family: 'Oswald', sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: normal;
}

/* ============================================================
   6. Buttons
   ============================================================ */

.btn, .gbp-button--primary {
  display: inline-block;
  background: var(--accent);
  color: var(--trust-text);
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: normal;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  text-decoration: none;
}

.btn:hover,
.btn:focus-visible, .gbp-button--primary:hover, .gbp-button--primary:focus-visible {
  background: #fcfcfc;
  color: var(--bg-base);
  transform: translateY(-1px);
  text-decoration: none;
}

.gbp-button--primary, .gbp-button--secondary {
    font-family: 'Oswald', sans-serif !important;
}


a.gbp-button--primary, a.gbp-button--secondary,
a.gb-button {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}


/* Light mode: yellow fill is safe on buttons (large element,
   dark text on yellow background). Hover reverses to dark. */
body.light-mode .btn {
  background: #ffd400;
  color: #1f1f1f;
  border-color: transparent;
}

body.light-mode .btn:hover,
body.light-mode .btn:focus-visible {
  background: #1f1f1f;
  color: #fcfcfc;
  border-color: transparent;
}

.btn-outline {
  background: transparent;
  border-color: rgba(252, 252, 252, 0.45);
  color: var(--text-primary);
}

body.light-mode .btn-outline {
  border-color: #333333;
  color: #333333;
}

body.light-mode .btn-outline:hover,
body.light-mode .btn-outline:focus-visible {
  background: #1f1f1f;
  color: #fcfcfc;
  border-color: transparent;
}


/* ============================================================
   7. Mode toggle
   Lives inside the <nav> element, last item before close.
   Tab order: skip link → logo → nav links → CTA → toggle.
   ============================================================ */

.mode-toggle {
  background: var(--accent);
  color: var(--trust-text);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: normal;
  padding: 8px 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  /* No position: fixed — sits in the nav flow */
}

.mode-toggle:hover {
  background: #fcfcfc;
  color: var(--bg-deep);
  transform: translateY(-1px);
}

/* Light mode: toggle uses dark fill so it contrasts with the
   light nav background. Not yellow — it's a small element. */
body.light-mode .mode-toggle {
  background: #333333;
  color: #fcfcfc;
  border-color: transparent;
}

body.light-mode .mode-toggle:hover {
  background: #1a1a1a;
  color: #fcfcfc;
}


/* ============================================================
   8. Focus styles
   All interactive elements must have a visible focus ring.
   :focus-visible ensures it only appears for keyboard users,
   not on mouse click.
   ============================================================ */

/* Default (dark mode) */
:focus-visible {
  outline: 2px solid #ffd400;
  outline-offset: 3px;
}

/* Light mode — yellow outline is invisible on light backgrounds */
body.light-mode :focus-visible {
  outline: 2px solid #333333;
  outline-offset: 3px;
}

/* Remove default outline only after we've set our own */
:focus:not(:focus-visible) {
  outline: none;
}


/* ============================================================
   9. Light mode — element-level overrides

   REMINDER: yellow as foreground on a light background fails
   APCA contrast. The following elements must use #333333,
   not #ffd400, when they appear as text, icons, or keylines
   in light mode:
     - accordion chevrons
     - FAQ chevrons
     - active tab underlines
   ============================================================ */

/* Accordion */
body.light-mode .accordion-trigger {
  color: var(--text-primary);
}

body.light-mode .accordion-trigger.open {
  background: #ffd400;    /* safe: yellow background, dark text */
  color: #1f1f1f;
}

body.light-mode .accordion-chevron {
  color: #333333;          /* not yellow — would fail APCA on light bg */
}

/* FAQ */
body.light-mode .faq-question:hover,
body.light-mode .faq-question.open {
  background: var(--bg-alt);
}

body.light-mode .faq-chevron {
  color: #333333;          /* not yellow — would fail APCA on light bg */
}

body.light-mode .faq-answer {
  color: var(--text-primary);
  border-top-color: #858585;
}

/* Tabs */
body.light-mode .main-tab.active {
  border-bottom-color: #333333;  /* not yellow — thin line on light bg */
}

/* Filter pills */
body.light-mode .filter-btn {
  border-color: rgba(26, 26, 26, 0.3);
}

body.light-mode .filter-btn.active,
body.light-mode .filter-btn:hover {
  background: #ffd400;    /* safe: large enough, yellow bg + dark text */
  color: #1f1f1f;
  border-color: #ffd400;
}

/* Badges */
body.light-mode .trip-badge {
  background: #ffd400;    /* safe: yellow bg + dark text */
  color: #1f1f1f;
}

/* Accent rules (decorative, no text) */
body.light-mode .accent-rule {
  background: #ffd400;    /* safe: decorative only, no text */
}

/* Spaces/availability indicator */
body.light-mode .spaces.low {
  background: #ffd400;    /* safe: yellow bg + dark text */
  color: #1f1f1f;
}

/* Footer */
body.light-mode .footer-brand img {
  filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg);
}

/* Prose links in light mode */
body.light-mode .faq-answer a {
  color: var(--text-primary);
  box-shadow: inset 0 -1px 0 0 var(--text-primary);
}

body.light-mode .faq-answer a:hover {
  box-shadow: inset 0 -3em 0 0 var(--text-primary);
  color: #fcfcfc;
}

/* ============================================================
   10. Navigation
   ============================================================ */

/* ── Primary nav typography ── */
.main-navigation a {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  padding: 0 18px;
}

/* ── Primary nav link hover ── */
.main-navigation a:hover,
.main-navigation a:focus-visible {
  color: var(--bg-base);
  background: var(--text-primary);
  box-shadow: none !important;
  outline: none;
}

/* ── Active / current page ── */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
  color: var(--bg-base);
  background: var(--text-primary);
  box-shadow: none !important;
}


/* ── Dropdown submenu ── */
.main-navigation .sub-menu {
  background: var(--bg-deep);
  border-top: 2px solid var(--accent);
}

.main-navigation .sub-menu a {
  color: var(--text-primary);
  padding: 10px 18px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus-visible {
  color: var(--bg-deep);
  background: var(--text-primary);
  box-shadow: none;
  outline: none;
}

/* ── Light mode overrides ── */
body.light-mode .main-navigation a:hover,
body.light-mode .main-navigation a:focus-visible {
  color: var(--bg-base);
  background: var(--text-primary);
  box-shadow: 3px 0 0 var(--text-primary), -3px 0 0 var(--text-primary);
}

body.light-mode .main-navigation .current-menu-item > a,
body.light-mode .main-navigation .current-menu-ancestor > a {
  color: var(--bg-base);
  background: var(--text-primary);
  box-shadow: 3px 0 0 var(--text-primary), -3px 0 0 var(--text-primary);
}

body.light-mode .main-navigation .sub-menu {
  background: var(--bg-alt);
  border-top: 2px solid var(--accent);
}

body.light-mode .main-navigation .sub-menu a:hover,
body.light-mode .main-navigation .sub-menu a:focus-visible {
  color: var(--bg-base);
  background: var(--text-primary);
}

/* ============================================================
   11. Links
   ============================================================ */

/* ── Prose and footer links ── */



.site-content h3 a:hover, .site-content h3 a:focus-visible,
.site-content h4 a:hover, .site-content h4 a:focus-visible {
  box-shadow: inset 0 -38px 0 0 var(--accent);
}

h1 a:hover, h2 a:hover {
  box-shadow: inset 0 -60px 0 0 var(--accent) !important;
}

h3 a:hover, h4 a:hover {
  box-shadow: inset 0 -38px 0 0 var(--accent);
}

a.ul-link {
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 var(--text-primary);
  padding: 2px 4px;
  transition: color 0.18s, box-shadow 0.18s, background 0.18s;
  display: inline;
}

a.ul-link:hover,
a.ul-link:focus-visible {
  color: var(--bg-base);
  background: var(--text-primary);
  box-shadow: inset 0 -38px 0 0 var(--accent);
  outline: none;
}

/* –– Button and menu overrides –– */
.site-content a:not(.btn):not(.gbp-button--primary):not(.gbp-button--secondary) {
  box-shadow: inset 0 -2px 0 0 var(--text-primary);
  text-decoration: none;
  padding: 2px 4px;
  transition: color 0.18s, box-shadow 0.18s, background 0.18s;
}

.site-content a:not(.btn):not(.gbp-button--primary):not(.gbp-button--secondary):hover,
.site-content a:not(.btn):not(.gbp-button--primary):not(.gbp-button--secondary):focus-visible {
  box-shadow: inset 0 -38px 0 0 var(--accent);
  color: var(--bg-base);
}

/* –– TripAdvisor widget link overrides –– */
.site-content .TA_certificateOfExcellence a,
.site-content .TA_certificateOfExcellence a:hover,
.site-content .TA_certificateOfExcellence a:focus-visible,
.site-content .TA_links a,
.site-content .TA_links a:hover,
.site-content .TA_links a:focus-visible,
.site-content .TA_cdsratingsonlynarrow,
.site-content .TA_cdsratingsonlynarrow a,
.site-content .TA_cdsratingsonlynarrow a:hover,
.site-content .TA_cdsratingsonlynarrow a:focus-visible {
  box-shadow: none !important;
  padding: 0;
  color: inherit;
}
/* ── Light mode overrides ── */
body.light-mode a.ul-link {
  color: var(--text-primary);
  box-shadow: 0 1px 0 0 var(--text-primary);
}

body.light-mode a.ul-link:hover,
body.light-mode a.ul-link:focus-visible {
  color: var(--bg-base);
  background: var(--accent);
  box-shadow: 0 3px 0 0 var(--text-primary);
}


/* ============================================================
   12. Tweaks
   ============================================================ */
/* Hero text container on homepage*/
.gb-element-70a840f9 {
padding-right: 40px !important;
padding-left: 100px !important;
}


/* Tablet */
@media (max-width: 1024px) {
    .gb-element-70a840f9 {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .gb-element-70a840f9 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

/* Featured trip image*/
.featured-trip-image {
    object-fit: cover;
    display: block;
    height: 100%;
    width: 100%;
}

/* Featured Trip meta bar at bottom 
.meta-bar-row {
    grid-column: 1 / -1;
}*/

/* Process row list*/

ol.process-row {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  margin: 0;
  padding: 0;
}

.gb-element-0d1c205c {
  list-style: none;
  margin-block: 0;
  padding-inline: 0;
}

ol.process-row li {
  padding: 0;
}

/*Trip Advisor widget H2 on trust bar grid */

.h2-ta {
	font-family: 'Atkinson Hyperlegible', sans-serif;
	font-weight: bold;
	font-size: 1.3rem;
	color: --text-primary;}

/* Category and tag on articles archive template */

.cat-tag-divider > p:not(:first-child)::before {
  content: "|";
  font-weight: bold;
  padding-right: 20px;
}


/* ============================================================
   13. Accordions shared styles across all pages – and card content, too
   ============================================================ */

/* Accordion heading wrapper — semantic only, no visual change */
.accordion-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
}

.accordion {
    border: 1px solid var(--divider);
}

.accordion-month {
    border-bottom: 2px solid #858585;
}

.accordion-month:last-child {
    border-bottom: none;
}

.accordion-trigger {
    width: 100%;
    background: var(--bg-base);
    border: none;
    padding: 18px 24px;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    transition: background 0.2s;
}

.accordion-trigger:hover {
    background: var(--bg-alt);
}

.accordion-trigger[aria-expanded="true"] {
    background: var(--accent);
    color: #1a1a1a;
}

.accordion-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.trip-count {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    background: rgba(252, 252, 252, 0.2);
    padding: 2px 10px;
    margin-left: 12px;
}

.accordion-trigger[aria-expanded="true"] .trip-count {
    background: rgba(0, 0, 0, 0.12);
}

/* CSS chevron — replaces character-based chevron */
.accordion-chevron {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.accordion-trigger[aria-expanded="true"] .accordion-chevron {
    transform: rotate(-135deg);
}

.accordion-body {
    padding: 24px;
    background: var(--bg-base);
    border-top: 1px solid var(--divider);
    transition: background 0.3s;
}

/* Date cards row */

.date-cards-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Individual date card */

.date-card {
    width: 200px;
    flex-shrink: 0;
    background: var(--bg-alt);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background 0.3s;
}

.date-card-img {
    height: 120px;
    overflow: hidden;
    position: relative;
}

.date-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avail-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    padding: 3px 8px;
    background: #1f1f1f;
    color: #fcfcfc;
}

.avail-badge.low {
    background: #1f1f1f;
    color: var(--accent);
}

.date-card-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.date-card-body .route-tag {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1rem;
	font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
}

.date-card-body .dc-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

.date-card-body .dc-dates {
    font-size: 1rem;
    color: var(--text-primary);
}

.date-card-body .btn {
    margin-top: auto;
    text-align: center;
    font-size: 1rem;
    padding: 9px 14px;
}

/* Responsive */

@media (max-width: 768px) {
    .accordion-trigger {
        padding: 16px;
    }

    .date-card {
        width: 100%;
    }
}

/* ============================================================
   14. Guided tours archive page view toggles
   ============================================================ */

.tours-tablist {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--divider, #858585);
  margin-bottom: 0;
}

.tours-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 14px 28px;
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: #D6D6D6;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tours-tab:hover {
  color: #fcfcfc;
}

.tours-tab--active {
  color: #fcfcfc;
  border-bottom-color: #ffd400;
}

.tours-tab:focus-visible {
  outline: 2px solid #ffd400;
  outline-offset: 2px;
}

.is-hidden {
  display: none !important;
}

/* Responsive tours tab */

@media (max-width: 768px) {
  .tours-tab {  
	  font-size: 1.2rem;
   
  }
}

/* Yellow tour info bar */

.tour-info-bar > div:not(:first-child)::before {
  content: "|";
	font-weight: bold;
  padding-right: 20px;
}



/* ============================================================
   15. Individual guided tour template tabs and sidebar
   ============================================================ */

/* ============================================================
   CSS custom property
   ============================================================ */
:root {
  --sidebar-w: 280px;
}

/* ============================================================
   Content area
   ============================================================ */
.content-area {
  /* semantic wrapper only */
}

/* ============================================================
   Tab + duration row
   ============================================================ */
.tab-duration-row {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid #858585;
  padding: 20px 20px;
}

/* ============================================================
   Tab bar
   ============================================================ */
.tab-bar-wrap {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--bg-subtle);
  border-radius: 999px;
  padding: 6px;
}
.tab-duration-row .tab-bar-wrap {
  flex-direction: row;
}

.tab-duration-row .tab-bar-wrap .tab {
  flex: 0 0 auto;
  width: auto;
}
.tab {
  background: var(--bg-tint-yellow);
  color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 900px;
  padding: 8px 18px;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.tab[aria-selected="true"] {
  background: #ffd400;
  color: #1a1a1a;
}

.tab:hover {
  background: #ffd400;
  color: #1a1a1a;
}

.tab:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* ============================================================
   Duration box
   ============================================================ */
.duration-box {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fcfcfc;
}

/* ============================================================
   Body columns row
   ============================================================ */
.body-columns-row {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: flex-start;
}

/* ============================================================
   Main column
   ============================================================ */
.main-col {
  flex: 1;
  min-width: 0;
  border-right: 1px solid #858585;
}

/* ============================================================
   Tab panels
   ============================================================ */
.tab-panel {
  padding: 32px 24px;
  color: #fcfcfc;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel:focus-visible {
  outline: 2px solid #ffd400;
  outline-offset: -2px;
}

/* ============================================================
   Tour cards in grid
   ============================================================ */

.tour-card {
  position: relative;
}

.tour-card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tour-card-title a {
  text-decoration: none;
}

/* == Tour card: button pushed to bottom == */

.tour-card {
  display: flex;
  flex-direction: column;
}

.tour-card-body {
  flex: 1;
}
/* ============================================================
   Sidebar
   ============================================================ */
.sidebar-col {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 70px;
  align-self: flex-start;
  border-left: 1px solid #858585;
}
/* ============================================================
   Sidebar trip dates loop links
   ============================================================ */
.site-content .trip-dates-loop a:not(.btn):not(.gbp-button--primary):not(.gbp-button--secondary) {
  box-shadow: none;
  text-decoration: underline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.site-content .trip-dates-loop a:not(.btn):not(.gbp-button--primary):not(.gbp-button--secondary):hover,
.site-content .trip-dates-loop a:not(.btn):not(.gbp-button--primary):not(.gbp-button--secondary):focus-visible {
  box-shadow: none;
  background: var(--accent);
  color: var(--bg-base);
}
/* ============================================================
   Responsiveness for tabs
   ============================================================ */
@media (max-width: 768px) {
  .tab-duration-row,
  .body-columns-row {
    flex-direction: column;
  }
  .duration-box {
    width: 100%;
  }
  .main-col {
    border-right: none;
    border-bottom: 1px solid #858585;
  }
  .sidebar-col {
    width: 100%;
    position: static;
    border-left: none;
    border-top: 1px solid #858585;
  }
  .tab-bar-wrap {
    border-radius: 16px;
    padding: 8px;
    gap: 8px;
  }
 .tab-duration-row .tab-bar-wrap .tab {
    width: 100%;
    flex: 1 1 100%;
    text-align: center;
    white-space: normal;
  }
}

/* ==========================================
   visually hidden utility
   ========================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================
   Image on Why Walk grid on homepage
   ========================================== */
.gb-element-1fabead3 {
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ============================================================
   Itinerary tab 
   ============================================================ */
.itinerary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.itinerary-day {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  padding: 32px 20px;
  border-bottom: 2px solid #ffd400;
}

.itinerary-day:last-child {
  border-bottom: none;
}

/* ============================================================
   Day image
   ============================================================ */
.itinerary-day__image-wrap {
  width: 250px;
  height: 250px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.itinerary-day__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Day content
   ============================================================ */
.itinerary-day__content {
  flex: 1;
  min-width: 0;
}

.itinerary-day__heading {
  font-family: 'Oswald', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #fcfcfc;
  margin: 0 0 8px;
  line-height: 1.3;
}

.itinerary-day__distance {
  font-size: 1rem;
  font-weight: 700;
  color: #ffd400;
  margin: 0 0 16px;
}

.itinerary-day__description {
  font-size: 1rem;
  line-height: 1.7;
  color: #fcfcfc;
  max-width: 65ch;
}

/* ============================================================
   Itinerary: responsive
   ============================================================ */
@media (max-width: 768px) {
  .itinerary-day {
    flex-direction: column;
    padding: 20px 0;
  }

  .itinerary-day__image-wrap {
    width: 100%;
    height: 250px;
    border-radius: 16px;
  }
}
/* ============================================================
   17. Gravity Forms tweaks
   ============================================================ */

.gsection_title, .gform_title {color: #1f1f1f;}


/* ==============================================================================
   18. Back to top button
   ============================================================================== */

.back-to-top {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--accent);
    color: var(--trust-text);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
}

.back-to-top.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--bg-tint-yellow);
	color: var(--trust-text);
}

.back-to-top:focus-visible {
    outline: 3px solid #1f1f1f;
    outline-offset: 3px;
}

.back-to-top svg {
    width: 1.5rem;
    height: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
        transform: none;
    }
}