/* ==========================================================================
   Children's Surgery Society, University of Nottingham
   Single stylesheet. Section 1 is the brand token set, section 2 is the
   component library, section 3 is page layout and motion.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root{
  /* Base, blues */
  --navy-900:#052040;--navy-800:#08315a;--navy-700:#0d4275;--navy-600:#155a99;--navy-500:#2272ba;
  --blue-300:#7ba7e0;--blue-200:#a9c5ef;--blue-100:#c7d8fa;--blue-50:#e9f1fd;
  /* Base, orange */
  --orange-700:#c25409;--orange-600:#e0620d;--orange-500:#f57115;--orange-300:#f99a56;--orange-100:#fde3cd;--orange-50:#fef3e9;
  /* Extended accents */
  --turquoise-500:#48e5c2;--turquoise-700:#17a385;--rose-500:#d14081;--peony-400:#e56399;
  /* Neutrals, blue tinted */
  --white:#ffffff;--paper:#fbfcfe;--grey-100:#eef2f8;--grey-200:#dde5f0;--grey-300:#b9c5d6;--grey-500:#68788e;--grey-700:#3d4c61;
  /* Semantic */
  --green-600:#1e8a5a;--green-50:#e7f6ef;--red-600:#cf3a2b;--red-50:#fdecea;--amber-600:#b97d0a;--amber-50:#fdf5e3;
  /* Aliases */
  --text-heading:var(--navy-800);--text-body:#243b55;--text-muted:var(--grey-500);
  --text-on-dark:#ffffff;--text-on-accent:#ffffff;
  --surface-page:var(--paper);--surface-card:var(--white);--surface-tint:var(--blue-50);
  --surface-wash:var(--blue-100);--surface-dark:var(--navy-800);
  --accent:var(--orange-500);--accent-hover:var(--orange-600);--accent-press:var(--orange-700);--accent-soft:var(--orange-50);
  --primary:var(--navy-800);--primary-hover:var(--navy-700);--primary-press:#062647;
  --border-subtle:var(--grey-200);--border-strong:var(--grey-300);--focus-ring:var(--navy-500);
  --link:var(--navy-600);--link-hover:var(--orange-600);

  /* Type */
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Quicksand",system-ui,sans-serif;
  --text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;--text-4xl:48px;
  --weight-body:500;--weight-semibold:600;--weight-bold:700;--weight-display:800;
  --leading-tight:1.1;--leading-snug:1.3;--leading-body:1.55;
  --tracking-display:-0.01em;--tracking-caps:0.08em;

  /* Space */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
  --page-max:1100px;--page-pad:20px;--page-frame:12px;
  --tap-min:44px;

  /* Effects */
  --radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-pill:999px;
  --border-card:1.5px solid var(--border-subtle);--border-frame:2px solid var(--navy-800);
  --shadow-card:0 2px 8px rgba(8,49,90,0.07);
  --shadow-raised:0 8px 24px rgba(8,49,90,0.12);
  --shadow-pop:0 12px 36px rgba(8,49,90,0.18);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:150ms;
  --dur-med:280ms;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:84px}

body{
  margin:0;
  padding:10px;
  background:var(--blue-100);
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  color:var(--text-body);
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text-heading);
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-tight);
}

img{max-width:100%}

a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}

:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:6px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy-800);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  padding:12px 18px;border-radius:0 0 var(--radius-md) 0;
}
.skip-link:focus{left:0;color:#fff}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   3. Components
   ========================================================================== */

/* --- Button ------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:44px;padding:0 22px;
  border-radius:var(--radius-pill);border:none;
  background:var(--accent);color:var(--text-on-accent);
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-md);
  cursor:pointer;white-space:nowrap;flex-shrink:0;text-decoration:none;
  transition:all var(--dur-fast) var(--ease-out);
}
.btn:hover{background:var(--accent-hover);color:var(--text-on-accent);transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.btn:active{background:var(--accent-press);transform:scale(.98);box-shadow:none}

.btn--sm{height:36px;padding:0 18px;font-size:var(--text-sm)}
.btn--lg{height:52px;padding:0 26px}

.btn--navy{background:var(--primary)}
.btn--navy:hover{background:var(--primary-hover)}
.btn--navy:active{background:var(--primary-press)}

.btn--ghost{background:transparent;border:1.5px solid var(--navy-800);color:var(--navy-800)}
.btn--ghost:hover{background:var(--blue-50);color:var(--navy-800)}
.btn--ghost:active{background:var(--blue-100)}

/* --- Icon button -------------------------------------------------------- */

.icon-btn{
  width:44px;height:44px;flex-shrink:0;
  border-radius:var(--radius-pill);border:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-50);color:var(--navy-800);
  cursor:pointer;transition:all var(--dur-fast);
}
.icon-btn:hover{background:var(--blue-100);color:var(--navy-800)}

