/*
Theme Name: Outhouse Poets
Theme URI: https://outhousepoets.com
Author: Telex
Description: A modern rustic country music band theme inspired by western bars, reclaimed wood, and vintage concert posters. Dark walnut surfaces, burnt gold accents, and slab serif typography create an intimate honky-tonk atmosphere.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: outhouse-poets
Tags: block-themes, full-site-editing, custom-colors, custom-fonts, one-column, three-columns, wide-blocks, entertainment
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ----------------------------------------------------------------
   ROOT & BODY
   ---------------------------------------------------------------- */

:root,
body,
.wp-site-blocks {
        overflow: visible;
}

body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

/* Distressed wood / leather body texture */
body {
        background-color: var(--wp--preset--color--dark-walnut);
        background-image:
                repeating-linear-gradient(
                        90deg,
                        transparent 0px,
                        transparent 18px,
                        rgba(0, 0, 0, 0.06) 18px,
                        rgba(0, 0, 0, 0.06) 19px
                ),
                repeating-linear-gradient(
                        180deg,
                        transparent 0px,
                        transparent 120px,
                        rgba(93, 59, 34, 0.12) 120px,
                        rgba(93, 59, 34, 0.12) 121px
                ),
                linear-gradient(
                        180deg,
                        var(--wp--preset--color--dark-walnut) 0%,
                        var(--wp--preset--color--deep-shadow) 100%
                );
}

/* ----------------------------------------------------------------
   TYPOGRAPHY POLISH
   ---------------------------------------------------------------- */

/* Subtle text-shadow on major display headings */
h1,
.has-hero-font-size {
        text-shadow:
                2px 2px 0 var(--wp--preset--color--gold),
                4px 4px 0 rgba(0, 0, 0, 0.4),
                0 0 40px rgba(201, 165, 106, 0.1);
}

h2 {
        text-shadow:
                1px 1px 0 rgba(0, 0, 0, 0.5),
                0 0 20px rgba(201, 165, 106, 0.08);
}

