/*
Theme Name: Mystic Stage
Theme URI: https://alleghenyeclipse.com
Author: William Bunce
Author URI: https://alleghenyeclipse.com
Description: Official WordPress theme for Allegheny Eclipse — an adult color guard based in Warren, PA. 
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: allegheny-eclipse
Tags: custom-menu, custom-logo, featured-images, full-width-template, one-page
*/

:root {
    --primary-purple: #85598E;
    --dark-purple:    #220F28;
    --gold:           #C08E2D;
    --gold-darker:    #8C651F;
    --off-black:      #231F20;
    --off-black-light:#2A2627;
    --off-black-lighter:#3B3536;
    --light-purple:   #9B6FA3;
    --text-light:     #E0E0E0;
    --white:          #FFFFFF;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Merriweather',serif;color:var(--text-light);background-color:var(--off-black);line-height:1.6}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;color:var(--gold);text-shadow:2px 2px 4px rgba(0,0,0,.6);line-height:1.2}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}
a{text-decoration:none;color:var(--gold);transition:color .3s ease}
a:hover{color:var(--gold-darker)}
ul,ol{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Skip link */
.skip-link{position:absolute;top:-999px;left:-999px;background:var(--gold);color:var(--off-black);padding:10px 20px;z-index:99999;font-family:'Poppins',sans-serif;font-weight:600}
.skip-link:focus{top:10px;left:10px}

/* ---- Navbar ---- */
.navbar{position:fixed;top:0;left:0;right:0;width:100%;max-width:100%;background:linear-gradient(to bottom,var(--primary-purple),var(--light-purple));z-index:1000;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.nav-container{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;max-width:1400px;margin:0 auto}
.nav-logo{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;color:var(--white);text-shadow:2px 2px 4px rgba(0,0,0,.6);text-decoration:none}
.nav-logo img{max-height:50px;width:auto;display:inline-block}
.nav-menu{display:flex;list-style:none;margin:0;padding:0;align-items:center}
.nav-menu li{margin-left:4px;position:relative}
.nav-menu>li>a{font-family:'Poppins',sans-serif;font-size:1rem;padding:10px 14px;color:var(--off-black);border-radius:5px;transition:background .2s,color .2s;display:block}
.nav-menu>li:hover>a,.nav-menu>li.current-menu-item>a,.nav-menu>li.current_page_item>a{background:var(--gold);color:var(--off-black)}
.nav-menu .sub-menu{display:none;position:absolute;top:100%;left:0;margin-top:.5em;background:var(--light-purple);list-style:none;min-width:180px;border-radius:5px;box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:1001;padding:5px 0}
.nav-menu .sub-menu li{margin:0}
.nav-menu .sub-menu a{display:block;padding:10px 15px;color:var(--off-black);font-family:'Poppins',sans-serif;font-size:.9rem}
.nav-menu .sub-menu a:hover{background:var(--gold);color:var(--off-black);border-radius:5px}
.nav-menu li:hover>.sub-menu{display:block}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:5px}
.hamburger{display:block;width:25px;height:3px;background:var(--gold);position:relative}
.hamburger::before,.hamburger::after{content:'';width:25px;height:3px;background:var(--gold);position:absolute;left:0;transition:transform .3s}
.hamburger::before{top:-8px}
.hamburger::after{top:8px}
.nav-toggle.active .hamburger{background:transparent}
.nav-toggle.active .hamburger::before{transform:translateY(8px) rotate(45deg)}
.nav-toggle.active .hamburger::after{transform:translateY(-8px) rotate(-45deg)}

/* ---- Hero ---- */
.hero{position:relative;height:60vh;max-height:600px;min-height:350px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,var(--dark-purple));opacity:.6;z-index:2}
.hero-content{position:relative;z-index:3;text-align:center;padding:20px}
.hero h1{font-size:3.5rem;margin-bottom:20px;text-shadow:2px 2px 8px rgba(0,0,0,.8)}
.hero-logo{position:absolute;top:1em;left:50%;transform:translateX(-50%);width:250px;z-index:1001;transition:transform .3s}
.hero-logo:hover{transform:translateX(-50%) scale(1.05)}

/* ---- Page Header (inner pages) ---- */
.page-header{padding:120px 20px 60px;background:linear-gradient(to bottom,var(--dark-purple),var(--primary-purple));text-align:center}
.page-header h1{font-size:3rem;margin-bottom:10px}

/* ---- Event/Promo Block ---- */
.event-container{background:linear-gradient(to bottom,var(--light-purple),var(--primary-purple));padding:60px 20px;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.3);display:flex;align-items:center;gap:40px;max-width:1200px;margin:0 auto 60px}
.event-img{width:100%;max-width:400px;margin:0 auto;border-radius:10px}
.event-text{max-width:800px;margin:0 auto;font-size:1.1rem;color:var(--text-light);text-align:left}
.event-text h2{font-size:2.5rem;color:var(--gold);margin-bottom:20px}
.event-text p{margin-bottom:15px}
.event-cta{margin-top:20px}