/* --- Badge -------------------------------------------------------------- */

.badge{
  display:inline-flex;align-items:center;
  height:26px;padding:0 var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--blue-100);color:var(--navy-800);
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:13px;
}
.badge--orange{background:var(--orange-100);color:var(--orange-700)}
.badge--navy{background:var(--navy-800);color:#fff}
.badge--turquoise{background:var(--turquoise-500);color:var(--navy-900)}
.badge--green{background:var(--green-50);color:var(--green-600)}

/* --- Card --------------------------------------------------------------- */

.card{
  background:var(--surface-card);
  border:var(--border-card);
  border-radius:20px;
  padding:var(--space-5);
  box-shadow:var(--shadow-card);
  transition:all var(--dur-med) var(--ease-out);
}
.card--tint{background:var(--surface-tint)}
.card--framed{border:var(--border-frame)}
.card--hover:hover,.card--hover:focus-within{box-shadow:var(--shadow-raised);transform:translateY(-2px)}

.card__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:17px;color:var(--navy-800)}
.card__lede{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-md);color:var(--navy-800);margin-bottom:var(--space-3)}
.card p{margin:0;font-size:15px;line-height:1.6}
.card ul{margin:0;padding-left:18px;font-size:15px;line-height:1.7}

/* Resource card is one big link */
.resource{display:block;color:inherit}
.resource:hover{color:inherit}
.resource__label{font-size:var(--text-sm);margin-top:var(--space-1);font-weight:var(--weight-semibold);color:var(--text-body)}
.resource__url{font-size:13px;margin-top:var(--space-3);color:var(--link);font-weight:var(--weight-bold);word-break:break-word}

/* --- Callout ------------------------------------------------------------ */

.callout{
  background:var(--blue-50);
  border-radius:var(--radius-md);
  padding:14px 18px;
  font-family:var(--font-body);
}
.callout__title{font-weight:var(--weight-bold);font-size:15px;margin-bottom:var(--space-1);color:var(--navy-800)}
.callout__body{color:var(--text-body);font-size:var(--text-sm);line-height:var(--leading-body)}
.callout--warning{background:var(--amber-50)}
.callout--warning .callout__title{color:var(--amber-600)}
.callout--success{background:var(--green-50)}
.callout--success .callout__title{color:var(--green-600)}

/* --- Tabs --------------------------------------------------------------- */

.tabs{
  display:inline-flex;gap:var(--space-1);
  background:var(--blue-50);border-radius:var(--radius-pill);padding:var(--space-1);
}
.tab{
  height:38px;padding:0 18px;
  border-radius:var(--radius-pill);border:none;
  background:transparent;color:var(--navy-800);
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-sm);
  cursor:pointer;transition:all var(--dur-fast);
}
.tab:hover{background:var(--blue-100)}
.tab[aria-pressed="true"]{background:var(--navy-800);color:#fff}

/* --- Event card --------------------------------------------------------- */

.event{
  background:#fff;border:var(--border-card);border-radius:20px;
  padding:var(--space-5);box-shadow:var(--shadow-card);
  font-family:var(--font-body);
  display:flex;flex-direction:column;gap:var(--space-3);
  transition:all var(--dur-med) var(--ease-out);
}
.event:hover{box-shadow:var(--shadow-raised);transform:translateY(-2px)}
.event__tags{display:flex;gap:6px;flex-wrap:wrap}
.event__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:20px;color:var(--navy-800);line-height:1.2}
.event__meta{font-size:var(--text-sm);color:var(--grey-500);font-weight:var(--weight-semibold)}
.event .btn{align-self:flex-start;margin-top:var(--space-1)}

/* --- Committee person --------------------------------------------------- */

.person{
  background:#fff;border:var(--border-card);border-radius:20px;
  padding:18px;box-shadow:var(--shadow-card);
  display:flex;align-items:center;gap:14px;
  height:100%;
  transition:all var(--dur-med) var(--ease-out);
}
.person:hover{box-shadow:var(--shadow-raised);transform:translateY(-2px)}
.person__initial{
  width:52px;height:52px;flex-shrink:0;
  border-radius:var(--radius-pill);
  background:var(--blue-100);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--weight-display);font-size:22px;
}
.person__text{min-width:0}
.person__name{font-family:var(--font-display);font-weight:var(--weight-display);font-size:19px;color:var(--navy-800);line-height:1.15}
.person__role{font-family:var(--font-body);font-weight:var(--weight-bold);font-size:13px;color:var(--orange-600);margin-top:2px}
.person__year{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:13px;color:var(--grey-500);margin-top:2px}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.frame{
  border:var(--border-frame);
  border-radius:var(--radius-lg);
  background:var(--paper);
  max-width:var(--page-max);
  margin:0 auto;
  overflow:hidden;
}

.wrap{padding:0 var(--page-pad)}

