/*
Theme Name:  Ojistoh Child
Theme URI:   https://ojistoh.ca
Author:      HyperGraphik Design Inc.
Author URI:  https://hypergraphik.com
Description: Child theme for Ojistoh.
Version:     1.6.5
Template:    ojistoh-theme
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ojistoh-child
*/

/* ── Featured event label — clears sticky nav ── */
.oj-hero__featured-label { padding-top: 20px; }

/* ── Hide orphan Pagelayer hero block ── */
.oj-artists-hero { display: none !important; }

/* ════════════════════════════════════════════════════════════
   HERO PATTERN BACKGROUNDS
   Hardcoded absolute URLs — no PHP dependency.
   Books: diamond-star | Events: zigzag-sage | Artists: stars-tile
════════════════════════════════════════════════════════════ */
.oj-page-header {
    position: relative;
    overflow: hidden;
}
.oj-page-header .oj-wrap {
    position: relative;
    z-index: 1;
}
.oj-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-repeat: repeat;
}
.oj-books-archive .oj-page-header::before {
    background-image: url('https://ojistoh.ca/wp-content/themes/ojistoh-theme/assets/patterns/diamond-star.svg');
    background-size: 24px 24px;
    opacity: 0.08;
}
.oj-events-archive .oj-page-header::before {
    background-image: url('https://ojistoh.ca/wp-content/themes/ojistoh-theme/assets/patterns/zigzag-sage.svg');
    background-size: 80px 80px;
    opacity: 0.06;
}
.oj-artists-page .oj-page-header::before {
    background-image: url('https://ojistoh.ca/wp-content/themes/ojistoh-theme/assets/patterns/stars-tile.svg');
    background-size: 120px 120px;
    opacity: 0.055;
}

/* ── WooCommerce product image — no sticky overlap ── */
.woocommerce div.product .woocommerce-product-gallery {
    position: static !important;
    align-self: start;
}

/* ── Artists page media grid — 2 col desktop, 1 col mobile ── */
.oj-artist-single .oj-media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 900px;
}
.oj-artist-single .oj-media-card {
    background: var(--oj-ink);
    border: 1px solid rgba(240,230,160,0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.oj-artist-single .oj-media-card:hover {
    border-color: rgba(240,230,160,0.25);
    transform: translateY(-2px);
}
.oj-artist-single .oj-media-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.oj-artist-single .oj-media-card__discipline { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oj-slate-text); }
.oj-artist-single .oj-media-card__title { font-family: var(--oj-font-display); font-size: 17px; font-weight: 400; line-height: 1.2; }
.oj-artist-single .oj-media-card__title a { color: var(--oj-white); text-decoration: none; }
.oj-artist-single .oj-media-card__title a:hover { color: var(--oj-star); }
.oj-artist-single .oj-media-card__artists { font-size: 12px; color: var(--oj-ash); }
.oj-artist-single .oj-media-card__artist { color: var(--oj-ash); text-decoration: none; }
.oj-artist-single .oj-media-card__artist:hover { color: var(--oj-star); }
.oj-artist-single .oj-media-card__year { font-size: 11px; color: var(--oj-slate-text); margin-top: 2px; }
.oj-artist-single .oj-media-card__thumb { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background: var(--oj-dusk); overflow: hidden; }
.oj-artist-single .oj-media-card__thumb-img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; display: block; }
.oj-artist-single .oj-media-card__thumb-link { display: block; text-decoration: none; }
@media ( max-width: 768px ) {
    .oj-artist-single .oj-media-grid { grid-template-columns: 1fr; max-width: 100%; }
}

/* ── Filter pills — artists page matches books page style ── */
.oj-media-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--oj-font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oj-ash);
    background: transparent;
    border: 1px solid rgba(240,230,160,0.15);
    border-radius: 2px;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.oj-media-filter-pill:hover { border-color: rgba(240,230,160,0.3); color: var(--oj-white); }
.oj-media-filter-pill[aria-pressed="true"] { background: var(--oj-star); color: var(--oj-night); border-color: var(--oj-star); font-weight: 500; }

/* ── Nav — ID-based selectors to override cached styles ── */
#primary-menu, #primary-menu li { list-style: none !important; list-style-type: none !important; margin: 0 !important; padding: 0 !important; }
.oj-nav__inner { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; height: 100% !important; gap: 0 !important; }
#site-navigation { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; }
#primary-menu { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; flex-direction: row !important; }
#primary-menu > li { height: 100% !important; display: flex !important; align-items: center !important; position: relative !important; }
#primary-menu > li > a { display: flex !important; align-items: center !important; height: 100% !important; padding: 0 18px !important; font-family: var(--oj-font-sans) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--oj-ash) !important; text-decoration: none !important; white-space: nowrap !important; }
#primary-menu > li > a:hover, #primary-menu > li.current-menu-item > a { color: var(--oj-white) !important; }
.oj-nav__logo { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-family: var(--oj-font-display) !important; font-size: 22px !important; font-weight: 400 !important; color: var(--oj-white) !important; text-decoration: none !important; flex-shrink: 0 !important; padding-right: 32px !important; }
.oj-nav__shop { flex-shrink: 0 !important; font-size: 11px !important; padding: 10px 20px !important; margin-left: 32px !important; }
@media ( max-width: 768px ) {
    .oj-nav__inner { display: flex !important; justify-content: space-between !important; }
    .oj-nav__toggle { display: flex !important; }
    .oj-nav__shop { display: none !important; }
    .oj-nav__logo { padding-right: 0 !important; }
    #site-navigation { display: none !important; position: absolute !important; top: 64px !important; left: 0 !important; right: 0 !important; background: var(--oj-ink) !important; flex-direction: column !important; align-items: flex-start !important; height: auto !important; padding: 16px 0 24px !important; z-index: 100 !important; }
    #site-navigation.is-open { display: flex !important; }
    #primary-menu { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; height: auto !important; }
    #primary-menu > li { height: auto !important; width: 100% !important; }
    #primary-menu > li > a { height: auto !important; padding: 12px 32px !important; font-size: 13px !important; width: 100% !important; }
}

/* ════════════════════════════════════════════════════════════
   EVENTS PAGE — single column layout on tablet and mobile.
   Sidebar stacks above event cards at 900px and below.
════════════════════════════════════════════════════════════ */
@media ( max-width: 900px ) {
    /* Stack sidebar above event list */
    .oj-events-layout {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    /* Release sticky positioning on sidebar — no longer needed */
    .oj-events-sidebar {
        position: static !important;
    }
    /* Sidebar filter blocks stack naturally */
    .oj-sidebar-block {
        margin-bottom: 24px;
    }
    /* Event cards full width */
    .oj-event-card {
        grid-column: 1 / -1 !important;
    }
    /* Month group grids collapse to 1 col */
    .oj-events-month-group,
    .oj-events-grid,
    .oj-event-list {
        grid-template-columns: 1fr !important;
    }
}