@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Sorts+Mill+Goudy:ital@0;1&family=Source+Sans+3:wght@400;500;600;700;800&display=swap');
/* ==========================================================================
   VAMOS! LION CHARIOT TOURS - GLOBAL STYLESHEET
   Brand: Red, White, Blue / Local, Warm, Professional
   ========================================================================== */

/* --- 1. CSS Variables --- */
:root {
    /* Color Palette */
    --navy: #002D62;       /* Deep, classic blue */
    --red: #C8102E;        /* Energetic, solid red */
    --off-white: #FDFBF7;  /* Warm, paper-like background */
    --white: #FFFFFF;
    --light-blue: #F0F4F8; /* Soft contrast background */
    --border-color: #E5E7EB;
    
    /* Typography Colors */
    --text-dark: #1F2937;
    --text-gray: #4B5563;
    
    /* Font & Layout Settings */
    --font-main: 'Rubik', sans-serif;
    --font-heading: 'Rubik', sans-serif;
    --font-accent: 'Rubik', sans-serif;
    --font-body: 'Rubik', sans-serif;
    --border-radius: 8px;
    --transition-speed: 0.25s;
    --max-width-container: 1150px;
    --max-width-content: 800px;
}

/* --- 2. Global Reset & Base Setup --- */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: var(--font-main);
    background-color: var(--off-white);
    color: var(--text-dark);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, svg { 
    max-width: 100%; 
    height: auto;
    display: block; 
}

a { 
    text-decoration: none; 
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; 
}

/* Accessibility Focus States */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

/* --- 3. Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--navy);
    line-height: 1.25;
    margin-bottom: 1.25rem;
    font-weight: 800;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); letter-spacing: -0.5px; }
h2 { font-size: clamp(2rem, 4vw, 2.5rem); letter-spacing: -0.5px; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p { 
    color: var(--text-gray); 
    margin-bottom: 1.25rem; 
    font-size: 1.05rem; 
}

p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--text-dark); }
em { font-style: italic; }

/* Dark Background Text Overrides */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white p, .text-white li { 
    color: var(--white); 
}

/* --- 4. Layout Containers & Spacing Utilities --- */
.container {
    width: 90%;
    max-width: var(--max-width-container);
    margin: 0 auto;
}

.content-block {
    max-width: var(--max-width-content);
    margin: 0 auto;
}

.section-pad { 
    padding: 5rem 0; 
}

.center { text-align: center; }

