/* ============================================================
 A AM – styles.css  |  Association des Algériens du Manitoba                                                                                                                    *
 ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

/* ── Tokens ── */
:root {
    --clr-primary:   #8B1A2A;
    --clr-primary-h: #6e1421;
    --clr-green:     #1A6B3C;
    --clr-green-h:   #145530;
    --clr-bg:        #FAFAF8;
    --clr-surface:   #F5F0E8;
    --clr-border:    rgba(28,25,23,.12);
    --clr-text:      #1C1917;
    --clr-muted:     #6b6560;
    --clr-faint:     #a8a39e;
    --font-display:  'Cormorant Garamond', Georgia, serif;
    --font-body:     'Inter', system-ui, sans-serif;
    --r-sm: .375rem; --r-md: .5rem; --r-lg: .75rem; --r-xl: 1rem;
    --shadow-sm: 0 1px 3px rgba(28,25,23,.08);
    --shadow-md: 0 4px 16px rgba(28,25,23,.10);
    --transition: 180ms cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] {
    --clr-bg:      #171412;
    --clr-surface: #211e1b;
    --clr-border:  rgba(255,255,255,.10);
    --clr-text:    #e8e4df;
    --clr-muted:   #a09890;
    --clr-faint:   #6a6460;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;text-size-adjust:none;scroll-padding-top:5rem}
body{font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--clr-text);background:var(--clr-bg);min-height:100dvh}
img,picture{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit}
ul[role="list"],ol[role="list"]{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;text-wrap:balance}

/* ── Skip link ── */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--clr-primary);color:#fff;padding:.5rem 1rem;border-radius:var(--r-md);z-index:9999}

/* ── Container ── */
.container{max-width:1100px;margin-inline:auto;padding-inline:1.25rem}
.container--narrow{max-width:720px;margin-inline:auto;padding-inline:1.25rem}

/* ── Header / Nav ── */
header{position:sticky;top:0;z-index:100;background:var(--clr-bg);border-bottom:1px solid var(--clr-border);box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;gap:1rem;height:4rem}
.nav-logo{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.nav-logo img{height:2.25rem;width:auto;border-radius:var(--r-sm)}
.nav-logo-text{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--clr-primary)}
.nav-links{display:flex;align-items:center;gap:.125rem;list-style:none;margin-left:auto}
.nav-links a{font-size:.875rem;font-weight:500;padding:.375rem .75rem;border-radius:var(--r-md);transition:background var(--transition),color var(--transition)}
.nav-links a:hover,.nav-links a.nav-active{background:var(--clr-surface);color:var(--clr-primary)}
.nav-controls{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}
.btn-icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--r-md);color:var(--clr-muted);transition:background var(--transition),color var(--transition)}
.btn-icon:hover{background:var(--clr-surface);color:var(--clr-text)}
.burger{display:none}
@media(max-width:768px){
    .nav-links{display:none;flex-direction:column;align-items:flex-start;gap:0;position:absolute;top:4rem;left:0;right:0;background:var(--clr-bg);border-bottom:1px solid var(--clr-border);padding:1rem 1.25rem}
    .nav-links.open{display:flex}
    .nav-links a{width:100%;padding:.625rem .75rem}
    .burger{display:flex}
}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.375rem;border-radius:var(--r-lg);font-size:.9rem;font-weight:600;transition:background var(--transition),color var(--transition),box-shadow var(--transition)}
.btn-primary{background:var(--clr-primary);color:#fff}
.btn-primary:hover{background:var(--clr-primary-h);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--clr-green);color:#fff}
.btn-secondary:hover{background:var(--clr-green-h);box-shadow:var(--shadow-md)}
.btn-outline{border:1.5px solid var(--clr-primary);color:var(--clr-primary);background:transparent}
.btn-outline:hover{background:var(--clr-surface)}

/* ── Hero ── */
.hero{position:relative;overflow:hidden;background:var(--clr-surface)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding-block:5rem}
.hero-content{display:flex;flex-direction:column;gap:1.5rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(139,26,42,.1);color:var(--clr-primary);font-size:.8rem;font-weight:600;padding:.3rem .8rem;border-radius:9999px;width:fit-content;text-transform:uppercase;letter-spacing:.05em}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.5rem);color:var(--clr-primary)}
.hero-sub{font-size:1.1rem;color:var(--clr-muted);max-width:55ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-img{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);background:var(--clr-border)}
.hero-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:768px){
    .hero-inner{grid-template-columns:1fr;gap:2rem;padding-block:3rem}
    .hero-img{display:none}
}

/* ── Section ── */
.section{padding-block:clamp(3rem,6vw,5rem)}
.section-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--clr-primary);margin-bottom:.5rem}
.section-title{font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:1rem}
.section-lead{font-size:1.05rem;color:var(--clr-muted);max-width:65ch;margin-bottom:2rem}
.section--alt{background:var(--clr-surface)}

/* ── Stats ── */
.stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;padding-block:2.5rem}
.stat-item{text-align:center}
.stat-num{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--clr-primary)}
.stat-lbl{font-size:.85rem;color:var(--clr-muted);margin-top:.2rem}

