/* Claude update below */
:root {
  --accent: #0352a6;
  --text: #1a1a1a;
  --muted: #555;
  --border: #e2e2e2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #fff;
}

/* Claude update below (the banner stays put at the top of the window and
   shrinks once the page is scrolled: the subtitle goes, the title drops to
   the size it already uses on a narrow screen, and the padding tightens, so
   what is left is the title and the buttons.) */
.hero {
  background: linear-gradient(160deg, #0b2a4a 0%, #0352a6 100%);
  color: #fff;
  text-align: center;
  padding: 60px 20px 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: padding 0.25s ease;
}

/* Only a fallback for a failed script: public.js sets the real height. */
#heroSpacer { height: 300px; }

.hero h1 { margin: 0 0 10px; font-size: 40px; transition: font-size 0.25s ease, margin 0.25s ease; }

/* Clicking the title scrolls back to the top. inline-block keeps the click
   area on the words: a full width h1 would also answer to a click on the
   empty banner either side of them. The banner is text-align:center, so it
   stays centred, and its measured height does not change. */
.hero h1 { display: inline-block; }

/* Only offers itself once there is somewhere to go, and compact is already
   the scrolled state. */
.hero.compact h1 { cursor: pointer; }

.hero.compact { padding: 12px 20px 14px; }
.hero.compact h1 { font-size: 28px; margin-bottom: 8px; }
.hero.compact .tagline { opacity: 0; max-height: 0; margin-bottom: 0; }
.hero.compact .heroLinks { gap: 8px; }
.hero.compact .heroBtn { padding: 7px 14px; }

/* The shrink can animate because the stand-in below the banner holds the
   EXPANDED height at all times: by the time the banner goes compact it is
   the only thing on screen that changes size, so nothing below it moves.
   public.js measures with the measuring class on, which turns these off. */
.hero.measuring, .hero.measuring * { transition: none !important; }

/* The fixed banner would otherwise cover whatever an anchor link jumps to.
   public.js keeps --heroCompactH at the compact banner's real height. */
main section[id] { scroll-margin-top: calc(var(--heroCompactH, 120px) + 16px); }
/* Claude update end */

/* Claude update below (Item 3: editable hero image overlay. The banner is
   position:fixed, which already positions the ::before overlay; a
   position:relative here would out-specify the fixed and put the banner
   back into the page flow, doubling up with #heroSpacer.) */
.hero.hasImage::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Claude update below (overlay is configurable from the admin GUI via CSS
     custom properties set by public.js; defaults match the original look) */
  background: linear-gradient(var(--ovAngle, 160deg),
    var(--ovC1, rgba(11,42,74,0.82)) 0%,
    var(--ovC2, rgba(3,82,166,0.78)) 100%);
  /* Claude update end */
}

.hero.hasImage > * {
  position: relative;
  z-index: 1;
}
/* Claude update end */

/* Claude update below (title, subtitle and button colors are editable in the
   admin. Every fallback below is the colour the banner used before they were,
   so an unconfigured site looks exactly as it did.) */