/* Margin Utilities */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 4rem; }
.mt-4 { margin-top: 6rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Background Utilities */
.bg-navy { background-color: var(--navy); color: var(--white); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-off-white { background-color: var(--off-white); }
.bg-white { background-color: var(--white); }

/* --- 5. Buttons & Links --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.8rem;
    font-weight: 700;
    font-family: var(--font-main);
    font-size: 1rem;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-speed) ease;
    line-height: 1.2;
}

.btn-primary {
    background-color: var(--red);
    color: var(--white);
    border-color: var(--red);
}
.btn-primary:hover {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.btn-secondary {
    background-color: transparent;
    color: var(--navy);
    border-color: var(--navy);
}
.btn-secondary:hover {
    background-color: var(--navy);
    color: var(--white);
}

.btn-outline-white {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}
.btn-outline-white:hover {
    background-color: var(--white);
    color: var(--navy);
    border-color: var(--white);
}

.btn-large { 
    font-size: 1.15rem; 
    padding: 1rem 2.2rem; 
}

.btn-full {
    width: 100%;
}

.text-link {
    display: inline-block;
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}
.text-link:hover { 
    color: var(--navy); 
}

/* --- 6. Header & Navigation --- */
.site-header {
    background-color: var(--navy);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 4px solid var(--red);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--white);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
    text-decoration: none;
}

.brand-logo-img {
    height: 54px;
    width: auto;
    object-fit: contain;
    display: block;
}

.brand-logo-text {
    font-size: 1.6rem;
}

.brand-logo span {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    color: #E5E7EB;
    letter-spacing: 0.5px;
    text-transform: none;
}

.main-nav { 
    display: flex; 
    align-items: center; 
    gap: 2.5rem; 
}

.nav-links { 
    list-style: none; 
    display: flex; 
    align-items: center;
    gap: 1.5rem; 
}

.nav-links > li > a { 
    color: var(--white); 
    font-weight: 500; 
    font-size: 1rem; 
    padding: 0.5rem 0;
}

.nav-links > li > a:hover, 
.nav-links > li > a.active { 
    color: var(--red); 
}

.nav-actions { 
    display: flex; 
    align-items: center; 
    gap: 1.5rem; 
}

.social-links { 
    display: flex; 
    gap: 1rem; 
    align-items: center;
}

.social-links a { 
    color: var(--white); 
    width: 24px; 
    height: 24px;
    display: inline-flex;
}

.social-links a:hover { 
    color: var(--red); 
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown > a {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--navy);
    min-width: 250px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border-radius: 0 0 6px 6px;
    padding: 0.5rem 0;
    z-index: 1000;
    border-top: 3px solid var(--red);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu li a {
    display: block;
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dropdown-menu li a:last-child {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background-color: rgba(255,255,255,0.1);
    color: var(--white);
}

@media (min-width: 1025px) {
    .dropdown:hover .dropdown-menu,
    .dropdown:focus-within .dropdown-menu {
        display: block;
    }
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0.5rem;
}

/* --- 7. Hero Sections --- */
.hero {
    padding: 5rem 0;
    background-color: var(--off-white);
}

.hero-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-buttons { 
    display: flex; 
    gap: 1rem; 
    margin-top: 2rem; 
    flex-wrap: wrap;
}

.page-hero {
    padding: 4rem 0;
    border-bottom: 4px solid var(--red);
}

.page-hero h1 {
    margin-bottom: 0.5rem;
}

.page-hero p {
    margin-bottom: 0;
}

/* --- 8. Grids & Standard Cards (.ticket-style) --- */
.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.ticket-style {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
    height: 100%; 
}

.tour-card-header {
    padding: 1.5rem 2rem;
    text-align: center;
    border-bottom: 3px solid var(--red);
}

.tour-card-header h3 { 
    margin: 0; 
    color: var(--white); /* Fixes invisible text issue */
}

.tour-card-body, 
.ad-card {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes button to bottom */
}

/* Ensures buttons/links align cleanly at the bottom of standard cards */
.tour-card-body > .text-link, 
.tour-card-body > .btn, 
.ad-card > .text-link, 
.ad-card > .btn {
    margin-top: auto; 
    align-self: flex-start;
}

/* Adjust full width buttons in cards */
.tour-card-body > .btn-outline-white {
    width: 100%;
    margin-top: auto;
}

.eyebrow {
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.6rem;
}

/* --- 9. Long Feature Cards (Horizontal Desktop / Stacked Mobile) --- */
.feature-card {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 3rem;
    height: auto;
}

.feature-card-img {
    background-color: #E5E7EB;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
    font-weight: 700;
    padding: 2rem;
    text-align: center;
}

.feature-card-content {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-card-content h2, 
.feature-card-content h3 { 
    margin-top: 0; 
}

/* --- 10. Split Row & Features Lists --- */
.split-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

.feature-list { 
    list-style: none; 
    margin-top: 1.5rem; 
    margin-bottom: 1.5rem;
}

.feature-list li {
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative;
    font-size: 1.05rem;
    color: var(--text-dark);
}

.feature-list li::before {
    content: '★';
    color: var(--red);
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    top: -2px;
}

.bg-navy .feature-list li { color: var(--white); }

/* --- 11. "What Makes Our Tours Special" Section --- */
.vamos-special-section {
    width: 100%;
    margin-top: 4rem; /* Ensures breathing room below service cards */
}

.vamos-special-header {
    margin-bottom: 3.5rem;
}

.vamos-special-subtitle {
    font-weight: 700;
    color: var(--red);
    font-size: 1.25rem;
    margin-top: -0.5rem;
}

.vamos-special-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.vamos-special-card {
    background-color: var(--white);
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vamos-special-icon-box {
    margin-bottom: 1.5rem;
    color: var(--red);
    background-color: var(--light-blue);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vamos-special-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
}

.vamos-special-card p {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.6;
}

/* --- 12. Custom Elements (Rates, Advertising CTA) --- */
/* Rates Promise Box */
.ticket-style.bg-navy {
    background-color: var(--navy) !important;
    padding: 1.5rem !important;
    border: none;
}

.ticket-style.bg-navy h3,
.ticket-style.bg-navy p {
    color: var(--white) !important;
}

/* Advertising CTA Boxes */
.contact-methods {
    background-color: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: inline-block;
    min-width: 320px;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.contact-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.contact-row:last-child {
    border-bottom: none;
}

.contact-row strong { color: var(--navy); }
.contact-row span { color: var(--red); font-weight: 700; }

/* Image Placeholders */
.img-placeholder {
    background-color: #E5E7EB;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
    font-weight: 700;
    padding: 2rem;
    text-align: center;
    min-height: 200px;
}
.hero-img { min-height: 450px; }

/* --- 13. Forms --- */
.ad-inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 1rem;
    background-color: var(--white);
    color: var(--text-dark);
    transition: border-color var(--transition-speed) ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(0, 45, 98, 0.1);
}

/* --- 14. Footer --- */
.site-footer {
    background-color: #0A192F;
    color: var(--white);
    padding: 5rem 0 2rem 0;
    margin-top: auto; 
}

.site-footer h3, .site-footer h4 { 
    color: var(--white); 
    margin-bottom: 1.25rem; 
    font-size: 1.2rem; 
    margin-top: 0;
}

.site-footer p { color: #9CA3AF; font-size: 0.95rem; }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    border-bottom: 1px solid #374151;
    padding-bottom: 3rem;
    margin-bottom: 2rem;
}

.footer-links ul, .footer-contact ul { list-style: none; }
.footer-links { text-align: left; }

.footer-links li, .footer-contact li { margin-bottom: 0.8rem; }
.footer-links a, .footer-contact a { color: #9CA3AF; }
.footer-links a:hover, .footer-contact a:hover { color: var(--white); }
.footer-legal p { font-size: 0.85rem; text-align: center; margin: 0; }

/* --- 15. Responsive Breakpoints --- */

/* Desktop / Large Screens */
@media (min-width: 1024px) {
    .feature-card {
        flex-direction: row;
        align-items: stretch;
    }
    .feature-card.reverse {
        flex-direction: row-reverse;
    }
    .feature-card-img {
        flex: 1;
        min-height: auto;
    }
    .feature-card-content {
        flex: 1.2;
    }
    .split-row {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
    .form-row {
        flex-direction: row;
    }
    .form-row > * {
        flex: 1;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .hero-container { 
        grid-template-columns: 1fr; 
        text-align: center;
    }
    .hero-buttons { 
        justify-content: center; 
    }
    .mobile-menu-btn { 
        display: block; 
    }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--navy);
        flex-direction: column;
        padding: 2rem;
        border-top: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .main-nav.active { 
        display: flex; 
    }
    .nav-links { 
        flex-direction: column; 
        align-items: flex-start; 
        width: 100%; 
        gap: 0.5rem;
    }
    .nav-links > li { width: 100%; }
    .nav-links > li > a {
        display: block;
        width: 100%;
        padding: 0.8rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .nav-actions { 
        flex-direction: column; 
        width: 100%; 
        margin-top: 1.5rem; 
        align-items: flex-start;
    }
    .nav-actions .btn { width: 100%; }

    /* Mobile Dropdown Fix */
    .dropdown > a { justify-content: space-between; }
    .dropdown-menu {
        position: static;
        box-shadow: none;
        background-color: rgba(0,0,0,0.15);
        border-top: none;
        border-left: 2px solid var(--red);
        border-radius: 0;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        width: 100%;
        padding: 0;
    }
    .dropdown-menu li a {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }
    .dropdown.active .dropdown-menu { display: block; }
}

/* Mobile (520px and below) */
@media (max-width: 767px) {
    .section-pad { padding: 4rem 0; }
    .vamos-special-grid { grid-template-columns: 1fr; }
    .vamos-special-card { padding: 2rem 1.5rem; }
    
    .contact-methods {
        min-width: 100%;
        padding: 1.5rem;
    }
    .contact-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    .tour-grid {
        grid-template-columns: 1fr;
    }
}
/* --- Contact Page Specific Polish --- */
.contact-card-box {
    background-color: var(--white);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 2.5rem;
}

.contact-icon-list {
    display: flex;
    flex-direction: column;
}

.contact-icon-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.1rem;
}

.contact-icon-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contact-icon-row svg {
    color: var(--red);
    flex-shrink: 0;
}

.contact-icon-row strong {
    color: var(--navy);
    min-width: 100px; /* Aligns the placeholders neatly */
}

.contact-icon-row span {
    color: var(--text-dark);
    font-weight: 500;
}

.check-list {
    list-style: none;
    margin-top: 1.5rem;
}

.check-list li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    color: var(--text-dark);
}

.check-list li svg {
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--red);
}

@media (max-width: 600px) {
    .contact-card-box {
        padding: 2rem 1.5rem;
    }
    .contact-icon-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* ==========================================================================
   CONTACT PAGE SPECIFIC STYLES
   ========================================================================== */

/* --- 1. Main Contact Panel --- */
.contact-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    background-color: var(--white);
    padding: 3rem 2.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.contact-panel-copy h2 {
    margin-bottom: 1.5rem;
}

.contact-panel-copy p {
    font-size: 1.1rem;
    line-height: 1.8;
}

.contact-panel-methods {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- 2. Contact Method Cards --- */
.contact-method-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--off-white);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all 0.2s ease;
}

.contact-method-card:hover {
    border-color: var(--red);
    background-color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.1); /* Subtle red shadow */
}

.contact-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    flex-shrink: 0;
}

.contact-method-text {
    display: flex;
    flex-direction: column;
}

.contact-method-text strong {
    color: var(--navy);
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.contact-method-text span {
    color: var(--text-gray);
    font-weight: 500;
}

/* --- 3. Guidance Grid --- */
.contact-guidance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    margin: 0 auto;
    max-width: 800px;
    padding: 0;
}

.contact-guidance-grid li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
    color: var(--text-dark);
    padding: 1rem 1.5rem;
    background-color: var(--white);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.contact-guidance-grid li svg {
    color: var(--red);
    flex-shrink: 0;
}

/* --- Responsive Layouts --- */
@media (min-width: 900px) {
    .contact-panel {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }
    .contact-guidance-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .contact-panel {
        padding: 2rem 1.5rem;
    }
    .contact-method-card {
        padding: 1.25rem;
    }
    .contact-guidance-grid li {
        align-items: flex-start;
    }
}
/* --- Contact Page Quick Links Grid --- */
.contact-quick-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Forces exactly 3 equal columns */
    gap: 2rem;
    width: 100%;
}

.contact-quick-link-card {
    padding: 2.5rem 2rem;
    text-align: center;
}

/* Tablet Layout: 2 cards on top, 1 centered below */
@media (max-width: 900px) {
    .contact-quick-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Layout: Stack vertically */
@media (max-width: 600px) {
    .contact-quick-links-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   IMAGE LOGO STYLING (Header & Footer)
   ========================================================================== */

/* --- Header Logo --- */
.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo-img {
    max-height: 60px; /* Keeps the navigation bar from getting too tall */
    width: auto;
    object-fit: contain;
    display: block;
}

/* --- Footer Logo --- */
.footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
}

.footer-logo-img {
    width: 200px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .site-logo-img {
        max-height: 50px; /* Scales down slightly on small phones to prevent crowding */
    }
    
    .footer-logo-img {
        width: 170px;
    }
}
/* ==========================================================================
   MOBILE CTA & BUTTON SPACING OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Global Button Layout */
    .btn {
        display: flex; /* Ensures text stays centered if button expands */
        width: 100%; /* Makes buttons full-width for easier tapping on mobile */
        max-width: 400px; /* Prevents buttons from looking absurdly wide on tablets */
        margin: 0 auto; /* Centers the button if max-width kicks in */
    }

    /* 2. Button Group Stacking (Fixes adjacent buttons smashing together) */
    .center > .btn + .btn,
    .hero-buttons > .btn + .btn,
    .nav-actions > .btn + .btn {
        margin-top: 1rem; /* Forces space between stacked buttons */
        margin-left: 0 !important; /* Overrides any desktop horizontal spacing */
    }

    /* 3. Final CTA / Pre-Footer Breathing Room */
    /* Targets the common container right before the footer */
    .page-content > .container > .center:last-child,
    .section-pad:last-of-type {
        margin-bottom: 2rem; 
        padding-bottom: 2rem;
    }

    /* 4. Button-to-Text Separation */
    /* Ensures buttons never touch the paragraph right above them */
    p + .btn {
        margin-top: 1.5rem;
    }

    /* 5. Clean up specific card buttons */
    .tour-card-body .btn,
    .ad-card .btn,
    .ticket-style .btn {
        margin-top: 1.5rem !important; /* Pushes button away from text inside cards */
    }
}
/* ==========================================================================
   HOMEPAGE CTA & MOBILE NAVIGATION FIXES
   ========================================================================== */

/* --- Hide the fallback "All Services" link on Desktop --- */
@media (min-width: 1024px) {
    .mobile-only-link {
        display: none !important;
    }
}

/* --- Mobile Homepage CTA Spacing --- */
@media (max-width: 767px) {
    .hero-buttons {
        display: flex;
        flex-direction: column; /* Forces buttons to stack vertically */
        gap: 1.25rem; /* Creates clean, even spacing between the buttons */
        width: 100%;
        align-items: center;
        margin-top: 2rem;
    }
    
    .hero-buttons .btn {
        width: 100%; /* Makes buttons full-width for easy tapping */
        max-width: 400px;
        margin: 0 !important; /* Clears any conflicting desktop margins */
    }
}
/* ==========================================================================
   HOME PAGE FINAL CTA MOBILE SPACING
   ========================================================================== */

/* Desktop layout (keeps them side-by-side) */
.home-final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

/* Mobile layout (stacks them cleanly) */
@media (max-width: 767px) {
    .home-final-cta-buttons {
        flex-direction: column;
        gap: 1.25rem; /* The exact vertical space between buttons */
    }

    .home-final-cta-buttons .btn {
        width: 100%;
        max-width: 320px;
        margin: 0 !important; /* Clears any global margins so 'gap' works perfectly */
    }
}
/* ==========================================================================
   FINAL CTA REFINEMENTS (HOME & SERVICES)
   ========================================================================== */

/* --- final-CTA secondary buttons: navy/blue outline (visible on beige) --- */
.home-final-cta-buttons .btn-secondary {
    background-color: transparent;
    color: var(--navy);
    border-color: var(--navy);
}
.home-final-cta-buttons .btn-secondary:hover {
    background-color: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

/* --- 2. Services Page Compact CTA --- */
.services-final-cta {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.services-final-cta p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--text-gray);
}

.services-final-cta .btn {
    width: 100%;
    max-width: 320px; /* Keeps the button from stretching awkwardly wide */
    margin: 0 auto;
}
/* ==========================================================================
   IMAGE PLACEMENTS & SCROLLING MARQUEE
   ========================================================================== */

/* --- Seamless Scrolling Marquee Banner --- */
.marquee-banner {
    width: 100%;
    overflow: hidden;
    display: flex;
    padding: 0 0 2rem 0; /* Navy background continues from hero */
    border-bottom: 4px solid var(--red);
}

.marquee-track {
    display: flex;
    gap: 1rem; /* Space between photos */
    /* Adjust '35s' to make the scroll faster or slower */
    animation: scroll-marquee 24s linear infinite; 
}

.marquee-track img {
    height: 280px;
    width: 380px;
    object-fit: cover;
    border-radius: var(--border-radius);
    flex-shrink: 0; /* Prevents images from squeezing */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Moves the track exactly 50% to the left. Because Set 1 and Set 2 are identical, it loops invisibly. */
@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 0.5rem)); }
}

