/*
Theme Name: Vancouver DPAC
Theme URI: https://vancouverdpac.org
Description: Custom child theme matching the original Gecko/PeepSo design exactly.
Author: Vancouver DPAC
Template: generatepress
Version: 3.14.0
*/

/* ==========================================================================
   CSS Variables - EXACT match from original vancouverdpac.org
   Measured at 1280px viewport
   ========================================================================== */

:root {
    --vdpac-primary: #6271eb;
    --vdpac-primary-light: #8e99f1;
    --vdpac-primary-dark: #4e5bc5;
    --vdpac-accent-pink: rgba(233, 30, 99, 0.95);
    --vdpac-text: #494954;              /* rgb(73, 73, 84) */
    --vdpac-text-light: #91919d;        /* rgb(145, 145, 157) */
    --vdpac-text-heading: #333333;      /* rgb(51, 51, 51) */
    --vdpac-bg: #F5F8FC;
    --vdpac-bg-white: #fff;
    --vdpac-font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout measurements from original at 1280px */
    --vdpac-max-width: 1300px;          /* Content container - matches original centering behavior */
    --vdpac-content-width: 803px;       /* Posts area */
    --vdpac-sidebar-width: 300px;       /* Sidebar */
    --vdpac-post-width: 394px;          /* Individual post card */
    --vdpac-column-gap: 15px;           /* Gap between columns */
    --vdpac-content-padding: 20px;      /* Side padding */
}

/* ==========================================================================
   Google Fonts - Rubik
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
    height: 100% !important;
}

body {
    font-family: var(--vdpac-font) !important;
    font-size: 18px;
    line-height: 1.15;
    color: var(--vdpac-text);
    background-color: var(--vdpac-bg);
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Site wrapper fills remaining space */
.site,
#page {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--vdpac-bg) !important;
}

/* Main content area grows to fill available space */
.site-content {
    flex: 1 !important;
}

a {
    color: var(--vdpac-primary);
    text-decoration: none;
}

a:hover {
    color: var(--vdpac-primary-dark);
}

/* ==========================================================================
   HEADER - Fixed navigation bar
   Menu on LEFT, Title on RIGHT (same row)
   ========================================================================== */

/* Hide the separate header - title will be in nav */
.site-header {
    display: none !important;
}

/* Navigation becomes the main header area - FIXED */
.nav-below-header #site-navigation,
#site-navigation,
nav.main-navigation {
    background: var(--vdpac-bg-white) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
}

/* Body padding for fixed header - must match header height (~158px) plus spacing */
body.nav-below-header {
    padding-top: 0px !important;
}

body.nav-below-header .site {
    margin-top: 170px !important;
}

/* Inner navigation container - max-width matches content */
.nav-below-header .inside-navigation,
.inside-navigation {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: var(--vdpac-max-width) !important;
    margin: 0 auto !important;
    padding: 0 var(--vdpac-content-padding) !important;
    background: var(--vdpac-bg-white) !important;
    min-height: 70px;
}

/* Navigation menu - LEFT side */
#primary-menu,
.main-navigation .main-nav > ul,
.main-navigation .menu > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-grow: 1 !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Individual menu items */
#primary-menu > li,
.main-navigation .main-nav ul li,
.menu-item {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menu links - EXACT from original: 16.2px, padding 30px 20px, #91919d */
#primary-menu > li > a,
.main-navigation .main-nav ul li a,
.main-navigation a,
.menu-item > a {
    font-family: var(--vdpac-font) !important;
    font-size: 16.2px !important;
    font-weight: 400 !important;
    line-height: 18.63px !important;
    color: var(--vdpac-text-light) !important;
    padding: 30px 20px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: color 0.2s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}

#primary-menu > li > a:hover,
.main-navigation .main-nav ul li a:hover,
.menu-item > a:hover {
    color: var(--vdpac-text-heading) !important;
}

/* Active menu item */
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a,
.menu-item.current-menu-item > a,
.menu-item.current_page_item > a {
    color: var(--vdpac-text) !important;
}

/* Pink underline on active item */
#primary-menu > li.current-menu-item > a::before,
#primary-menu > li.current_page_item > a::before,
.menu-item.current-menu-item > a::before,
.menu-item.current_page_item > a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 60% !important;
    height: 4px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--vdpac-accent-pink) !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

/* ==========================================================================
   SITE TITLE - RIGHT side of navigation
   Original: 28.8px, 700 weight, #91919d (rgb(145, 145, 157))
   ========================================================================== */

