/*
Theme Name: Siempre Milonguero
Theme URI: https://siempremilonguero.org
Author: Kazimer Consulting LLC
Author URI: https://kazimer.com
Description: Custom theme for Siempre Milonguero -- Milonguero Style Argentine Tango in North America. Built on a stripped-down _s (Automattic) foundation.
Version: 2.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: siempremilonguero
*/


:root{
    --navy: #172530;
    --navy-soft: #22343f;
    --slate: #4c6c81;
    --slate-dark: #33505f;
    --slate-darker: #253c48;
    --cream: #f7f1e5;
    --cream-card: #fffdf8;
    --ink: #262421;
    --ink-soft: #4c4a45;
    --gold: #af8a3f;
    --gold-light: #d8bb7c;
    --wine: #7a4141;
    --border-soft: rgba(38,36,33,0.12);
    --shadow: 0 18px 40px -18px rgba(15,25,32,0.35);
    --radius: 14px;
    --focus: 3px solid var(--gold);
}
*{
    box-sizing:border-box;
}
html{
    font-size:112.5%;
    scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }
    *{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}
body{
    margin:0;
    font-family:'Source Sans 3', -apple-system, Segoe UI, sans-serif;
    font-size:1.3rem;
    line-height:1.6;
    color:var(--ink);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
    font-family:'Playfair Display', Georgia, serif;
    font-weight:700;
    line-height:1.2;
    margin:0 0 .6em;
    color:var(--navy);
}
h1{
    font-size:clamp(2rem, 4.2vw, 3rem);
}
h2{
    font-size:clamp(1.6rem, 3vw, 2.2rem);
}
h3{
    font-size:1.3rem;
    margin-bottom:.35em;
}
p{
    margin:0 0 1.1em;
}
a{
    color:var(--slate-darker);
    text-decoration-thickness:1.5px;
    text-underline-offset:3px;
}
a:hover{
    color:var(--gold);
}
img{
    max-width:100%;
    display:block;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
:focus-visible{
    outline:var(--focus);
    outline-offset:3px;
    border-radius:4px;
}
.container{
    max-width:1180px;
    margin:0 auto;
    padding:0 1.5rem;
}
.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;
}

.skip-link{
    position:absolute;
    left:-999px;
    top:auto;
    background:var(--gold);
    color:var(--navy);
    font-weight:700;
    padding:.9em 1.3em;
    z-index:1000;
    border-radius:0 0 8px 0;
}
.skip-link:focus{
    left:0;
    top:0;
}

/* ===================== HEADER ===================== */
.site-header{
    position:relative;
    background: linear-gradient(155deg, var(--slate) 0%, var(--slate-dark) 65%, var(--slate-darker) 100%);
    border-top:6px solid var(--navy);
}
.header-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding: 1.1rem 1.5rem;
    max-width:1180px;
    margin:0 auto;
}
.brand{
    display:flex;
    align-items:flex-end;
    gap:.9rem;
    text-decoration:none;
    line-height:1;
}
.brand-logo{
    width:clamp(190px, 26vw, 300px);
    height:auto;
    flex-shrink:0;
    display:block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
}
.brand-tagline{
    font-family:'Source Sans 3', sans-serif;
    font-size:.78rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--gold-light);
    font-weight:600;
    padding-bottom:.4rem;
    display:none;
}
@media(min-width:640px){
    .brand-tagline{
        display:block;
    }
}

.site-nav ul{
    display:flex;
    gap:1.6rem;
    flex-wrap:wrap;
}
.site-nav a{
    color:#f2ede1;
    font-weight:600;
    font-size:1rem;
    text-decoration:none;
    padding:.4em .1em;
    border-bottom:2px solid transparent;
    transition:border-color .15s ease, color .15s ease;
}
.site-nav a:hover, .site-nav a:focus-visible{
    color:#fff;
    border-bottom-color:var(--gold);
}
.site-nav .current-menu-item > a, .mobile-menu .current-menu-item > a{
    color:#fff;
    border-bottom-color:var(--gold-light);
}
.sm-ornament{
    display:inline-flex;
}
.sm-ornament svg{
    width:100%;
    height:auto;
    display:block;
}
.site-nav a[aria-current="page"]{
    border-bottom-color:var(--gold-light);
    color:#fff;
}