/* Pause scroll if the user hovers over it */
.marquee-banner:hover .marquee-track {
    animation-play-state: paused;
}

/* --- Service Card Images --- */
.tour-card-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    /* Rounds top corners to match the ticket-style container */
    border-radius: var(--border-radius) var(--border-radius) 0 0; 
}

.tour-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Reset internal radius to fit the container perfectly */
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .marquee-track {
        animation: scroll-marquee 13s linear infinite; /* faster on phones */
    }
    .marquee-track img {
        height: 200px;
        width: 280px;
    }
    .tour-card-img {
        height: 180px;
    }
}
/* ==========================================================================
   WHO WE ARE IMAGE POLISH
   ========================================================================== */

/* Ensures the feature card handles real image tags properly */
.feature-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius) var(--border-radius) 0 0; /* Mobile default */
}

@media (min-width: 1024px) {
    .feature-card-img img {
        /* On desktop, rounding switches to the left side only */
        border-radius: var(--border-radius) 0 0 var(--border-radius);
    }
    
    .feature-card.reverse .feature-card-img img {
        /* Reverses rounding if the card layout is ever flipped */
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }
}
/* ==========================================================================
   PENN STATE TOURS HERO IMAGE STRIP
   ========================================================================== */

.hero-image-strip {
    display: flex;
    width: 100%;
    border-bottom: 4px solid var(--red);
}