#site-navigation a.vdpac-site-title,
.main-navigation a.vdpac-site-title,
a.vdpac-site-title {
    font-family: 'Rubik', sans-serif !important;
    font-size: 28.8px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #91919d !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding: 10px 0 !important;
    max-width: 220px !important;
    text-align: right !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
    white-space: normal !important;
}

#site-navigation a.vdpac-site-title:hover,
.main-navigation a.vdpac-site-title:hover,
a.vdpac-site-title:hover {
    color: #e91e63 !important;
}

/* Menu comes first, title after */
#primary-menu,
.main-nav {
    order: 1 !important;
}

.vdpac-site-title {
    order: 99 !important;
}

.menu-toggle {
    order: 50 !important;
}

.inside-navigation::after {
    display: none !important;
}

/* ==========================================================================
   CONTENT LAYOUT - Two columns + sidebar
   Original: 803px content, 300px sidebar, 15px gaps
   ========================================================================== */

/* GeneratePress grid override - centered with max-width */
.grid-container,
.site.grid-container {
    max-width: var(--vdpac-max-width) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--vdpac-content-padding) !important;
    padding-right: var(--vdpac-content-padding) !important;
    box-sizing: border-box !important;
}

/* Main site content container */
.site-content {
    background-color: var(--vdpac-bg) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Content area wrapper */
.site-content .content-area {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 0 !important;
}

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

/* Override GP percentage-based grid with exact pixel widths */
.content-area.grid-75,
.content-area.grid-parent {
    width: var(--vdpac-content-width) !important;
    max-width: var(--vdpac-content-width) !important;
    flex: 0 0 var(--vdpac-content-width) !important;
}

.sidebar.grid-25,
#right-sidebar.grid-25 {
    width: var(--vdpac-sidebar-width) !important;
    max-width: var(--vdpac-sidebar-width) !important;
    flex: 0 0 var(--vdpac-sidebar-width) !important;
}

/* Ensure site-content uses flexbox for layout */
.site-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
}

/* ==========================================================================
   BLOG POSTS - Two column masonry layout
   Original: 394px posts, 15px gap = 803px total
   ========================================================================== */

/* Posts container - Flexbox for true masonry (JS will handle positioning) */
.home .site-main,
.blog .site-main,
.archive .site-main {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--vdpac-column-gap) !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
}

/* Individual post cards - fixed width for two-column layout */
article.post,
article.page,
.hentry {
    background: var(--vdpac-bg-white) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    width: var(--vdpac-post-width) !important;
    max-width: var(--vdpac-post-width) !important;
    flex: 0 0 var(--vdpac-post-width) !important;
    box-sizing: border-box !important;
}

/* Pagination spans full width */
.home .site-main > nav.pagination,
.blog .site-main > nav.pagination,
.archive .site-main > nav.pagination {
    column-span: all !important;
    display: block !important;
    width: 100% !important;
}

/* Article inner layout - image first */
.inside-article {
    display: flex !important;
    flex-direction: column !important;
}

.inside-article .post-image {
    order: -1 !important;
}

.inside-article .entry-header {
    order: 0 !important;
}

.inside-article .entry-summary {
    order: 1 !important;
}

.inside-article .entry-footer {
    order: 2 !important;
}

/* Featured images */
.post-image,
.entry-image,
.post-thumbnail,
article .featured-image {
    margin: -20px -20px 15px -20px !important;
    overflow: hidden !important;
}

.post-image img,
.entry-image img,
.post-thumbnail img,
article .featured-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* First image in content as fallback thumbnail */
article.post .entry-content img:first-child,
article.post .entry-summary img:first-child {
    margin: -20px -20px 15px -20px !important;
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    height: auto !important;
    display: block !important;
}

/* Entry titles */
.entry-title {
    font-family: var(--vdpac-font) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--vdpac-text-heading) !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

.entry-title a {
    color: var(--vdpac-text-heading) !important;
}

.entry-title a:hover {
    color: var(--vdpac-primary) !important;
}

/* Entry meta */
.entry-meta {
    font-size: 13px !important;
    color: var(--vdpac-text-light) !important;
    margin-bottom: 12px !important;
}

.entry-meta a {
    color: var(--vdpac-text-light) !important;
}

/* Entry content/summary */
.entry-summary,
.entry-content {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--vdpac-text) !important;
}

