/*
Theme Name: SGIA Original
Theme URI: https://sgia.sg
Author: SGIA Website Project
Description: Restoration of the original Singapore Indian Association website design (navy #001f3d, cyan #00a9e0, rounded navigation bar, Pioneering Since 1923 circle, Wings cards, stats band, committee cards). Rebuilt from the archived React/CSS bundle.
Version: 2.1.1
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: sgia-original
*/
:root{--navy:#001f3d;--cyan:#00a9e0;--slate:#4d6277;--text:#4a4a4a;--card:#f6f6f6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Roboto,"Open Sans",system-ui,sans-serif;font-size:16px;line-height:1.7;color:var(--text);background:#fff}
h1,h2,h3,h4{font-family:Roboto,"Open Sans",sans-serif;color:var(--navy);font-weight:700;line-height:1.2;margin:0 0 .5em}
a{color:var(--cyan);text-decoration:none}a:hover{color:var(--navy)}
img{max-width:100%;height:auto}
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 15px}
.screen-reader-text{position:absolute;left:-9999px}
/* top strip + header */
.header-top{background:var(--text);color:#fff;font-size:12px;line-height:20px}
.header-top .container{display:flex;justify-content:space-between}
.header-inner{background:#fff;padding:12px 0}
.menu-top{display:flex;align-items:center;gap:28px}
.header-logo{flex:1}.header-logo img{height:70px;width:auto;display:block}
.header-info{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:700;font-size:18px}
.header-info .ico{width:48px;height:48px;border-radius:50%;background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.header-info a{color:var(--navy)}
.vs-btn{display:inline-block;background:var(--cyan);color:#fff!important;font-weight:700;padding:16px 40px;border-radius:50px;border:0;cursor:pointer;line-height:1.2}
.vs-btn:hover{background:var(--navy)}
/* nav */
.header-bottom{padding:0 8px;position:relative;z-index:30}
.main-menu{background:var(--navy);border-radius:12px;padding:0 20px}
.main-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.main-menu>ul>li{position:relative}
.main-menu>ul>li>a{display:block;padding:14px 15px;font-size:14px;font-weight:600;color:#fff;border-right:1px solid #fff3;margin:8px 0;line-height:1}
.main-menu>ul>li:last-child>a{border-right:0}
.main-menu>ul>li.current-menu-item>a,.main-menu>ul>li.current-menu-ancestor>a,.main-menu>ul>li>a:hover{color:var(--cyan)}
.main-menu ul ul{display:none;position:absolute;top:100%;left:0;min-width:210px;background:var(--navy);border-radius:0 0 10px 10px;z-index:50;padding:8px 0;flex-direction:column}
.main-menu li:hover>ul,.main-menu li:focus-within>ul{display:flex}
.main-menu ul ul a{display:block;padding:9px 20px;color:#fff;font-size:14px;font-weight:600}
.main-menu ul ul a:hover{color:var(--cyan)}
.menu-toggle{display:none;background:var(--navy);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:700}
/* hero */
.hero{background:var(--slate) center/cover no-repeat;color:#fff;text-align:center;padding:120px 15px;min-height:500px;display:flex;align-items:center;justify-content:center;margin-top:-52px;padding-top:170px}
.hero h1{color:#fff;font-family:"Playfair Display",Georgia,serif;font-size:clamp(28px,4vw,52px)}
.hero p{font-size:24px;font-weight:700;margin:12px 0 0}
/* welcome */
.section{padding:90px 0}
.welcome{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.circle{width:200px;height:200px;border-radius:50%;background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;text-align:center;font-weight:700;font-size:16px}
.circle b{font-size:48px;font-family:Arial,sans-serif}
.welcome h2{font-size:clamp(30px,3.6vw,48px)}
.welcome p{text-align:justify}
/* wings cards */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}
.sec-head small{display:block;color:var(--text);font-size:16px}
.sec-head h2{font-size:48px;margin:0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.card{background:#fff;border-radius:16px;box-shadow:0 0 25px #0000001a;overflow:hidden;padding-bottom:18px}
.card .thumb{height:260px;background:#e8edf2 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#8a99a8;font-size:14px}
.card h3{font-size:18px;margin:16px 18px 10px}
.card .more{margin:0 18px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:10px}
.card .more:before{content:"\2192";width:40px;height:40px;border-radius:50%;background:#f0f0f0;display:inline-flex;align-items:center;justify-content:center}
/* stats */
.stats{background:var(--navy) ;color:#fff;padding:70px 0}
.stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{display:flex;align-items:center;gap:20px}
.stat .box{width:80px;height:80px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--navy);font-weight:700}
.stat b{display:block;font-size:30px;line-height:1}.stat span{font-weight:700;font-size:18px}
/* committee */
.sec-title{display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:700;margin-bottom:6px}
.sec-title:before{content:"";border-style:solid;border-width:17px 17px 0 0;border-color:var(--navy) transparent transparent;display:inline-block}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.member{background:var(--card);border-radius:20px;padding:30px 15px 18px;text-align:center;box-shadow:0 0 20px #0000000d}
.member .ph{width:200px;height:200px;border-radius:50%;border:10px solid #fff;margin:0 auto 20px;background:#e8edf2 center/cover;display:flex;align-items:center;justify-content:center;color:#8a99a8;font-size:13px}
.member h4{font-size:15px;margin:0}.member p{font-size:13px;font-weight:700;margin:4px 0 0}
/* volunteer */
.cta{background:var(--cyan);color:#fff;text-align:center;padding:60px 15px}
.cta h2,.cta h3{color:#fff}.cta .vs-btn{background:var(--navy)}
/* inner pages */
.page-banner{background:var(--navy);color:#fff;padding:60px 0 50px;margin-top:-52px;padding-top:112px}
.page-banner h1{color:#fff;margin:0;font-size:clamp(30px,4vw,46px)}
.crumbs{font-size:13px;opacity:.8;margin-bottom:8px}.crumbs a{color:#fff}
.content{max-width:900px;margin:0 auto;padding:60px 15px;min-height:320px}
.content blockquote{border-left:4px solid var(--cyan);margin:1.2em 0;padding:.2em 1.2em;font-size:1.15em;color:var(--navy)}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gal-grid figure{margin:0}.gal-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.gal-grid figcaption{font-size:13px;margin-top:4px}
.wp-block-gallery{gap:14px}
.entry-meta{font-size:13px;color:#777}
/* footer */
.site-footer{background:var(--navy);color:#fffc;padding:70px 0 0;margin-top:0}
.site-footer h3{color:#fff;font-size:20px}
.site-footer a{color:#fffc}.site-footer a:hover{color:var(--cyan)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin:6px 0}
.copyright{border-top:1px solid #fff2;margin-top:40px;padding:18px 0;font-size:14px;text-align:center}
@media(max-width:991px){
 .cards,.team,.stats .row{grid-template-columns:repeat(2,1fr)}.welcome,.foot-grid{grid-template-columns:1fr}
 .header-info{display:none}.menu-toggle{display:inline-block}.main-menu{display:none;padding:10px}
 .main-menu.open{display:block}.main-menu ul{flex-direction:column}.main-menu>ul>li>a{border:0;margin:0;padding:12px 8px}
 .main-menu ul ul{display:block;position:static;background:none;padding-left:14px}
 .menu-top{gap:12px}.hero{margin-top:0;padding-top:100px}.page-banner{margin-top:0;padding-top:60px}
}
@media(max-width:575px){.cards,.team,.stats .row{grid-template-columns:1fr}.sec-head{flex-direction:column;align-items:flex-start;gap:12px}.sec-head h2{font-size:34px}.vs-btn{padding:14px 26px}}

/* placeholders: navy tile with crest watermark, replaced automatically when a Featured image is set */
.ph-empty{background:linear-gradient(135deg,#0d3156,#001f3d)!important;color:#ffffffb3!important;position:relative}
.ph-empty:before{content:"";position:absolute;inset:0;background:url('assets/sgia-logo.jpg') center/38% no-repeat;opacity:.12;filter:grayscale(1) invert(1)}
.ph-empty span{position:relative;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:38%}
/* hero slider */
.hero{position:relative;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.hero-slide.on{opacity:1}
.hero-text{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}
/* wings carousel */
.carousel-wrap .car-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 90px)/4);grid-template-columns:none;padding:4px 4px 26px}
.carousel-wrap .car-track::-webkit-scrollbar{display:none}
.carousel-wrap .card{scroll-snap-align:start}
.car-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:-6px}
.car-btns .vs-btn{padding:12px 30px}.car-btns [hidden]{display:none}
@media(max-width:991px){.carousel-wrap .car-track{grid-auto-columns:calc((100% - 30px)/2)}}
@media(max-width:575px){.carousel-wrap .car-track{grid-auto-columns:86%}}