/* From Sitecore with Love – wintercms theme (redesign 2026, based on docs/from-sitecore-with-love/html) */
:root { --red:#d42a1e; --red-dark:#9e1d14; --teal:#073c40; --ink:#22201f; --muted:#6b6562; --line:#dcd7d2; --yellow:#f5c518; }
body { background:var(--teal) url('../sites/fswl/img/Flower-Background-2560.jpg') center top / cover fixed no-repeat; color:var(--ink); }
a { color:var(--red); text-decoration:none; }
a:hover { color:var(--red-dark); text-decoration:underline; }

.page-column { max-width:1200px; margin:0 auto; background:rgba(250,249,247,.96); min-height:100vh; display:flex; flex-direction:column; }

/* Navigation */
.site-nav { background:#fff; border-bottom:4px solid var(--red); padding:16px 0; }
.site-nav .nav-link { font-weight:600; text-transform:uppercase; font-size:14px; letter-spacing:.06em; color:var(--ink); }
.site-nav .nav-link.active, .site-nav .nav-link:hover { color:var(--red); text-decoration:none; }

/* Hero (start page) */
.hero { background:var(--teal); color:#fff; padding:48px 32px; }
.hero h1 { font-size:clamp(30px,4.4vw,46px); font-weight:700; line-height:1.12; text-wrap:balance; margin-bottom:14px; }
.eyebrow { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin-bottom:12px; }
.lead-line { font-size:18px; opacity:.92; margin-bottom:6px; }

/* Sections & headings */
.section { padding:48px 32px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.h-page { font-size:36px; font-weight:700; }
.h-section { font-size:24px; font-weight:700; margin:0; }
.h-sub { font-size:22px; font-weight:700; margin-bottom:16px; }
.intro { font-size:18px; color:var(--muted); max-width:640px; margin-bottom:40px; }

/* Buttons & badges */
.btn-accent { background:var(--red); color:#fff; border:0; }
.btn-accent:hover { background:var(--red-dark); color:#fff; text-decoration:none; }
.badge-accent { background:var(--red); font-weight:500; font-size:13px; }
.badge-tag { background:var(--teal); font-weight:500; color:#fff; }
a.badge-tag:hover { background:var(--red); color:#fff; text-decoration:none; }
.filter-chip { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:14px; margin-bottom:8px; }

/* Cards */
.card-plain { background:#fff; border-radius:6px; padding:22px; height:100%; }
.talk-card { border-top:4px solid var(--teal); display:flex; flex-direction:column; gap:8px; }
.talk-card .meta { font-size:13px; color:var(--muted); }
.talk-card .title { font-size:18px; font-weight:600; line-height:1.3; text-wrap:pretty; }

.date-block { text-align:center; min-width:52px; }
.date-block .day { font-size:28px; font-weight:700; line-height:1; color:var(--red); }
.date-block .mon { font-size:12px; text-transform:uppercase; color:var(--muted); }

/* Article teasers & list */
.teaser { border-top:2px solid var(--ink); padding-top:14px; height:100%; }
.teaser h3 { font-size:19px; font-weight:700; line-height:1.3; margin-bottom:4px; }
.teaser h3 a, .article-row h2 a { color:var(--ink); }
.teaser .sub, .article-row .sub { font-size:15px; color:var(--red); margin-bottom:8px; }
.teaser p { font-size:15px; margin-bottom:10px; }
.article-row { padding:20px 0; border-top:1px solid var(--line); }
.article-row h2 { font-size:21px; font-weight:700; margin-bottom:2px; }
.article-row .date { font-size:13px; color:var(--muted); margin-bottom:4px; }
/* Teaser images (F04 card on top, F08 thumbnail left); decorative – the title link carries the text */
.teaser-img, .article-thumb { display:block; overflow:hidden; border-radius:6px; background:#eeebe7; }
.teaser-img { aspect-ratio:16/9; margin-bottom:12px; }
.article-thumb { flex:0 0 160px; aspect-ratio:16/10; align-self:flex-start; }
.teaser-img img, .article-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.teaser-img:hover img, .article-thumb:hover img { transform:scale(1.03); }
@media (max-width:575.98px) { .article-thumb { flex-basis:96px; } }
/* Recommended articles (F15) below an article */
.recommended { border-top:1px solid var(--line); margin-top:48px; padding-top:32px; }
/* Article header image (F09) */
.article-hero { margin:16px 0 0; border-radius:6px; overflow:hidden; aspect-ratio:16/9; background:#eeebe7; }
.article-hero img { width:100%; height:100%; object-fit:cover; }

/* Events */
.event-card { background:#fff; border-radius:6px; padding:24px 12px; margin:0 0 20px; }
.event-card .when { font-size:14px; color:var(--red); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.event-card h3 { font-size:22px; font-weight:700; line-height:1.25; margin:0; }

/* Past events: one row per event; the year label only at the first event of a year,
   the timeline line runs through all rows without gaps */
.year-label { font-size:30px; font-weight:700; color:var(--red); position:sticky; top:16px; }
.timeline { border-left:3px solid var(--teal); padding-left:24px; }
.timeline-row + .timeline-row.year-start { margin-top:16px; }
.timeline h3 { font-size:19px; font-weight:700; line-height:1.3; margin:0; }

/* Image placeholders / event images */
.img-ph { aspect-ratio:16/10; width:100%; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  font:13px ui-monospace, Menlo, monospace; color:var(--muted); text-align:center; padding:8px;
  background:repeating-linear-gradient(45deg,#eeebe7 0 10px,#e5e1dc 10px 20px); }
.img-ph img { width:100%; height:100%; object-fit:cover; border-radius:6px; }
.img-ph:has(img) { padding:0; }
.hero .img-ph { color:#3d3936; }
.portrait { width:112px; height:112px; aspect-ratio:auto; border-radius:50%; }

/* About: events box */
.events-box { position:sticky; top:16px; background:var(--teal); color:#fff; border-radius:6px; padding:24px; }
.events-box h2 { font-size:20px; font-weight:700; margin-bottom:8px; }
.events-box .item { display:flex; gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.2); }
.events-box .day { color:var(--yellow); }
.events-box .mon { color:#fff; opacity:.85; }

/* Article page & rich text */
.article-body { max-width:760px; margin:16px auto 0; }
.article-body h1 { font-size:clamp(30px,4vw,42px); font-weight:700; line-height:1.15; margin-bottom:6px; }
.article-sub { font-size:20px; color:var(--red); margin-bottom:16px; }
.prose { font-size:17px; line-height:1.65; display:flow-root; }
.prose h2 { font-size:23px; font-weight:700; margin:32px 0 12px; }
.prose h3 { font-size:19px; font-weight:700; margin:24px 0 10px; }
.prose h2:first-child { margin-top:0; }
.prose pre { background:var(--teal); color:#f4efe6; padding:20px; border-radius:6px; font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.prose pre code { color:inherit; background:none; padding:0; font-size:inherit; }
.prose code { background:#eeebe7; color:var(--ink); padding:1px 5px; border-radius:4px; font-size:.9em; }
.prose blockquote { border-left:4px solid var(--red); margin:20px 0; padding:4px 0 4px 18px; color:var(--muted); font-style:italic; }
.prose img { max-width:100%; height:auto; border-radius:6px; }
/* Image alignment from the richtext editor (img-float-left / img-float-right) */
.prose img.img-float-left, .prose img.img-float-right { float:none; display:block; width:100%; margin:0 0 20px; }
@media (min-width:768px) {
  .prose img.img-float-left { float:left; width:50%; margin:0 20px 20px 0; }
  .prose img.img-float-right { float:right; width:50%; margin:0 0 20px 20px; }
}
@media (min-width:992px) {
  .prose img.img-float-left, .prose img.img-float-right { width:33.3333%; }
}
/* Image-text module (F14): image 5/12, text 7/12; image on top on mobile */
.image-text__img { display:block; width:100%; height:auto; border-radius:6px; }
.image-text .prose > :last-child { margin-bottom:0; }
.video-embed { border-radius:6px; overflow:hidden; background:#000; margin:24px 0; }
.video-embed iframe { border:0; }

/* Event detail page (F16) */
.back-link { color:#fff; opacity:.85; font-size:15px; }
.back-link:hover { color:#fff; opacity:1; }
.hero h1 a, .event-card h3 a, .timeline h3 a { color:inherit; }
.video-frame { aspect-ratio:16/9; background:var(--ink); border-radius:6px; overflow:hidden; }
.video-frame iframe { width:100%; height:100%; border:0; display:block; }

.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.gallery > a { display:block; border-radius:6px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/3; background:#eeebe7; }
.gallery > a:first-child { grid-column:span 2; grid-row:span 2; }
.gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.gallery > a:hover img, .gallery > a:focus-visible img { transform:scale(1.04); }
@media (max-width:420px) { .gallery > a:first-child { grid-column:auto; grid-row:auto; } }

.facts { position:sticky; top:16px; background:#fff; border-radius:6px; padding:24px; border-top:4px solid var(--red); }
.facts h2 { font-size:20px; font-weight:700; margin-bottom:12px; }
.facts dl { margin:0; }
.facts dt { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-top:14px; }
.facts dd { margin:2px 0 0; font-weight:500; overflow-wrap:anywhere; }

.event-pager { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); }
.event-pager a { display:block; }
.event-pager a:hover { text-decoration:none; }
.event-pager a:hover .ttl { color:var(--red); }
.event-pager .lbl { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.event-pager .ttl { font-weight:600; color:var(--ink); }
.event-pager .next { text-align:right; grid-column:2; }

.lightbox { position:fixed; inset:0; z-index:2000; background:rgba(10,14,15,.94); display:flex; align-items:center; justify-content:center; gap:12px; padding:24px; }
.lightbox[hidden] { display:none; }
.lightbox figure { margin:0; max-width:min(1100px, 100%); flex:1; display:flex; flex-direction:column; gap:12px; }
.lb-stage { display:flex; align-items:center; justify-content:center; }
.lb-stage img { max-width:100%; max-height:80vh; border-radius:4px; }
.lightbox figcaption { color:#e8e4df; font-size:15px; display:flex; justify-content:space-between; gap:16px; }
.lb-btn { background:rgba(255,255,255,.1); color:#fff; border:0; width:48px; height:48px; border-radius:50%; font-size:28px; line-height:1; flex:none; }
.lb-btn:hover, .lb-btn:focus-visible { background:var(--red); }
.lb-close { position:absolute; top:16px; right:16px; }
@media (max-width:576px) { .lb-prev, .lb-next { position:absolute; bottom:16px; } .lb-prev { left:16px; } .lb-next { right:16px; } }
body.lb-open { overflow:hidden; }

/* Footer */
.site-footer { background:var(--ink); color:#bdb6b0; padding:24px 32px; font-size:14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.site-footer a { color:#fff; }

@media (max-width:767.98px) {
  .section, .hero { padding-left:20px; padding-right:20px; }
  .h-page { font-size:30px; }
}