:root {
  --navy: #3B1877;
  --navy-deep: #1F0F42;
  --gold: #F4B400;
  --gold-light: #FFCB3D;
  --ivory: #F7F5F0;
  --ink: #1A1F27;
  --white: #FFFFFF;
  --border: #E4E0D6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: clip; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--white);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.btn {
  display: inline-block; font-size: 0.82rem; font-weight: 600;
  padding: 8px 18px; border-radius: 3px; letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-submit { background: var(--gold); color: var(--navy-deep); border: none; }
.btn-submit:hover { background: var(--gold-light); }

/* ===== MAIN HEADER ===== */
.site-header {
  background: var(--navy); border-bottom: 1px solid var(--navy-deep);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1400px; margin: 0 auto; padding: 14px 24px 14px 8px;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  flex-wrap: nowrap;
}
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.header-actions .btn { padding: 9px 18px; font-size: 0.82rem; font-weight: 600; border-radius: 24px; white-space: nowrap; }
.header-actions .btn-outline { background: transparent; border: 1.5px solid var(--white); color: var(--white); }
.header-actions .btn-outline:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.header-actions .btn-filled { background: var(--gold); border: 1.5px solid var(--gold); color: var(--navy-deep); }
.header-actions .btn-filled:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-deep); }
.header-actions .btn-outline.active { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.header-actions .btn-outline.active:hover,
.header-actions .btn-filled.active:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-deep); }
.header-actions .btn-filled.active { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-deep); }
@media (max-width: 1300px) {
  .header-actions { display: none; }
}
.logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.logo-mark-img { width: 68px; height: 68px; object-fit: contain; display: block; }
.logo-ring { width: 70px; height: 70px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.18); flex-shrink: 0; overflow: hidden; }
.logo-ring .logo-mark-img { width: 56px; height: 56px; }
.logo-text { font-family: 'Source Serif 4', serif; font-size: 1.15rem; color: var(--white); font-weight: 500; }
.logo-text strong { font-weight: 700; }

/* ===== NAV ===== */
.main-nav { flex-shrink: 0; }
.main-nav ul { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: block; padding: 10px 8px; font-size: 0.8rem; font-weight: 500;
  color: var(--white); position: relative; white-space: nowrap;
}
.main-nav > ul > li > a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease;
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a.active::after { transform: scaleX(1); }
.main-nav > ul > li > a.active { color: var(--gold-light); font-weight: 600; }
.has-dropdown > a::after {
  content: ""; display: inline-block; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-left: 7px; margin-bottom: 1px; opacity: 0.5;
  vertical-align: middle; transition: transform 0.2s ease, opacity 0.2s ease;
}
.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after { opacity: 0.85; }
.has-dropdown.open > a::after { transform: rotate(225deg); }
.main-nav .dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--white); border: 1px solid var(--border); border-top: 2px solid var(--gold);
  box-shadow: 0 12px 24px rgba(14, 42, 74, 0.08);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.main-nav .has-dropdown:hover .dropdown,
.main-nav .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .dropdown li a { display: block; padding: 12px 18px; font-size: 0.88rem; color: var(--ink); border-bottom: 1px solid var(--border); }
.main-nav .dropdown li:last-child a { border-bottom: none; }
.main-nav .dropdown li a:hover { background: var(--ivory); color: var(--navy); }
.main-nav .dropdown li a.active { color: var(--navy); font-weight: 600; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--white); }

/* ===== HERO BANNER ===== */
.hero { background: var(--ivory); border-bottom: 1px solid var(--border); }
.hero-banner-img { width: 100%; display: block; }
.hero-details { height: 10px; background: linear-gradient(90deg, var(--navy) 0%, var(--navy-deep) 50%, var(--gold) 100%); }