/* ---- About ---- */
.about{padding:80px 20px;}
.about-container{display:flex;align-items:center;gap:40px;max-width:1200px;margin:0 auto}
.about-img{max-width:400px;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.5);transition:transform .3s}
.about-img:hover{transform:scale(1.05)}
.about-text h2{font-size:2.5rem;margin-bottom:20px;transition:transform .2s}
.about-text h2:hover{transform:rotate(2deg)}
.about-text p{margin-bottom:15px}
.about-video{margin:60px auto 0;width:100%;max-width:800px}
.about-video iframe{aspect-ratio:16/9;width:100%;border:none;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.5)}

/* ---- Calendar ---- */
.calendar{padding:80px 20px;}
.calendar-container{text-align:center;max-width:1200px;margin:0 auto}
.calendar h2{font-size:2.5rem;margin-bottom:20px;transition:transform .2s}
.calendar h2:hover{transform:rotate(-2deg)}
.calendar-iframe{width:100%;height:600px;border:10px solid var(--gold);border-radius:40px}

/* ---- Team ---- */
.team{padding:80px 20px;}
.team-container{max-width:1400px;margin:0 auto;padding:0 20px}
.team-text{text-align:center;margin-bottom:40px}
.team-text h2{font-size:2.5rem;margin-bottom:20px;transition:transform .2s}
.team-text h2:hover{transform:rotate(2deg)}
.team-profiles{display:flex;flex-wrap:wrap;justify-content:center;gap:40px}
.profile{display:flex;flex-direction:column;align-items:center;width:200px;text-align:center}
.profile-img{width:180px;height:180px;object-fit:cover;border-radius:50px;box-shadow:0 4px 20px rgba(0,0,0,.5);transition:transform .3s;object-position:center}
.profile-img:hover{transform:scale(1.05)}
.profile h3{font-size:1.5rem;color:var(--gold);margin-top:10px;transition:transform .2s}
.profile h3:hover{transform:rotate(2deg)}
.profile-title{font-size:1.1rem;color:var(--text-light);margin-top:5px;font-family:'Merriweather',serif}
.profile-link{color:var(--gold);transition:color .3s}
.profile-link:hover{color:var(--gold-darker)}

/* ---- Support ---- */
.support{padding:80px 20px;}
.support-container{display:flex;align-items:center;gap:40px;max-width:1200px;margin:0 auto}
.support-img{max-width:400px;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.5);transition:transform .3s}
.support-img:hover{transform:scale(1.05)}
.support-text{flex:1}
.support-text h2{font-size:2.5rem;margin-bottom:20px;transition:transform .2s}
.support-text h2:hover{transform:rotate(2deg)}
.support-text p{margin-bottom:15px}

/* ---- Contact ---- */
.contact{padding:80px 20px 40px}
.contact-container{max-width:600px;margin:0 auto;text-align:center}
.contact h2{font-size:2.5rem;margin-bottom:20px;transition:transform .2s}
.contact h2:hover{transform:rotate(-2deg)}
.contact-form{display:flex;flex-direction:column;gap:20px}
.form-group{display:flex;flex-direction:column;text-align:left}
.form-group label{font-size:1rem;margin-bottom:5px;color:var(--white);font-family:'Poppins',sans-serif}
.form-group input,.form-group textarea,.form-group select{padding:10px;border:2px solid var(--primary-purple);border-radius:5px;background:var(--off-black-light);color:var(--white);font-size:1rem;font-family:'Merriweather',serif;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--gold)}
.form-group textarea{resize:vertical;min-height:120px}
.form-submit{padding:12px 20px;background:var(--gold);color:var(--off-black);border:none;border-radius:5px;font-size:1.1rem;font-family:'Poppins',sans-serif;font-weight:600;cursor:pointer;transition:background .3s,color .3s}
.form-submit:hover{background:var(--primary-purple);color:var(--white)}
.wc-container{margin:0 auto;text-align:center;padding:60px 20px 0}
.wc-img{width:100%;max-width:400px;margin:0 auto;transition:transform .3s}
.wc-img:hover{transform:scale(1.03)}