.hero-image-strip img {
    flex: 1;
    height: 300px;
    object-fit: cover;
    border-radius: 0; /* Ensures images touch edge-to-edge perfectly */
}

@media (max-width: 768px) {
    .hero-image-strip {
        flex-direction: column;
    }
    .hero-image-strip .hero-shot,
    .hero-image-strip img {
        width: 100%;
        height: 240px;
    }
    .hero-image-strip img:nth-child(3),
    .hero-image-strip .hero-shot:nth-child(3) {
        display: block; /* show all three, now stacked & full-width */
    }
}
/* ==========================================================================
   BLOG CARD ALIGNMENT
   ========================================================================== */

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

.blog-card .tour-card-body .text-link {
    margin-top: auto; /* Pushes the "Read More" link to the bottom of the card */
}
/* ==========================================================================
   FAQ NATIVE ACCORDION
   ========================================================================== */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq-item {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.faq-item summary {
    padding: 1.5rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    list-style: none; /* Hides default arrow in some browsers */
    position: relative;
}

/* Custom Accordion Arrow */
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 1.5rem;
    color: var(--red);
    font-family: var(--font-body);
    font-weight: 400;
}
.faq-item[open] summary::after {
    content: '−';
}

.faq-answer {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: var(--text-gray);
    font-size: 1.05rem;
}
.faq-answer p:last-child {
    margin-bottom: 0;
}
/* ==========================================================================
   FAQ PAGE STYLING (STACKED CARDS)
   ========================================================================== */