.hero h1 { color: var(--titleColor, #fff); }

/* max-height rather than display:none so the collapse can animate. 200px is
   comfortably more than the subtitle ever wraps to. */
.tagline {
  max-width: 640px;
  margin: 0 auto 26px;
  font-size: 17px;
  opacity: 0.92;
  color: var(--subtitleColor, #fff);
  max-height: 200px;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease, margin 0.25s ease;
}

.heroLinks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; transition: gap 0.25s ease; }

.heroBtn {
  color: var(--btnText, #fff);
  background-color: var(--btnBg, transparent);
  border: 1px solid var(--btnBorder, rgba(255,255,255,0.7));
  border-radius: 24px;
  padding: 10px 18px;
  text-decoration: none;
  font-size: 14px;
  transition: background-image 0.12s ease, padding 0.25s ease, font-size 0.25s ease;
}

/* The hover tint is painted as a layer over the button's own colour rather
   than replacing it, so a button with a background darkens instead of
   turning into a see-through patch of the banner behind it. */
.heroBtn:hover {
  background-image: linear-gradient(var(--btnHoverBg, rgba(255,255,255,0.15)),
                                    var(--btnHoverBg, rgba(255,255,255,0.15)));
}
/* Claude update end */

main { max-width: 1100px; margin: 0 auto; padding: 30px 20px 60px; }

h2 { font-size: 28px; margin: 10px 0 6px; text-align: center; }

.contactNote {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  max-width: 700px;
  margin: 0 auto 30px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.card .imgWrap {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fa;
  /* Claude update below (fix: large images overflowed the 190px frame and
     painted over the card text; clip anything that escapes) */
  overflow: hidden;
  flex: 0 0 auto;
  /* Claude update end */
}

/* Claude update below (fix: when the image is wrapped in a link, the <a> has
   no definite height, so the img's max-height:100% resolved to nothing and
   the image rendered at natural size. Give the <a> the full frame height so
   the img constraint works again.) */
.card .imgWrap a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Claude update end */

.card .imgWrap img { max-width: 100%; max-height: 100%; object-fit: contain; }

.card .body { padding: 14px 16px 18px; }

.card h3 { margin: 0 0 6px; font-size: 17px; }

.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.badge.upcoming { color: #1a7f37; }

.card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

.siteFooter {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 18px;
}

.siteFooter a { color: #999; font-size: 12px; text-decoration: none; }

/* Claude update below (editable footer note) */
.footerNote {
  font-size: 12px;
  color: #444;
  line-height: 1.5;
  max-width: 700px;
  margin: 0 auto 10px;
}

.footerNote a { color: var(--accent); font-size: 12px; }
/* Claude update end */

/* Claude update below (audit preview marker. Bottom left, so it clears the
   fixed banner at the top and the back to top button at the bottom right.) */
.previewRibbon {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 200;
  background: #8a5300;
  color: #fff;
  font-size: 12px;
  padding: 7px 14px;
  border-top-right-radius: 6px;
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.3);
}
/* Claude update end */

/* Claude update below (back to top. Hidden until the page is scrolled, and
   hidden by visibility rather than display so it can fade both ways; a
   display swap would jump straight to the end of the transition.) */
.backToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--backToTopBg, var(--accent));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.backToTop svg { width: 26px; height: 26px; }

.backToTop.visible { opacity: 0.9; visibility: visible; transform: none; }

.backToTop.visible:hover { opacity: 1; }

.backToTop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Claude update end */

@media (max-width: 500px) {
  .hero h1 { font-size: 28px; }
  /* Claude update below (already small, so shrink further once scrolled) */
  .hero.compact h1 { font-size: 20px; margin-bottom: 6px; }
  .hero.compact { padding: 10px 14px 12px; }
  .hero.compact .heroBtn { padding: 6px 12px; font-size: 13px; }
  /* Claude update end */
}

/* Claude update below (Past Sessions + Useful Links sections, smooth
   scrolling for the hero # buttons, markdown link styling) */
html { scroll-behavior: smooth; }

/* Claude update below (the smooth scroll above drives the hero buttons and
   the back to top button; a visitor who has asked for less motion gets the
   jump instead) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .backToTop { transition: none; }
}
/* Claude update end */

/* Claude update below (Top Cards: untitled section between hero and
   Sessions — breathing room above and below, no heading) */
#topCards { margin: 20px 0 56px; }
/* Claude update end */

#pastSessions { margin-top: 50px; }

#pastSessions h2, #usefulLinks h2 { margin-bottom: 24px; }

#usefulLinks { margin-top: 50px; }

/* Claude update below — commented out: useful links now use the same .card
   grid as Sessions instead of a plain list
.usefulLinksList {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 700px;
}

.usefulLinksList li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: #fff;
}

.usefulLink {
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.usefulLink:hover { text-decoration: underline; }

.usefulLinkDesc {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}
Claude update end */

.card p a, .contactNote a { color: var(--accent); }

/* "opens in new window" icon — inherits the link's text color */
.newTabIcon {
  width: 0.85em;
  height: 0.85em;
  margin-left: 5px;
  vertical-align: -0.08em;
}
/* Claude update end */