/* ---- Button ---- */
.btn{display:inline-block;padding:12px 24px;background:var(--gold);color:var(--off-black);font-size:1rem;font-family:'Poppins',sans-serif;font-weight:600;border:none;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer;text-align:center;text-decoration:none;transition:background .3s,color .3s,transform .2s}
.btn:hover{background:var(--primary-purple);color:var(--white);transform:scale(1.03)}
.btn:active{transform:scale(.98);background:var(--gold-darker)}
.btn:disabled{background:var(--off-black-lighter);color:var(--text-light);cursor:not-allowed;opacity:.6;pointer-events:none}

/* ---- Footer ---- */
.footer{padding:40px 20px;background:var(--off-black-light);text-align:center;border-top:1px solid var(--off-black-lighter)}
.footer-container{max-width:1200px;margin:0 auto}
.social-icons{margin-bottom:20px}
.social-icons a{font-size:1.5rem;margin:0 15px;color:var(--gold);transition:color .3s}
.social-icons a:hover{color:var(--gold-darker)}
.footer-menu{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-bottom:20px;list-style:none;padding:0}
.footer-menu a{color:var(--text-light);font-size:.9rem;padding:5px 10px}
.footer-menu a:hover{color:var(--gold)}
.copyright{font-size:.9rem;color:var(--text-light);font-family:'Merriweather',serif;opacity:.7}
.version{text-align:center;font-size:.8rem;color:var(--off-black-lighter);margin-top:20px}

/* ---- Blog/Posts ---- */
.site-main{padding:100px 20px 60px;max-width:1200px;margin:0 auto}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px;margin-top:40px}
.post-card{background:var(--off-black-light);border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s;border:1px solid var(--off-black-lighter)}
.post-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.55)}
.post-card-thumb{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card-body{padding:24px}
.post-card-meta{font-size:.85rem;color:var(--gold);font-family:'Poppins',sans-serif;margin-bottom:8px}
.post-card-title{font-size:1.4rem;margin-bottom:12px}
.post-card-title a{color:var(--gold)}
.post-card-title a:hover{color:var(--white)}
.post-card-excerpt{font-size:.95rem;color:var(--text-light);margin-bottom:16px;line-height:1.7}
.single-post{margin:0 auto;}
.single-post h1{font-size:2.5rem;margin-bottom:20px}
.single-post .post-meta{color:var(--gold);font-family:'Poppins',sans-serif;font-size:.9rem;margin-bottom:30px}
.single-post .post-content{font-size:1.05rem;line-height:1.85}
.single-post .post-content h2,.single-post .post-content h3{margin:1.6em 0 .6em}
.single-post .post-content p{margin-bottom:1.2em}
.single-post .post-content a{color:var(--gold);border-bottom:1px solid var(--gold-darker)}
.single-post .post-content img{border-radius:8px;margin:20px auto;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.single-post .post-content blockquote{border-left:4px solid var(--gold);padding:10px 20px;margin:20px 0;background:var(--off-black-light);border-radius:0 8px 8px 0;font-style:italic}
.subpage-content{padding:100px 20px 80px;background:linear-gradient(to bottom,var(--primary-purple),var(--light-purple))}
.subpage-content h1{font-size:3rem;margin-bottom:30px;text-align:center}
.subpage-content .content{max-width:800px;margin:0 auto;font-size:1.1rem}

/* ---- Archive/Album ---- */
.archive-section{padding:70px 20px}
.archive-section--purple{background:linear-gradient(to bottom,var(--primary-purple),var(--light-purple))}
.archive-section--dark{background:linear-gradient(to bottom,var(--off-black),var(--off-black-light))}
.archive-section-title{text-align:center;margin-bottom:25px}
.archive-section-title h2{font-size:2.5rem;margin-bottom:10px}
.archive-section-title p{max-width:800px;margin:0 auto;font-size:1.1rem}
.archive-section-body{max-width:900px;margin:0 auto;font-size:1.1rem}
.album-grid{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.album-item{position:relative;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.25);box-shadow:0 6px 18px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);transition:transform .2s,box-shadow .2s}
.album-item:hover{transform:scale(1.01);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.album-thumb{width:100%;aspect-ratio:1/1;display:block;object-fit:cover;object-position:center}
.album-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));color:var(--text-light);font-size:.95rem}
.album-badge{position:absolute;top:10px;left:10px;background:rgba(192,142,45,.9);color:var(--off-black);font-family:'Poppins',sans-serif;font-weight:700;font-size:.75rem;padding:6px 10px;border-radius:999px}
.album-item--wide{grid-column:span 2}
.album-item--wide .album-thumb{aspect-ratio:16/9}
.album-item--tall .album-thumb{aspect-ratio:3/4}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:50px;flex-wrap:wrap}
.pagination a,.pagination span{padding:10px 16px;border-radius:6px;font-family:'Poppins',sans-serif;font-size:.95rem;background:var(--off-black-light);color:var(--text-light);border:1px solid var(--off-black-lighter);transition:background .2s,color .2s}
.pagination a:hover{background:var(--gold);color:var(--off-black);border-color:var(--gold)}
.pagination .current{background:var(--gold);color:var(--off-black);border-color:var(--gold)}

