/*
Theme Name: Guitar Lifestyle Child
Theme URI: https://guitarlifestyle.com
Description: Custom child theme for Guitar Lifestyle, built on GeneratePress.
Author: Josh
Template: generatepress
Version: 1.0.0
Text Domain: guitarlifestyle-child
*/

/* ==========================================================================
   1. Brand variables
   Define your palette and type scale here once, then reference them
   everywhere below. Update these values as your design comes together.
   ========================================================================== */

:root {
    /* Monochrome palette - adjust to your exact brand colors */
    --gl-black: #111111;
    --gl-charcoal: #2b2b2b;
    --gl-gray: #6b6b6b;
    --gl-light-gray: #e5e5e5;
    --gl-off-white: #fafafa;
    --gl-white: #ffffff;
    --gl-accent: #b08d57; /* placeholder gold/brass accent - swap as needed */

    /* Typography - swap in your chosen fonts once selected */
    --gl-font-heading: "Playfair Display", Georgia, serif;
    --gl-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   2. Global type & color
   ========================================================================== */

body {
    background-color: var(--gl-white);
    color: var(--gl-charcoal);
    font-family: var(--gl-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gl-font-heading);
    color: var(--gl-black);
    letter-spacing: 0.01em;
}

a {
    color: var(--gl-black);
    text-decoration-color: var(--gl-accent);
}

a:hover {
    color: var(--gl-accent);
}

/* ==========================================================================
   3. Site header / branding
   ========================================================================== */

.site-header .inside-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.site-logo img,
.custom-logo {
    max-height: 78px;
    width: auto;
}

@media (max-width: 480px) {
    .site-logo img,
    .custom-logo {
        max-height: 52px;
    }
}

.site-logo,
.site-title a {
    color: var(--gl-black);
    font-family: var(--gl-font-heading);
}

.main-navigation a {
    color: var(--gl-charcoal);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

/* ==========================================================================
   4. Article / archive cards
   Baseline styling for post loops - refine once you've picked a layout.
   ========================================================================== */

.inside-article {
    border-bottom: 1px solid var(--gl-light-gray);
}

.entry-title a {
    color: var(--gl-black);
}

.entry-meta {
    color: var(--gl-gray);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   5. Newsletter CTA (end of single post)
   ========================================================================== */

/* Hide GeneratePress's default post footer (categories/tags list and
   prev/next navigation) - it's unstyled and now redundant next to the
   custom Related Reading section, which serves the same "keep
   browsing" purpose with better design. */
.single-post .entry-footer,
.single-post .post-navigation,
.single-post .nav-links {
    display: none !important;
}

.gl-newsletter-cta {
    width: 100%;
    max-width: 1100px;
    margin: 2.5rem auto 1.5rem;
    padding: 1.75rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.gl-newsletter-cta > * {
    width: 100% !important;
    max-width: 1100px !important;
    box-sizing: border-box !important;
}

/* Beehiiv's inline embed hard-codes a fixed width (e.g. 400px) via an
   inline style on a div several levels deep - found via inspecting the
   actual rendered markup. This overrides that specific div regardless
   of how deeply nested it is, rather than just direct children. */
.gl-newsletter-cta div[style*="flex-direction: row"] {
    width: 100% !important;
}

.gl-newsletter-cta__line {
    font-family: var(--gl-font-heading);
    font-size: 1.05rem;
    color: var(--gl-black);
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   7. Front page layout
   ========================================================================== */

.gl-front-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

/* Visually hidden but accessible - keeps one real H1 per page for
   screen readers and SEO, without duplicating the header wordmark. */
.gl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hide the text site title/description when a custom logo is active -
   prevents "wordmark image" + "text title" showing side by side.
   (Also turn off Display Site Title in Customize > Layout > Header -
   this CSS is a safety net in case that setting doesn't fully apply.) */
.site-logo + .main-title,
.site-logo ~ .site-description {
    display: none;
}

/* Search */
.gl-search-form {
    position: relative;
    margin-bottom: 1.25rem;
}

.gl-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gl-gray);
    display: flex;
    pointer-events: none;
    z-index: 2;
}

input.gl-search-input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 3rem !important;
    border: 1px solid var(--gl-light-gray);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--gl-off-white);
    position: relative;
    z-index: 1;
}

input.gl-search-input[type="search"]:focus {
    outline: none;
    border-color: var(--gl-black);
}

/* Category pills */
.gl-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.gl-pill {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    background: var(--gl-off-white);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gl-charcoal);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gl-pill:hover {
    background: var(--gl-black);
    color: var(--gl-white);
}

/* Featured / hero card */
.gl-featured-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    border: 1px solid var(--gl-light-gray);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.gl-featured-card__image-link {
    display: block;
}

.gl-featured-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gl-featured-card__body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gl-featured-card__meta {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gl-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gl-gray);
}

.gl-tag--featured {
    color: var(--gl-accent);
    font-weight: 600;
}

.gl-featured-card__title {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.gl-featured-card__date {
    color: var(--gl-gray);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.gl-btn {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    width: fit-content;
}

.gl-btn--dark {
    background: var(--gl-black);
    color: var(--gl-white);
}

.gl-btn--dark:hover {
    background: var(--gl-accent);
    color: var(--gl-white);
}

/* Card grid */
.gl-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.gl-card {
    border: 1px solid var(--gl-light-gray);
    border-radius: 10px;
    overflow: hidden;
}

.gl-card__image-link {
    display: block;
}

.gl-card__image,
.gl-card__image--placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: var(--gl-light-gray);
}

.gl-card__body {
    padding: 1.25rem;
}

.gl-card__meta {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.gl-card__title {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}

.gl-card__date {
    color: var(--gl-gray);
    font-size: 0.8rem;
}

/* Newsletter block variant for front page (slightly more spacious) */
.gl-newsletter-cta--front {
    text-align: center;
    background: var(--gl-off-white);
    border-radius: 10px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3rem auto 0;
}

/* Force full width on whatever wrapper Beehiiv's embed script injects -
   the iframe is sometimes nested inside its own fixed-width container,
   so target all direct children, not just the iframe itself. */
.gl-newsletter-cta--front > * {
    width: 100% !important;
    max-width: 1100px !important;
    box-sizing: border-box !important;
}

.gl-newsletter-cta--front div[style*="flex-direction: row"] {
    width: 100% !important;
}

/* Pagination */
.gl-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

.gl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--gl-light-gray);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--gl-charcoal);
}