.section{padding-top:var(--space-12)}

.section__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:6px}
.section__head h2{font-size:var(--text-2xl);margin:0}
.section__head--spaced{margin-bottom:18px}
.section__sub{font-size:15px;margin:0 0 var(--space-5);color:var(--grey-500);font-weight:var(--weight-semibold)}

.grid2{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
.grid3{display:grid;gap:var(--space-4);grid-template-columns:1fr}
.grid4{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;align-items:stretch}
.committee-list{list-style:none;margin:0;padding:0}
.grid4 > .reveal{display:flex}
.grid4 > .reveal > *{flex:1}

/* --- Header ------------------------------------------------------------- */

.site-header{
  border-bottom:1.5px solid var(--border-subtle);
  background:var(--surface-card);
  position:sticky;top:0;z-index:10;
}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:var(--space-3)}

.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.brand img{height:44px;width:44px;display:block}
.brand__name{
  font-family:var(--font-display);font-weight:var(--weight-display);
  color:var(--navy-800);font-size:15px;line-height:1.15;white-space:nowrap;
}
.brand__sub{color:var(--orange-500);font-size:var(--text-xs);letter-spacing:.06em}

.nav-desktop{display:none;gap:14px;align-items:center}
.nav-desktop a{
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-sm);
  color:var(--navy-800);text-decoration:none;white-space:nowrap;
}
.nav-desktop a:hover{color:var(--orange-600)}

.nav-toggle{display:flex}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

.nav-mobile{display:flex;flex-direction:column;gap:var(--space-1);padding-bottom:var(--space-4)}
.nav-mobile[hidden]{display:none}
.nav-mobile a{
  display:flex;align-items:center;min-height:var(--tap-min);
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-md);
  color:var(--navy-800);border-radius:var(--radius-sm);padding:0 var(--space-3);text-decoration:none;
}
.nav-mobile a:hover{background:var(--blue-50)}
.nav-mobile .btn{margin-top:var(--space-2)}

/* --- Hero --------------------------------------------------------------- */

.hero{background-color:var(--surface-tint);border-bottom:1.5px solid var(--border-subtle)}
.hero__inner{padding-top:36px;padding-bottom:36px;position:relative}
.hero-card{
  background-color:#fff;
  border:var(--border-frame);
  border-radius:28px;
  padding:28px 22px;
  box-shadow:var(--shadow-raised);
  position:relative;overflow:hidden;
}
.hero-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;align-items:center;position:relative;z-index:2}
.hero h1{margin:0;font-size:clamp(30px,5.6vw,46px);font-weight:var(--weight-display)}
.hero__lede{font-size:17px;line-height:var(--leading-body);margin:14px 0 var(--space-5);max-width:500px}
.hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hero__art{display:flex;justify-content:center}
.hero__art img{width:min(190px,42vw);display:block}

.stripes{
  background-image:url(assets/pattern-stripes.png);
  background-repeat:repeat;
  background-position:center center;
  background-size:auto 520px;
}
.hero-card.stripes::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.62);z-index:1}

/* --- Specialty ---------------------------------------------------------- */

.panel-navy{background:var(--navy-800);border-radius:20px;padding:22px;color:#fff;margin-bottom:var(--space-4)}
.panel-navy h3{color:#fff;font-weight:var(--weight-bold);font-size:var(--text-lg);margin:0 0 var(--space-2)}
.panel-navy p{margin:0;font-size:15px;line-height:1.6;color:var(--blue-100);max-width:620px}

.panel-tint{background:var(--surface-tint);border:var(--border-frame);border-radius:20px;padding:22px}
.panel-tint h3{font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--navy-800);margin:0}
.panel-tint p{margin:var(--space-2) 0 var(--space-4);font-size:15px;line-height:1.6;max-width:620px}

.spec-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));list-style:none;margin:0;padding:0}
.spec-tile{
  display:flex;align-items:center;gap:var(--space-3);
  background:#fff;border:1.5px solid var(--border-subtle);border-radius:14px;
  padding:12px 14px;
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-sm);
  color:var(--navy-800);line-height:1.3;
  transition:transform 180ms var(--ease-out),box-shadow 180ms;
}
.spec-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.spec-dot{width:10px;height:10px;border-radius:var(--radius-pill);flex-shrink:0}
.spec-dot--orange{background:var(--accent)}
.spec-dot--navy{background:var(--navy-600)}
.spec-dot--turquoise{background:var(--turquoise-700)}

/* --- Events ------------------------------------------------------------- */

.events__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:18px}
.events__note{font-family:var(--font-body);font-size:var(--text-sm);color:var(--grey-500);margin-top:var(--space-3);font-weight:var(--weight-semibold)}
.events__note a{font-weight:var(--weight-bold)}
.event[hidden]{display:none}

/* --- Join --------------------------------------------------------------- */

