/*
Theme Name: Twin Springs Resort
Theme URI: https://www.twinspringsresort.com/
Author: Twin Springs Resort
Description: Modern, independent standalone theme for Twin Springs Resort featuring the exact textured slate sidebar, wood header beam, authentic fonts, colors, and 100% PHP 8+ compatibility.
Version: 2.9.4
*/

/* --- CSS Reset & Global Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    padding: 0;
    color: #4b4940;
    background-color: #c6c4b8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
a { color: #295173; text-decoration: none; }
a:hover { color: #1d3448; text-decoration: underline; }

/* Completely remove top "You asked. We listened..." announcement bar */
.mysticky-welcomebar-fixed,
.mysticky-welcomebar-fixed-wrap,
#mysticky-welcomebar,
.mysticky-welcomebar-content,
.mysticky-welcomebar-btn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* --- Typography (Matches Original Site) --- */
h1, .h1 {
    color: #22415d;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 18px;
}
h2, .h2 {
    color: #22415d;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 24px;
    line-height: 1.3;
    margin: 25px 0 12px;
}
h3, .h3 {
    color: #5b5746;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 20px;
    line-height: 1.35;
    margin: 18px 0 10px;
}
h4, .h4 {
    color: #204362;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 17px;
    line-height: 1.4;
}
p { margin: 0 0 16px; }

/* --- Layout Architecture: 350px Sidebar + Main Content --- */
.site-wrapper { width: 100%; min-height: 100vh; }
.site-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* =========================================================================
   AUTHENTIC TEXTURED SIDEBAR (Matches Screenshot 1 Proportions)
   ========================================================================= */
.site-sidebar {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    flex: 0 0 270px !important;
    background-image: url(/wp-content/uploads/2018/01/menu350-2.jpg) !important;
    background-repeat: repeat-y !important;
    background-color: #1a2c3d !important;
    background-size: 100% auto !important;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 4px 0 15px rgba(0,0,0,0.35);
}
@media (min-width: 1300px) {
    .site-sidebar {
        width: 310px !important;
        min-width: 310px !important;
        max-width: 310px !important;
        flex: 0 0 310px !important;
    }
}

.sidebar-inner {
    padding: 12px 0 25px !important;
    display: flex;
    flex-direction: column;
}

/* 1. Social Icons at Top */
.sidebar-social {
    text-align: center !important;
    margin: 10px 0 16px !important;
    padding: 0 10px !important;
}
.sidebar-social a, .sidebar-social img {
    display: inline-block;
    margin: 0 4px;
    vertical-align: middle;
    max-width: 42px;
    height: auto;
    transition: transform 0.2s ease;
}
.sidebar-social a:hover img {
    transform: scale(1.08);
}

/* 2. Twin Springs Resort Logo - Matches Screenshot 1 */
.sidebar-logo {
    text-align: center !important;
    margin: 0 0 16px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}
.sidebar-logo img {
    max-width: 238px !important;
    width: 100% !important;
    height: auto !important;
    display: inline-block !important;
}

/* 3. Phone & Email Banner (wood-menu.jpg) - 48px height */
.sidebar-phone-box {
    width: 100% !important;
    height: 48px !important;
    background-image: url(/wp-content/uploads/2018/01/wood-menu.jpg) !important;
    background-repeat: repeat !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 0 16px !important;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}
.sidebar-phone-num {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    font-size: 21px !important;
    color: #4da2e8 !important;
    font-weight: normal;
    line-height: 1.1;
    text-decoration: none !important;
    letter-spacing: 0.5px;
}
.sidebar-phone-num:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.sidebar-email-addr {
    font-size: 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    margin-top: 1px;
    opacity: 0.95;
}
.sidebar-email-addr:hover {
    color: #aeac2f !important;
    text-decoration: underline;
}

/* 4. Vertical Navigation Menu - Compact line spacing */
.sidebar-nav {
    padding: 0 24px !important;
}
.ts-menu, .ts-menu ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ts-menu > li {
    list-style: none !important;
    list-style-type: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    clear: both !important;
    position: relative !important;
}
.ts-menu > li > a {
    color: #aeac2f !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    font-size: 15px !important;
    line-height: 22px !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    transition: color 0.15s ease, transform 0.15s ease;
}
.ts-menu > li > a:hover {
    color: #e5e34b !important;
    text-decoration: none !important;
    transform: translateX(4px);
}
.ts-menu .arrow {
    font-size: 11px;
    margin-left: 4px;
    color: #aeac2f;
    vertical-align: 1px;
}
.ts-menu li.current-item > a {
    text-decoration: underline !important;
}