.gl-pagination .page-numbers.current {
    background: var(--gl-black);
    color: var(--gl-white);
    border-color: var(--gl-black);
}

.gl-pagination .page-numbers.dots {
    border: none;
}

.gl-pagination .page-numbers:hover:not(.current) {
    border-color: var(--gl-black);
}

/* Responsive: stack to single column on smaller screens */
@media (max-width: 782px) {
    .gl-featured-card {
        grid-template-columns: 1fr;
    }

    .gl-card-grid,
    .gl-card-grid--related {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   9. Archive pages (category / tag / date)
   ========================================================================== */

.gl-archive-header {
    margin-bottom: 2rem;
}

.gl-archive-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.gl-archive-description {
    color: var(--gl-gray);
    font-size: 1rem;
}

.gl-archive-empty {
    color: var(--gl-gray);
    padding: 2rem 0;
}

.gl-404-content {
    text-align: center;
    max-width: 480px;
    margin: 3rem auto;
}

.gl-404-title {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.gl-404-text {
    color: var(--gl-gray);
    margin-bottom: 2rem;
}

.gl-404-content .gl-search-form {
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   10. Single post - full width content + related posts
   ========================================================================== */

/* GeneratePress reserves a content column width based on its sidebar
   layout setting - simply emptying the sidebar widget area doesn't
   expand the content area on its own. This forces single posts to use
   the full container width regardless of that setting. Also worth
   checking: Customize > Layout > Sidebars > Blog Post Layout should
   be set to "No Sidebar" globally, which is the cleaner fix at the
   source - this CSS is a safety net either way. */
.single-post .site-main,
.single-post #primary,
.single-post #primary.content-area {
    width: 100% !important;
    max-width: 1100px !important;
    flex: 0 1 100% !important;
    flex-basis: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

.gl-related-posts {
    max-width: 1100px;
    margin: 3rem auto 0;
}

.single-post .featured-image img,
.single-post .featured-image img.wp-post-image {
    max-height: 550px !important;
    width: 100% !important;
    object-fit: cover;
    object-position: center;
}

.gl-related-posts__heading {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

.gl-card-grid--related {
    grid-template-columns: repeat(3, 1fr);
}

/* ==========================================================================
   10. Future: Interview post type styling
   Placeholder section - add styles here once the Interview CPT template
   is built, so they're grouped separately from standard blog styling.
   ========================================================================== */

.single-interview .entry-header {
    border-bottom: 2px solid var(--gl-black);
}