.faq-category-section {
    margin-bottom: 4rem;
}

.faq-category-section:last-of-type {
    margin-bottom: 0;
}

.faq-category-header {
    text-align: center;
    margin-bottom: 2rem;
}

.faq-category-header h2 {
    color: var(--navy);
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

/* Red accent line under category headings */
.faq-category-header h2::after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background-color: var(--red);
    margin: 0.5rem auto 0 auto;
    border-radius: 2px;
}

.faq-category-header p {
    color: var(--text-gray);
    font-size: 1.1rem;
    font-family: var(--font-accent);
    font-style: italic;
}

.faq-card-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq-card {
    background-color: var(--white);
    padding: 2rem 2.5rem;
    border-left: 4px solid var(--navy);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.faq-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    border-left-color: var(--red);
}

.faq-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--navy);
    font-size: 1.35rem;
}

.faq-card p {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.faq-card p:last-child {
    margin-bottom: 0;
}

/* Mobile Adjustments for FAQ Cards */
@media (max-width: 767px) {
    .faq-card {
        padding: 1.5rem;
    }
    .faq-card h3 {
        font-size: 1.25rem;
    }
}
/* ==========================================================================
   FAQ PAGE ACCORDION (SMOOTH DROPDOWN)
   ========================================================================== */

/* Category Headers */
.faq-category-section {
    margin-bottom: 4rem;
}
.faq-category-section:last-of-type {
    margin-bottom: 0;
}
.faq-category-header {
    text-align: center;
    margin-bottom: 2rem;
}
.faq-category-header h2 {
    color: var(--navy);
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}
.faq-category-header h2::after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background-color: var(--red);
    margin: 0.5rem auto 0 auto;
    border-radius: 2px;
}
.faq-category-header p {
    color: var(--text-gray);
    font-size: 1.1rem;
    font-family: var(--font-accent);
    font-style: italic;
}