/* Sub-menus */
.ts-menu ul.sub-menu {
    list-style: none !important;
    margin: 8px 0 12px 0 !important;
    padding: 6px 0 6px 14px !important;
    border-left: 2px solid rgba(174, 172, 47, 0.45) !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-radius: 0 4px 4px 0 !important;
    display: none !important;
}
.ts-menu li.menu-has-children:hover > ul.sub-menu,
.ts-menu li.menu-has-children.is-active > ul.sub-menu {
    display: block !important;
}
.ts-menu ul.sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
}
.ts-menu ul.sub-menu li a {
    display: block !important;
    color: #7ea3c4 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 4px 8px !important;
    transition: all 0.15s ease;
}
.ts-menu ul.sub-menu li a:hover {
    color: #cbc821 !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    padding-left: 12px !important;
}

/* =========================================================================
   RIGHT MAIN CONTENT & HORIZONTAL WOOD TOP BAR
   ========================================================================= */
.site-main-content {
    flex: 1;
    min-width: 0;
    background-color: #c6c4b8;
    display: flex;
    flex-direction: column;
}

.top-wood-header-bar {
    width: 100% !important;
    height: 48px !important;
    background-image: url(/wp-content/uploads/2018/01/wood1.jpg) !important;
    background-repeat: repeat-x !important;
    background-size: auto 100% !important;
}
    background-size: auto 100%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

.content-area {
    flex: 1 0 auto;
    padding: 30px 40px 60px;
}

/* Full-bleed layout on homepage (Slider touches wood bar and sidebar seamlessly) */
.home .content-area {
    padding: 0;
}
.homeslider {
    width: 100%;
    margin: 0;
    line-height: 0;
}
.homeslider .motoslider_wrapper {
    margin: 0 auto;
}