/* Sign-up */
.signup-form{text-align:center;margin:0 auto 4rem;max-width:500px;display:flex;flex-direction:column;gap:20px}
.radio-options{display:flex;gap:20px;margin-top:10px;flex-wrap:wrap}
.radio-options label{font-size:1rem;padding:10px 15px;cursor:pointer;display:flex;align-items:center;gap:10px}

/* ---- Responsive ---- */
@media(max-width:960px){
    .hero-logo{top:35%;width:200px}
    .hero h1{display:none}
    .album-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  	.navbar {z-index: 1002;}
    .nav-menu{display:none;position:absolute;top:100%;left:0;width:100%;flex-direction:column;padding:20px;background:linear-gradient(to bottom,var(--light-purple),var(--primary-purple))}
    .nav-menu.active{display:flex;}
  	.nav-menu.active {z-index: 1002;}
    .nav-menu>li{margin:4px 0}
    .nav-menu .sub-menu{position:static;background:var(--primary-purple);box-shadow:none;padding-left:20px;display:none}
    .nav-menu .menu-item-has-children.active>.sub-menu{display:block}
    .nav-toggle{display:block}
    .about-container,.support-container,.event-container{flex-direction:column}
    .about-img,.support-img{max-width:100%}
    .calendar-iframe{height:400px}
    .team-profiles{gap:20px}
    .profile{width:calc(50% - 10px);max-width:250px;min-height:280px}
    .profile-img{width:100%;max-height:180px}
    .album-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .posts-grid{grid-template-columns:1fr}
    .subpage-content h1{font-size:2.5rem}
}
@media(max-width:480px){
    .about-text h2,.calendar h2,.support-text h2,.contact h2,.team-text h2{font-size:2rem}
    .profile{width:calc(50% - 10px)}
    .album-grid{grid-template-columns:1fr}
    .subpage-content h1{font-size:2rem}
    .single-post h1{font-size:2rem}
}