/* Accordion Container & Cards */
.faq-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq-item {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* Accordion Button */
.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.faq-question:hover, .faq-question:focus-visible {
    background-color: var(--off-white);
    color: var(--red);
    outline: none;
}
.faq-question:focus-visible {
    box-shadow: inset 0 0 0 3px var(--red);
}
.faq-question[aria-expanded="true"] {
    color: var(--red);
    border-bottom: 1px solid var(--border-color);
}

/* Accordion Icon Animation */
.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}
.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

/* Accordion Content (Smooth Grid Transition) */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}
.faq-question[aria-expanded="true"] + .faq-answer {
    grid-template-rows: 1fr;
}
.faq-answer-inner {
    overflow: hidden; /* Crucial for the grid transition */
}
.faq-answer-inner > p:first-child {
    padding-top: 1.5rem;
}
.faq-answer-inner > *:last-child {
    margin-bottom: 0;
    padding-bottom: 1.5rem;
}
.faq-answer-inner p, .faq-answer-inner ul {
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.05rem;
    color: var(--text-gray);
    line-height: 1.7;
}

/* Mobile Overrides */
@media (max-width: 767px) {
    .faq-question {
        padding: 1.25rem 1.5rem;
        font-size: 1.2rem;
    }
    .faq-answer-inner p, .faq-answer-inner ul {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
/* ==========================================================================
   REVISION-PHASE HELPERS (placeholders, featured-in, thumbnails, price blocks)
   ========================================================================== */
.media-placeholder{background:var(--light-blue);border:2px dashed #B8C4D6;border-radius:var(--border-radius);color:var(--navy);font-family:var(--font-main);font-weight:600;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem 1.25rem;min-height:180px;}
.media-placeholder.tall{min-height:340px;}
.media-placeholder.hero{min-height:420px;border-color:#9db0cc;font-size:1.05rem;}
.link-placeholder{color:var(--red);font-weight:600;}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem;}
@media (max-width:900px){.featured-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.featured-grid{grid-template-columns:1fr;}}
.featured-card{background:var(--white);border:1px solid var(--border-color);border-top:4px solid var(--navy);border-radius:var(--border-radius);padding:1.5rem;display:flex;flex-direction:column;}
.featured-card .outlet{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--red);font-weight:700;margin-bottom:.4rem;}
.featured-card h4{margin:0 0 .5rem;color:var(--navy);font-size:1.05rem;}
.featured-card p{font-size:.9rem;color:var(--text-gray);margin:0 0 1rem;flex:1;}
.featured-card a{font-weight:600;color:var(--red);text-decoration:none;font-size:.9rem;}
.thumb-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1rem 0 0;}
.thumb-ph{background:var(--light-blue);border:2px dashed #B8C4D6;border-radius:var(--border-radius);color:var(--navy);font-weight:600;font-size:.85rem;text-align:center;padding:1.25rem .5rem;min-height:110px;display:flex;align-items:center;justify-content:center;}
.price-list{list-style:none;padding:0;margin:1rem 0 0;}
.price-list li{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border-color);font-weight:500;}
.price-list li span:last-child{font-weight:700;color:var(--red);}


/* ==========================================================================
   SVG ICONS (replacing emoji glyphs)
   ========================================================================== */
.stars{display:inline-flex;align-items:center;gap:3px;color:#FBBF24;line-height:0;margin-bottom:.75rem;}
.stars svg{width:18px;height:18px;display:block;}
/* buttons are already flex — use gap for icon/text spacing, size icon to text */
.btn{gap:.55rem;}
.btn-icon{flex-shrink:0;width:1.15em;height:1.15em;}
/* hero rating: flex-center the star with the text, no magic numbers */
.rating-line{display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:left;}
.rating-star{flex-shrink:0;width:1.15em;height:1.15em;}
/* nav dropdown caret */
.dropdown-toggle{display:inline-flex;align-items:center;gap:.3rem;}
.dropdown-caret{flex-shrink:0;}

/* ==========================================================================
   EDIT ROUND: even card rows (center orphan) + CTA division
   ========================================================================== */
.vamos-special-card{flex:0 1 calc(50% - 1rem);max-width:560px;}
@media (max-width:768px){.vamos-special-card{flex-basis:100%;}}
/* clearer division between a page's last section and its final CTA */
.services-final-cta{border-top:1px solid var(--border-color);padding-top:3.5rem !important;margin-top:0;}


/* ==========================================================================
   CAMPUS HIGHLIGHTS GALLERY (Penn State Tours)
   ========================================================================== */
.highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.highlight-card{background:var(--white);border:1px solid var(--border-color);border-radius:var(--border-radius);overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,.05);transition:transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;}
.highlight-card:hover{transform:translateY(-4px);box-shadow:0 12px 22px -8px rgba(0,0,0,.15);}
.highlight-img{position:relative;aspect-ratio:4/3;background:#e6ecf5;display:flex;align-items:center;justify-content:center;}
.highlight-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.highlight-ph{color:#9db0cc;font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;}
.highlight-label{padding:.9rem 1rem;text-align:center;font-family:var(--font-heading);font-weight:700;color:var(--navy);font-size:1.05rem;border-top:3px solid var(--red);}
@media (max-width:820px){.highlight-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.highlight-grid{grid-template-columns:1fr;}}

.media-credit{display:block;font-size:.78rem;color:var(--text-gray);font-style:italic;margin:-.5rem 0 .85rem;}
.star-list{list-style:none;padding:0;margin:0 0 1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.5rem;}
.star-list li{display:flex;align-items:flex-start;gap:.5rem;font-weight:500;color:var(--text-dark);}
.hl-star{width:15px;height:15px;color:var(--red);flex-shrink:0;margin-top:.28rem;}
@media (max-width:600px){.star-list{grid-template-columns:1fr;}}

/* ==========================================================================
   TRIPADVISOR WIDGET — isolate from global styles
   Root cause: global `img, svg { display:block; max-width:100% }` forces the
   TripAdvisor lockup onto its own line, stacking the business name.
   ========================================================================== */
.ta-widget-viewport{display:flex;justify-content:center;width:100%;margin:2.5rem auto 1rem;overflow:hidden;}
.ta-widget-scale{width:468px;min-width:468px;transform-origin:top center;text-align:left;}
/* undo the global image rule inside the widget only */
.ta-widget-scale img{display:inline-block;width:auto;max-width:none;height:auto;margin:0;padding:0;}
/* guard against list/link styling reaching the widget */
.ta-widget-scale ul,.ta-widget-scale li{margin:0;padding:0;list-style:none;}
.ta-widget-scale a{display:inline;width:auto;max-width:none;text-transform:none;letter-spacing:normal;line-height:normal;}
/* scale the whole widget on small screens instead of letting text reflow */
@media (max-width:520px){
    .ta-widget-viewport{height:52px;}
    .ta-widget-scale{transform:scale(.72);}
}
@media (max-width:380px){
    .ta-widget-viewport{height:44px;}
    .ta-widget-scale{transform:scale(.64);}
}

/* ==========================================================================
   ADVERTISING PAGE — even option cards & placement grid
   ========================================================================== */
.ad-option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;}
.ad-option-card{background:var(--white);border:1px solid var(--border-color);border-top:4px solid var(--red);border-radius:var(--border-radius);padding:2rem 1.75rem;display:flex;flex-direction:column;}
.ad-option-card h3{margin:0 0 .75rem;color:var(--navy);font-size:1.25rem;}
.ad-option-card p{margin:0 0 1.25rem;font-size:.95rem;flex:1;}
.ad-option-label{display:block;font-weight:700;color:var(--navy);font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;}
.ad-option-card .feature-list{margin:0;}
.ad-place-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;align-items:stretch;}
@media (max-width:900px){.ad-option-grid{grid-template-columns:1fr;}}
@media (max-width:700px){.ad-place-grid{grid-template-columns:1fr;}}

/* Game-Day booking note (hero) */
.gameday-booking-note{max-width:620px;margin:0 auto 2rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-left:4px solid var(--red);border-radius:var(--border-radius);padding:1.25rem 1.5rem;text-align:left;}
.gameday-booking-note h3{margin:0 0 .5rem;color:var(--white);font-size:1.05rem;}
.gameday-booking-note p{margin:0;color:#E5E7EB;font-size:.95rem;}

/* Services hub — full-width Advertising band (different audience than rider services) */
.service-wide-card{display:flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--white);border:1px solid var(--border-color);border-left:5px solid var(--red);border-radius:var(--border-radius);padding:2.25rem 2.5rem;margin-top:2rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.05);}
.service-wide-text{flex:1;}
.service-wide-text h3{margin:.15rem 0 .6rem;color:var(--navy);font-size:1.5rem;}
.service-wide-text p{margin:0;max-width:70ch;}
.service-wide-action{flex-shrink:0;}
@media (max-width:768px){
    .service-wide-card{flex-direction:column;align-items:flex-start;padding:2rem 1.75rem;}
    .service-wide-action{width:100%;}
    .service-wide-action .btn{width:100%;}
}