.hamburger{
    display:none;
    position:relative;
    z-index:3;
    width:52px;
    height:52px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:10px;
    cursor:pointer;
    flex-shrink:0;
}
.hamburger span{
    display:block;
    width:26px;
    height:3px;
    background:#fbf6ea;
    margin:5px auto;
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2){
    opacity:0;
}
.hamburger[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

.gold-thread{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    padding: 0 1rem .9rem;
}
.gold-thread-line{
    height:1px;
    width:min(24vw, 180px);
    background:var(--gold-light);
    flex-shrink:1;
}
.gold-thread-cap{
    width:16px;
    height:18px;
    flex-shrink:0;
    color:var(--gold-light);
    display:block;
    line-height:0;
}
.gold-thread-cap svg{
    width:100%;
    height:100%;
    display:block;
}
.gold-thread-cap-right{
    transform:scaleX(-1);
}
.gold-thread-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--gold-light);
    margin:0 .6rem;
    flex-shrink:0;
}

/* ===================== MOBILE MENU ===================== */
.mobile-menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,20,24,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:40;
}
.mobile-menu-overlay.is-open{
    opacity:1;
    pointer-events:auto;
}
.mobile-menu{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(86vw, 380px);
    background:var(--navy);
    z-index:50;
    transform:translateX(100%);
    transition:transform .3s ease;
    padding:1.5rem 1.5rem 2.5rem;
    overflow-y:auto;
    box-shadow:-20px 0 40px rgba(0,0,0,.35);
}
.mobile-menu.is-open{
    transform:translateX(0);
}
.mobile-menu-close{
    background:none;
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    width:48px;
    height:48px;
    border-radius:10px;
    font-size:1.6rem;
    cursor:pointer;
    margin-bottom:1.5rem;
    line-height:1;
}
.mobile-menu-brand{
    width:180px;
    height:auto;
    margin-bottom:1.8rem;
    display:block;
}
.mobile-menu ul{
    display:flex;
    flex-direction:column;
    gap:.3rem;
}
.mobile-menu a{
    display:block;
    color:#f4efe4;
    text-decoration:none;
    font-family:'Playfair Display', serif;
    font-size:1.35rem;
    padding:.85em .3em;
    border-bottom:1px solid rgba(255,255,255,.1);
    min-height:48px;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible{
    color:var(--gold-light);
}
.mobile-menu a[aria-current="page"]{
    color:var(--gold-light);
}

/* ===================== HERO (home) ===================== */
.hero{
    background:var(--slate-darker);
    padding: 0 1.25rem 4.5rem;
    display:flex;
    justify-content:center;
}
.hero-card{
    background:var(--cream-card);
    max-width:840px;
    width:100%;
    margin-top:-2.5rem;
    padding:clamp(1.75rem, 4vw, 3.25rem);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    text-align:center;
    position:relative;
}
.eyebrow{
    font-size:.85rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--wine);
    font-weight:700;
    margin-bottom:.6em;
}
.hero-card p{
    color:var(--ink-soft);
    font-size:1.08rem;
}
.hero-actions{
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:1.6rem;
}
.btn-primary, .btn-secondary{
    display:inline-block;
    padding:.85em 1.6em;
    border-radius:8px;
    font-weight:700;
    text-decoration:none;
    min-height:48px;
    font-size:1rem;
}
.btn-primary{
    background:var(--gold);
    color:var(--navy);
}
.btn-primary:hover{
    background:var(--gold-light);
    color:var(--navy);
}
.btn-secondary{
    background:transparent;
    color:var(--navy);
    border:2px solid var(--navy);
}
.btn-secondary:hover{
    background:var(--navy);
    color:#fff;
}
.section-slate .btn-secondary{
    color:#fbf6ea;
    border-color:#fbf6ea;
}
.section-slate .btn-secondary:hover{
    background:#fbf6ea;
    color:var(--navy);
}

/* ===================== PAGE HERO (interior pages) ===================== */
.page-hero{
    background:var(--slate-darker);
    padding: 2.5rem 1.5rem 3.5rem;
    text-align:center;
    color:#fbf6ea;
}
.page-hero h1{
    color:#fbf6ea;
}
.page-hero p{
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    color:#d9d2c3;
    font-size:1.08rem;
}
.page-hero .eyebrow{
    color:var(--gold-light);
}
.page-hero a{
    color:var(--gold-light);
    text-decoration-thickness:1.5px;
    text-underline-offset:3px;
}
.page-hero a:hover, .page-hero a:focus-visible{
    color:#fff;
}

