/**
 * Whitey's Fish Camp - Shared Styles
 * Shared variables, fonts, typography, and reusable components.
 */

/* ============================================
   LOCAL FONTS
   ============================================ */
@font-face {
    font-family: 'Relation';
    src: url('../fonts/relation-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'AxiForma';
    src: url('../fonts/Axiforma-Regular.woff2') format('woff2'),
         url('../fonts/Axiforma-Regular.woff') format('woff'),
         url('../fonts/Axiforma-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AxiForma';
    src: url('../fonts/Axiforma-SemiBold.woff2') format('woff2'),
         url('../fonts/Axiforma-SemiBold.woff') format('woff'),
         url('../fonts/Axiforma-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AxiForma';
    src: url('../fonts/Axiforma-Bold.woff2') format('woff2'),
         url('../fonts/Axiforma-Bold.woff') format('woff'),
         url('../fonts/Axiforma-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   BRAND COLORS
   ============================================ */
:root {
    --whiteys-dark: #2b3642;
    --whiteys-blue: #4b84a6;
    --whiteys-green: #85b686;
    --whiteys-cream: #fdefcf;
    --whiteys-white: #ffffff;
}

/* ============================================
   BASE / TYPOGRAPHY
   ============================================ */
body {
    font-family: 'AxiForma', 'Montserrat', Arial, sans-serif;
    color: var(--whiteys-dark);
    font-weight: 400;
}

/* Accessibility: Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    background: var(--whiteys-green);
    color: var(--whiteys-dark) !important;
    padding: 10px 20px;
    font-family: 'AxiForma', Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none !important;
    border-radius: 4px;
    z-index: 99999;
    transition: top 0.2s ease-in-out;
}

.skip-link:focus {
    top: 20px;
}

/* Global Keyboard Focus Outlines (WCAG compliant) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 3px solid var(--whiteys-green) !important;
    outline-offset: 3px !important;
}


p, .section-text p, .faq-answer {
    color: var(--whiteys-dark) !important;
}

h1, h2, h3, h4, h5, h6, .script-font {
    font-family: 'Relation', 'Great Vibes', cursive;
    font-weight: normal;
}

/* ============================================
   BUTTONS (SHARED)
   ============================================ */
.button,
.section-actions .button,
.menu-btn {
    font-family: 'AxiForma', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    padding: 18px 45px;
    border-radius: 4px;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.3s ease;
    border: none !important;
    cursor: pointer;
    line-height: 1;
    box-shadow: none !important;
    background: transparent;
}

.button-green {
    background-color: var(--whiteys-green) !important;
    color: var(--whiteys-dark) !important;
}

.button-blue {
    background-color: var(--whiteys-blue) !important;
    color: var(--whiteys-white) !important;
}

/* ============================================
   GENERATEPRESS OVERRIDES — SHARED
   ============================================ */

/* Generic full-width layout for Whitey's templates */
body.whiteys-full-width .grid-container,
.whiteys-full-width .grid-container {
    max-width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
}

body.whiteys-full-width .site-content,
.whiteys-full-width .site-content {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

body.whiteys-full-width .site-main,
.whiteys-full-width .site-main {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.whiteys-full-width .entry-content,
.whiteys-full-width .entry-content {
    margin: 0 !important;
    padding: 0 !important;
}

body.whiteys-full-width .entry-content > *,
body.whiteys-full-width .site-main > *,
.whiteys-full-width .entry-content > section {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

body.whiteys-full-width p:empty {
    display: none;
}

/* Hide the default GP header — we use our own overlay header */
body.whiteys-full-width .site-header {
    display: none !important;
}

/* Remove default GP spacing between sections/elements */
body.whiteys-full-width .page-header, 
body.whiteys-full-width .sidebar .widget, 
body.whiteys-full-width .site-main > * {
    margin-bottom: 0 !important;
}

/* ============================================
   HEADER / NAV OVERLAY (SHARED)
   ============================================ */
.hero-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: clamp(25px, 2.67vw, 50px) 0;
    background: transparent !important;
    transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-header .grid-container {
    background: transparent !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.hero-nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 clamp(30px, 3.21vw, 60px);
}

.hero-nav-wrapper .nav-left,
.hero-nav-wrapper .nav-right {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-nav-wrapper .nav-left {
    justify-content: flex-end;
    gap: 10px;
}

.hero-nav-wrapper .nav-right {
    justify-content: flex-start;
    gap: 10px;
}

.nav-menu {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 10px;
}

.hero-nav-wrapper .nav-logo {
    flex: 0 0 auto;
    padding: 0 clamp(35px, 3.74vw, 70px);
}

.hero-header li {
    list-style-type: none !important;
    margin: 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Reset current page highlight for overlay nav */
.hero-header .current-menu-item a,
.hero-header .current-page-ancestor a,
.hero-header .current-menu-ancestor a {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.hero-header a {
    color: var(--whiteys-white) !important;
    text-transform: uppercase !important;
    font-family: 'AxiForma', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.hero-header a:hover {
    opacity: 0.7;
}

.hero-header .menu-btn {
    background-color: var(--whiteys-blue) !important;
    color: var(--whiteys-white) !important;
    font-size: 14px !important;
    padding: 16px 40px !important;
    border-radius: 4px;
    letter-spacing: 2px !important;
    margin-left: 20px !important;
}

.hero-header ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
}

/* Tablet / Small Desktop Refinements (Prevents Menu Overflow) */
@media (max-width: 1260px) and (min-width: 769px) {
    .hero-nav-wrapper {
        padding: 0 30px;
    }
    .hero-nav-wrapper .nav-logo {
        padding: 0 30px;
    }
    .hero-header li {
        margin: 0 6px !important;
    }
    .hero-header a {
        font-size: 10px !important;
        letter-spacing: 1px !important;
    }
    .hero-header .menu-btn {
        padding: 12px 25px !important;
        font-size: 12px !important;
        margin-left: 10px !important;
    }
    .hero-logo-img {
        max-width: 160px;
    }
}

/* Desktop Sticky Header on Scroll */
@media (min-width: 769px) {
    .hero-header.scrolled {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 90px !important;
        background-color: var(--whiteys-dark) !important;
        padding: 0 !important;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3) !important;
        z-index: 999;
    }
    
    .hero-header.scrolled .hero-nav-wrapper {
        height: 100% !important;
    }

}

/* Premium Crossfade Logo Transition on Scroll */
.hero-header .nav-logo a {
    position: relative;
    display: inline-block;
}

.hero-header .hero-logo-img {
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-header .dark-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    opacity: 0;
    pointer-events: none;
}

.hero-header .default-logo {
    opacity: 1;
}

.hero-header.scrolled .default-logo {
    opacity: 0;
    pointer-events: none;
}

.hero-header.scrolled .dark-logo {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-toggle {
    display: none;
}

.mobile-menu-panel {
    display: none;
}

/* ============================================
   HERO SECTION (SHARED BASE)
   ============================================ */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: clamp(550px, 45.5vw, 850px);
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--whiteys-white);
    text-align: center;
}

/* Modifier: Inner Page Heroes (Shorter height) */
.hero-section--inner {
    height: 90vh;
    min-height: clamp(420px, 50.8vw, 750px);
}

.hero-section--inner .hero-content {
    margin-top: clamp(55px, 5.35vw, 100px);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}

.hero-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    z-index: 10;
    padding: clamp(30px, 3.21vw, 60px) 40px 0;
}

.hero-title {
    font-family: 'Relation', cursive;
    font-size: clamp(56px, 5.6vw, 105px);
    margin-bottom: 25px;
    line-height: 1;
}

.hero-subheading {
    font-size: clamp(18px, 1.7vw, 32px);
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-text {
    font-size: clamp(14px, 1.07vw, 20px);
    line-height: 1.6;
    max-width: clamp(500px, 42.8vw, 800px);
    margin: 0 auto 40px;
}

/* ============================================
   REUSABLE SPLIT SECTION
   ============================================ */
.whiteys-split-section {
    display: flex;
    width: 100%;
    min-height: clamp(480px, 40.1vw, 750px);
    align-items: stretch;
}

.whiteys-split-section--image-right {
    flex-direction: row-reverse;
}

.whiteys-split-content {
    width: 50%;
    background-color: var(--whiteys-white);
    padding: clamp(55px, 5.35vw, 100px) 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whiteys-split-section--white .whiteys-split-content {
    background-color: var(--whiteys-white);
}

.whiteys-split-inner {
    max-width: clamp(380px, 31vw, 580px);
    text-align: center;
    width: 100%;
}

.whiteys-split-inner .script-font {
    font-size: clamp(24px, 2.25vw, 42px);
    margin-bottom: 5px;
    color: var(--whiteys-dark);
}

.whiteys-split-inner .section-heading {
    font-size: clamp(40px, 3.85vw, 72px);
    margin-bottom: 25px;
    line-height: 1.05;
}

.whiteys-split-inner .section-text {
    font-size: clamp(14px, 1.07vw, 20px);
    line-height: 1.8;
    margin-bottom: 35px;
}

.whiteys-split-image {
    width: 50%;
    position: relative;
}

.whiteys-split-image .map-container {
    height: 100%;
    min-height: 500px;
    line-height: 0;
    overflow: hidden;
}

.whiteys-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Modifier: with-bg-illustration (like homepage intro) */
.whiteys-split-section--with-bg-illustration .whiteys-split-content {
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: left center;
}

/* Modifier: cream-bg */
.whiteys-split-section--cream-bg,
.whiteys-split-section--cream-bg .whiteys-split-content,
.whiteys-split-section--cream-bg .whiteys-split-image,
.whiteys-map-card-section.whiteys-split-section--cream-bg,
.whiteys-cream-bg {
    background-color: var(--whiteys-cream) !important;
}

/* ============================================
   BOTTOM CTA SECTION (SHARED)
   ============================================ */
.bottom-cta-section {
    background-image: var(--desktop-bg);
    background-size: cover;
    background-position: 80% center;
    background-repeat: no-repeat;
    padding: clamp(85px, 8.56vw, 160px) 0;
    color: var(--whiteys-dark);
    width: 100%;
}

@media (max-width: 768px) {
    .bottom-cta-section.has-mobile-bg {
        background-image: var(--mobile-bg) !important;
        background-position: center bottom;
    }
}

.bottom-cta-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(40px, 4.28vw, 80px);
}

.bottom-cta-content .content-inner {
    max-width: 550px;
    text-align: center;
    margin-left: 0;
    margin-right: auto;
}

.bottom-cta-content .script-font {
    font-size: clamp(28px, 2.78vw, 52px);
    margin-bottom: 5px;
    color: var(--whiteys-dark);
    white-space: nowrap;
}

.bottom-cta-content .cta-main-title {
    font-family: 'AxiForma', sans-serif;
    font-weight: 900;
    font-size: clamp(60px, 5.88vw, 110px);
    line-height: 0.85;
    letter-spacing: -2px;
    margin: 0 0 30px;
    text-transform: uppercase;
    color: var(--whiteys-dark);
}

.bottom-cta-content .section-text {
    font-size: clamp(14px, 0.96vw, 18px);
    line-height: 1.7;
    margin: 0 auto 40px;
    max-width: 450px;
}

/* Map specific styling for split section */
.whiteys-split-image .map-container {
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    position: relative;
    z-index: 2;
}

.whiteys-split-image .map-container img,
.whiteys-split-image .map-container iframe {
    width: auto !important;
    max-width: 100%;
    height: 450px !important;
    position: relative !important; /* Override the absolute positioning */
    top: auto !important;
    left: auto !important;
    border: none;
    object-fit: contain;
    box-shadow: none;
}

/* Generic Flex Actions for buttons */
.flex-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media (max-width: 768px) {
    .flex-actions {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .flex-actions .button {
        width: 100% !important;
        text-align: center;
        padding: 18px 20px !important;
    }
}

/* Modifier: card-style (for RV rates/rentals) */
.whiteys-split-section--card-style .section-card {
    border: 3px solid var(--whiteys-blue); /* Default 3px blue */
    padding: 30px;
    margin-bottom: 30px;
    background: #fff;
    text-align: left;
}

.whiteys-split-section--card-style .section-card h3 {
    text-align: center;
    margin-bottom: 20px;
}

/* Card Color Modifiers */
.section-card--border-blue { border-color: var(--whiteys-blue) !important; }
.section-card--border-green { border-color: var(--whiteys-green) !important; }
.section-card--border-dark { border-color: var(--whiteys-dark) !important; }
.section-card--border-cream { border-color: var(--whiteys-cream) !important; }

.whiteys-split-section--green-outline .section-card--highlight {
    border: 3px solid var(--whiteys-green) !important;
}

.section-card h3 {
    font-size: clamp(24px, 1.71vw, 32px);
    margin-bottom: 15px;
    font-family: 'Relation', cursive;
}

.section-card p {
    font-size: clamp(13px, 0.856vw, 16px);
    line-height: 1.6;
    margin-bottom: 15px;
}

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

/* ============================================
   WHITEYS ACCORDION (FAQ)
   ============================================ */
.whiteys-accordion {
    max-width: 1000px;
    margin: 0 auto 100px;
}

.accordion-group {
    margin-bottom: 20px;
}

.accordion-header {
    background: #eef3f7;
    border: 1px solid #cbd6df;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    position: relative;
}

.accordion-header:hover {
    background: #e2eaf0;
}

h2.accordion-heading,
h3.accordion-heading,
.accordion-header h2,
.accordion-header h3 {
    margin: 0;
    font-family: 'AxiForma', sans-serif !important;
    font-size: clamp(15px, 0.96vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--whiteys-dark);
}

.accordion-icon {
    font-size: 28px;
    font-weight: 400;
    color: var(--whiteys-dark);
    line-height: 1;
}

.accordion-content {
    border: 1px solid #cbd6df;
    border-top: none;
    padding: 40px 60px;
    display: none;
    background: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.accordion-group.is-open .accordion-content {
    display: block;
}

.accordion-group.is-open .accordion-header {
    background: #fff;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Partial bottom border when open */
.accordion-group.is-open .accordion-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background-color: #cbd6df;
}

.accordion-group.is-open .accordion-icon:after {
    content: '\2212'; /* Minus sign */
}

.accordion-icon:after {
    content: '\002B'; /* Plus sign */
}

.faq-item {
    margin-bottom: 35px;
}

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

.faq-question {
    font-weight: 700;
    font-size: clamp(15px, 0.96vw, 18px);
    margin-bottom: 10px;
    display: block;
}

.faq-answer {
    font-size: clamp(13px, 0.856vw, 16px);
    line-height: 1.7;
    color: var(--whiteys-dark);
}

/* ============================================
   WHITEYS ICON LIST (CAREERS)
   ============================================ */
.whiteys-icon-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.whiteys-icon-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.whiteys-icon-list .icon-wrapper {
    flex: 0 0 50px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
}

.whiteys-icon-list .icon-wrapper img {
    max-width: 100%;
    height: auto;
}

/* Modifier: compact (for Careers page benefits) */
.whiteys-split-section--compact {
    min-height: auto;
}

.whiteys-split-section--compact .whiteys-split-content {
    padding-top: clamp(55px, 5.35vw, 100px);
    padding-bottom: clamp(55px, 5.35vw, 100px);
}

.whiteys-split-section--compact .whiteys-split-content:first-child {
    justify-content: flex-end;
    padding-right: 4%;
}

.whiteys-split-section--compact .whiteys-split-content:last-child {
    justify-content: flex-start;
    padding-left: 4%;
}

.whiteys-split-section--compact .whiteys-split-inner {
    max-width: 480px;
}

.whiteys-split-section--compact .whiteys-icon-list .icon-wrapper {
    flex: 0 0 35px;
}

.whiteys-split-section--compact .section-text {
    font-size: clamp(13px, 0.856vw, 16px);
    line-height: 1.6;
}

.whiteys-icon-list .label {
    font-size: clamp(15px, 0.96vw, 18px);
    font-weight: 600;
}

/* ============================================
   WHITEYS IMAGE GALLERY (4 Images)
   ============================================ */
.whiteys-image-gallery {
    display: flex;
    width: 100%;
    height: clamp(200px, 18.72vw, 350px);
    overflow: hidden;
    line-height: 0;
}

.whiteys-gallery-item {
    height: 100%;
}

.whiteys-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Pattern: 2x, 1x, 2x, 1x (Total 6 units) */
.whiteys-gallery-item--wide {
    width: 33.333%;
}

.whiteys-gallery-item--narrow {
    width: 16.666%;
}

@media (max-width: 768px) {
    .whiteys-image-gallery {
        height: auto;
    }
    .whiteys-gallery-item {
        display: none;
    }
    .whiteys-gallery-item:first-child {
        display: block;
        width: 100%;
    }
}

/* Utilities */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* ============================================
   DARK HEADER (FAQ/INTERNAL)
   ============================================ */
.header-dark {
    background-color: var(--whiteys-dark) !important;
    position: relative !important;
    padding: 30px 0 !important;
}

.header-dark .hero-nav-wrapper {
    padding: 0 60px;
}

@media (min-width: 769px) {
    .header-dark {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    /* Prevent content layout overlap for pages with solid header */
    .whiteys-page-contact,
    .whiteys-page-faq,
    .whiteys-page-terms {
        padding-top: clamp(100px, 9.6vw, 120px) !important;
    }
}

/* ============================================
   FOOTER (SHARED)
   ============================================ */
.site-footer {
    background-color: var(--whiteys-dark);
    padding: clamp(45px, 4.28vw, 80px) 0 30px;
    color: var(--whiteys-white);
}

.footer-top {
    max-width: 1400px;
    margin: 0 auto 50px;
    padding: 0 clamp(30px, 3.21vw, 60px);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.footer-logo {
    margin-right: clamp(40px, 4.28vw, 80px);
}

.footer-logo img {
    max-width: clamp(180px, 14.97vw, 280px);
}

.footer-navs {
    display: flex;
    gap: clamp(40px, 4.28vw, 80px);
    margin-right: clamp(40px, 4.28vw, 80px);
    padding-top: 25px;
}

.footer-navs ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.footer-col a,
.footer-navs a {
    color: var(--whiteys-white) !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-family: 'AxiForma', Arial, sans-serif;
    font-size: clamp(12px, 0.749vw, 14px);
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 18px;
    transition: opacity 0.3s ease;
}

.footer-col a:hover,
.footer-navs a:hover {
    opacity: 0.7;
}

.footer-actions {
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
    justify-content: space-between;
}

.footer-socials {
    display: flex;
    gap: 15px;
    padding-top: 25px;
}

.footer-actions .menu-btn {
    margin-top: 25px;
    background-color: var(--whiteys-blue) !important;
    color: var(--whiteys-white) !important;
    height: clamp(45px, 3.21vw, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(25px, 2.41vw, 45px) !important;
    border-radius: 8px !important;
}

.social-icon {
    width: clamp(45px, 3.21vw, 60px);
    height: clamp(45px, 3.21vw, 60px);
    font-size: clamp(16px, 1.18vw, 22px);
    background: var(--whiteys-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--whiteys-white) !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease;
}

.social-icon:hover {
    opacity: 0.8;
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px clamp(30px, 3.21vw, 60px) 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--whiteys-white);
}

.footer-bottom a {
    color: var(--whiteys-white) !important;
    text-decoration: none !important;
}

.footer-bottom a:hover {
    opacity: 0.7;
}

/* ============================================
   SHARED SECTION HELPERS
   ============================================ */
.section-heading {
    font-family: 'Relation', cursive;
    font-size: clamp(36px, 3.42vw, 64px);
    color: var(--whiteys-dark);
    margin-bottom: 30px;
}

.script-font {
    font-family: 'Relation', cursive;
    font-size: clamp(28px, 2.57vw, 48px);
    margin-bottom: 10px;
}

/* ============================================
   MOBILE STICKY HEADER
   ============================================ */
.mobile-sticky-header {
    display: none; /* Hidden on desktop */
}

/* ============================================
   MOBILE RESPONSIVE - SHARED (FOOTER / NAV)
   ============================================ */
@media (max-width: 768px) {
    /* Sticky Header Bar */
    .mobile-sticky-header {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Push content to the right */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 12px 20px;
        background-color: #2b3642;
        z-index: 9999;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        height: 80px; /* Fixed height for easier centering */
    }

    .sticky-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
    }

    .sticky-logo img {
        height: 35px;
        width: auto;
        display: block;
    }

    .mobile-sticky-header.is-visible {
        transform: translateY(0);
    }

    .sticky-toggle {
        position: static !important;
        display: block !important;
        background: none;
        border: none;
        padding: 10px;
        z-index: 10001;
    }

    .sticky-toggle span {
        display: block;
        width: 35px;
        height: 3px;
        background: var(--whiteys-white);
        margin: 8px 0;
        transition: all 0.3s ease;
    }

    .sticky-toggle.active span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }
    .sticky-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .sticky-toggle.active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }

    /* Hide the original hero hamburger when sticky is showing */
    .mobile-sticky-header.is-visible ~ .hero-header .mobile-menu-toggle,
    body.sticky-header-visible .hero-header .mobile-menu-toggle {
        opacity: 0;
        pointer-events: none;
    }

    /* But re-show the hero toggle (X button) when the menu is actually open,
       so the user can close it even after scrolling down */
    body.mobile-menu-open.sticky-header-visible .hero-header .mobile-menu-toggle:not(.sticky-toggle) {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .hero-nav-wrapper {
        display: flex !important;
        justify-content: center !important;
    }

    .hero-nav-wrapper .nav-left,
    .hero-nav-wrapper .nav-right {
        display: none !important;
    }

    .hero-nav-wrapper .nav-logo {
        padding: 0 !important;
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        flex: 0 0 auto !important;
    }

    .hero-logo-img {
        max-width: 180px !important;
        display: block !important;
        margin: 0 auto !important;
        height: auto !important;
    }

    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        padding: 10px;
        position: fixed;
        top: 30px;
        right: 25px;
        z-index: 10001;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 42px;
        height: 4px;
        background: var(--whiteys-white);
        margin: 10px 0;
        transition: all 0.3s ease;
    }

    /* Hamburger → X animation */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(14px) rotate(45deg);
    }
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-14px) rotate(-45deg);
    }

    /* Mobile Menu Panel */
    .mobile-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--whiteys-dark);
        z-index: 10000;
        padding: 120px 40px 40px;
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow-y: auto;
        transform: translateY(-100%);
    }

    .mobile-menu-open .mobile-menu-panel {
        transform: translateY(0);
    }

    .mobile-menu-panel .mobile-nav-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 40px !important;
        display: block !important;
    }

    .mobile-menu-panel .mobile-nav-list li {
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: block;
        list-style: none;
    }

    .mobile-menu-panel .mobile-nav-list a {
        color: var(--whiteys-white) !important;
        text-decoration: none !important;
        text-transform: uppercase;
        font-family: 'AxiForma', Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        display: block;
        padding: 20px 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-panel .mobile-nav-list a:hover {
        opacity: 0.7;
    }

    .mobile-menu-panel .menu-btn {
        display: block;
        text-align: center;
        width: 100%;
        padding: 18px 30px !important;
        font-size: 14px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 20px !important;
    }

    /* Body overlay when menu is open — removed, full-screen panel replaces it */

    /* Hide hero elements behind menu */
    .mobile-menu-open .slider-dots,
    .mobile-menu-open .hero-overlay,
    .mobile-menu-open .hero-slider-container {
        z-index: 0 !important;
    }

    /* Hero Mobile Refinement (Shared) */
    .hero-section {
        min-height: 600px;
        height: auto;
        padding: 150px 0 100px;
    }

    .hero-title {
        font-size: 64px !important;
        margin-bottom: 15px;
    }

    .hero-subheading {
        font-size: 22px !important;
        margin-bottom: 15px;
    }

    .hero-text {
        font-size: 16px !important;
        padding: 0 20px;
        line-height: 1.5;
    }

    /* Split Section Mobile */
    .whiteys-split-section {
        flex-direction: column !important;
        min-height: auto;
    }

    .whiteys-split-section--image-right {
        flex-direction: column !important; /* Image stays on top */
    }

    .whiteys-split-content,
    .whiteys-split-image {
        width: 100% !important;
    }

    .whiteys-split-image {
        height: auto;
        order: 2; /* Image after content on mobile */
        position: relative;
    }

    .whiteys-split-image img {
        position: relative;
        height: auto !important;
        width: 100%;
        display: block;
    }

    .whiteys-split-image .map-container {
        padding: 20px;
        min-height: auto !important;
    }

    .whiteys-split-image .map-container img {
        height: auto !important;
        width: 100% !important;
        object-fit: contain;
    }

    .whiteys-split-content {
        padding: 60px 25px;
        order: 1; /* Content before image on mobile */
    }

    .whiteys-split-inner {
        max-width: 100%;
    }

    .whiteys-split-inner .script-font {
        font-size: 32px;
    }

    .whiteys-split-inner .section-heading {
        font-size: 42px;
        margin-bottom: 20px;
    }

    .whiteys-split-inner .section-text {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    /* Footer Mobile Polish */
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 35px;
        padding: 0 30px;
    }

    .footer-logo,
    .footer-navs {
        margin-right: 0;
    }
    
    .footer-logo img {
        max-width: 210px;
    }

    .footer-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px;
        width: 100%;
        margin-left: 0;
        flex-grow: 0;
    }

    .footer-socials {
        padding-top: 0;
        display: flex;
        gap: 15px;
    }
    
    .social-icon {
        width: 56px;
        height: 56px;
    }

    .footer-actions .menu-btn {
        margin-top: 0;
        margin-bottom: 0;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 70px !important;
        font-size: 14px !important;
        width: auto;
    }

    .footer-navs {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-navs a {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        text-align: center;
        padding: 30px;
    }

    /* Accordion Mobile */
    .accordion-header {
        padding: 20px 25px;
    }

    h2.accordion-heading,
    h3.accordion-heading,
    .accordion-header h2,
    .accordion-header h3 {
        font-size: 16px;
    }

    .accordion-content {
        padding: 25px;
    }

    .whiteys-accordion {
        padding: 0 20px;
    }
}

/* ============================================
   EVENTS PAGE COMPONENTS
   ============================================ */

/* Events Load More helper styles */
.whiteys-event-card.event-hidden {
    display: none !important;
}
.event-month-group.group-hidden {
    display: none !important;
}

.whiteys-events-grid {
    display: flex;
    width: 100%;
    min-height: clamp(500px, 42.8vw, 800px);
    align-items: flex-start; /* Don't stretch the sidebar background all the way down */
}

.whiteys-events-left {
    width: 40%;
    padding: clamp(55px, 5.35vw, 100px) 5% clamp(55px, 5.35vw, 100px) 8%;
    display: flex;
    justify-content: flex-end;
}

.whiteys-events-right {
    width: 60%;
    background-color: var(--whiteys-white);
    padding: clamp(55px, 5.35vw, 100px) 8% clamp(55px, 5.35vw, 100px) 5%;
}

.happy-hour-card {
    background-color: var(--whiteys-dark);
    color: var(--whiteys-white);
    padding: clamp(35px, 3.21vw, 60px) clamp(25px, 2.14vw, 40px);
    width: 100%;
    max-width: 420px;
    text-align: center;
    border-radius: 2px;
}

.happy-hour-card .small-title {
    font-size: clamp(12px, 0.749vw, 14px);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    display: block;
}

.happy-hour-card .script-title {
    font-size: clamp(32px, 2.78vw, 52px);
    margin-bottom: 25px;
    color: var(--whiteys-white);
}

.happy-hour-card .schedule-text {
    font-size: clamp(12px, 0.749vw, 14px);
    margin-bottom: 30px;
    line-height: 1.6;
}

.happy-hour-card .items-list {
    font-size: clamp(12px, 0.749vw, 14px);
    line-height: 1.8;
    margin-bottom: 40px;
}

.happy-hour-card .items-list p {
    margin-bottom: 0;
}

.event-month-group {
    margin-bottom: 60px;
}

.event-month-group .month-heading {
    font-family: 'AxiForma', sans-serif;
    font-size: clamp(22px, 1.71vw, 32px);
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.whiteys-event-card {
    display: flex;
    align-items: center;
    border: 1px solid #e1e1e1;
    padding: 20px 30px;
    margin-bottom: 15px;
    gap: 30px;
}

.whiteys-event-card .date-circle {
    background-color: var(--whiteys-dark);
    color: var(--whiteys-white);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    line-height: 1;
}

.whiteys-event-card .date-circle .month {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
}

.whiteys-event-card .date-circle .day {
    font-size: 24px;
    font-weight: 700;
}

.whiteys-event-card .event-info {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.whiteys-event-card .event-title {
    font-family: 'AxiForma', sans-serif;
    font-size: clamp(15px, 0.96vw, 18px);
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: var(--whiteys-dark);
}

.whiteys-event-card .event-meta {
    font-size: clamp(12px, 0.749vw, 14px);
    color: #666;
    line-height: 1.4;
}

.whiteys-event-card .event-actions {
    flex-shrink: 0;
}

.whiteys-event-card .button {
    padding: 12px 30px;
    font-size: clamp(11px, 0.695vw, 13px);
}

.events-load-more {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    color: #999;
}

/* Responsive Events */
@media (max-width: 1024px) {
    .whiteys-events-grid {
        flex-direction: column;
    }
    .whiteys-events-left,
    .whiteys-events-right {
        width: 100%;
        padding: 80px 5%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .whiteys-event-card {
        flex-direction: row;
        flex-wrap: wrap;
        text-align: left;
        gap: 20px;
        padding: 25px 20px;
        align-items: flex-start;
    }
    .whiteys-event-card .date-circle {
        margin: 0;
    }
    .whiteys-event-card .event-info {
        width: calc(100% - 85px); /* Subtract circle width + gap */
        display: block; /* Override desktop flex alignment on mobile */
    }
    .whiteys-event-card .event-actions {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
    
    .hide-on-mobile {
        display: none !important;
    }
}

/* ============================================
   MENU PAGE COMPONENTS
   ============================================ */

.whiteys-menu-section {
    padding: clamp(55px, 5.35vw, 100px) 0;
    background-color: var(--whiteys-white);
}

.whiteys-menu-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Desktop Tabs */
.whiteys-menu-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0;
    list-style: none !important;
    padding: 0;
}

.menu-tab-btn {
    padding: 15px 40px;
    background-color: #f1f4f6;
    color: var(--whiteys-dark);
    font-family: 'AxiForma', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    border: 1px solid #e1e1e1;
    border-bottom: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px 4px 0 0;
    min-width: 180px;
    text-align: center;
}

.menu-tab-btn.is-active {
    background-color: var(--whiteys-dark);
    color: var(--whiteys-white);
    border-color: var(--whiteys-dark);
}

/* Menu Content Container */
.whiteys-menu-container {
    border: 1px solid #e1e1e1;
    padding: 0;
    display: none;
    background: #fff;
}

.whiteys-menu-container.is-active {
    display: block;
}

.menu-banner {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.menu-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
}

.menu-banner .banner-text-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

.menu-banner h2 {
    color: #fff;
    font-size: clamp(36px, 3.42vw, 64px);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 5px;
}

.menu-banner .menu-subtitle {
    color: #fff;
    font-family: 'AxiForma', Arial, sans-serif;
    font-size: clamp(14px, 1.07vw, 18px);
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin-top: 5px;
}

.menu-content-padding {
    padding: clamp(35px, 3.21vw, 60px) clamp(45px, 4.28vw, 80px);
}

.menu-category-group {
    margin-bottom: 80px;
}

.category-heading {
    text-align: center;
    font-size: clamp(28px, 2.57vw, 48px);
    margin-bottom: 50px;
    position: relative;
}

.category-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: #e1e1e1;
    margin: 20px auto 0;
}

.menu-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
}

.whiteys-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.item-thumb {
    flex: 0 0 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
}

.item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details {
    flex-grow: 1;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.item-name {
    font-family: 'AxiForma', sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 0.96vw, 18px);
    margin: 0;
}

.item-price {
    font-family: 'AxiForma', sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 0.96vw, 18px);
}

.item-desc {
    font-size: clamp(12px, 0.749vw, 14px);
    color: #666;
    line-height: 1.6;
}

/* Mobile Accordion Styles — Menu Page Only */
.whiteys-page-menu .accordion-header {
    display: none; /* Hidden on desktop, shown on mobile */
    background-color: #f1f4f6;
    padding: 20px 25px;
    border: 1px solid #e1e1e1;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    font-family: 'AxiForma', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.whiteys-page-menu .accordion-header.is-active {
    background-color: var(--whiteys-dark);
    color: var(--whiteys-white);
    margin-bottom: 0;
}

.whiteys-page-menu .accordion-header .accordion-icon::before {
    content: '+';
    font-size: 24px;
    font-weight: 400;
}

.whiteys-page-menu .accordion-header.is-active .accordion-icon::before {
    content: '\2212'; /* Unicode minus sign */
}

/* Ensure no other pseudo-elements are adding icons */
.whiteys-page-menu .accordion-header::after,
.whiteys-page-menu .accordion-header .accordion-icon::after {
    display: none !important;
}

@media (max-width: 1024px) {
    .menu-content-padding {
        padding: 40px;
    }
    .menu-items-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .whiteys-menu-tabs {
        display: none;
    }
    .whiteys-page-menu .accordion-header {
        display: flex;
    }
    .whiteys-menu-container {
        display: none !important; /* Managed by JS/Accordion */
        border: 1px solid #37404a; /* Dark grey border */
        background: #fff;
        margin-bottom: 15px;
    }
    .whiteys-menu-container.is-open {
        display: block !important;
        margin: -12px !important;
        padding: 12px !important;
        position: relative;
        z-index: 1;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .menu-banner {
        height: 200px;
    }
    .menu-banner h2 {
        font-size: 42px;
    }
    .mobile-menu-subtitle {
        color: var(--whiteys-dark) !important;
        text-shadow: none !important;
        text-align: center;
        font-size: 15px;
        font-family: 'AxiForma', Arial, sans-serif;
        font-weight: 500;
        line-height: 1.6;
        letter-spacing: 0.5px;
        padding: 20px 20px 0;
        text-transform: none;
    }
    .category-heading {
        font-size: 36px;
    }

    .whiteys-split-image .map-container {
        padding: 40px 20px;
    }
    
    .whiteys-split-image .map-container iframe {
        height: 400px !important;
    }
}

/* Contact Page Map Card */
.whiteys-map-card-section {
    padding: clamp(45px, 4.28vw, 80px) 0 clamp(55px, 5.35vw, 100px);
    display: flex;
    justify-content: center;
}

.map-card-container {
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
}

.map-card-container iframe {
    width: 100% !important;
    height: clamp(350px, 26.7vw, 500px) !important;
    box-shadow: 0 0 0 10px rgba(55, 64, 74, 0.5);
    border: none;
    display: block;
}

.whiteys-page-contact .whiteys-contact-form-section .section-heading {
    font-family: 'AxiForma', sans-serif !important;
    font-weight: 900 !important;
    font-size: 21px !important;
    text-transform: uppercase;
    color: var(--whiteys-dark);
    margin-bottom: 10px !important; /* Reduced space to match comp */
}

/* Contact Page Desktop Layout Refinements */
.whiteys-contact-form-section {
    min-height: auto !important;
}

.whiteys-contact-form-section .whiteys-split-content {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    align-items: flex-start !important;
}

/* Contact Page Details & Form Refinements */
.whiteys-page-contact .whiteys-split-inner h3 {
    font-family: 'AxiForma', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--whiteys-dark) !important;
    margin-bottom: 10px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.whiteys-page-contact .whiteys-split-inner p {
    font-size: clamp(13px, 0.856vw, 16px);
    color: var(--whiteys-dark);
    margin-bottom: 30px;
    line-height: 1.6;
}

.whiteys-page-contact .whiteys-split-inner p:last-child {
    margin-bottom: 0;
}

/* Specific styling for Address/Phone links if they exist */
.whiteys-page-contact .whiteys-split-inner p a {
    color: var(--whiteys-blue);
    font-weight: 600;
    display: inline-block;
    padding: 6px 0;
}
.whiteys-page-contact .whiteys-split-inner p:nth-of-type(1),
.whiteys-page-contact .whiteys-split-inner p:nth-of-type(2) {
    color: var(--whiteys-blue);
    font-weight: 600;
}

.whiteys-page-contact .whiteys-split-inner p small {
    display: block;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 10px;
}

/* Form Styling - Targeted HTML Structure Fix */
.whiteys-cf7-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Standard vertical gap */
}

.whiteys-cf7-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.whiteys-cf7-form .form-full,
.whiteys-cf7-form .form-full p,
.whiteys-cf7-form .form-full .wpcf7-form-control-wrap {
    width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
}

.whiteys-cf7-form .form-half {
    width: calc(50% - 8px); /* Perfect 50/50 with 15px gap */
}

@media (max-width: 600px) {
    .whiteys-cf7-form .form-half {
        width: 100%;
    }
}

.whiteys-cf7-form p {
    margin: 0 !important;
    padding: 0 !important;
}

.whiteys-cf7-form .form-heading h2,
.whiteys-cf7-form .form-heading h3 {
    display: none !important; /* Hide doubled heading */
}

.whiteys-cf7-form .form-heading p {
    font-size: 16px;
    color: var(--whiteys-dark);
    margin-bottom: 10px !important;
}

.whiteys-form-wrapper input:not([type="submit"]),
.whiteys-form-wrapper textarea {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid #2b3642 !important; /* Specific brand navy */
    padding: 15px 20px !important;
    font-family: 'AxiForma', sans-serif;
    font-size: clamp(13px, 0.856vw, 16px);
    color: var(--whiteys-dark);
    border-radius: 5px; /* 5px rounding as requested */
    box-sizing: border-box;
}

/* WCAG 2.1 AA Compliant Form Styling Overrides */
.whiteys-form-label {
    display: block !important;
    font-family: 'AxiForma', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--whiteys-dark) !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Ensure high-contrast boundaries (>= 3:1) for all form inputs globally */
.wpcf7-form-control:not([type="submit"]),
.whiteys-form-wrapper input:not([type="submit"]),
.whiteys-form-wrapper textarea,
.whiteys-rewards-form input:not([type="submit"]),
input:not([type="submit"]):not([type="button"]):not([type="image"]),
select,
textarea {
    background-color: #ffffff !important;
    border: 1px solid #767676 !important; /* Compliant contrast ratio (4.5:1) against white */
    color: var(--whiteys-dark) !important;
    font-family: 'AxiForma', sans-serif !important;
    box-sizing: border-box !important;
}

/* Clear visible keyboard focus rings */
.wpcf7-form-control:not([type="submit"]):focus-visible,
.whiteys-form-wrapper input:not([type="submit"]):focus-visible,
.whiteys-form-wrapper textarea:focus-visible,
.whiteys-rewards-form input:not([type="submit"]):focus-visible,
input:not([type="submit"]):not([type="button"]):not([type="image"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--whiteys-green) !important;
    outline-offset: 2px !important;
    border-color: var(--whiteys-green) !important;
}

/* Rewards Form Specific Overrides */
.whiteys-rewards-form {
    max-width: 800px;
    margin: 0 auto;
    background: white; /* Card-like appearance if needed, or transparent if bg image is enough */
    padding: 60px;
    border-radius: 12px;
}

.whiteys-rewards-form input:not([type="submit"]) {
    background-color: white !important;
    width: 100% !important;
    border: 1px solid #555 !important;
    padding: 15px !important;
    border-radius: 5px !important;
}

.whiteys-rewards-form input[type="submit"] {
    background-color: var(--whiteys-green) !important;
    color: var(--whiteys-dark) !important;
    font-family: 'AxiForma', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 15px 80px !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: block !important;
    margin: auto !important;
}

.whiteys-rewards-form input[type="submit"]:hover {
    opacity: 0.9;
}

.whiteys-rewards-form .form-heading-center {
    text-align: center;
    margin-bottom: 40px;
}

.whiteys-rewards-form .form-heading h2,
.whiteys-rewards-form .form-heading h3 {
    display: block !important; /* Show on rewards page */
    font-family: 'Relation', 'Great Vibes', cursive !important;
    font-size: clamp(40px, 3.74vw, 70px) !important;
    color: var(--whiteys-dark) !important;
    text-transform: none !important;
    margin-bottom: 20px !important;
}

.whiteys-rewards-form .form-disclaimer {
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--whiteys-dark);
    margin: 20px 0;
}

.whiteys-rewards-form .form-submit-center {
    justify-content: center !important;
}

.whiteys-rewards-form .form-submit-center p {
    text-align: center;
    width: 100%;
}

.whiteys-form-wrapper textarea {
    height: 180px;
}

.whiteys-form-wrapper input[type="submit"] {
    background-color: var(--whiteys-green) !important;
    color: var(--whiteys-dark) !important; /* Changed to dark navy to match site buttons */
    font-family: 'AxiForma', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 20px 60px !important;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none !important;
    margin: 20px auto 0 !important; /* Auto margins for centering */
    display: block !important; /* Block for centering with auto margin */
}

.whiteys-form-wrapper input[type="submit"]:hover {
    opacity: 0.8;
}

.whiteys-contact-form-section {
    padding: clamp(55px, 5.35vw, 100px) 5%;
}

@media (max-width: 1024px) {
    .whiteys-contact-form-section {
        flex-direction: column;
    }
    .whiteys-contact-form-section .whiteys-split-content {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 50px;
    }
}

/* Category Description */
.category-description {
    text-align: center;
    max-width: 800px;
    margin: -30px auto 50px;
    font-size: clamp(15px, 0.96vw, 18px);
    line-height: 1.6;
    color: #666;
}

/* Lightbox Styles */
.whiteys-lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
}

.whiteys-lightbox.is-active {
    display: flex;
}

.lightbox-content {
    margin: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    animation-name: zoom;
    animation-duration: 0.3s;
}

@keyframes zoom {
    from {transform:scale(0.8); opacity: 0;}
    to {transform:scale(1); opacity: 1;}
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2001;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
}

.lightbox-close:hover {
    background: rgba(0,0,0,0.8);
}

@media only screen and (max-width: 768px){
    .lightbox-content {
        width: 95%;
        max-height: 70vh;
    }
    .category-description {
        font-size: 16px;
        margin-bottom: 30px;
    }
    .whiteys-rewards-form {
        padding: 20px !important;
    }
    .whiteys-rewards-form input[type="submit"] {
        padding: 15px 40px !important;
    }
}

/* ============================================
   CUSTOM TWEAKS & LAYOUT REFINEMENTS
   ============================================ */
.whiteys-split-section--card-style .section-card {
    padding: 20px;
}

.whiteys-event-card { 
    border: 1px solid #000;
}

.whiteys-split-section.whiteys-split-section--image-right.whiteys-split-section--cream-bg .whiteys-split-inner .section-heading {
    font-size: clamp(40px, 4.05vw, 72px);
}

.whiteys-events-grid .items-list p {
    color: #fff;
}

.whiteys-rewards-form {
    padding: 15px 60px;
}

.page-template-template-whiteys-careers .whiteys-split-inner .script-font {
    font-size: clamp(24px, 3.25vw, 60px);
}

.whiteys-page-contact .whiteys-contact-form-section .section-heading {
    font-size: 21px;
}

.faq-page-title {
    font-size: 64px;
    margin-top: 100px;
    margin-bottom: 50px;
    text-align: left;
}

@media (max-width: 768px) {
    .hero-logo-img {
        max-width: 180px !important;
    }
    .mobile-menu-toggle {
        top: 80px;
    }
    .flex-actions .button {
        width: 70% !important;
        margin: auto;
    }
    .page-template-template-whiteys-about .whiteys-split-image, 
    .page-template-template-whiteys-rv-park .whiteys-split-image {
        order: 0;
    }
    .page-template-template-whiteys-about .whiteys-split-inner h2 {
        font-size: 13vw;
    }
    .page-template-template-whiteys-events .hero-section, 
    .page-template-template-whiteys-rv-park .hero-section {
        padding: 150px 0 50px;
    }
    .whiteys-events-left {
        padding: 5%;
    }
    .whiteys-event-card .event-actions {
        text-align: left;
    }
    .whiteys-events-right .month-heading {
        font-size: 40px;
    }
    .page-template-template-whiteys-rv-park .whiteys-split-section--cream-bg .whiteys-split-image {
        order: 2;
    }
    .page-template-template-whiteys-rv-park .whiteys-split-section--cream-bg .whiteys-split-content {
        padding-bottom: 20px;
    }
    .faq-page-title {
        font-size: 48px;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 30px;
    }
    .whiteys-contact-form-section .whiteys-split-content {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    .whiteys-contact-form-section .whiteys-split-content:first-child {
        padding-top: 40px !important;
        padding-bottom: 15px !important;
    }
    .whiteys-contact-form-section .whiteys-split-content:last-child {
        padding-top: 15px !important;
        padding-bottom: 40px !important;
    }
}

.page-template-template-whiteys-rv-park .whiteys-split-section--card-style .section-card h3 {
    font-size: 48px !important;
}

.page-template-template-whiteys-events .happy-hour-card .items-list p {
    color: #fff !important;
}

.happy-hour-card .schedule-text {
    font-size: 18px !important;
}

.happy-hour-card .items-list {
    font-size: 18px !important;
}

.bottom-cta-content .script-font {
    font-size: clamp(28px, 3.8vw, 72px);
}

@media (max-width: 768px) {
    .intro-content-col .section-heading { 
        font-size: 38px;
    }
    .bottom-cta-content .script-font {
        font-size: clamp(38px, 3.8vw, 72px);
    }
    .bottom-cta-section {
        padding: 180px 0;
    }
    .bottom-cta-content {
        margin-top: -20vw;
        padding-bottom: 120px;
    }
    .page-template-template-whiteys-careers .whiteys-split-inner .script-font {
        font-size: 10vw;
    }
    .whiteys-event-card .event-title, .whiteys-event-card .event-meta {
        font-size: 5vw;
        text-align: center;
    }
    .whiteys-page-contact .whiteys-split-inner p a {
        padding: 12px 0;
    }
}

/* Fix mobile menu panel positioning and stacking context on all templates.
   The .hero-header has a `transition` property which creates a containing block
   for position:fixed descendants. When the menu is open, we must break that
   containing block by removing the transition and forcing full-viewport coverage. */
@media (max-width: 768px) {
    body.mobile-menu-open .hero-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 100000 !important;
        transition: none !important;
        overflow: visible !important;
    }

    /* When menu is open, the toggle (X button) must be fixed so it stays visible */
    body.mobile-menu-open .header-dark .mobile-menu-toggle {
        position: fixed !important;
        top: 30px !important;
        right: 25px !important;
        transform: none !important;
        z-index: 10001 !important;
    }

    /* Force mobile menu panel visibility on dark headers when active */
    body.mobile-menu-open .header-dark .mobile-menu-panel {
        transform: translateY(0) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Ensure mobile menu toggle is positioned correctly on dark headers and overrides any theme button styles */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    /* On dark headers, the toggle should be part of the header flow (not fixed)
       so it scrolls away with the header. The sticky-header toggle takes over on scroll. */
    .header-dark .mobile-menu-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%);
    }
    /* Remove the transition on dark headers on mobile so position:fixed children work correctly */
    .header-dark {
        transition: none !important;
    }
}

/* Accessible button resets for the Menu Page accordions and lightbox dialog controls */
button.accordion-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    font-family: 'AxiForma', sans-serif !important;
    font-size: clamp(15px, 0.96vw, 18px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--whiteys-dark) !important;
    background-color: #e6eef2;
    border: none !important;
    box-shadow: none !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

button.accordion-header:hover {
    background-color: #e2eaf0;
}

.accordion-group.is-open button.accordion-header {
    background-color: #ffffff !important;
}

button.item-thumb {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

button.lightbox-close {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Ensure focus outline on the lightbox triggers and close buttons behaves properly */
button.item-thumb:focus-visible,
button.lightbox-close:focus-visible {
    outline: 3px solid var(--whiteys-green) !important;
    outline-offset: 2px !important;
}

button.accordion-header:focus-visible,
.accordion-header:focus-visible {
    outline: 3px solid var(--whiteys-green) !important;
    outline-offset: -3px !important; /* Inset outline to prevent clipping container edges */
}

/* Semantic list override to look visually identical to paragraph breaks */
ul.semantic-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5em 0 !important;
}
ul.semantic-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}