/* Read more link */
.read-more,
.more-link {
    color: var(--vdpac-primary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* ==========================================================================
   SIDEBAR - 300px width
   ========================================================================== */

.widget-area,
#right-sidebar {
    width: var(--vdpac-sidebar-width) !important;
    flex-shrink: 0 !important;
}

.widget-area .widget {
    background: var(--vdpac-bg-white) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.widget-title {
    font-family: var(--vdpac-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--vdpac-text-heading) !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid rgba(233, 30, 99, 0.1) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

button,
.button,
input[type="submit"],
.wp-block-button__link {
    background-color: var(--vdpac-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    font-family: var(--vdpac-font) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--vdpac-primary-dark) !important;
}

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

.site-footer {
    background-color: #2c3e50 !important;
    color: #fff !important;
    padding: 25px 0 !important;
    margin-top: 30px !important;
    text-align: center !important;
}

.site-footer .site-info {
    font-size: 14px !important;
}

.site-footer a {
    color: var(--vdpac-primary-light) !important;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
    font-family: var(--vdpac-font) !important;
    padding: 10px 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    width: 100% !important;
}

input:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--vdpac-primary) !important;
}

/* ==========================================================================
   GENERATEPRESS OVERRIDES
   ========================================================================== */

.navigation-branding {
    background: transparent !important;
}

.header-widget {
    display: none !important;
}

.site-logo,
.custom-logo-link {
    display: none !important;
}

/* ==========================================================================
   SINGLE POST / PAGE
   ========================================================================== */

.single .site-main,
.page .site-main {
    display: block !important;
    column-count: 1 !important;
}

.single article.post,
.page article.page {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Single post title - larger like original */
.single .entry-title,
.page .entry-title {
    font-size: 28.8px !important;
    font-weight: 600 !important;
    color: var(--vdpac-text-heading) !important;
    margin-bottom: 15px !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .inside-navigation {
        flex-wrap: wrap !important;
        padding: 15px var(--vdpac-content-padding) !important;
    }

    #site-navigation a.vdpac-site-title,
    a.vdpac-site-title {
        order: -1 !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-bottom: 10px !important;
        font-size: 24px !important;
        max-width: 100% !important;
    }

    #primary-menu,
    .main-navigation .main-nav > ul {
        width: 100% !important;
        justify-content: center !important;
        padding-right: 0 !important;
    }

    #primary-menu > li > a,
    .menu-item > a {
        padding: 20px 15px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 768px) {
    /* Prevent horizontal scroll on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Stack content and sidebar vertically on mobile */
    .site-content {
        display: block !important;
        flex-direction: column !important;
    }

    /* Content area full width on mobile */
    .content-area,
    .content-area.grid-75,
    .content-area.grid-parent {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Sidebar full width and below content on mobile */
    .sidebar,
    .widget-area,
    #right-sidebar,
    .sidebar.grid-25,
    #right-sidebar.grid-25 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin-top: 20px !important;
    }

    /* Single column on mobile - full width articles */
    .home .site-main,
    .blog .site-main,
    .archive .site-main {
        display: block !important;
        column-count: 1 !important;
    }

    /* Make articles full width on mobile */
    article.post,
    article.page,
    .hentry {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 15px !important;
    }

    /* Reset masonry positioning on mobile */
    .home article.post,
    .blog article.post,
    .archive article.post {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    #primary-menu > li > a,
    .menu-item > a {
        padding: 15px 12px !important;
        font-size: 14px !important;
    }

    #primary-menu > li.current-menu-item > a::before,
    .menu-item.current-menu-item > a::before {
        height: 3px !important;
    }

    .post-image,
    .entry-image,
    .post-thumbnail {
        margin: -15px -15px 15px -15px !important;
    }

    .entry-title {
        font-size: 18px !important;
    }

    #site-navigation a.vdpac-site-title,
    a.vdpac-site-title {
        font-size: 20px !important;
    }

    /* Mobile navigation - hide full menu, show hamburger */
    #primary-menu,
    .main-navigation .main-nav > ul,
    .main-nav {
        display: none !important;
    }

    /* Show menu only when toggled */
    .main-navigation.toggled #primary-menu,
    .main-navigation.toggled .main-nav > ul,
    .toggled .main-nav {
        display: block !important;
    }

    /* Make nav height reasonable on mobile */
    #site-navigation,
    nav.main-navigation {
        position: relative !important;
        height: auto !important;
        min-height: 60px !important;
    }

    /* Reduce header spacing for mobile */
    body.nav-below-header {
        padding-top: 0px !important;
    }

    body.nav-below-header .site {
        margin-top: 70px !important;
    }
}

@media (max-width: 480px) {
    #site-navigation a.vdpac-site-title,
    a.vdpac-site-title {
        font-size: 18px !important;
    }

    #primary-menu > li > a,
    .menu-item > a {
        padding: 12px 8px !important;
        font-size: 13px !important;
    }
}