/* ===================== SECTIONS ===================== */
.section{
    padding:4.5rem 1.5rem;
}
.section-cream{
    background:var(--cream);
}
.section-slate{
    background:linear-gradient(180deg, var(--slate-darker), var(--navy));
    color:#f2ede1;
}
.section-slate h2, .section-slate h3{
    color:#fbf6ea;
}
.section-slate p{
    color:#d9d2c3;
}
.section-head{
    max-width:760px;
    margin:0 auto 2.75rem;
    text-align:center;
}
.section-head.light .eyebrow{
    color:var(--gold-light);
}
.thread{
    width:90px;
    height:3px;
    margin:1rem auto 0;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-cta{
    text-align:center;
    margin-top:2.75rem;
}

/* ---- Event cards ---- */
.card-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:1.6rem;
}
@media(min-width:640px){
    .card-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:1000px){
    .card-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
.event-card{
    background:var(--cream-card);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 10px 26px -14px rgba(23,37,48,.25);
    border:1px solid var(--border-soft);
    display:flex;
    flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
}
.event-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px -16px rgba(23,37,48,.35);
}
.event-media{
    height:200px;
    background-size:cover;
    background-position:center;
    position:relative;
}
.event-date-badge{
    position:absolute;
    left:.9rem;
    bottom:-1.1rem;
    display:flex;
    align-items:stretch;
    height:1.8em;
    color:var(--navy);
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.28));
}
.badge-cap{
    width:.85em;
    flex-shrink:0;
    display:block;
    line-height:0;
}
.badge-cap svg{
    width:100%;
    height:100%;
    display:block;
}
.badge-cap-right{
    transform:scaleX(-1);
}
.badge-fill{
    background:var(--navy);
    border-top:1px solid var(--gold);
    border-bottom:1px solid var(--gold);
    color:#fbf6ea;
    font-weight:700;
    font-size:.85rem;
    letter-spacing:.03em;
    white-space:nowrap;
    display:flex;
    align-items:center;
    padding:0 1em;
}
.event-body{
    padding:1.8rem 1.4rem 1.5rem;
    display:flex;
    flex-direction:column;
    flex:1;
}
.event-body h3{
    font-size:1.2rem;
    line-height:1.3em;
    height:2.6em;
    margin:0;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.event-card-title{
    margin-bottom:.6rem;
}
.event-card-title .event-location{
    margin-bottom:.4em;
}
.event-card-content{
    flex:1;
}
.event-card-cta{
    margin-top:1rem;
}
.event-location{
    color:var(--wine);
    font-weight:600;
    font-size:.92rem;
    margin-bottom:.5em;
    display:flex;
    align-items:center;
    gap:.4em;
}
.event-body p{
    font-size:.98rem;
    color:var(--ink-soft);
}
.event-link{
    font-weight:700;
    font-size:.95rem;
}
.event-card.is-past{
    opacity:.6;
}

/* ---- Sticky announcement card ---- */
.announcement-list{
    max-width:1180px;
    margin:0 auto;
}
.announcement-card{
    background:var(--cream-card);
    border-radius:var(--radius);
    border:1px solid var(--border-soft);
    border-left:5px solid var(--gold);
    box-shadow:0 10px 26px -14px rgba(23,37,48,.25);
    padding:1.8rem clamp(1.5rem, 4vw, 2.5rem);
}
.announcement-card h2{
    font-size:1.35rem;
    margin-bottom:.5em;
}
.announcement-card h2 a{
    color:var(--navy);
    text-decoration:none;
}
.announcement-card h2 a:hover{
    color:var(--gold);
}
.announcement-card .entry-content{
    color:var(--ink-soft);
    font-size:1rem;
}
.announcement-card .entry-content > *:last-child{
    margin-bottom:0;
}
.event-status{
    display:inline-block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:.25em .6em;
    border-radius:5px;
    margin-bottom:.6em;
}
.event-status.open{
    background:#e4efe2;
    color:#2f5c2b;
}
.event-status.waitlist{
    background:#f5e8d3;
    color:#7a4b16;
}
.event-status.tba{
    background:#e7e2d8;
    color:#59544a;
}

/* ---- Quote / nostalgia section ---- */
.quote-section{
    background:var(--navy);
    color:#f2ede1;
    padding:5rem 1.5rem;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.quote-flourish{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:900px;
    max-width:160vw;
    color:#fff;
    opacity:.05;
    pointer-events:none;
}
.quote-section blockquote{
    position:relative;
    z-index:1;
    max-width:780px;
    margin:0 auto;
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:clamp(1.35rem, 3vw, 1.9rem);
    line-height:1.5;
    color:#fbf6ea;
}
.quote-section cite{
    display:block;
    margin-top:1.2rem;
    font-style:normal;
    font-family:'Source Sans 3', sans-serif;
    font-size:.95rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold-light);
}

/* ---- Teacher groups ---- */
.state-groups{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:1.4rem;
}
@media(min-width:700px){
    .state-groups{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:1100px){
    .state-groups{
        grid-template-columns:repeat(3,1fr);
    }
}
.state-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius);
    padding:1.6rem 1.5rem;
}
.state-card h3{
    color:var(--gold-light);
    font-family:'Source Sans 3', sans-serif;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.92rem;
    border-bottom:1px solid rgba(255,255,255,.15);
    padding-bottom:.6em;
    margin-bottom:.9em;
}
.teacher-row{
    padding:.7em 0;
    border-bottom:1px dashed rgba(255,255,255,.1);
}
.teacher-row:last-child{
    border-bottom:none;
}
.teacher-name{
    font-weight:700;
    color:#fbf6ea;
    display:block;
}
.teacher-city{
    color:#c9c0ac;
    font-size:.88rem;
    display:block;
    margin:.15em 0 .3em;
}
.teacher-row a{
    color:var(--gold-light);
    font-size:.9rem;
    font-weight:600;
}