/* Guard: global `strong { color: var(--text-dark) }` is invisible on dark hero
   sections — let bold text inherit the hero's light color instead. */
.page-hero strong { color: inherit; }

/* ==========================================================================
   PENN STATE TOURS — hero photo corner labels (Option A: inset chip, bottom-left)
   ========================================================================== */
.hero-image-strip .hero-shot{
    flex:1;
    position:relative;
    margin:0;
    line-height:0;
    overflow:hidden;
}
.hero-image-strip .hero-shot img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.hero-badge{
    position:absolute;
    left:16px;
    bottom:16px;
    background:rgba(0,45,98,.88);
    color:var(--white);
    font-size:.8rem;
    font-weight:500;
    letter-spacing:.3px;
    line-height:1.2;
    padding:7px 14px;
    border-radius:4px;
}
@media (max-width:768px){
    .hero-badge{left:10px;bottom:10px;font-size:.72rem;padding:5px 10px;}
}


/* Header brand: full white logo (Option A) */
.brand-logo-full{
    height:64px !important;   /* !important overrides the inline fallback height on the <img> */
    width:auto !important;
    display:block;
}
@media (max-width:768px){ .brand-logo-full{ height:50px !important; } }

/* Advertising option card images */
.ad-option-img{margin:-2rem -1.75rem 1.25rem;height:280px;overflow:hidden;border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--light-blue);}
.ad-option-img img{width:100%;height:100%;object-fit:contain;display:block;}
/* Celebration card images */
.celeb-card-img{height:180px;overflow:hidden;border-radius:var(--border-radius) var(--border-radius) 0 0;}
.celeb-card-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* ==========================================================================
   SLIDESHOW GALLERIES
   ========================================================================== */