/* ---- Floating Logo Badge ---- */
.floating-logo{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:999;
    width:70px;
    height:70px;
    border-radius:50%;
    background:rgba(34,15,40,0.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 4px 18px rgba(0,0,0,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(0.7);
    pointer-events:none;
    transition:opacity 0.5s ease, transform 0.5s ease;
    text-decoration:none;
}
.floating-logo.visible{
    opacity:0.55;
    transform:scale(1);
    pointer-events:auto;
}
.floating-logo:hover{
    opacity:0.9 !important;
    transform:scale(1.08);
    background:rgba(34,15,40,0.8);
}
.floating-logo img{
    width:52px;
    height:52px;
    object-fit:contain;
    border-radius:50%;
    display:block;
    max-height:none !important;
    max-width:none !important;
}
/* Hide logo from navbar — it lives in the hero + floating badge */
.nav-logo img{display:none !important}

/* ---- Hero Logo fade-out on scroll ---- */
.hero-logo {
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-logo.hidden {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateX(-50%) scale(0.85);
}
/* Ensure the img inside hero-logo is never constrained by WP */
.hero-logo img {
    width: 250px !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;
    display: block !important;
}

/* ---- Warren County Badge Widget Area ---- */
.wc-container .wc-widget { text-align: center; }
.wc-container .wc-widget img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    transition: transform 0.3s ease;
}
.wc-container .wc-widget img:hover { transform: scale(1.03); }
.wc-container .wc-widget a { display: inline-block; }
.wc-container .wc-widget-title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: var(--text-light);
    opacity: 0.6;
    margin-top: 8px;
    text-align: center;
}

/* ---- Contact Form Widget Area ---- */
.contact-widget { width: 100%; }
/* Make CF7 / WPForms / etc. inherit our form styles */
.contact-widget input[type="text"],
.contact-widget input[type="email"],
.contact-widget textarea,
.contact-widget select {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--primary-purple);
    border-radius: 5px;
    background: var(--off-black-light);
    color: var(--white);
    font-size: 1rem;
    font-family: 'Merriweather', serif;
    margin-bottom: 16px;
    transition: border-color 0.2s ease;
}
.contact-widget input:focus,
.contact-widget textarea:focus { outline: none; border-color: var(--gold); }
.contact-widget input[type="submit"],
.contact-widget button[type="submit"] {
    padding: 12px 24px;
    background: var(--gold);
    color: var(--off-black);
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.contact-widget input[type="submit"]:hover,
.contact-widget button[type="submit"]:hover {
    background: var(--primary-purple);
    color: var(--white);
}

/* ================================================================
   Homepage Section System
================================================================ */

/* Color variants — odd slots purple, even slots dark */
.hp-section--purple {
    background: linear-gradient(to bottom, var(--primary-purple), var(--light-purple));
    padding: 80px 20px;
}
.hp-section--dark {
    background: linear-gradient(to bottom, var(--off-black), var(--off-black-light));
    padding: 80px 20px;
}

/* Inner container — max width, centered */
.hp-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Text-only: full width, readable line length */
.hp-section__text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}
.hp-section__text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    transition: transform 0.2s ease;
}
.hp-section__text h2:hover { transform: rotate(2deg); }
.hp-section__text p { margin-bottom: 15px; }
.hp-section__text a.btn { margin-right: 1rem; margin-top: 0.5rem; }

/* Split layout — image + text side by side */
.hp-section__split {
    display: flex;
    align-items: center;
    gap: 40px;
}
.hp-section__split--image-right {
    flex-direction: row-reverse;
}
.hp-section__img-wrap {
    flex: 0 0 auto;
    max-width: 50%;
    width: 100%;
}
.hp-section__img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
    object-fit: cover;
}
.hp-section__img:hover { transform: scale(1.05); }
.hp-section__split .hp-section__text {
    flex: 1;
    max-width: none;
    margin: 0;
}

/* Calendar layout inside a section */
.hp-section--purple .calendar-container,
.hp-section--dark .calendar-container {
    text-align: center;
}

/* Posts grid inside a section */
.hp-section .posts-grid {
    margin-top: 0;
}

/* ================================================================
   Footer — always locked to off-black-light, never changes
================================================================ */
.footer {
    background: var(--off-black-light) !important;
    border-top: 1px solid var(--off-black-lighter) !important;
}

/* ================================================================
   Responsive — section system
================================================================ */
@media (max-width: 768px) {
    .hp-section__split,
    .hp-section__split--image-right {
        flex-direction: column;
    }
    .hp-section__img-wrap {
        max-width: 100%;
    }
    .hp-section--purple,
    .hp-section--dark {
        padding: 60px 20px;
    }
}

/* ================================================================
   Block editor output width containment
   WordPress wraps page content in various block divs that can
   break out to full width. These rules keep everything contained.
================================================================ */
.hp-section__text > *,
.hp-section__text .wp-block-group,
.hp-section__text .wp-block-cover,
.hp-section__text .wp-block-columns,
.hp-section__text .wp-block-image {
    max-width: 100%;
}

/* Alignwide / alignfull inside sections should stay within inner container */
.hp-section .alignwide  { max-width: 100%; }
.hp-section .alignfull  { max-width: 100%; margin-left: 0; margin-right: 0; }

