/*
Theme Name: Sangeet Alumni
Theme URI: https://example.com/sangeet-alumni
Author: Alumni Web Team
Description: WordPress theme for Music Department Alumni Association — Hind Siliguri font, maroon/gold/cream palette, harmonium preloader, membership, events, election portal, and news.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sangeet-alumni
*/

* { margin:0; padding:0; box-sizing:border-box; font-family:'Hind Siliguri', sans-serif; }

:root{
  --maroon:#8b1e2b;
  --maroon-deep:#3d0f16;
  --dark:#1e1a17;
  --dark2:#2f241d;
  --cream:#f5f0eb;
  --cream2:#faf7f2;
  --soft:#f3ede7;
  --border:#ede6dd;
  --text2:#5a4c3d;
  --gold:#d8a85d;
  --gold-deep:#C9A046;
  --ivory:#f5ecd8;
  --ivory-shadow:#d9c8a3;
  --wood:#5a3620;
  --wood-dark:#3a2013;
}

html{ scroll-behavior:smooth; }
body{ background:var(--cream); color:var(--dark); }
button, a{ -webkit-tap-highlight-color:transparent; cursor:pointer; }
img{ max-width:100%; display:block; }

.app{ max-width:400px; width:100%; background:#fff; border-radius:32px 32px 24px 24px; box-shadow:0 8px 30px rgba(0,0,0,.08); overflow:hidden; padding:20px 18px 92px; position:relative; margin:12px auto; }

@media (min-width:600px){
  .app{ max-width:760px; padding:28px 40px 100px; }
}
@media (min-width:1024px){
  .app{ max-width:1040px; padding:32px 60px 110px; }
}

/* Header */
.site-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.header-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-icon{ background:var(--maroon); color:#f5e6d3; width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 4px 8px rgba(139,30,43,.2); flex-shrink:0; }
.brand-text{ font-weight:700; font-size:18px; line-height:1.2; color:var(--dark); }
.brand-text small{ font-weight:400; font-size:12px; display:block; color:#7a6a5c; letter-spacing:.3px; }
.menu-btn{ width:42px; height:42px; border:0; border-radius:50%; background:#f0e8e0; color:var(--dark); font-size:18px; }

/* Hero */
.hero{ background:linear-gradient(145deg, var(--dark), var(--dark2)); border-radius:28px; padding:24px 20px 20px; margin-bottom:20px; color:#f2e7dc; position:relative; overflow:hidden; }
.hero::after{ content:"♪"; position:absolute; right:-8px; bottom:-28px; font-size:120px; opacity:.045; transform:rotate(12deg); font-weight:300; }
.hero .eyebrow{ font-size:12px; color:var(--gold); font-weight:600; margin-bottom:4px; position:relative; z-index:1; }
.hero h1{ font-weight:600; font-size:25px; line-height:1.25; letter-spacing:-.4px; position:relative; z-index:1; }
.hero h1 span{ color:#e7c9a6; }
.hero p{ font-weight:400; font-size:14px; opacity:.82; margin-top:8px; max-width:88%; line-height:1.6; position:relative; z-index:1; }
.hero-actions{ display:flex; gap:9px; margin-top:17px; position:relative; z-index:2; flex-wrap:wrap; }
.hero-btn{ text-decoration:none; padding:9px 13px; border-radius:12px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:7px; border:0; }
.hero-btn.primary{ background:#e7c9a6; color:#2f241d; }
.hero-btn.secondary{ border:1px solid rgba(231,201,166,.55); color:#f5e6d3; background:rgba(255,255,255,.03); }
.badge-group{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; position:relative; z-index:2; }
.badge{ background:rgba(255,255,255,.07); padding:5px 11px; border-radius:40px; font-size:11px; font-weight:500; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,215,180,.1); color:#f2e7dc; }
.badge i{ color:#e7c9a6; font-size:11px; }

/* Stats */
.stats{ display:flex; justify-content:space-around; background:var(--cream2); border-radius:40px; padding:10px 4px; margin-bottom:25px; border:1px solid var(--border); flex-wrap:wrap; }
.stat-item{ text-align:center; min-width:0; padding:4px 6px; }
.stat-item .num{ font-weight:700; font-size:18px; color:var(--dark); line-height:1.1; }
.stat-item .label{ font-size:10px; color:#6b5d4f; font-weight:500; }

/* Sections */
.section-title{ display:flex; justify-content:space-between; align-items:center; margin:23px 0 12px; }
.section-title h3{ font-weight:600; font-size:19px; color:var(--dark); }
.section-title a{ color:var(--maroon); font-size:12px; font-weight:600; text-decoration:none; background:#f5ede6; padding:4px 11px; border-radius:40px; }

/* Feature cards */
.card-grid{ display:flex; flex-direction:column; gap:11px; }
@media (min-width:700px){ .card-grid{ display:grid; grid-template-columns:1fr 1fr; } }
.feature-card{ background:#fcf9f6; border-radius:21px; padding:14px; border:1px solid var(--border); display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s; }
.feature-card:active{ transform:scale(.985); }
.feature-card .icon-bg{ width:52px; height:52px; background:#e9ddd2; border-radius:17px; display:flex; align-items:center; justify-content:center; color:#4a3426; font-size:21px; flex-shrink:0; }
.feature-card .content{ flex:1; min-width:0; }
.feature-card .content h4{ font-weight:600; font-size:16px; color:var(--dark); margin-bottom:1px; }
.feature-card .content p{ font-size:12px; color:var(--text2); line-height:1.45; margin-bottom:5px; }
.feature-card .content .tag{ background:#e9ddd2; border-radius:40px; padding:2px 9px; font-size:10px; font-weight:600; color:#3d2c1e; display:inline-block; }
.feature-card .arrow{ color:var(--maroon); font-size:15px; opacity:.65; }
.election-card{ background:#f6efe8; border-left:4px solid var(--maroon); }
.election-card .icon-bg{ background:#dacfc4; color:#5f3b2a; }

/* Notice */
.notice{ background:var(--soft); border-radius:23px; padding:14px 15px; margin-top:22px; display:flex; align-items:flex-start; gap:11px; border:1px solid #e9e0d7; }
.notice-icon{ width:39px; height:39px; border-radius:13px; background:var(--maroon); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notice-content{ min-width:0; }
.notice-content strong{ display:block; font-size:14px; color:var(--maroon); margin-bottom:2px; }
.notice-content p{ font-size:12px; color:#514438; line-height:1.5; }
.notice-content a{ color:var(--maroon); text-decoration:none; font-weight:600; }

/* Events */
.event-list{ display:flex; flex-direction:column; gap:10px; }
.event-card{ display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:20px; padding:12px; }
.date-box{ width:55px; height:62px; border-radius:16px; background:var(--dark); color:#fff; text-align:center; padding-top:7px; flex-shrink:0; }
.date-box .day{ font-size:20px; line-height:1; font-weight:700; color:#e7c9a6; }
.date-box .month{ font-size:10px; margin-top:3px; }
.event-info{ flex:1; min-width:0; }
.event-info h4{ font-size:14px; font-weight:600; margin-bottom:4px; }
.event-info p{ font-size:11px; color:#75685c; line-height:1.45; }
.event-info i{ width:15px; color:var(--maroon); }
.event-btn{ border:1px solid #d8c7b7; background:#fff; color:var(--maroon); border-radius:11px; padding:7px 9px; font-size:10px; font-weight:600; white-space:nowrap; text-decoration:none; }

/* News */
.news-list{ display:flex; flex-direction:column; gap:10px; }
.news-item{ display:flex; gap:11px; padding:12px; background:#fcf9f6; border-radius:18px; border:1px solid var(--border); text-decoration:none; color:inherit; }
.news-icon{ width:42px; height:42px; border-radius:14px; background:#eee1d5; color:var(--maroon); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.news-item h4{ font-size:13px; font-weight:600; line-height:1.35; }
.news-item p{ font-size:10px; color:#786b5f; margin-top:3px; }

/* Footer */
.site-footer{ margin-top:25px; padding:18px 5px 3px; text-align:center; border-top:1px solid #eee5dc; }
.site-footer .music-note{ color:var(--maroon); font-size:20px; margin-bottom:4px; }
.site-footer p{ font-size:11px; color:#75685c; line-height:1.6; }

/* Bottom navigation */
.bottom-nav{ position:absolute; left:0; right:0; bottom:0; height:70px; background:rgba(255,255,255,.97); border-top:1px solid #eee5dc; display:flex; align-items:center; justify-content:space-around; padding:5px 6px 7px; z-index:20; backdrop-filter:blur(8px); }
.bottom-nav a{ text-decoration:none; color:#75685c; font-size:10px; font-weight:500; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:54px; }
.bottom-nav a i{ font-size:17px; }
.bottom-nav a.active{ color:var(--maroon); font-weight:600; }
@media (min-width:900px){ .bottom-nav{ display:none; } .app{ padding-bottom:40px; } }

/* Menu drawer */
.menu-overlay{ position:fixed; inset:0; background:rgba(20,16,13,.45); display:none; z-index:99; }
.menu-overlay.open{ display:block; }
.drawer{ position:fixed; top:0; right:-310px; width:min(310px,85vw); height:100vh; background:#fff; z-index:100; padding:22px; box-shadow:-8px 0 30px rgba(0,0,0,.15); transition:right .25s ease; overflow-y:auto; }
.drawer.open{ right:0; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; }
.drawer-head h3{ font-size:19px; }
.close-btn{ width:38px; height:38px; border:0; border-radius:50%; background:#f3ede7; color:var(--dark); }
.drawer a{ display:flex; align-items:center; gap:13px; padding:13px 8px; border-bottom:1px solid #f0e8e0; color:var(--dark); text-decoration:none; font-size:14px; font-weight:500; }
.drawer a i{ width:25px; color:var(--maroon); }

/* Generic content pages */
.content-page h1.page-title{ font-size:24px; font-weight:700; margin-bottom:14px; color:var(--dark); }
.content-page .entry-content{ font-size:14px; line-height:1.8; color:var(--text2); }
.content-page .entry-content p{ margin-bottom:12px; }

/* Membership form */
.plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 20px; }
@media (min-width:600px){ .plan-grid{ grid-template-columns:repeat(4,1fr); } }
.plan-card{ border:2px solid var(--border); border-radius:16px; padding:14px 10px; text-align:center; cursor:pointer; background:#fff; transition:.2s; }
.plan-card.selected{ border-color:var(--maroon); background:#fbf1ee; box-shadow:0 4px 14px rgba(139,30,43,.12); }
.plan-card .dur{ font-weight:700; font-size:15px; color:var(--dark); }
.plan-card .price{ font-weight:700; font-size:18px; color:var(--maroon); margin-top:6px; }
.plan-card .per{ font-size:10px; color:#8a7a6c; }
.plan-card input{ display:none; }
.am-field{ margin-bottom:14px; }
.am-field label{ display:block; font-size:12px; font-weight:600; margin-bottom:5px; color:var(--dark); }
.am-field input, .am-field select, .am-field textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; background:#fcf9f6; }
.am-submit-btn{ width:100%; background:var(--maroon); color:#fff; border:0; padding:13px; border-radius:12px; font-weight:700; font-size:14px; }
.am-instructions{ background:var(--soft); border-radius:16px; padding:14px; font-size:12.5px; line-height:1.7; color:var(--text2); margin-bottom:16px; }
.am-status-box{ background:#fcf9f6; border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:18px; }
.am-status-box .badge-status{ display:inline-block; padding:3px 12px; border-radius:40px; font-size:11px; font-weight:700; }
.am-status-box .badge-status.active{ background:#e3f3e3; color:#256b25; }
.am-status-box .badge-status.expired{ background:#f7e0e0; color:#8b1e2b; }
.am-status-box .badge-status.none{ background:#eee; color:#666; }
.am-notice{ padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; }
.am-notice.success{ background:#e3f3e3; color:#256b25; }
.am-notice.error{ background:#f7e0e0; color:#8b1e2b; }

/* ===================== Preloader (harmonium) ===================== */
#am-preloader{ position:fixed; inset:0; z-index:99999; background:radial-gradient(circle at 50% 20%, #4a1620 0%, var(--maroon-deep) 45%, #1a0a0d 100%); color:var(--ivory); display:flex; align-items:center; justify-content:center; overflow:hidden; }
#am-preloader .float-swar{ position:absolute; bottom:-40px; font-size:28px; color:var(--gold); opacity:0; pointer-events:none; font-weight:600; animation:amFloatUp linear infinite; }
@keyframes amFloatUp{ 0%{transform:translateY(0) rotate(0deg);opacity:0;} 10%{opacity:.18;} 85%{opacity:.12;} 100%{transform:translateY(-100vh) rotate(20deg);opacity:0;} }
#am-preloader .corner{ position:absolute; width:120px; height:120px; border:2px solid rgba(232,196,104,.25); opacity:.6; }
#am-preloader .corner.tl{ top:18px;left:18px;border-right:none;border-bottom:none;border-radius:40px 0 0 0; }
#am-preloader .corner.tr{ top:18px;right:18px;border-left:none;border-bottom:none;border-radius:0 40px 0 0; }
#am-preloader .corner.bl{ bottom:18px;left:18px;border-right:none;border-top:none;border-radius:0 0 0 40px; }
#am-preloader .corner.br{ bottom:18px;right:18px;border-left:none;border-top:none;border-radius:0 0 40px 0; }
#am-preloader .stage{ position:relative; z-index:2; text-align:center; padding:20px; max-width:640px; width:100%; }
#am-preloader .eyebrow{ font-size:12.5px; letter-spacing:.25em; color:var(--gold); opacity:.75; font-weight:600; text-transform:uppercase; margin-bottom:10px; }
#am-preloader .title{ font-size:clamp(26px,6vw,38px); font-weight:700; margin:0 0 8px; background:linear-gradient(180deg,#fff6e0,var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#am-preloader .subtitle{ font-size:14.5px; color:#e9d9c3; opacity:.75; max-width:420px; margin:0 auto 28px; }
#am-preloader .progress-row{ display:flex; justify-content:center; gap:8px; margin-bottom:34px; flex-wrap:wrap; }
#am-preloader .progress-dot{ display:flex; flex-direction:column; align-items:center; gap:6px; opacity:.35; transition:.3s; }
#am-preloader .progress-dot .circle{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--gold); background:rgba(232,196,104,.05); transition:.3s; }
#am-preloader .progress-dot .swar-label{ font-size:11px; color:var(--gold); opacity:.8; }
#am-preloader .progress-dot.done{ opacity:1; transform:translateY(-2px); }
#am-preloader .progress-dot.done .circle{ background:var(--gold); color:var(--maroon-deep); box-shadow:0 0 18px rgba(232,196,104,.6); }
#am-preloader .progress-dot.current{ opacity:1; }
#am-preloader .progress-dot.current .circle{ box-shadow:0 0 0 4px rgba(232,196,104,.15); animation:amPulseRing 1.4s ease-in-out infinite; }
@keyframes amPulseRing{ 0%,100%{box-shadow:0 0 0 4px rgba(232,196,104,.12);} 50%{box-shadow:0 0 0 9px rgba(232,196,104,.05);} }
#am-preloader .harmonium-wrap{ position:relative; display:flex; justify-content:center; align-items:flex-end; margin:0 auto; max-width:560px; }
#am-preloader .bellows{ width:34px; align-self:stretch; border-radius:10px 0 0 10px; flex-shrink:0; background:linear-gradient(90deg,var(--wood-dark),var(--wood)); background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 4px,transparent 4px 12px),linear-gradient(90deg,var(--wood-dark),var(--wood)); box-shadow:inset -3px 0 8px rgba(0,0,0,.4); animation:amBellowsIdle 2.6s ease-in-out infinite; }
@keyframes amBellowsIdle{ 0%,100%{transform:scaleX(1);} 50%{transform:scaleX(1.06);} }
#am-preloader .bellows.pumping{ animation:amBellowsPump .35s ease-out; }
@keyframes amBellowsPump{ 0%{transform:scaleX(1);} 35%{transform:scaleX(1.22);} 100%{transform:scaleX(1);} }
#am-preloader .harmonium-body{ background:linear-gradient(180deg,var(--wood) 0%,var(--wood-dark) 100%); border-radius:0 16px 16px 16px; padding:16px 16px 20px; box-shadow:0 20px 50px rgba(0,0,0,.45); position:relative; flex:1; }
#am-preloader .grille{ display:flex; justify-content:center; gap:5px; margin-bottom:14px; padding:6px 4px; }
#am-preloader .grille span{ width:4px; height:22px; background:rgba(232,196,104,.35); border-radius:2px; }
#am-preloader .keybed{ display:flex; gap:4px; background:var(--wood-dark); padding:8px; border-radius:8px; box-shadow:inset 0 4px 10px rgba(0,0,0,.5); }
#am-preloader .key{ background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-shadow) 100%); border:1px solid #c9b78d; border-radius:0 0 8px 8px; width:56px; height:120px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:12px; cursor:pointer; position:relative; box-shadow:0 4px 0 #b3a077,0 6px 10px rgba(0,0,0,.35); transition:.08s; user-select:none; }
#am-preloader .key .swar-bn{ font-size:19px; font-weight:700; color:var(--maroon-deep); }
#am-preloader .key .swar-en{ font-size:9.5px; color:#8a7550; letter-spacing:.05em; margin-top:1px; }
#am-preloader .key.pressed{ transform:translateY(4px); box-shadow:0 0 0 #b3a077,0 3px 6px rgba(0,0,0,.35); background:linear-gradient(180deg,#ecdfc0 0%,#d3c193 100%); }
#am-preloader .key.correct-flash{ animation:amCorrectFlash .5s ease; }
@keyframes amCorrectFlash{ 0%{background:linear-gradient(180deg,var(--gold),var(--gold-deep));} 100%{background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-shadow) 100%);} }
#am-preloader .key.wrong-shake{ animation:amWrongShake .4s ease; }
@keyframes amWrongShake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);background:#e8b3b3;} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }
#am-preloader .key.done-key{ background:linear-gradient(180deg,#fff2cf 0%,var(--gold) 100%); }
#am-preloader .key.done-key .swar-bn{ color:var(--maroon-deep); }
#am-preloader .hint{ margin-top:22px; font-size:13px; color:#e9d9c3; opacity:.6; min-height:20px; }
#am-preloader .hint.toast{ color:#ffb3b3; font-weight:600; opacity:1; }
#am-preloader .skip-link{ position:absolute; top:18px; right:18px; z-index:5; color:var(--gold); font-size:12px; opacity:.7; text-decoration:none; border:1px solid rgba(232,196,104,.4); padding:6px 12px; border-radius:20px; }
#am-preloader .completion{ position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 50%,rgba(232,196,104,.18),var(--maroon-deep) 70%); opacity:0; pointer-events:none; transition:opacity .8s ease; text-align:center; padding:20px; }
#am-preloader .completion.show{ opacity:1; pointer-events:all; }
#am-preloader .completion h2{ font-size:clamp(24px,5.5vw,34px); color:var(--gold); font-weight:700; margin:0 0 10px; position:relative; z-index:2; }
#am-preloader .completion p{ position:relative; z-index:2; color:#f0e0c8; }
#am-preloader .burst{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 40px 20px rgba(232,196,104,.4); animation:amBurstGrow 1.4s ease-out forwards; }
@keyframes amBurstGrow{ 0%{transform:scale(0);opacity:1;} 100%{transform:scale(60);opacity:0;} }
@media (max-width:480px){ #am-preloader .key{ width:42px; height:96px; } }