.slideshow{position:relative;width:100%;aspect-ratio:3/2;height:auto;border-radius:var(--border-radius);overflow:hidden;background:var(--navy);}
.slideshow .slides{position:absolute;inset:0;}
.slideshow .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;}
.slideshow .slide.active{opacity:1;}
.slide-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;border-radius:50%;background:rgba(0,45,98,.72);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;z-index:2;}
.slide-nav:hover{background:rgba(0,45,98,.95);}
.slide-nav.prev{left:12px;}
.slide-nav.next{right:12px;}
.slide-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:2;}
.slide-dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s ease;}
.slide-dots button.active{background:#fff;}
@media (max-width:768px){ .slideshow{min-height:240px;} .slide-nav{width:34px;height:34px;font-size:1.2rem;} }


/* Footer logo + two-column Explore list */
.footer-logo-img{margin-bottom:1rem;}
.footer-explore-cols{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem 1.5rem;}


/* gallery inside a feature-card should not stretch to the tall text column */
.feature-card-img.has-slideshow{align-self:center;}

/* TripAdvisor real-logo owl icon (extracted from official mark) */
.social-links a:has(.social-owl){ width:30px; }
.social-owl{ height:19px; width:auto; display:block; }
.social-links a:hover .social-owl{ opacity:.8; }