/* =====================================
   GLOBAL COLOR VARIABLES
   ===================================== */

:root {
  /* Core brand colours */
  --dark-blue: #092056;
  --mid-blue: #3b65b3;

  /* Brand yellows */
  --mid-yellow: #f5c344;
  --brand-gold: #e59a0e;

  /* Light surface tones */
  --pale-blue: #d2ecfa;
  --pale-yellow: #fffae1;
}


/* =========================================================
   GLOBAL STYLES
   Shared typography + reusable UI components
   ========================================================= */



/* =====================================
   TYPOGRAPHY — Base + Section Headings
   ===================================== */

a {
  color: var(--mid-blue) !important;
}

a:visited {
  color: var(--mid-blue) !important;
}

a:hover {
  color: var(--dark-blue) !important;
}

a:active {
  color: var(--dark-blue) !important;
}


/* Base body text */
body {
  font-family: 'Lato', sans-serif;
  line-height: 1.5rem;
}

/* Main page title (H1) */
.heading-primary {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700;
  color: var(--dark-blue);
  letter-spacing: -0.3px;
}

/* Sub-heading used under H1 */
.tour-subtitle {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--dark-blue);
  letter-spacing: -0.3px;
}

/* Section titles throughout page */
.page-subtitle {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--dark-blue);
  letter-spacing: -0.3px;
  margin-bottom: 1rem;
}

/* Section titles throughout page */
.mini-subtitle {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--mid-blue);
  letter-spacing: -0.3px;
  margin-bottom: 1rem;
}

/* Section titles throughout page */
.section-subtitle {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700;
  font-size: 1rem !important;
  color: var(--mid-blue);
  letter-spacing: -0.3px;
  margin-bottom: 1rem;
}

.icon-dark-blue {
    color: var(--dark-blue) !important;
}

.icon-dark-blue::before {
    opacity: 1 !important;
}

.splat-text .bi {
    color: var(--dark-blue) !important;
}

.splat-text i.bi {
    font-size: 1rem;      /* smaller, more balanced */
    line-height: 1;       /* keeps them vertically tidy */
}

.splat-text li {
    margin-bottom: 0.35rem;
}


/* =====================================
   TYPOGRAPHY — Price Callouts
   ===================================== */

/* “Kids from...” intro text */
.lead-price-intro {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--mid-blue);
  letter-spacing: -0.3px;
}

/* Main price display */
.price-highlight {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  color: var(--mid-blue);
  letter-spacing: -0.5px;
  font-size: 4rem !important;
  line-height: 1;
}

/* Supporting line below price */
.lead-price-small-text {
  color: var(--mid-blue) !important;
  font-size: 0.9rem;
}


/* ---------------------------------------------------------
   ABOUT & MAP BUBBLE TEXT
--------------------------------------------------------- */
.about-text,
.map-text {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1rem;
  color: var(--dark-blue);
  line-height: 1.5;
  letter-spacing: -0.2px;
}

/* Emphasis in bubbles */
.about-text strong {
  color: var(--brand-gold);
  font-weight: 700;
}
.map-text strong {
  color: var(--mid-blue);
  font-weight: 700;
}

/* =====================================
   TYPOGRAPHY — Similar Tours Cards
   ===================================== */

.tour-card-title {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  color: var(--dark-blue) !important;
  letter-spacing: -0.3px;
  font-size: 1rem;
}

.similar-description {
  font-family: 'Baloo 2', sans-serif;
  color: var(--mid-blue);
  font-weight: 500;
  font-size: 0.95rem;
}

.similar-link {
  color: var(--dark-blue);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}

.similar-link:hover {
  text-decoration: underline;
  color: var(--mid-blue);
}

/* =====================================
   UI COMPONENTS — Card / Box Wrappers
   ===================================== */

/* Filled */
.box--blue-fill,
.box--yellow-fill {
  border-radius: 18px;
  border: none !important; 
  box-shadow: none !important; 
}

.box--blue-fill {
  background-color: var(--pale-blue);
}

.box--yellow-fill {
  background-color: var(--pale-yellow);
}

/* Bordered */
.box--blue-border {
  border: 6px solid var(--pale-blue) !important;
  border-radius: 18px !important;
  padding: 1.5rem;
}

/* =====================================
   UI COMPONENTS — Button Enhancements
   ===================================== */

.price .btn {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  color: var(--dark-blue);
}

/* =====================================
   OFFER BAR — Ticker + Call CTA
   ===================================== */

/* Wrapper container */
.offer-bar {
  background-color: var(--mid-blue);
  color: #fff;
  padding: .55rem 0;
  font-size: .9rem;
  width: 100%;
}
.offer-bar .row {
  align-items: center;
}

/* Ticker */
.offer-slider {
  overflow: hidden;
  width: 100%;
}

