/*
Theme Name: Surf Chronic V27 - Vissla Nav
Author: Brady Oshiro
Description: V27 introduces a clean, Vissla-inspired sidebar with collapsible menu support and integrated social grid.
Version: 27.0.0
*/

:root {
    --v-black: #000000;
    --v-white: #ffffff;
    --v-font-serif: 'Times New Roman', Times, serif;
    --v-font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --v-gray-light: #f4f4f4;
    --v-border: #e5e5e5;
}
/* --- RESPONSIVE NAVIGATION LOGIC --- */

/* 1. Default Mobile View: Hide Desktop Menu */
.v-desktop-menu {
    display: none;
}

/* 2. Computer View: Screen wider than 1024px */
@media (min-width: 1025px) {
    /* Hide the Hamburger button */
    .hamburger {
        display: none !important;
    }

    /* Show the Desktop horizontal menu */
    .v-desktop-menu {
        display: block;
    }

    .v-desktop-menu ul {
        list-style: none;
        display: flex; /* Makes items go across horizontally */
        gap: 30px;
        margin: 0;
        padding: 0;
    }

    .v-desktop-menu a {
        text-decoration: none;
        color: #000;
        font-size: 11px; /* Smaller, minimalist look like Vissla */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    /* Center the logo between hamburger area and menu if needed */
    .header-container {
        justify-content: space-between;
    }
    
    .v-logo {
        flex-grow: 0; /* Prevents logo from pushing menu too far */
    }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--v-white); font-family: var(--v-font-sans); color: #1a1a1a; overflow-x: hidden; }

/* --- HEADER --- */
header { background: #fff; padding: 20px 0; position: sticky; top: 0; z-index: 2000; border-bottom: 1px solid var(--v-border); }
.header-container { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; max-width: 1400px; margin: 0 auto; }
.v-logo { text-align: center; flex-grow: 1; }
.v-logo a { text-decoration: none; color: #000; font-size: 28px; font-weight: 900; letter-spacing: 6px; text-transform: uppercase; }
.hamburger { background: none; border: none; font-size: 24px; cursor: pointer; padding: 10px; z-index: 3001; }

/* --- VISSLA SIDEBAR NAVIGATION --- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 3500; display: none; }
.drawer-overlay.active { display: block; }

.drawer {
    position: fixed; top: 0; left: -100%; width: 100%; max-width: 380px; height: 100%;
    background: #fff; z-index: 4000; transition: 0.4s; display: flex; flex-direction: column;
}
.drawer.active { left: 0; }

.drawer-header { padding: 20px; border-bottom: 1px solid var(--v-border); text-align: right; }
.drawer-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #888; }

.drawer-content { flex-grow: 1; overflow-y: auto; }

/* Navigation List */
.drawer ul { list-style: none; padding: 0; margin: 0; }
.drawer li { border-bottom: 1px solid var(--v-border); position: relative; }
.drawer a {
    display: block; padding: 18px 25px; font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px; text-decoration: none; color: #1a1a1a;
}

/* Collapsible Arrow */
.menu-item-has-children > a::after {
    content: '▼'; font-size: 10px; position: absolute; right: 25px; top: 22px; transition: 0.3s; color: #888;
}
.menu-item-has-children.open > a::after { transform: rotate(180deg); }

/* Submenu */
.sub-menu { display: none; background: var(--v-gray-light); }
.menu-item-has-children.open > .sub-menu { display: block; }
.sub-menu a { padding: 15px 40px; font-size: 12px; font-weight: 400; color: #555; }

/* Sidebar Footer & Socials */
.drawer-footer { padding: 25px; background: #fff; }
.log-in { display: block; margin-bottom: 20px; font-size: 13px; font-weight: 700; color: #1a1a1a; text-decoration: none; }

.social-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--v-border); border-left: 1px solid var(--v-border);
}
.social-item {
    padding: 15px; text-align: center; border-right: 1px solid var(--v-border); border-bottom: 1px solid var(--v-border);
    text-decoration: none; color: #1a1a1a; font-size: 18px; transition: 0.3s;
}
.social-item:hover { background: var(--v-gray-light); }

/* Hides the Log In link in the sidebar drawer */
.drawer-footer .log-in {
    display: none !important;
}
/* --- HERO SLIDER --- */
.v-hero { width: 100%; background: #000; position: relative; overflow: hidden; padding: 5px; }
.v-slide { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
.v-slide-img { width: 100%; height: auto; display: block; max-height: 85vh; object-fit: contain; }
.v-slide-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; color: #fff; z-index: 10; text-align: center; }
.v-overline { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 12px; }
.v-slide-content h2 { font-family: var(--v-font-serif); font-size: clamp(1.6rem, 5vw, 3.5rem); font-weight: 400; text-transform: uppercase; margin: 0 0 12px; letter-spacing: 8px; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,0.9); }
.v-btn { display: inline-block; padding: 7px 20px; border: 1px solid #fff; color: #fff; text-transform: uppercase; font-size: 8px; letter-spacing: 2px; border-radius: 50px; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); text-decoration: none; transition: 0.3s; }
.swiper-button-next, .swiper-button-prev { color: #fff !important; transform: scale(0.4); }

/* --- GRID --- */
.v-section { padding: 60px 20px; max-width: 1400px; margin: 0 auto; }
.section-title { text-align: center; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 50px; }
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 1024px) { .grid-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-container { grid-template-columns: 1fr; } }
.img-holder { width: 100%; height: 400px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
article img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.article-info { padding: 15px 0; text-align: left; }
article h3 { font-size: 13px; font-weight: 900; text-transform: uppercase; margin: 0; letter-spacing: 1px; }
article p.category { font-size: 10px; text-transform: uppercase; color: #888; margin-bottom: 4px; letter-spacing: 1px; }