h3,
h4 {
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

/* Display font (Rye) decorative sub-headings */
.has-display-font-family {
        text-shadow:
                1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* Accent font (Patua One) uppercase nav / button styling */
.has-accent-font-family {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Body text legibility */
p,
.has-body-font-family {
        text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------
   LINK STYLES
   ---------------------------------------------------------------- */

a {
        transition: color 0.3s ease;
}

/* Underline offset for body links (not nav, not buttons) */
.wp-block-post-content a:not(.wp-block-button__link),
.wp-block-group a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-site-title a) {
        text-decoration-color: var(--wp--preset--color--medium-wood);
        text-underline-offset: 0.2em;
        text-decoration-thickness: 1px;
        transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.wp-block-post-content a:not(.wp-block-button__link):hover,
.wp-block-group a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover {
        text-decoration-color: var(--wp--preset--color--cream);
}

/* ----------------------------------------------------------------
   BUTTON STYLES
   ---------------------------------------------------------------- */

.wp-block-button__link {
        transition: all 0.3s ease;
        box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        position: relative;
}

.wp-block-button__link:hover {
        box-shadow:
                0 6px 20px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
        transform: translateY(-1px);
}

.wp-block-button__link:active {
        transform: translateY(0);
        box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
        background: transparent;
        box-shadow: none;
        border-width: 1px;
        border-style: solid;
        border-color: var(--wp--preset--color--medium-wood);
        color: var(--wp--preset--color--warm-tan);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
        border-color: var(--wp--preset--color--warm-tan);
        color: var(--wp--preset--color--cream);
        box-shadow: none;
        transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   NAVIGATION POLISH
   ---------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
        position: relative;
        transition: color 0.3s ease;
}

/* Underline-on-hover animation for nav links */
.wp-block-navigation .wp-block-navigation-item__content::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: var(--wp--preset--color--gold-bright);
        transition: width 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after {
        width: 60%;
}

/* Current page / active nav item */
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
        color: var(--wp--preset--color--cream);
}

.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
        width: 60%;
        background: var(--wp--preset--color--warm-tan);
}

/* ----------------------------------------------------------------
   MOBILE HAMBURGER OVERLAY
   ---------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
        padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        gap: var(--wp--preset--spacing--40);
        align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        font-size: var(--wp--preset--font-size--large);
}

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */

/* Wood-plank texture on header band */
.site-header {
        background-color: var(--wp--preset--color--dark-walnut);
        background-image:
                repeating-linear-gradient(
                        0deg,
                        transparent 0px,
                        transparent 6px,
                        rgba(93, 59, 34, 0.12) 6px,
                        rgba(93, 59, 34, 0.12) 7px,
                        transparent 7px,
                        transparent 13px
                ),
                repeating-linear-gradient(
                        90deg,
                        transparent 0px,
                        transparent 40px,
                        rgba(0, 0, 0, 0.04) 40px,
                        rgba(0, 0, 0, 0.04) 41px
                ),
                linear-gradient(
                        180deg,
                        rgba(93, 59, 34, 0.15) 0%,
                        rgba(43, 29, 22, 1) 100%
                );
        border-bottom: 3px solid var(--wp--preset--color--medium-wood);
        box-shadow:
                0 2px 0 0 rgba(201, 165, 106, 0.15),
                0 8px 24px rgba(0, 0, 0, 0.5);
        position: relative;
}

/* Gold accent line beneath header */
.site-header::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(
                90deg,
                transparent 0%,
                var(--wp--preset--color--warm-tan) 20%,
                var(--wp--preset--color--gold-bright) 50%,
                var(--wp--preset--color--warm-tan) 80%,
                transparent 100%
        );
        opacity: 0.3;
        pointer-events: none;
}

/* Site title distressed cream styling */
.wp-block-site-title a {
        text-shadow:
                2px 2px 0 rgba(0, 0, 0, 0.6),
                0 0 20px rgba(201, 165, 106, 0.15);
}

/* Site tagline styling */
.wp-block-site-tagline {
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------------
   HERO / COVER SECTION
   ---------------------------------------------------------------- */

/* Hero image cinematic vignette */
.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover video.wp-block-cover__video-background {
        filter: saturate(0.85) contrast(1.05);
}

/* Hero overlay text styling */
.wp-block-cover .wp-block-cover__inner-container {
        position: relative;
        z-index: 2;
}

/* ----------------------------------------------------------------
   IMAGE TREATMENTS
   ---------------------------------------------------------------- */

/* All images — no rounded corners, warm film tint */
.wp-block-image img {
        border-radius: 0;
}

/* Weathered wood frame effect for images inside panels */
.wp-block-image.is-style-default img,
.wp-block-column .wp-block-image img {
        box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1px rgba(93, 59, 34, 0.3);
}

/* Gallery images — subtle warm tint on hover */
.wp-block-gallery .wp-block-image img {
        transition: filter 0.4s ease, box-shadow 0.4s ease;
}

.wp-block-gallery .wp-block-image img:hover {
        filter: saturate(1.1) brightness(1.05);
        box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(201, 165, 106, 0.08);
}

/* ----------------------------------------------------------------
   CONTENT PANELS — Weathered Wood Cards
   ---------------------------------------------------------------- */

/* Wood-panel card style for content columns */
.wp-block-columns .wp-block-column {
        background-color: var(--wp--preset--color--dark-walnut);
        background-image:
                repeating-linear-gradient(
                        90deg,
                        transparent 0px,
                        transparent 14px,
                        rgba(93, 59, 34, 0.07) 14px,
                        rgba(93, 59, 34, 0.07) 15px
                ),
                linear-gradient(
                        180deg,
                        rgba(43, 29, 22, 0.3) 0%,
                        transparent 30%,
                        transparent 70%,
                        rgba(13, 9, 6, 0.3) 100%
                );
        border: 2px solid var(--wp--preset--color--medium-wood);
        box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(93, 59, 34, 0.15),
                inset 0 -1px 0 rgba(0, 0, 0, 0.2);
        position: relative;
}

/* Wood-frame top rail accent */
.wp-block-columns .wp-block-column::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(
                90deg,
                var(--wp--preset--color--medium-wood),
                var(--wp--preset--color--warm-tan),
                var(--wp--preset--color--medium-wood)
        );
        opacity: 0.4;
}

/* ----------------------------------------------------------------
   SEPARATOR / DIVIDER
   ---------------------------------------------------------------- */

.wp-block-separator {
        opacity: 1;
}

.wp-block-separator:not(.is-style-dots) {
        background: linear-gradient(
                90deg,
                transparent 0%,
                var(--wp--preset--color--medium-wood) 20%,
                var(--wp--preset--color--warm-tan) 50%,
                var(--wp--preset--color--medium-wood) 80%,
                transparent 100%
        ) !important;
        border: none !important;
        height: 2px;
}

.wp-block-separator.is-style-dots::before {
        color: var(--wp--preset--color--warm-tan);
}

/* ----------------------------------------------------------------
   QUOTE & PULLQUOTE
   ---------------------------------------------------------------- */

.wp-block-quote {
        position: relative;
}

.wp-block-quote::before {
        content: '\201C';
        font-family: var(--wp--preset--font-family--display);
        font-size: 4rem;
        line-height: 1;
        color: var(--wp--preset--color--medium-wood);
        position: absolute;
        top: -0.2em;
        left: var(--wp--preset--spacing--20);
        opacity: 0.5;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--small);
        color: var(--wp--preset--color--muted-tan);
        font-style: normal;
        letter-spacing: 0.06em;
        text-transform: uppercase;
}