/* ── Cards ── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.card{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-body{padding:1.25rem}
.card-tag{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--clr-green);margin-bottom:.4rem}
.card-title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.card-text{font-size:.9rem;color:var(--clr-muted)}

/* ── Page banner ── */
.page-banner{background:var(--clr-surface);padding-block:3rem 2rem;border-bottom:1px solid var(--clr-border)}
.page-banner h1{font-size:clamp(1.8rem,3.5vw,2.75rem);color:var(--clr-primary);margin-top:.5rem}
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--clr-muted)}
.breadcrumb a{color:var(--clr-muted)}
.breadcrumb a:hover{color:var(--clr-primary)}

/* ── Values ── */
.values-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.5rem}
.value-item{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:1.25rem}
.value-icon{font-size:1.5rem;margin-bottom:.5rem}
.value-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:.25rem}
.value-desc{font-size:.875rem;color:var(--clr-muted)}

/* ── Programs ── */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.prog-card{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--shadow-sm)}
.prog-icon{width:2.5rem;height:2.5rem;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1rem}
.prog-icon--red{background:rgba(139,26,42,.1);color:var(--clr-primary)}
.prog-icon--green{background:rgba(26,107,60,.1);color:var(--clr-green)}
.prog-title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.prog-text{font-size:.9rem;color:var(--clr-muted)}

/* ── Membership ── */
.membership-cards{display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 1.5rem;max-width: 680px;margin-inline: auto;}
.mem-card{background:var(--clr-bg);border:2px solid var(--clr-border);border-radius:var(--r-xl);padding:1.75rem;position:relative}
.mem-card--featured{border-color:var(--clr-primary)}
.mem-badge{position:absolute;top:-1px;right:1.5rem;background:var(--clr-primary);color:#fff;font-size:.75rem;font-weight:700;padding:.2rem .75rem;border-radius:0 0 var(--r-md) var(--r-md);text-transform:uppercase;letter-spacing:.05em}
.mem-type{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--clr-muted);margin-bottom:.4rem}
.mem-name{font-family:var(--font-display);font-size:1.35rem;font-weight:700;margin-bottom:.75rem}
.mem-price{font-size:1.6rem;font-weight:700;color:var(--clr-primary);margin-bottom:.25rem}
.mem-note{font-size:.8rem;color:var(--clr-muted);margin-bottom:1.25rem}
.mem-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}
.mem-list li{font-size:.875rem;color:var(--clr-muted);display:flex;gap:.5rem}
.mem-list li::before{content:"✓";color:var(--clr-green);font-weight:700;flex-shrink:0}
.mem-card {
  display: flex;
  flex-direction: column;
}
.mem-list {
  flex: 1;
}
/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:3rem;align-items:start}
.contact-item{display:flex;align-items:flex-start;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--clr-border)}
.contact-item:last-child{border-bottom:none}
.ci-icon{width:2.25rem;height:2.25rem;border-radius:var(--r-md);background:var(--clr-surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--clr-primary)}
.contact-item h3{font-size:.875rem;font-weight:600;margin-bottom:.2rem}
.contact-item a,.contact-item p{font-size:.9rem;color:var(--clr-muted)}
.contact-item a:hover{color:var(--clr-primary)}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr;gap:2rem}}

/* ── Form ── */
.form-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-xl);padding:2rem}
.form-group{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.form-label{font-size:.875rem;font-weight:600;color:var(--clr-text)}
.form-input,.form-select,.form-textarea{padding:.625rem .875rem;border:1.5px solid var(--clr-border);border-radius:var(--r-md);background:var(--clr-bg);color:var(--clr-text);font-family:var(--font-body);font-size:.9rem;transition:border-color var(--transition),box-shadow var(--transition);width:100%}
.form-textarea{min-height:140px;resize:vertical}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--clr-primary);box-shadow:0 0 0 3px rgba(139,26,42,.12)}
.form-success{background:rgba(26,107,60,.1);color:var(--clr-green);border:1px solid rgba(26,107,60,.2);border-radius:var(--r-md);padding:1rem 1.25rem;font-size:.9rem;display:none}

/* ── Legal table ── */
.legal-table{width:100%;border-collapse:collapse;font-size:.9rem}
.legal-table th,.legal-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--clr-border)}
.legal-table th{font-weight:600;background:var(--clr-surface)}
.legal-table tr:hover td{background:var(--clr-surface)}

/* ── Footer ── */
footer{background:var(--clr-text);color:#d6d2cd;padding-block:3rem 1.5rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}}
@media (max-width: 480px){.footer-brand {flex-direction: column !important; align-items: flex-start !important;}}
.footer-brand{display:flex;flex-direction:column;gap:.75rem}
.footer-brand img{height:2.25rem;width:auto;border-radius:var(--r-sm)}
.footer-tagline{font-family:var(--font-display);font-size:1.1rem;color:#fff;font-style:italic}
.footer-desc{font-size:.85rem;color:#a09890;max-width:36ch}
.footer-col h4{font-family:var(--font-display);font-size:1rem;color:#fff;margin-bottom:.875rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer-col a{font-size:.875rem;color:#a09890;transition:color var(--transition)}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;font-size:.8rem;color:#6a6460}