.offer-track {
  display: flex;
  gap: 2rem;
  white-space: nowrap; /* keeps ticker continuous */
  will-change: transform;
  animation: none !important; /* JS controls movement */
}

.offer-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  color: #fff;
  font-size: .875rem;
  white-space: nowrap;
  position: relative;
}

.offer-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: rgba(255,255,255,0.4);
}

/* Call-to-booking CTA button */
.offer-phone-btn {
  background: #fff;
  border-radius: 8px;
  color: var(--dark-blue);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  border: none;
  white-space: nowrap;
}
.offer-phone-btn:hover {
  filter: brightness(1.06);
}
.offer-phone-btn i {
  font-size: 1rem;
  color: var(--dark-blue) !important;
}

.offer-ticker-col {
  padding: 10px 0;
}


/* =====================================
   OFFER BAR — Responsive layout
   ===================================== */

/* Desktop (≥992px) */
@media (min-width: 992px) {

  /* Column padding */
  .offer-bar .col-12.col-lg-4,
  .offer-bar .col-12.col-lg-8 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Keep phone CTA visually aligned */
  .offer-phone-wrap {
    padding-left: 15px !important;
  }
}

/* Mobile/Tablet (≤991.98px) */
@media (max-width: 991.98px) {

  /* Ensure ticker column breathes */
  .offer-bar .col-12.col-lg-8 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
  }
}







/* ============================================
   CATEGORY SPLASH — FINAL COMPLETE WORKING CSS
   Text defines height; image fills & crops;
   No blue gap; overlay matches exactly.
================================================ */

.cat-splash {
    background: var(--pale-blue);
    border-radius: 18px;
}

/* Force equal-height columns */
.cat-splash .card-body {
    display: flex;
    align-items: stretch !important;  /* THIS is the key */
    padding: 0;
}

/* IMAGE COLUMN */
.cat-splash-image {
    position: relative;
    overflow: hidden;       /* Prevents blue gap under image */
    display: flex;
}

/* Image fills column height determined by TEXT */
.cat-splash-img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Do NOT stretch — crop naturally */
    object-position: center; /* Change to 'top' if preferred */
    display: block;
}

/* Overlay exactly matches image */
.cat-splash-overlay {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    pointer-events: none;
}

/* TEXT COLUMN */
.cat-splash-text {
    padding: 1.2rem 1.8rem; /* Controls total height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .cat-splash-text {
        padding: 1.4rem 2rem;
    }
}

/* Local icon styling */
.cat-splash-text i.bi {
    font-size: 1rem;
    color: var(--dark-blue);
}


/* ============================================
   HERO TEXT MOBILE RESIZING
   Prevents text from overflowing or breaking
================================================ */

@media (max-width: 575.98px) {

    .heading-primary {
        font-size: 1.8rem !important;
        line-height: 1.1;
    }

    .tour-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.25;
    }

    .ratio-21x9 .fs-5,
    .hero-text-small,
    .page-section .fs-5 {
        font-size: 0.95rem !important;
        line-height: 1.25;
    }

    /* Optional: slightly tighten spacing */
    .page-section.mb-5 .translate-middle {
        transform: translate(-50%, -55%) !important;
    }
}


/* ============================================
   HERO — WIDER TEXT ON MOBILE
   Allows text to use more horizontal space
================================================ */

@media (max-width: 575.98px) {

    /* Increase width available to the text */
    .page-section .translate-middle {
        width: 90% !important;   /* was ~60–70% naturally */
        max-width: none !important;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }

    /* Optional: tighten line-height slightly */
    .heading-primary,
    .tour-subtitle,
    .fs-5 {
        line-height: 1.15 !important;
    }
}


/* ============================================
   HERO — WIDER TEXT ON MID-RANGE SCREENS
   Fixes crushed text around 800–1200px
================================================ */

@media (max-width: 1200px) {

    .page-section .translate-middle {
        width: 90% !important;   
        max-width: none !important;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }
}



/* ======================================
   WHY BOOK WITH GOLD CREST – Text Style
====================================== */

.whybook-text {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1rem;
    color: var(--dark-blue);
    line-height: 1.45;
    padding-left: 0;
}

.whybook-text li {
    margin-bottom: 0.45rem;
}

.whybook-text strong {
    color: var(--brand-gold) !important; /* Orange highlight */
    font-weight: 700;
}

.whybook-text i {
    color: var(--dark-blue) !important;
    font-size: 1.05rem;
}