/* ----------------------------------------------------------------
   POST META
   ---------------------------------------------------------------- */

.wp-block-post-date,
.wp-block-post-terms,
.wp-block-post-author {
        font-family: var(--wp--preset--font-family--body);
}

.wp-block-post-terms a {
        color: var(--wp--preset--color--warm-tan);
        text-decoration: none;
        border-bottom: 1px solid var(--wp--preset--color--medium-wood);
        transition: color 0.3s ease, border-color 0.3s ease;
}

.wp-block-post-terms a:hover {
        color: var(--wp--preset--color--cream);
        border-color: var(--wp--preset--color--cream);
}

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */

.site-footer {
        background-color: var(--wp--preset--color--deep-shadow);
        background-image:
                repeating-linear-gradient(
                        0deg,
                        transparent 0px,
                        transparent 6px,
                        rgba(93, 59, 34, 0.08) 6px,
                        rgba(93, 59, 34, 0.08) 7px,
                        transparent 7px,
                        transparent 13px
                ),
                linear-gradient(
                        180deg,
                        var(--wp--preset--color--dark-walnut) 0%,
                        var(--wp--preset--color--deep-shadow) 100%
                );
        border-top: 3px solid var(--wp--preset--color--medium-wood);
        position: relative;
}

/* Gold accent line above footer */
.site-footer::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(
                90deg,
                transparent 0%,
                var(--wp--preset--color--warm-tan) 20%,
                var(--wp--preset--color--gold-bright) 50%,
                var(--wp--preset--color--warm-tan) 80%,
                transparent 100%
        );
        opacity: 0.25;
        pointer-events: none;
}

/* Footer social icons */
.site-footer .wp-block-social-links .wp-social-link {
        transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-footer .wp-block-social-links .wp-social-link:hover {
        transform: translateY(-2px);
        opacity: 0.85;
}

/* ----------------------------------------------------------------
   FORM INPUTS (newsletter signup, search, etc.)
   ---------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
textarea {
        background-color: var(--wp--preset--color--deep-shadow);
        color: var(--wp--preset--color--cream);
        border: 1px solid var(--wp--preset--color--medium-wood);
        padding: 0.75rem 1rem;
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--medium);
        border-radius: 0;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
        outline: none;
        border-color: var(--wp--preset--color--warm-tan);
        box-shadow: 0 0 0 1px var(--wp--preset--color--warm-tan);
}

input::placeholder,
textarea::placeholder {
        color: var(--wp--preset--color--muted-tan);
        opacity: 0.7;
}

/* Search block button */
.wp-block-search__button {
        background-color: var(--wp--preset--color--warm-tan);
        color: var(--wp--preset--color--dark-walnut);
        border: none;
        font-family: var(--wp--preset--font-family--accent);
        font-size: var(--wp--preset--font-size--small);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.3s ease;
        border-radius: 0;
}

.wp-block-search__button:hover {
        background-color: var(--wp--preset--color--cream);
}

/* ----------------------------------------------------------------
   COVER BLOCK — cinematic vignette overlay
   ---------------------------------------------------------------- */

.wp-block-cover::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        box-shadow:
                inset 0 80px 100px -40px rgba(0, 0, 0, 0.5),
                inset 0 -80px 100px -40px rgba(0, 0, 0, 0.6);
        z-index: 1;
}

/* ----------------------------------------------------------------
   TABLE BLOCK
   ---------------------------------------------------------------- */

.wp-block-table table {
        border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
        border-color: var(--wp--preset--color--medium-wood);
        padding: 0.75rem 1rem;
}

.wp-block-table th {
        font-family: var(--wp--preset--font-family--accent);
        font-size: var(--wp--preset--font-size--small);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wp--preset--color--warm-tan);
        background-color: var(--wp--preset--color--deep-shadow);
}

.wp-block-table tr:nth-child(even) {
        background-color: rgba(93, 59, 34, 0.08);
}

/* ----------------------------------------------------------------
   SELECTION COLOR
   ---------------------------------------------------------------- */

::selection {
        background-color: var(--wp--preset--color--medium-wood);
        color: var(--wp--preset--color--cream);
}

/* ----------------------------------------------------------------
   SCROLLBAR (thin, themed)
   ---------------------------------------------------------------- */

::-webkit-scrollbar {
        width: 8px;
}

::-webkit-scrollbar-track {
        background: var(--wp--preset--color--deep-shadow);
}