/* ===== CONTENT PAGE ===== */
.content-page { background: var(--white); }
.content-page-inner { max-width: 1200px; margin: 0 auto; padding: 60px 24px 20px; }
.section-eyebrow { font-size: 0.85rem; font-weight: 600; color: var(--gold); margin-bottom: 16px; }
.page-title { font-family: 'Source Serif 4', serif; font-size: 2.1rem; color: var(--navy); font-weight: 600; margin-bottom: 8px; }
.page-lead { font-size: 1rem; line-height: 1.75; color: #4a5568; max-width: 900px; margin-top: 14px; }
.content-prose p { font-size: 1rem; line-height: 1.8; color: #4a5568; margin-bottom: 18px; text-align: justify; }
.content-page .breadcrumb { display: none; }

/* ===== PEOPLE / COMMITTEE SECTIONS ===== */
.people-section { padding: 50px 0 20px; }
.people-section-title { font-family: 'Source Serif 4', serif; font-size: 1.4rem; color: var(--navy); font-weight: 600; border-bottom: 2px solid var(--gold); padding-bottom: 12px; margin-bottom: 32px; }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.person-card { background: var(--white); border: 1px solid var(--border); padding: 28px 22px; text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.person-card:hover { box-shadow: 0 12px 24px rgba(14, 42, 74, 0.08); transform: translateY(-2px); }
.person-avatar { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--gold-light); font-family: 'Source Serif 4', serif; font-size: 1.4rem; font-weight: 600; overflow: hidden; }
.person-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.person-name { font-family: 'Source Serif 4', serif; font-size: 1.05rem; color: var(--navy); font-weight: 600; margin-bottom: 4px; }
.person-role { font-size: 0.85rem; color: #6b7789; line-height: 1.5; }
@media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .people-grid { grid-template-columns: 1fr; } }

/* ===== WELCOME MESSAGE (Messages page) ===== */
.welcome { background: var(--white); }
.welcome + .welcome { border-top: 1px solid var(--border); }
.welcome-inner { max-width: 1200px; margin: 0 auto; padding: 70px 24px; display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start; }
.welcome-first .welcome-inner { padding-top: 20px; }
.welcome-photo-frame {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 14px 32px rgba(31, 15, 66, 0.10);
}
.welcome-photo-frame img { width: 100%; border-radius: 6px; display: block; }
.photo-caption { margin-top: 14px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.photo-caption strong { font-family: 'Source Serif 4', serif; color: var(--navy); font-size: 1.05rem; }
.photo-caption span { font-size: 0.85rem; color: #8391a6; }
.welcome-content .section-eyebrow { color: var(--navy); }
.welcome-lead { font-family: 'Inter', sans-serif; font-size: 0.98rem; color: #4a5568; font-weight: 400; line-height: 1.75; margin-bottom: 16px; text-align: justify; }
.welcome-text { font-size: 0.98rem; line-height: 1.75; color: #4a5568; margin-bottom: 16px; text-align: justify; }
.welcome-sign { margin-top: 24px; display: flex; flex-direction: column; gap: 2px; }
.welcome-sign strong { font-family: 'Source Serif 4', serif; color: var(--navy); font-size: 1.05rem; }
.welcome-sign span { font-size: 0.85rem; color: #8391a6; }
@media (max-width: 700px) {
  .welcome-inner { grid-template-columns: 1fr; padding: 50px 24px; }
  .welcome-first .welcome-inner { padding-top: 20px; }
  .welcome-photo { max-width: 240px; margin: 0 auto; }
}

/* ===== DATES TABLE ===== */
.dates-table-wrap { overflow-x: auto; margin-top: 40px; border: 1px solid var(--border); }
.dates-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.dates-table th {
  background: var(--navy); color: var(--white); text-align: left;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 14px 20px;
}
.dates-table td { padding: 16px 20px; font-size: 0.92rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.dates-table tr:last-child td { border-bottom: none; }
.dates-table tr:hover td { background: var(--ivory); }
.dates-table .date-cell { color: var(--navy); font-weight: 600; white-space: nowrap; }
.dates-table .day-cell { color: #6b7789; font-size: 0.85rem; }

/* ===== POLICY SECTIONS ===== */
.policy-toc { background: var(--ivory); border: 1px solid var(--border); padding: 24px 28px; margin: 32px 0 8px; }
.policy-toc h3 { font-family: 'Source Serif 4', serif; font-size: 0.95rem; color: var(--navy); margin-bottom: 14px; }
.policy-toc ol { list-style: decimal; padding-left: 20px; columns: 2; column-gap: 32px; }
.policy-toc li { font-size: 0.88rem; padding: 4px 0; color: #4a5568; }
@media (max-width: 700px) { .policy-toc ol { columns: 1; } }
.policy-section { display: flex; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--border); }
.policy-section:last-child { border-bottom: none; }
.policy-num {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--gold-light); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.policy-section h3 { font-family: 'Source Serif 4', serif; font-size: 1.1rem; color: var(--navy); margin-bottom: 10px; }
.policy-section p { font-size: 0.92rem; line-height: 1.75; color: #4a5568; }

/* ===== SIMPLE FORM (Accommodation / Workshop) ===== */
.simple-form { max-width: 720px; margin-top: 36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-row.full { grid-template-columns: 1fr; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  font-family: 'Inter', sans-serif; font-size: 0.92rem; background: var(--white);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--navy); }
.form-hint { font-size: 0.8rem; color: #8391a6; margin-top: 4px; }
.form-submit { margin-top: 12px; }
.form-error { color: #c0392b; font-size: 0.8rem; margin-top: 4px; }
.form-success { background: #eafaf1; border: 1px solid #27ae60; color: #1e8449; padding: 14px 18px; margin-bottom: 24px; font-size: 0.9rem; }

/* ===== FOOTER ===== */
.site-footer { background: var(--navy-deep); color: #9aa7ba; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 70px 24px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { margin-top: 16px; font-size: 0.9rem; line-height: 1.6; max-width: 260px; }
.logo-text-light { color: var(--white); }
.footer-col h4 { color: var(--white); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 16px; }
.footer-col p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 12px; }
.footer-col a { color: #9aa7ba; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--gold-light); }
.footer-social { display: flex; gap: 14px; }
.footer-col-logo { display: flex; flex-direction: column; align-items: flex-start; }
.footer-badge { display: inline-block; background: #ffffff; border-radius: 10px; padding: 14px 18px; }
.footer-badge-img { display: block; width: 150px; height: auto; }
.footer-bottom { border-top: 1px solid #1c2e45; padding: 20px 24px; text-align: center; font-size: 0.82rem; }
@media (max-width: 800px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-inner { grid-template-columns: 1fr; } }

/* ===== RESPONSIVE NAV ===== */
@media (max-width: 1300px) {
  .topbar-meta { display: none; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; top: 0; right: -280px; width: 280px; height: 100vh;
    background: var(--white); box-shadow: -4px 0 16px rgba(0,0,0,0.1);
    transition: right 0.25s ease; overflow-y: auto; padding-top: 70px;
  }
  .main-nav.open { right: 0; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li > a { padding: 14px 20px; border-bottom: 1px solid var(--border); color: var(--ink); }
  .main-nav > ul > li > a.active { color: var(--navy); }
  .main-nav > ul > li > a::after { display: none; }
  .main-nav .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-top: none; background: var(--ivory); display: none;
  }
  .main-nav .has-dropdown.open .dropdown { display: block; }
}

/* ===== HEADER: holds its shape on older pages that still load Bootstrap ===== */
.site-header .main-nav ul { margin: 0; padding: 0; list-style: none; }
.site-header a { text-decoration: none; }
.site-header .logo-ring .logo-mark-img { max-width: none; }

/* Abstract / Registration links: header buttons on desktop, menu entries below 1300px */
.main-nav .nav-mobile-only { display: none; }
@media (max-width: 1300px) {
  .main-nav .nav-mobile-only { display: block; }
  .nav-toggle { margin-left: auto; position: relative; z-index: 2; }
  .nav-toggle[aria-expanded="true"] span { background: var(--navy); }
}

/* ===== FLASH MESSAGES (form submissions) ===== */
.flash-wrap { max-width: 900px; margin: 24px auto 0; padding: 0 24px; }
.flash-message { padding: 14px 18px; border-radius: 4px; font-size: 0.95rem; line-height: 1.6; border: 1px solid; }
.flash-message.is-success { background: #eafaf1; color: #1e7e4d; border-color: #b6e6c9; }
.flash-message.is-error { background: #fdecea; color: #a33a2f; border-color: #f3c2bb; }
.flash-message ul { margin: 8px 0 0 18px; list-style: disc; }

/* ===== NOTICE CARD (abstract submission not open) ===== */
.submission-notice { background: var(--ivory); border: 1px solid var(--border); border-left: 4px solid var(--gold); padding: 24px 28px; margin-bottom: 28px; }
.submission-notice h3 { font-family: 'Source Serif 4', serif; font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; }
.submission-notice p { font-size: 0.92rem; line-height: 1.7; color: #4a5568; }

/* ===== HOME POPUP (Admin > Popup) ===== */
.popup-container { display: none; position: fixed; z-index: 2000; inset: 0; background-color: rgba(31, 15, 66, .88); }
.popup-content { position: relative; margin: 40px auto; width: calc(100% - 32px); max-width: 530px; background-color: #fff; border-radius: 10px; overflow: hidden; text-align: center; }
.popup-image { width: 100%; height: auto; display: block; }
.popup-content .close-btn { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; line-height: 32px; border-radius: 50%; font-size: 22px; font-weight: bold; cursor: pointer; color: var(--navy-deep); background: var(--gold); }

/* Older (Bootstrap) pages also load assets/styles.css after this file; keep the footer in PSG colours there too */
footer.site-footer { background: var(--navy-deep); color: #9aa7ba; border-top: 0; }

/* ===== HERO SLIDER (banner block; images from Admin > Banners) ===== */
/* No strip between the header (or countdown) and the banner. Written as section.hero so it also
   wins over the ".hero" rule each page carries in its own CSS. */
section.hero { margin-top: 0; }
.hero-slides { position: relative; overflow: hidden; }
/* The first image sets the height; the others are cropped to fit it. */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.hero-slide:first-child { position: relative; }
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide .hero-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(31, 15, 66, 0.55); color: var(--white); font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.hero-arrow:hover { background: var(--gold); color: var(--navy-deep); }
.hero-arrow.prev { left: 18px; }
.hero-arrow.next { right: 18px; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--white); background: transparent; padding: 0; cursor: pointer; transition: background 0.2s ease, width 0.2s ease; }
.hero-dot.active { background: var(--gold); border-color: var(--gold); width: 26px; border-radius: 6px; }
@media (max-width: 700px) {
  .hero-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
  .hero-arrow.prev { left: 8px; }
  .hero-arrow.next { right: 8px; }
  .hero-dots { bottom: 6px; }
}

/* ===== REGISTRATION FEES: periods outside their dates (set by assets/psg.js) ===== */
.reg-fees-table th.is-current::after,
.reg-fees-table th.is-closed::after {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle;
}
.reg-fees-table th.is-current::after { content: "Open now"; background: var(--gold); color: var(--navy-deep); }
.reg-fees-table th.is-closed::after { content: "Closed"; background: #e3e1dc; color: #7a7f88; }
.reg-fees-table th.is-closed, .reg-fees-table td.is-closed { color: #a3a8b1; }
.reg-fees-table td.is-closed label { cursor: not-allowed; }

/* ===== HOME PAGE ON PHONES =====
   Below 768px the home page is the banner and a grid of navigation cards
   (the "Navigation cards" live section); its other sections are for larger
   screens. Everything on the home page that is not one of those two is
   hidden here, including sections added to it later in the builder. */
.mobile-nav { display: none; }
@media (max-width: 767px) {
  .page-home > *:not(.hero):not(.mobile-nav) { display: none !important; }
  .page-home > .mobile-nav { display: block; }

  .mobile-nav { background: var(--ivory); padding: 22px 16px 34px; }
  .mobile-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .mobile-nav-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    min-height: 128px; padding: 18px 10px; border-radius: 14px; text-align: center;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--white); box-shadow: 0 8px 18px rgba(31, 15, 66, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .mobile-nav-card:active { transform: scale(0.97); box-shadow: 0 4px 10px rgba(31, 15, 66, 0.2); }
  .mobile-nav-card svg { width: 40px; height: 40px; color: var(--gold); flex: none; }
  .mobile-nav-card span { font-family: 'Source Serif 4', serif; font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
}