/* Any naked block output inside a section */
.hp-section__inner > .wp-block-group,
.hp-section__inner > .wp-block-columns,
.hp-section__inner > p,
.hp-section__inner > h1,
.hp-section__inner > h2,
.hp-section__inner > ul,
.hp-section__inner > ol {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the split layout image wrap never exceeds container */
.hp-section__split {
    width: 100%;
    box-sizing: border-box;
}

/* ================================================================
   Button variants + row layout (for shortcode use on pages)
================================================================ */

/* Outline variant */
.btn--outline {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    box-shadow: none;
}
.btn--outline:hover {
    background: var(--gold);
    color: var(--off-black);
    border-color: var(--gold);
}

/* Button row — wraps multiple buttons with gap */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.2rem;
    align-items: center;
}

/* Buttons inside hp-section content inherit correctly */
.hp-section__text .btn,
.subpage-content .btn,
.post-content .btn {
    display: inline-block;
}

/* ================================================================
   Navbar full-width hard reset — overrides any WP body/wrapper
   constraints on inner pages
================================================================ */
html body .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
html body .nav-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 20px;
    box-sizing: border-box;
}
/* Make sure body itself never gets a max-width that clips the navbar */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ================================================================
   Single Post — proper layout
================================================================ */
.single-post-wrap {
    padding-top: 90px; /* clears the fixed navbar */
    padding-bottom: 60px;
    min-height: 60vh;
}

.single-post-hero {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}
.single-post-hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}

.single-post-body {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 24px 60px;
}

/* Title */
.single-post-body .entry-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    color: var(--gold);
    text-shadow: 2px 2px 4px rgba(0,0,0,.6);
    line-height: 1.2;
    margin-bottom: 16px;
}

/* Meta bar — date, categories, author */
.single-post-body .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    color: var(--gold);
    opacity: 0.8;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--off-black-lighter);
}
.single-post-body .post-meta a {
    color: var(--gold);
}
.single-post-body .post-meta a:hover {
    color: var(--white);
}

/* Post content */
.single-post-body .entry-content {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-light);
}
.single-post-body .entry-content > * + * {
    margin-top: 1.2em;
}
.single-post-body .entry-content h2 {
    font-size: 1.9rem;
    margin-top: 2em;
    margin-bottom: 0.5em;
}
.single-post-body .entry-content h3 {
    font-size: 1.5rem;
    margin-top: 1.8em;
    margin-bottom: 0.4em;
}
.single-post-body .entry-content p {
    margin-bottom: 1.2em;
}
.single-post-body .entry-content a {
    color: var(--gold);
    border-bottom: 1px solid var(--gold-darker);
    transition: color 0.2s ease;
}
.single-post-body .entry-content a:hover {
    color: var(--white);
    border-color: var(--white);
}
.single-post-body .entry-content img {
    border-radius: 8px;
    margin: 24px auto;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    max-width: 100%;
    height: auto;
}
.single-post-body .entry-content blockquote {
    border-left: 4px solid var(--gold);
    padding: 14px 24px;
    margin: 24px 0;
    background: var(--off-black-light);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-light);
}
.single-post-body .entry-content ul,
.single-post-body .entry-content ol {
    list-style: disc;
    padding-left: 1.8em;
    margin-bottom: 1.2em;
}
.single-post-body .entry-content ol {
    list-style: decimal;
}
.single-post-body .entry-content li {
    margin-bottom: 0.4em;
}

/* Tags */
.single-post-tags {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--off-black-lighter);
    font-size: 0.9rem;
    color: var(--text-light);
    opacity: 0.7;
}
.single-post-tags a {
    display: inline-block;
    padding: 4px 10px;
    background: var(--off-black-light);
    border-radius: 4px;
    color: var(--gold);
    margin: 2px 4px 2px 0;
    font-size: 0.85rem;
    transition: background 0.2s ease;
}
.single-post-tags a:hover {
    background: var(--primary-purple);
    color: var(--white);
}

