/* ══════════════════════════════════════════
   GLOBAL CSS — 52nd KSDC 2026
   Shared across all frontend pages
   Reset + Variables + Navbar + Footer
══════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Outfit',sans-serif;color:#222;background:#fff;overflow-x:hidden}
a{text-decoration:none}
img{display:block;max-width:100%}
sup{font-size:0.55em;vertical-align:super}

:root{
  --navy:#0b1b3d;
  --navy-mid:#0f2360;
  --navy-light:#1a3475;
  --gold:#c9a84c;
  --gold-light:#e0c060;
  --gold-dark:#a07c10;
  --white:#ffffff;
  --text-muted:rgba(255,255,255,0.72);
  --bg-page:#f7f5f0;
  --input-border:#d8d2c8;
}

/* ══ SCROLL REVEAL ══ */
.sr{opacity:0;transform:translateY(22px);transition:opacity 0.55s ease,transform 0.55s ease}
.sr.vis{opacity:1;transform:none}

/* ══ NAVBAR ══ */
.navbar{position:sticky;top:0;z-index:999;background:#fff;border-bottom:2.5px solid var(--gold);display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:100px;box-shadow:0 2px 18px rgba(0,0,0,0.09);transition:box-shadow 0.3s}
.nav-left{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-circle{width:80px;height:80px;border-radius:50%;border:2px solid var(--gold);background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-size:8px;font-weight:700;color:var(--gold);text-align:center;line-height:1.3}
.logo-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.logo-center-box{height:95px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.logo-center-box img{height:100px;width:auto;object-fit:contain}
.logo-center-placeholder{height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px;gap:2px;border:1.5px solid var(--gold);border-radius:6px}
.logo-center-placeholder .lcp-top{font-size:7px;font-weight:700;color:var(--navy);letter-spacing:1px;text-transform:uppercase}
.logo-center-placeholder .lcp-main{font-size:11px;font-weight:800;color:var(--navy);text-transform:uppercase}
.logo-center-placeholder .lcp-sub{font-size:7px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:1px}
.navbar-nav{display:flex;align-items:center;gap:4px;list-style:none}
.navbar-nav a{font-size:13.5px;font-weight:500;color:var(--navy);padding:7px 12px;border-radius:6px;transition:color 0.18s,background 0.18s;white-space:nowrap;letter-spacing:0.2px}
.navbar-nav a:hover{color:var(--gold);background:rgba(201,168,76,0.06)}
.navbar-nav a.active{color:var(--gold);font-weight:700}
.btn-nav-reg{background:var(--gold)!important;color:var(--navy)!important;font-weight:700!important;padding:9px 22px!important;border-radius:25px!important;font-size:13px!important;transition:all 0.2s!important;margin-left:6px!important}
.btn-nav-reg:hover{background:var(--gold-dark)!important;color:#fff!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:all 0.3s}
.mob-drawer{display:none;position:fixed;top:100px;left:0;right:0;background:#fff;z-index:998;padding:16px 24px 24px;box-shadow:0 14px 32px rgba(0,0,0,0.15);border-top:2px solid var(--gold);animation:slideDown 0.28s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.mob-drawer.open{display:block}
.mob-drawer a{display:block;padding:13px 4px;font-size:15px;font-weight:600;color:var(--navy);border-bottom:1px solid #f0f0f0;transition:color 0.2s}
.mob-drawer a:hover,.mob-drawer a.active{color:var(--gold)}
.mob-drawer a:last-child{border-bottom:none}

/* ══ PAGE BANNER (shared across inner pages) ══ */
.page-banner{background:linear-gradient(110deg,#080f22 0%,#0b1b3d 40%,#0f2360 70%,#0b1b3d 100%);padding:68px 0px 0;position:relative;overflow:hidden;min-height:220px}
.banner-glow-l{position:absolute;top:-60px;left:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,0.1) 0%,transparent 70%);pointer-events:none}
.banner-glow-r{position:absolute;bottom:-40px;right:5%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(26,86,168,0.15) 0%,transparent 70%);pointer-events:none}
.banner-content{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0px 0px 40px;}
.banner-eyebrow{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:3px;text-transform:uppercase;display:block;margin-bottom:10px}
.banner-h1{font-size:36px;font-weight:800;color:#fff;text-transform:uppercase;line-height:1.12;letter-spacing:0.5px;margin-bottom:12px}
.banner-h1 em{color:var(--gold);font-style:italic;font-family:'Playfair Display',serif;text-transform:none}
.banner-sub{font-size:14px;color:rgba(255,255,255,0.75);line-height:1.7;max-width:640px}
.banner-wave{position:relative;z-index:2;line-height:0;margin-top:auto}
.banner-wave svg{width:100%;height:60px;display:block}

/* ══ BREADCRUMB ══ */
.breadcrumb{background:#f7f5f0;padding:12px 40px;font-size:12.5px;color:#888;display:flex;align-items:center;gap:6px;border-bottom:1px solid #ede8de}
.breadcrumb a{color:#888;transition:color 0.2s}
.breadcrumb a:hover{color:var(--gold)}
.bc-sep{color:#ccc}
.bc-cur{color:var(--navy);font-weight:600}

/* ══ CTA BANNER ══ */
.cta-banner{background:linear-gradient(110deg,#080f22 0%,#0b1b3d 50%,#0f2360 100%);padding:40px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-text p{font-size:20px;font-weight:800;color:#fff;margin-bottom:4px}
.cta-text span{font-size:13px;color:rgba(255,255,255,0.65)}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-cta-navy{background:var(--gold);color:var(--navy);font-size:14px;font-weight:700;padding:13px 32px;border-radius:30px;transition:all 0.2s}
.btn-cta-navy:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-cta-outline-navy{background:transparent;color:#fff;font-size:14px;font-weight:600;padding:11px 28px;border-radius:30px;border:2px solid rgba(255,255,255,0.4);transition:all 0.2s}
.btn-cta-outline-navy:hover{border-color:var(--gold);color:var(--gold)}

/* ══ FOOTER ══ */
footer{background:linear-gradient(155deg,#060d1e 0%,#0a1830 40%,#0c1d3e 70%,#071228 100%);padding:56px 40px 0}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 0.9fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.07)}
.footer-eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-org-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo-circle{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--navy);border:1.5px solid rgba(201,168,76,0.4);flex-shrink:0}
.footer-logo-circle img{width:100%;height:100%;object-fit:cover}
.footer-org-name{font-size:13px;font-weight:700;color:#fff;line-height:1.4}
.footer-org-name span{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);margin-top:2px}
.footer-social{display:flex;gap:10px;margin-top:14px}
.footer-social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);transition:all 0.2s}
.footer-social a svg{width:14px;height:14px}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.footer-links-2col{display:flex;gap:20px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:8px}
.footer-links a{font-size:12.5px;color:rgba(255,255,255,0.55);transition:color 0.2s}
.footer-links a:hover{color:var(--gold)}
.footer-contact-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;font-size:12px;color:rgba(255,255,255,0.55)}
.footer-contact-item a{color:rgba(255,255,255,0.55);transition:color 0.2s}
.footer-contact-item a:hover{color:var(--gold)}
.footer-contact-icon{width:14px;height:14px;flex-shrink:0;margin-top:1px}
.footer-qr{width:102px;height:102px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px}
.footer-qr img{width:100%;height:100%;object-fit:contain}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:11.5px;color:rgba(255,255,255,0.3);flex-wrap:wrap;gap:8px}

/* ══ COMMON FORM STYLES (shared across pages) ══ */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px}
.form-row.single{grid-template-columns:1fr}
.form-row.triple{grid-template-columns:1fr 1fr 1fr}
.field-wrap{display:flex;flex-direction:column}
.field-label{font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
.field-label .req{color:#e53}
.field-input{border:1.5px solid var(--input-border);border-radius:8px;padding:10px 14px;font-size:13.5px;font-family:'Outfit',sans-serif;color:#222;background:#fff;transition:border-color 0.2s,box-shadow 0.2s;outline:none}
.field-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.12)}
.field-select{border:1.5px solid var(--input-border);border-radius:8px;padding:10px 14px;font-size:13.5px;font-family:'Outfit',sans-serif;color:#222;background:#fff;transition:border-color 0.2s;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.field-select:focus{border-color:var(--gold)}
.field-textarea{border:1.5px solid var(--input-border);border-radius:8px;padding:10px 14px;font-size:13.5px;font-family:'Outfit',sans-serif;color:#222;background:#fff;transition:border-color 0.2s;outline:none;min-height:110px;resize:vertical;width:100%}
.field-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.12)}
.field-hint{font-size:11.5px;color:#aaa;margin-top:5px}

/* ══ RESPONSIVE ══ */
@media(max-width:1200px){
  .banner-content{padding: 0px 40px 40px;}
}
@media(max-width:900px){
  .navbar{padding:0 20px;height:72px}
  .logo-center-box{height:68px}
  .logo-center-box img{height:68px}
  .logo-circle{width:56px;height:56px}
  .navbar-nav{display:none}
  .hamburger{display:flex}
  .mob-drawer{top:72px}
  .footer-cols{grid-template-columns:1fr 1fr;gap:28px}
  .cta-banner{flex-direction:column;text-align:center}
  .banner-h1{font-size:26px}
  .breadcrumb{padding:10px 20px}
  .form-row{grid-template-columns:1fr}
  .form-row.triple{grid-template-columns:1fr}
}
@media(max-width:600px){
  footer{padding:40px 20px 0}
  .footer-cols{grid-template-columns:1fr}
  .page-banner{padding:48px 0px 0}
  .banner-h1{font-size:22px}
}

.cm-photo-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(201,168,76,0.4);
}
.cm-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Keep .cm-avatar for fallback — same styles as before but now hidden by default */
.cm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-dim, rgba(201,168,76,0.15));
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #c9a84c;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}