/* Banners */
.banner1 {
    width: 100%;
    height: 70px;
    background-image: url(/wp-content/uploads/2018/01/wood1.jpg);
    background-repeat: repeat-x;
}
.banner2 {
    width: 100% !important;
    padding: 35px 30px !important;
    color: #1d3448 !important;
    background-image: url(/wp-content/uploads/2018/01/yellow-bg.jpg) !important;
    background-repeat: repeat !important;
    box-sizing: border-box !important;
}
.banner2 a { color: #1d3448; font-weight: bold; }
.banner2 img { border: 4px solid #79781c; border-radius: 3px; }
.inside-banner {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* Section 1 & Section 3: All 4 Columns Strictly on ONE Single Row */
.home-four-grid,
.banner2 .inside-banner > div,
.banner3 .home-four-grid,
.banner3 .inside-banner > div,
.banner3 .inside-banner .ts-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 20px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.home-four-grid > p,
.banner2 .inside-banner > div > p,
.banner3 .inside-banner > div > p,
.banner3 .inside-banner .ts-row > p {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.home-four-grid > div,
.banner2 .inside-banner > div > div,
.banner3 .inside-banner > div > div,
.banner3 .inside-banner .ts-col,
.banner3 .inside-banner .ts-col-sm-3,
.banner3 .inside-banner .ts-col-md-3,
.banner3 .inside-banner .ts-col-lg-3 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    padding: 0 !important;
}
@media (max-width: 600px) {
    .home-four-grid,
    .banner2 .inside-banner > div,
    .banner3 .home-four-grid,
    .banner3 .inside-banner > div,
    .banner3 .inside-banner .ts-row {
        grid-template-columns: 1fr !important;
    }
}
.banner2 h2, .home-four-grid h2 {
    color: #22415d !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 12px 0 8px !important;
}
.banner2 h2 a, .home-four-grid h2 a {
    color: #22415d !important;
    text-decoration: none !important;
}
.banner2 h2 a:hover, .home-four-grid h2 a:hover {
    color: #1d3448 !important;
    text-decoration: underline !important;
}
.banner2 p, .home-four-grid p {
    color: #4b4940 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
}
.home-four-grid img, .banner2 img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    border: 4px solid #79781c !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
}
.home-four-grid .ngg-galleryoverview,
.home-four-grid .ngg-slideshow {
    max-width: 100% !important;
    width: 100% !important;
    min-height: auto !important;
}
.banner3 {
    width: 100% !important;
    padding: 35px 25px !important;
    background-color: #ffffff !important;
    border-bottom: 10px solid #ffffff !important;
    box-sizing: border-box !important;
}
.banner3 h3, .banner3 h3 a {
    color: #22415d !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 12px 0 8px !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
.banner3 h3 a:hover {
    color: #1d3448 !important;
    text-decoration: underline !important;
}
.banner3 p {
    color: #4b4940 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
}
.banner3 img {
    width: 100% !important;
    max-width: 100% !important;
    height: 165px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.footer-links-wrap, .footerlinks {
    display: none !important;
}

/* --- Responsive 12-Column Grid / Flexbox --- */
.ts-row, .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    box-sizing: border-box;
}
.ts-col, [class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}
.ts-col-xs-12, .col-xs-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
    .ts-col-sm-3, .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .ts-col-sm-4, .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .ts-col-sm-5, .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .ts-col-sm-6, .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .ts-col-sm-7, .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .ts-col-sm-8, .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .ts-col-sm-12, .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    .ts-col-md-3, .col-md-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .ts-col-md-4, .col-md-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .ts-col-md-5, .col-md-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
    .ts-col-md-6, .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .ts-col-md-7, .col-md-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
    .ts-col-md-8, .col-md-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .ts-col-md-12, .col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}

@media (min-width: 1200px) {
    .ts-col-lg-3, .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .ts-col-lg-4, .col-lg-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .ts-col-lg-6, .col-lg-6 { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* Helpers */
.ts-spacer { height: 25px; clear: both; }
.ts-btn {
    background-color: #1d3448;
    color: #ffffff !important;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.2s;
}
.ts-btn:hover { background-color: #295173 !important; text-decoration: none; }

/* Tables */
.ratestable1 { width: 100%; border-collapse: collapse; margin: 20px 0; }
.ratestable1 th, .ratestable1 td { border: 1px solid #b2b0a4; padding: 8px 12px; }
.ratestable1 th { background-color: #22415d; color: #ffffff; }

/* --- FOOTER --- */
.site-footer {
    color: #1d3448 !important;
    background-color: #a4a195 !important;
    background-image: url(/wp-content/uploads/2018/01/wood2.jpg) !important;
    background-repeat: repeat-x !important;
    background-position: top center !important;
    padding-top: 135px !important;
    padding-bottom: 35px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 14px;
    line-height: 22px;
    text-align: center !important;
}
.footer-container { max-width: 1200px; margin: 0 auto; }
.sidebar-footer-1, .footer-inner { text-align: center; }
.footer-links-wrap, .footerlinks, .footer-widgets, .widget.page_in_widget {
    display: none !important;
}
.site-footer img[src=""], .site-footer img:not([src]) {
    display: none !important;
}
.site-footer .footer-logo-wrap {
    margin: 0 0 20px !important;
    text-align: center !important;
}
.site-footer .footer-logo {
    display: inline-block !important;
    max-width: 380px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}
.site-footer .footer-address {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #1d3448 !important;
    margin: 0 0 12px !important;
    text-align: center !important;
}
.site-footer .footer-contact {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #1d3448 !important;
    margin: 0 0 20px !important;
    text-align: center !important;
}
.site-footer .footer-contact a {
    color: #1d3448 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}
.site-footer .footer-contact a:hover {
    text-decoration: underline !important;
}
.site-info {
    font-size: 13px !important;
    color: #4b4940 !important;
    margin-top: 25px !important;
    border-top: 1px solid rgba(0,0,0,0.15) !important;
    padding-top: 15px !important;
    text-align: center !important;
}
.site-info a { color: #1d3448 !important; text-decoration: none !important; }
.site-info .footer-credits a { color: #666666 !important; font-size: 12px !important; }

/* --- MOBILE & TABLET (< 992px) --- */
.mobile-top-bar { display: none; }
.mobile-close-btn { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 991px) {
    .site-layout { flex-direction: column; }
    
    .mobile-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-image: url(/wp-content/uploads/2018/01/wood-menu.jpg);
        background-repeat: repeat;
        padding: 10px 18px;
        position: sticky;
        top: 0;
        z-index: 1050;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .mobile-logo-link img { max-height: 48px; width: auto; }
    .mobile-top-actions { display: flex; align-items: center; gap: 10px; }
    .mobile-call-btn {
        background-color: #aeac2f;
        color: #1d3448;
        padding: 7px 14px;
        border-radius: 4px;
        font-weight: bold;
        text-decoration: none;
    }
    .mobile-toggle-btn {
        background-color: #1d3448;
        color: #ffffff;
        border: 1px solid #aeac2f;
        padding: 7px 14px;
        border-radius: 4px;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
    }

    .site-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2000;
        box-shadow: 5px 0 25px rgba(0,0,0,0.6);
    }
    .site-sidebar.is-open {
        transform: translateX(0);
    }

    .mobile-close-btn {
        display: block;
        align-self: flex-end;
        background: transparent;
        border: none;
        color: #ffffff;
        font-size: 32px;
        line-height: 1;
        cursor: pointer;
        padding: 0 15px;
        margin-top: -15px;
        margin-bottom: 5px;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.65);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1990;
    }
    .sidebar-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    .content-area {
        padding: 20px 15px 40px;
    }
}