/* ==========================================================
   LIBRARY WEBSITE STYLES
   Change colours and fonts in the THEME block below.
   No external fonts or libraries, so it loads fast on old devices.
   ========================================================== */

/* ---------- THEME (edit here) ---------- */
:root{
  --orange:#f26a00;        /* main accent colour */
  --orange-dark:#d85d00;   /* button hover */
  --black:#111;            /* header, footer, hover boxes */
  --grey:#f4f4f4;          /* light section background */
  --line:#ddd;             /* borders */
  --text:#222;
  --muted:#555;
  --heading-font:Georgia,"Times New Roman",serif;
  --body-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --logo-size:100px;        /* logo height */
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:#fff;color:var(--text);font-family:var(--body-font);line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1000px;margin:auto;padding:0 20px}
section{padding:56px 0}
.alt{background:var(--grey)}
h1,h2,h3{font-family:var(--heading-font)}
h2{font-size:2rem;margin-bottom:6px}
h2:after{content:"";display:block;width:50px;height:3px;background:var(--orange);margin-top:8px}
.lead{margin:14px 0 24px;color:var(--muted);max-width:600px}
.btn{display:inline-block;background:var(--orange);color:#fff;border:0;padding:11px 24px;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--orange-dark)}

/* ---------- HEADER + MENU ---------- */
header{background:var(--black);position:sticky;top:0;z-index:10}
header .wrap{max-width:1400px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:84px;padding-top:6px;padding-bottom:6px}
.logo{display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--heading-font);font-weight:bold;font-size:1.35rem}
.logo img{height:var(--logo-size);width:auto}
.logo b{color:var(--orange)}
nav ul{list-style:none;display:flex;flex-wrap:wrap}
nav li{position:relative}
nav a,.dd>span{display:block;color:#ddd;padding:17px 12px;font-size:.92rem;font-weight:600;cursor:pointer}
nav a:hover,.dd>span:hover{color:var(--orange)}
.menu{display:none;position:absolute;left:0;top:100%;background:#fff;min-width:170px;border-top:3px solid var(--orange)}
.menu a{color:var(--text);padding:10px 16px;border-bottom:1px solid var(--line)}
.menu a:hover{background:var(--grey);color:var(--orange)}
.dd:hover .menu,.dd.open .menu{display:block}

/* ---------- SLIDERS (banner + gallery) ----------
   Photos are NEVER cropped: each slide is as tall as its photo,
   and the photo is stretched to the full width, so small images
   also appear big. Very tall photos are capped to the screen height. */
.slider{position:relative;overflow:hidden;background:#000}
.track{display:flex;align-items:center;transition:transform .5s ease}
.slide{min-width:100%;min-height:220px;position:relative;background:#222;color:#fff;font-size:1.1rem}
.slide img{display:block;width:100%;height:auto;max-height:90vh;margin:0 auto;object-fit:contain}
.slide span{position:absolute;left:20px;bottom:20px;background:var(--orange);padding:4px 12px}
.arrow{position:absolute;top:50%;margin-top:-21px;background:rgba(0,0,0,.6);color:#fff;border:0;width:42px;height:42px;font-size:1.3rem;cursor:pointer}
.arrow:hover{background:var(--orange)}
.prev{left:0}.next{right:0}
.dots{position:absolute;bottom:10px;right:14px;display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.5;cursor:pointer}
.dots i.on{background:var(--orange);opacity:1}

/* ---------- HOME ---------- */
#home{background:var(--black);color:#fff;padding:90px 0}
#home h1{font-size:clamp(2rem,5vw,3rem);max-width:640px;margin-bottom:14px}
#home h1 span{color:var(--orange)}
#home p{color:#ccc;max-width:540px;margin-bottom:24px}

/* ---------- FEATURES ---------- */
.cols{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.box{background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange);padding:20px}
.box h3{font-size:1.05rem;margin-bottom:6px}
.box p{font-size:.93rem;color:var(--muted)}

/* ---------- WORK FIELD (bullets) ---------- */
.bullets{list-style:none;columns:2 280px;column-gap:40px}
.bullets li{padding:8px 0 8px 22px;position:relative;border-bottom:1px solid var(--line);break-inside:avoid}
.bullets li:before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;background:var(--orange)}

/* ---------- RESOURCES ---------- */
.res{margin-bottom:26px}
.res h3{background:var(--black);color:#fff;padding:8px 14px;font-size:1rem;border-left:4px solid var(--orange)}
.res ul{list-style:none;background:#fff;border:1px solid var(--line);border-top:0}
.res li{padding:9px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.res li a{color:var(--orange);font-weight:600}

/* ---------- COMMITTEE (white box, turns black on hover) ---------- */
.committee{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.person{background:#fff;border:1px solid var(--line);border-left:5px solid var(--orange);padding:18px 22px}
.person h3{font-size:1.1rem}
.person p{color:var(--muted);font-size:.9rem}
.person:hover{background:var(--black)}
.person:hover h3{color:var(--orange)}
.person:hover p{color:#fff}

/* ---------- CONTACT + MAP ---------- */
.contact{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.info p{margin-bottom:14px}
.info b{display:block;color:var(--orange);font-size:.82rem;text-transform:uppercase}
form{display:grid;gap:12px}
label{font-size:.9rem;font-weight:bold}
input,textarea{width:100%;padding:10px;border:1px solid #bbb;font-size:1rem;margin-top:4px;font-family:inherit}
textarea{min-height:110px}
input:focus,textarea:focus{outline:2px solid var(--orange)}
.map{height:320px;background:var(--line);display:grid;place-items:center;color:var(--muted);margin-top:30px}
.map iframe{width:100%;height:100%;border:0}

/* ---------- FOLLOW US + FOOTER ---------- */
.social{background:var(--black);color:#fff;text-align:center;padding:40px 0}
.social h2{display:inline-block;margin-bottom:20px}
.social h2:after{margin:8px auto 0}
.icons{display:flex;justify-content:center;gap:16px}
.icons a{width:50px;height:50px;border-radius:50%;border:2px solid var(--orange);display:grid;place-items:center;color:var(--orange)}
.icons a:hover{background:var(--orange);color:#fff}
.icons svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
footer{background:var(--black);color:#aaa;text-align:center;padding:22px 0;font-size:.88rem;border-top:1px solid #333}

/* ---------- SMALL SCREENS + SLOW DEVICES ---------- */
@media (prefers-reduced-motion:reduce){.track{transition:none}html{scroll-behavior:auto}}