/* ===================== FOOTER ===================== */
.site-footer{
    background:var(--navy);
    color:#c9c0ac;
    padding:0 1.5rem 2rem;
}
.footer-thread{
    height:3px;
    background:linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
}
.footer-grid{
    max-width:1180px;
    margin:0 auto;
    padding:3rem 0 2rem;
    display:grid;
    grid-template-columns:1fr;
    gap:2.2rem;
}
@media(min-width:760px){
    .footer-grid{
        grid-template-columns:1.3fr 1fr 1fr;
    }
}
.footer-brand{
    width:170px;
    height:auto;
    margin-bottom:.8rem;
}
.footer-brand svg{
    width:100%;
    height:auto;
}
.footer-grid h4{
    color:#fbf6ea;
    font-family:'Source Sans 3',sans-serif;
    font-size:.85rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:.9em;
}
.footer-grid ul{
    display:flex;
    flex-direction:column;
    gap:.55em;
}
.footer-grid a{
    color:#c9c0ac;
    text-decoration:none;
    font-size:.96rem;
}
.footer-grid a:hover{
    color:var(--gold-light);
}
.footer-bottom{
    max-width:1180px;
    margin:0 auto;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:1.4rem;
    font-size:.85rem;
    display:flex;
    flex-wrap:wrap;
    gap:.6rem 1.5rem;
    justify-content:space-between;
}
.footer-bottom a{
    color:var(--gold-light);
}
.footer-bottom a:hover, .footer-bottom a:focus-visible{
    color:#fff;
}

@media (max-width: 899px){
    .site-nav{
        display:none;
    }
    .hamburger{
        display:block;
    }
    .header-inner{
        padding:1.1rem 1.25rem;
    }
    .gold-thread-line{
        width:12vw;
    }
}
@media (min-width: 900px){
    .mobile-menu, .mobile-menu-overlay{
        display:none;
    }
}

/* =============== OLD CONTENT CLASSES =============== */
img.centered, img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    padding: 8px 8px 8px 8px;
    margin: 6px 2px 6px 6px;
    display: inline;
}
img.alignleft {
    padding: 8px 8px 8px 8px;
    margin: 6px 6px 6px 2px;
    display: inline;
}
.alignright {
    float: right;
}
.alignleft {
    float: left;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.rounded {
    border-radius: 20px;
}
/* ================ MailChimp Overrides ============== */
.mc_required, .mc-indicates-required {
    color: red;
}
.mc_signup_submit_button {
    font-size: 1.2rem;
}