/* Make hero splat text padding match the blue box spacing */
.hero-splat-text {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* Desktop: add left padding when image + text are side by side */
@media (min-width: 768px) {
    .hero-splat-text {
        padding-left: 3rem !important;
        padding-right: 2rem !important;
    }
}

/* Mobile: remove side padding tweaks */
@media (max-width: 767px) {
    .hero-splat-text {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

.hero-splat-text h1 {
    margin-top: 0.25rem !important;
}

/* Card container */
.tour-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* Image wrapper */
.tour-card-img {
    height: 160px;
    width: 100%;
    overflow: hidden;
}

/* Title */
.tour-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0a2151; /* brand navy */
}

/* Price line */
.tour-card-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: #d48b07; /* brand amber */
}

/* Highlight text */
.tour-card-highlight {
    font-size: 0.85rem;
    color: #333;
}

/* CTA Button */
.btn-tour {
    background: #0a2151;
    color: #fff;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-tour:hover {
    background: #08306b;
    color: #fff;
}

/* Make the whole card clickable with no underline */
.tour-card-link {
    color: inherit;
}


/* ============================
   TOUR CARD – PRICE
============================ */

.tour-card-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-gold); /* £ price colour */
}

.tour-card-price .pp {
    font-weight: 500;
    opacity: 0.9;
}

/* ============================
   TOUR CARD – CTA BUTTON
============================ */

.btn-tour {
    background: var(--dark-blue);
    color: #fff;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    transition: background 0.2s ease;
}

.btn-tour:hover {
    background: #06173d; /* slightly darker hover */
    color: #fff;
}







/* ===========================================
   REASSURANCE STRIP — MATCH TICKER STYLE
=========================================== */

.gc-footer-reassurance {
    background: var(--mid-blue);          /* same as ticker */
    padding: 0.9rem 0;                    /* refined match to ticker */
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
}

/* White icons */
.gc-footer-reassurance i {
    color: #ffffff;
    font-size: 1.25rem;
}

/* Increased spacing between reassurance statements */
.gc-footer-reassurance .container > div {
    gap: 0.5rem;          /* spacing within each item */
    margin: 0 2rem;       /* spacing between the three items */
}

/* Vertical divider (same as ticker) */
.gc-footer-reassurance .divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.35);
}

/* Mobile behaviour — stack items cleanly */
@media (max-width: 768px) {
    .gc-footer-reassurance {
        padding: 1.2rem 0;
    }
    .gc-footer-reassurance .divider {
        display: none;
    }
    .gc-footer-reassurance .container > div {
        margin: 0; /* remove horizontal spacing on stacked layout */
    }
}

/* ===========================================
   SOCIAL MEDIA STRIP — CLEAN TICKER STYLE
=========================================== */

.gc-social-bar {
    background: var(--mid-blue);        /* same blue as ticker */
    padding: 0.85rem 0;                 /* matches ticker height */
    color: #fff;
    border: none;
}

.gc-social-bar .gc-social-text {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

/* White icons with clean hover behaviour */
.gc-social-bar .gc-social-icon {
    font-size: 1.5rem;
    color: #ffffff;
    transition: color 0.2s ease, transform 0.2s ease;
}

.gc-social-bar .gc-social-icon:hover {
    color: var(--brand-gold);           /* subtle gold hover */
    transform: translateY(-2px);
}

/* Spacing adjustments for responsiveness */
.gc-social-bar .container {
    gap: 1.25rem;
}

/* Mobile layout — icons centered, text on top */
@media (max-width: 768px) {
    .gc-social-bar {
        padding: 1.1rem 0;
    }
    .gc-social-bar .gc-social-text {
        font-size: 0.95rem;
    }
}



/* =============================
   MAIN FOOTER
============================= */

.gc-footer-main {
    background: var(--dark-blue);
    color: #fff;
    font-family: 'Lato', sans-serif;
}

/* Footer section headings */
.gc-footer-heading {
    font-family: 'Baloo 2', cursive;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    color: var(--mid-yellow);   /* NEW — requested updated heading colour */
}

/* Footer links */
.gc-footer-links a {
    color: #ffffffd0;
    text-decoration: none;
    display: block;
    padding: 3px 0;
    font-size: 0.92rem;
    transition: color 0.2s ease;
}

.gc-footer-links a:hover {
    color: var(--brand-gold);
}

/* Social icons */
.gc-social-icon {
    font-size: 1.5rem;
    color: #fff;
}

.gc-social-icon:hover {
    color: var(--brand-gold);
}



/* =============================
   LEGAL BAR
============================= */

.gc-footer-legal {
    background: #06173d;
    color: #ffffff99;
    font-size: 0.85rem;
}

/* Center footer column text */
.gc-footer-main .gc-footer-heading,
.gc-footer-main .gc-footer-links {
    text-align: center;
}


/* 1px white divider between mid-blue social bar and dark-blue footer */
.gc-footer-divider {
    height: 1px;
    background: #ffffff;
    opacity: 0.4;
}

/* Optional: ensure <small> is subtle but readable */
.gc-footer-legal small {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #ffffff99;
}