/* Post navigation — prev/next */
.single-post-nav {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 48px;
}
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid var(--off-black-lighter);
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
}
.post-navigation .nav-next {
    text-align: right;
}
.post-navigation a {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: var(--gold);
    line-height: 1.4;
    display: inline-block;
    transition: color 0.2s ease;
}
.post-navigation a:hover {
    color: var(--white);
}
.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    opacity: 0.5;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Comments section */
.single-post-comments {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 60px;
}
.comments-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    color: var(--gold);
    margin-bottom: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--off-black-lighter);
}
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}
.comment {
    padding: 20px 0;
    border-bottom: 1px solid var(--off-black-lighter);
}
.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.comment-author img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
}
.comment-author .fn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--gold);
    font-size: 0.95rem;
    font-style: normal;
}
.comment-metadata {
    font-size: 0.8rem;
    color: var(--text-light);
    opacity: 0.5;
    margin-bottom: 10px;
}
.comment-metadata a {
    color: var(--text-light);
    opacity: 0.5;
}
.comment-content p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.7;
}
.reply a {
    font-size: 0.82rem;
    color: var(--gold);
    font-family: 'Poppins', sans-serif;
}

/* Comment form */
.comment-respond {
    margin-top: 40px;
}
.comment-reply-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 20px;
}
.comment-form label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: var(--white);
    margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--primary-purple);
    border-radius: 5px;
    background: var(--off-black-light);
    color: var(--white);
    font-size: 1rem;
    font-family: 'Merriweather', serif;
    margin-bottom: 16px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--gold);
}
.comment-form textarea {
    min-height: 140px;
    resize: vertical;
}
.comment-form input[type="submit"] {
    padding: 12px 28px;
    background: var(--gold);
    color: var(--off-black);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.comment-form input[type="submit"]:hover {
    background: var(--primary-purple);
    color: var(--white);
}

/* Responsive — single post */
@media (max-width: 768px) {
    .single-post-body {
        padding: 32px 16px 48px;
    }
    .single-post-body .entry-title {
        font-size: 1.8rem;
    }
    .post-navigation {
        flex-direction: column;
        gap: 12px;
    }
    .post-navigation .nav-next {
        text-align: left;
    }
    .single-post-comments {
        padding: 0 16px 48px;
    }
    .single-post-nav {
        padding: 0 16px 32px;
    }
}
@media (max-width: 480px) {
    .single-post-body .entry-title {
        font-size: 1.5rem;
    }
}

/* ================================================================
   Sticky footer — pushes footer to bottom on short pages
   Works on all templates (single, page, archive, etc.)
================================================================ */
html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* #main is the direct flex child that grows — never the inner wrappers */
#main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Inner content wrappers fill #main vertically */
#main > .single-post-wrap,
#main > .subpage-content,
#main > .site-main {
    flex: 1 0 auto;
}

/* On pages using subpage-content, extend its background to fill the gap */
.subpage-content {
    flex: 1 0 auto;
}

/* Footer full-width lock */
.footer {
    flex-shrink: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch;
}

/* ================================================================
   Background fill fix — inner wrappers extend their bg color
   to fill all available vertical space so no brown gap shows
================================================================ */

/* Pages — purple gradient extends to fill */
.subpage-content {
    background: linear-gradient(to bottom, var(--primary-purple), var(--light-purple));
    flex: 1 0 auto;
    padding-top: 100px; /* clears fixed navbar */
}

/* Blog posts — off-black extends to fill */
.single-post-wrap {
    background-color: var(--off-black);
    flex: 1 0 auto;
}

/* Archive / blog index */
.site-main {
    background-color: var(--off-black);
    flex: 1 0 auto;
}

/* ================================================================
   Single post elements inside subpage-content wrapper
================================================================ */

/* Featured image — break out to full content width */
.content .single-post-hero {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.content .single-post-hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}

/* Title */
.content .entry-title {
    font-size: 2.4rem;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .content .entry-title { font-size: 1.8rem; }
}
@media (max-width: 480px) {
    .content .entry-title { font-size: 1.5rem; }
}

/* Meta bar */
.content .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    color: var(--gold);
    opacity: 0.8;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.content .post-meta a { color: var(--gold); }
.content .post-meta a:hover { color: var(--white); }

