/*  site.css – streamlined mobile‑first layout  (May 2025)
    --------------------------------------------------------
    •  Base (mobile) rules first
    •  Enhancements via min‑width media queries only  ➜  mobile‑first ✅
    •  Uses CSS Grid to control placement of Announcement, Intro (image + welcome), and Message Board
*/

/* =========  GLOBAL TOKENS  ========= */
:root {
  /* colours */
  --c-primary: #1a274d;
  --c-primary-light: #3a4c7f;
  --c-accent: #625a4e;
  --c-accent-light: #867c6b;
  --c-neutral-100: #ffffff;
  --c-neutral-900: #333;

  /* geometry */
  --radius: .75rem;
  --gap: 1rem;

  /* shadows */
  --shadow-card: 0 2px 6px rgb(0 0 0 / .08);
  --shadow-card-hover: 0 4px 14px rgb(0 0 0 / .16);
}

/* =========  GLOBAL RESETS  ========= */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:Georgia,serif;background:#fefefe;color:var(--c-neutral-900)}
img{max-width:100%;display:block}

/* =========  HEADER  ========= */
#header{display:flex;flex-direction:column;align-items:center;background:var(--c-primary);color:#fff;padding:10px}
.header-left{display:flex;flex-direction:column;align-items:center;gap:.5rem}
#title{margin:10px 0;text-align:center}
#header-right{margin-top:10px;text-align:center;font-size:.9rem}

/* =========  NAVIGATION  ========= */
#menu{background:var(--c-accent)}
#menu ul{list-style:none;margin:0;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:.25rem}
#menu ul li{width:100%;position:relative;text-align:center}
#menu a{color:#fff;text-decoration:none;display:block;padding:8px 16px}
#menu li:hover,#menu li:hover>a{background:var(--c-accent-light)}
#menu ul li ul{display:none;position:static;background:var(--c-accent-light)}
#menu ul li:hover ul{display:block}

/* =========  CONTENT WRAPPER  ========= */
#content{max-width:1200px;margin:0 auto;padding:20px}

/* =========  MAIN GRID (Announcement / Intro / Message)  ========= */
.main-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:1fr;                       /* mobile single column */
  grid-template-areas:
    "announce"
    "intro"
    "message";
}
.announcement{grid-area:announce;padding:1rem;background:#f1f1f1;border-left:4px solid var(--c-accent-light);box-shadow:0 2px 5px rgb(0 0 0 / .05)}
.announcement .message{margin:0}

.intro{grid-area:intro;padding:1rem;background:var(--c-neutral-100);border-radius:8px;box-shadow:0 0 10px rgb(0 0 0 / .1)}
.featured-image{border-radius:8px;margin-bottom:1rem}

.message{grid-area:message;padding:1rem;background:#f1f1f1;border-left:4px solid var(--c-accent-light);box-shadow:0 2px 5px rgb(0 0 0 / .05)}
.message h3,.message h4{margin-top:0;color:var(--c-primary)}

/* =========  VIDEO GALLERY ========= */
.video-gallery{display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:center;margin-inline:auto}
.video-card{position:relative;flex:1 1 clamp(16rem,45%,20rem);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:.2s transform,.2s box-shadow}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.video-card img{width:100%;display:block}
.play-icon{position:absolute;top:50%;left:50%;translate:-50% -50%;width:3.5rem;aspect-ratio:1;background:rgb(0 0 0 /.6);border-radius:50%;display:grid;place-content:center;pointer-events:none}
.play-icon::before{content:"";border:.88rem solid transparent;border-left-width:1.38rem;border-left-color:#fff}
.video-overlay{position:absolute;inset:0;padding:1rem 1.25rem;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(to top,rgb(0 0 0 /.8),rgb(0 0 0 /.05) 60%);color:#fff}
.video-title{margin:0 0 .25rem;font-size:1.125rem;font-weight:600}
.video-meta{margin:0;font-size:.875rem;opacity:.9}
.video-desc{margin-top:.4rem;font-size:.9375rem;line-height:1.35;opacity:.95}

/* =========  FOOTER ========= */
#footer{background:var(--c-primary);color:#fff;text-align:center;padding:1rem;font-family:'Segoe UI',Tahoma,Verdana,sans-serif;font-size:.95rem;display:flex;flex-direction:column;align-items:center;justify-content:center}
#footer a{color:#fff;text-decoration:underline}
#footer a:hover{color:#c2d1ff;text-decoration:none}

/* =========  UTILITIES ========= */
.center{text-align:center}
.text-small{font-size:.9em;color:#666}
.hidden{display:none}

/* =========  LINK PANEL (REUSABLE) ========= */
.link-panel {background:#f9f9f9;border-left:4px solid var(--c-accent-light);padding:1rem 1.5rem;margin:2rem 0;border-radius:var(--radius);box-shadow:var(--shadow-card)}
.link-panel h3 {margin-top:0;color:var(--c-primary);font-size:1.25rem}
.link-panel ul {list-style:none;padding-left:0;margin:.5rem 0 0}
.link-panel li {margin:.25rem 0}
.link-panel a {color:var(--c-accent);text-decoration:none;font-weight:bold}
.link-panel a:hover {text-decoration:underline;color:var(--c-accent-light)}


/* =========  ACCORDION / ARCHIVE ========= */
.accordion{margin-bottom:1rem;border:1px solid #ccc;border-radius:5px}
.accordion summary{background:var(--c-primary);color:#fff;padding:.75rem 1rem;font-weight:bold;cursor:pointer}
.accordion .video{padding:1rem;border-top:1px solid #ccc}
.accordion .video h3{margin:.5rem 0 .25rem;font-size:1rem}
.accordion .video a{display:block;margin-bottom:.75rem;word-break:break-all;color:#0044cc}

.video-entry{background:#f9f9f9;border:1px solid #ccc;border-left:5px solid var(--c-primary);padding:1rem;margin-bottom:1.5rem;border-radius:6px;box-shadow:1px 1px 5px rgb(0 0 0 /.05)}
.video-entry h2{margin-top:0;font-size:1.25rem;color:var(--c-primary)}
.video-entry p{margin:.5rem 0;font-style:italic;color:#333}
.watch-link{display:inline-block;margin-top:.5rem;padding:.5rem 1rem;background:var(--c-primary);color:#fff;text-decoration:none;border-radius:4px;font-weight:bold;transition:background-color .2s}
.watch-link:hover{background:var(--c-primary-light)}

/* =========  BREAKPOINT ENHANCEMENTS (mobile‑first) ========= */
@media (min-width:768px){
  /* header tweaks */
  #header{flex-direction:row;justify-content:space-between;text-align:left}
  .header-left{flex-direction:row;gap:15px}
  #title{margin-top:0;text-align:left}
  #header-right{margin-top:0;text-align:right}

  /* nav stays vertical on tablets per request */
  #menu ul{flex-direction:column}

  /* main grid: two columns – announcement on top full width, then intro | message */
  .main-grid{
    grid-template-columns:2fr 1fr;
    grid-template-areas:
      "announce announce"
      "intro    message";
  }
}

@media (min-width:1024px){
  /* nav horizontal on desktop */
  #menu ul{flex-direction:row;justify-content:center}
  #menu ul li{width:auto}
  #menu ul li ul{position:absolute;top:100%;left:0;min-width:180px;box-shadow:0 4px 8px rgb(0 0 0 /.1);z-index:1000}

  /* main grid: widen intro further (3:1) */
  .main-grid{grid-template-columns:3fr 1fr}
}