::-webkit-scrollbar-thumb {
        background: var(--wp--preset--color--medium-wood);
        border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
        background: var(--wp--preset--color--warm-tan);
}

/* ----------------------------------------------------------------
   FADE-IN ANIMATION (section reveals — className hook only,
   actual motion CSS ships in assets/scrollytelling.css)
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ---------------------------------------------------------------- */

@media (max-width: 1024px) {
        /* Relax column card panels on tablets */
        .wp-block-columns .wp-block-column {
                margin-bottom: var(--wp--preset--spacing--30);
        }
}

@media (max-width: 768px) {
        /* Stack nav centered on small screens */
        .wp-block-navigation .wp-block-navigation__container {
                justify-content: center;
        }

        /* Reduce heading text-shadow weight */
        h1,
        .has-hero-font-size {
                text-shadow:
                        1px 1px 0 var(--wp--preset--color--gold),
                        2px 2px 0 rgba(0, 0, 0, 0.4);
        }

        /* Reduce cover vignette on mobile */
        .wp-block-cover::after {
                box-shadow:
                        inset 0 40px 60px -20px rgba(0, 0, 0, 0.4),
                        inset 0 -40px 60px -20px rgba(0, 0, 0, 0.5);
        }
}

@media (max-width: 480px) {
        /* Tighter card borders on small phones */
        .wp-block-columns .wp-block-column {
                border-width: 1px;
        }
}

/* ---------- Loop layout utilities ---------- */
/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tune colours and spacing to theme.json tokens. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
        flex: 0 0 320px;
        scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
        border-bottom: 1px solid var(--wp--preset--color--medium-wood);
        padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
        border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
        flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
        position: relative;
        padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0.5rem;
        width: 2px;
        background: var(--wp--preset--color--medium-wood);
        opacity: 0.3;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
        position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
        content: '';
        position: absolute;
        inset-inline-start: -2.25rem;
        inset-block-start: 0.6rem;
        width: 1rem;
        height: 1rem;
        border: 2px solid var(--wp--preset--color--warm-tan);
        border-radius: 50%;
        background: var(--wp--preset--color--dark-walnut);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
        grid-column: span 2;
}
@media (max-width: 600px) {
        .wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
                grid-column: auto;
        }
}


/* ================================================================
   MOBILE LAYOUT FIXES  (added July 2026)
   Header wrap • hamburger • menu overlay • column stacking •
   empty featured images • footer gutter • overflow guard
   See mobile_layout_fixes.md for the full explanation.
   ================================================================ */

/* --- Global horizontal-scroll guard (small screens only) --- */
@media (max-width: 782px) {
        html,
        body,
        .wp-site-blocks {
                overflow-x: hidden;
                max-width: 100%;
        }
        img,
        video,
        iframe,
        .wp-block-cover {
                max-width: 100%;
        }
}

/* --- Header: wrap row, shrinkable title, on-screen toggle --- */
@media (max-width: 782px) {
        .site-header .wp-block-group {
                flex-wrap: wrap;
        }
        .wp-block-site-title {
                min-width: 0;
                flex-shrink: 1;
        }
        .wp-block-site-title a {
                overflow-wrap: anywhere;
                word-break: break-word;
        }
        .site-header .wp-block-navigation {
                flex-shrink: 0;
                margin-left: auto;
        }
        .wp-block-navigation__responsive-container-open {
                max-width: 100%;
        }
}

/* --- Mobile menu overlay: centered, never clipped --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
        justify-content: center !important;
        align-items: center !important;
        text-align: center;
        width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open {
        max-width: 100vw;
        box-sizing: border-box;
}

/* --- Stack all columns full-width on phones --- */
@media (max-width: 600px) {
        .wp-block-columns:not(.is-not-stacked-on-mobile) {
                flex-direction: column !important;
        }
        .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
                flex-basis: 100% !important;
                width: 100% !important;
        }
        .wp-block-columns .wp-block-buttons {
                justify-content: flex-start;
        }
}

/* --- Hide empty featured-image placeholders --- */
.wp-block-post-featured-image:not(:has(img)) {
        display: none;
}

/* --- Suppress broken-image alt-text dumping --- */
.wp-block-cover img[alt]:not([src]),
.wp-block-image img:not([src]) {
        font-size: 0;
        color: transparent;
}

/* --- Footer gutter safety net --- */
.wp-site-blocks > footer .wp-block-group.alignfull,
footer.wp-block-template-part > .wp-block-group {
        padding-left: clamp(1.5rem, 5vw, 4rem);
        padding-right: clamp(1.5rem, 5vw, 4rem);
        box-sizing: border-box;
}