.join{padding-top:var(--space-12);padding-bottom:var(--space-12)}
.join__panel{background:var(--navy-800);border-radius:var(--radius-lg);padding:30px 24px;position:relative}
.join__panel h2{color:#fff;font-size:var(--text-2xl);margin:0}
.join__panel p{color:var(--blue-100);font-size:15px;line-height:var(--leading-body);margin:var(--space-3) 0 0;max-width:420px}
.join__card{background:#fff;border-radius:20px;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.join__card h3{margin:0;font-size:var(--text-lg)}
.join__card p{color:var(--text-body);font-size:var(--text-sm);line-height:var(--leading-body);margin:0;max-width:none}
.join__card .btn{align-self:stretch}

/* --- Footer ------------------------------------------------------------- */

.site-footer{border-top:1.5px solid var(--border-subtle);background:var(--surface-card)}
.site-footer__inner{
  padding-top:var(--space-6);padding-bottom:var(--space-6);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
.site-footer__brand{display:flex;align-items:center;gap:var(--space-3)}
.site-footer__brand img{height:36px;width:36px}
.site-footer__text{font-family:var(--font-body);font-size:13px;color:var(--grey-500);font-weight:var(--weight-semibold);line-height:var(--leading-body)}
.site-footer__text a{font-weight:var(--weight-bold)}
.ig-link{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:var(--tap-min);padding:0 var(--space-4);
  border-radius:var(--radius-pill);background:var(--blue-50);color:var(--navy-800);
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-sm);text-decoration:none;
}
.ig-link:hover{background:var(--blue-100);color:var(--navy-800)}

/* --- Cookie banner ------------------------------------------------------ */

.cookie{position:fixed;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);z-index:50;display:flex;justify-content:center}
.cookie[hidden]{display:none}
.cookie__inner{
  background:#fff;border:var(--border-frame);border-radius:20px;box-shadow:var(--shadow-pop);
  padding:var(--space-4) 18px;width:100%;max-width:var(--page-max);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.cookie__inner img{height:46px;width:46px;flex-shrink:0}
.cookie__text{flex:1 1 240px;min-width:0}
.cookie__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:15px;color:var(--navy-800)}
.cookie__body{font-family:var(--font-body);font-size:13px;line-height:var(--leading-body);color:var(--text-body);margin-top:2px}
.cookie__body a{font-weight:var(--weight-bold)}

/* --- Content page (cookies) --------------------------------------------- */

.prose{max-width:680px;padding-top:var(--space-10);padding-bottom:var(--space-12)}
.prose h1{font-size:var(--text-3xl);margin:0 0 var(--space-3)}
.prose h2{font-size:var(--text-xl);margin:var(--space-8) 0 var(--space-3)}
.prose p,.prose li{font-size:15px;line-height:1.7}
.prose ul{padding-left:20px}
.prose .updated{color:var(--grey-500);font-weight:var(--weight-semibold);font-size:var(--text-sm);margin:0 0 var(--space-6)}
.prose table{width:100%;border-collapse:collapse;margin-top:var(--space-4);font-size:var(--text-sm)}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1.5px solid var(--border-subtle);vertical-align:top}
.prose th{font-family:var(--font-display);color:var(--navy-800)}

/* ==========================================================================
   5. Decoration and motion
   ========================================================================== */

.doodle{flex-shrink:0;pointer-events:none}

.sticker{position:absolute;z-index:3;filter:drop-shadow(0 6px 14px rgba(8,49,90,.14))}
.sticker img{width:100%;height:100%}

@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-8px) rotate(calc(var(--rot,0deg) + 2deg))}}
@keyframes slideup{from{transform:translateY(120%)}to{transform:translateY(0)}}

.bear{animation:float 5s ease-in-out infinite;transform-origin:50% 90%}
.bear:hover{animation:wiggle .5s ease-in-out}
.bob{animation:bob 6s ease-in-out infinite}
.pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1) both}
.pop-wrap{display:inline-block;margin-bottom:14px}
.cookie__inner{animation:slideup .45s var(--ease-out) both}

/* Scroll reveal only bites when JavaScript is running, so the page is
   fully readable without it. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   6. Breakpoints
   ========================================================================== */

@media (min-width:620px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:699px){
  .sticker{display:none}
}

@media (min-width:760px){
  .wrap{padding:0 var(--space-10)}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1.2fr 1fr}
}

@media (min-width:900px){
  .grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1000px){
  .nav-desktop{display:flex}
  .nav-toggle{display:none}
  .nav-mobile{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bear,.bear:hover,.bob,.pop,.cookie__inner{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card--hover:hover,.event:hover,.person:hover,.spec-tile:hover{transform:none}
}

@media print{
  body{background:#fff;padding:0}
  .frame{border:none}
  .site-header,.cookie,.nav-mobile,.tabs{display:none}
}