/* Body content */
.content .entry-content {
    font-size: 1.05rem;
    line-height: 1.9;
}
.content .entry-content > * + * { margin-top: 1.2em; }
.content .entry-content p { margin-bottom: 1.2em; }
.content .entry-content h2 { font-size: 1.9rem; margin-top: 2em; margin-bottom: 0.5em; }
.content .entry-content h3 { font-size: 1.5rem; margin-top: 1.8em; margin-bottom: 0.4em; }
.content .entry-content a { color: var(--gold); border-bottom: 1px solid var(--gold-darker); }
.content .entry-content a:hover { color: var(--white); border-color: var(--white); }
.content .entry-content img { border-radius: 8px; margin: 24px auto; box-shadow: 0 4px 16px rgba(0,0,0,.4); max-width: 100%; height: auto; }
.content .entry-content blockquote { border-left: 4px solid var(--gold); padding: 14px 24px; margin: 24px 0; background: rgba(0,0,0,0.2); border-radius: 0 8px 8px 0; font-style: italic; }
.content .entry-content ul { list-style: disc; padding-left: 1.8em; margin-bottom: 1.2em; }
.content .entry-content ol { list-style: decimal; padding-left: 1.8em; margin-bottom: 1.2em; }
.content .entry-content li { margin-bottom: 0.4em; }

/* Tags */
.content .single-post-tags {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.9rem;
}
.content .single-post-tags a {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    color: var(--gold);
    margin: 2px 4px 2px 0;
    font-size: 0.85rem;
    transition: background 0.2s ease;
    border-bottom: none;
}
.content .single-post-tags a:hover { background: rgba(0,0,0,0.4); color: var(--white); }

/* Prev/Next navigation */
.content .single-post-nav { margin-top: 40px; }
.content .post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.content .post-navigation .nav-previous { flex: 1; }
.content .post-navigation .nav-next { flex: 1; text-align: right; }
.content .post-navigation a { font-family: 'Poppins', sans-serif; font-size: 0.9rem; color: var(--gold); line-height: 1.4; display: inline-block; border-bottom: none; }
.content .post-navigation a:hover { color: var(--white); }
.content .post-navigation .nav-subtitle { display: block; font-size: 0.75rem; color: var(--text-light); opacity: 0.5; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 600px) {
    .content .post-navigation { flex-direction: column; }
    .content .post-navigation .nav-next { text-align: left; }
}

/* Comments */
.content .single-post-comments { margin-top: 48px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.15); }
.content .comments-title { font-family: 'Poppins', sans-serif; font-size: 1.6rem; color: var(--gold); margin-bottom: 24px; }
.content .comment-list { list-style: none; padding: 0; margin: 0 0 40px; }
.content .comment { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.content .comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.content .comment-author img { border-radius: 50%; width: 40px; height: 40px; object-fit: cover; }
.content .comment-author .fn { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--gold); font-size: 0.95rem; font-style: normal; }
.content .comment-metadata { font-size: 0.8rem; color: var(--text-light); opacity: 0.5; margin-bottom: 10px; }
.content .comment-metadata a { color: var(--text-light); opacity: 0.5; border-bottom: none; }
.content .comment-content p { font-size: 0.95rem; line-height: 1.7; }
.content .reply a { font-size: 0.82rem; color: var(--gold); font-family: 'Poppins', sans-serif; border-bottom: none; }
.content .comment-respond { margin-top: 40px; }
.content .comment-reply-title { font-family: 'Poppins', sans-serif; font-size: 1.4rem; color: var(--gold); margin-bottom: 20px; }
.content .comment-form label { display: block; font-family: 'Poppins', sans-serif; font-size: 0.9rem; color: var(--white); margin-bottom: 6px; }
.content .comment-form input[type="text"],
.content .comment-form input[type="email"],
.content .comment-form input[type="url"],
.content .comment-form textarea { width: 100%; padding: 10px 14px; border: 2px solid var(--primary-purple); border-radius: 5px; background: rgba(0,0,0,0.2); color: var(--white); font-size: 1rem; font-family: 'Merriweather', serif; margin-bottom: 16px; transition: border-color 0.2s ease; box-sizing: border-box; }
.content .comment-form input:focus,
.content .comment-form textarea:focus { outline: none; border-color: var(--gold); }
.content .comment-form textarea { min-height: 140px; resize: vertical; }
.content .comment-form input[type="submit"] { padding: 12px 28px; background: var(--gold); color: var(--off-black); border: none; border-radius: 8px; font-size: 1rem; font-family: 'Poppins', sans-serif; font-weight: 600; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; }
.content .comment-form input[type="submit"]:hover { background: var(--primary-purple); color: var(--white); }
/* ================================================================
   YouTube / Video embed — force 16:9 aspect ratio
================================================================ */
.wp-block-embed__wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.wp-block-embed {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}