/* ============================================================
   AYSO Region 138 — core.css
   Single stylesheet for all site pages.
   Colors: #08529f (AYSO blue), #003366 (navy), #2a7de1 (link blue)
   Font: Arial / Helvetica
   ============================================================ */

/* === RESET ================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* === BASE TYPOGRAPHY ======================================= */
body { font-family: Arial, Helvetica, sans-serif; }
.page-wrap, .page-wrap * { font-family: Arial, Helvetica, sans-serif !important; }

h1, h2, h3, h4 { font-weight: 700; }
h1 { text-transform: uppercase; }
h4 { color: #fff; }

p {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

/* === PAGE LAYOUT =========================================== */
.page-wrap {
  padding: 0 16px 48px;
  font-size: 16px;
  color: #444;
}

.page-wrap a:link,
.page-wrap a:visited,
.page-wrap a:active { color: #08529f !important; }

/* === HEADER ================================================ */
.header {
  background: #08529f;
  padding: 16px;
}

.header h1 {
  margin: 0 0 4px;
  font-size: 22px;
  color: #fff;
  line-height: 1.2;
  padding: 0 !important;
}

.header p {
  margin: 0;
  font-size: 16px;
  color: #a8c4e0;
}

/* === CARD ================================================== */
.card {
  background: transparent;
  border: none;
  padding: 24px 0 0;
  font-size: 16px;
  color: #444;
}

/* === SECTION HEADINGS ====================================== */
h2.section-title {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: #08529f;
  padding: 10px 16px;
  margin: 0 0 16px;
}

h3.sub-title {
  font-size: 16px;
  color: #08529f;
  margin: 20px 0 8px;
  text-transform: uppercase;
}

/* === TABLE OF CONTENTS ===================================== */
.toc {
  background: #f0f5ff;
  border: 1px solid #c5d8f5;
  border-left: 5px solid #08529f;
  border-radius: 6px;
  padding: 20px 24px;
  margin: 0 0 16px;
  font-size: 16px;
}

.toc h2 {
  margin: 0 0 12px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #08529f;
}

.toc ul,
.toc ol { margin: 0; padding-left: 20px; }

.toc li { margin-bottom: 5px; }
.toc li ul { margin-top: 4px; padding-left: 16px; }
.toc li ul li { margin-bottom: 3px; }

.toc a,
.toc a:link,
.toc a:visited,
.toc a:active { color: #2a7de1 !important; text-decoration: none !important; }
.toc a:hover  { text-decoration: underline !important; }

/* === CALLOUT BOXES ========================================= */
.callout {
  border-radius: 6px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 16px;
}

.callout-blue   { background: #e8f0fe; border-left: 4px solid #08529f; }
.callout-green  { background: #e8f5e9; border-left: 4px solid #2e7d32; }
.callout-yellow { background: #fffde7; border-left: 4px solid #f9a825; }
.callout-red    { background: #fce4e4; border-left: 4px solid #ef3e35; }

.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }

/* === LISTS ================================================= */
/* Blue-dot bullets — consistent with brand color */
ul.bullets {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none !important;
  font-size: 16px;
}

ul.bullets li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
  color: #444;
  list-style: none !important;
}

ul.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #08529f;
  border-radius: 50%;
}

ul.bullets li:last-child { margin-bottom: 0; }

ol.steps { margin: 0 0 12px 20px; font-size: 16px; }
ol.steps li { margin-bottom: 8px; }

/* === BUTTONS =============================================== */
.btn-link {
  display: inline-block;
  background: #08529f;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 18px;
  border-radius: 5px;
  margin: 4px 6px 4px 0;
}
.btn-link:hover { background: #2a7de1; }

.btn-link-outline {
  display: inline-block;
  border: 2px solid #08529f;
  color: #08529f !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 16px;
  padding: 6px 16px;
  border-radius: 5px;
  margin: 4px 6px 4px 0;
}
.btn-link-outline:hover { background: #f0f5ff; }

.btn-link-red {
  display: inline-block;
  background: #ef3e35;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 18px;
  border-radius: 5px;
  margin: 4px 6px 4px 0;
}
.btn-link-red:hover { background: #c10230; }

/* === TABLES ================================================ */
table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 12px 0; }
th { background: #08529f; color: #fff; padding: 10px 14px; text-align: left; font-size: 16px; }
td { padding: 9px 14px; border-bottom: 1px solid #e0e0e0; vertical-align: top; font-size: 16px; }
tr:nth-child(even) td { background: #f4f7fc; }

.status-no  { color: #c62828; font-weight: 700; }
.status-yes { color: #2e7d32; font-weight: 700; }

/* === DIVIDER & SPACER ====================================== */
hr.divider { border: none; border-top: 1px solid #ddd; margin: 32px 0; }
.spacer { margin-top: 16px; }

/* === BACK TO TOP =========================================== */
a.back-to-top {
  display: block;
  text-align: right;
  margin-top: 20px;
  color: #08529f !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
}
a.back-to-top:hover { text-decoration: underline !important; }

/* === FOOTER ================================================ */
.footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #ccc;
  font-size: 16px;
  color: #555;
}
.footer strong { color: #222; }
.footer a { color: #2a7de1 !important; text-decoration: none; font-size: 16px; }
.footer a:hover { text-decoration: underline; }

/* === CLOSING BANNER ======================================== */
.closing-banner {
  background: #08529f;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  margin: 24px 0 0;
}
.closing-banner p { margin: 0; color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 1px; }

/* === INFO CARDS ============================================ */
.info-cards { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }

.info-card {
  background: #fff;
  border: 1px solid #dde2ea;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.info-card-header {
  background: #08529f;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 9px 14px;
  line-height: 1.3;
}

.info-card-meta {
  background: #eef3fb;
  color: #08529f;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 14px;
  border-bottom: 1px solid #c5d8f5;
  letter-spacing: 0.02em;
}

.info-card-body { padding: 10px 14px; font-size: 15px; color: #444; line-height: 1.55; }
.info-card-body ul { margin: 0; padding-left: 18px; }
.info-card-body ul li { margin-bottom: 6px; }
.info-card-body ul li:last-child { margin-bottom: 0; }

/* === RULES GRID (Silent Saturdays) ========================= */
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }

.rules-box { border-radius: 8px; padding: 16px 18px; font-size: 15px; }
.rules-box-allowed     { background: #e8f5e9; border: 2px solid #4caf50; }
.rules-box-not-allowed { background: #fce4e4; border: 2px solid #ef3e35; }

.rules-box-title { font-weight: bold; font-size: 15px; margin: 0 0 10px; }
.rules-box-allowed     .rules-box-title { color: #2e7d32; }
.rules-box-not-allowed .rules-box-title { color: #b71c1c; }

.rules-box ul { margin: 0; padding-left: 18px; line-height: 1.9; }
.rules-box-allowed     ul { color: #1b5e20; }
.rules-box-not-allowed ul { color: #7f0000; }

/* === VIDEO EMBED (Field Setup) ============================= */
.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 16px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-caption { font-size: 14px; color: #666; margin: 6px 0 0; text-align: center; }

/* === POLICY BOX (Refund / Weather) ========================= */
.policy-box {
  border: 1px solid #c5d8f5;
  border-radius: 8px;
  padding: 16px 20px;
  background: #f8faff;
}
.policy-box p { margin: 0 0 10px; }
.policy-box p:last-child { margin: 0; }

/* === BADGE NOTES (Refund Policy) =========================== */
a.refundable-note,
a.refundable-note:link,
a.refundable-note:visited,
a.refundable-note:active {
  display: inline-block;
  background: #e8f5e9;
  border: 1px solid #2e7d32;
  color: #1b5e20 !important;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none !important;
  white-space: nowrap;
}
a.refundable-note:hover { background: #c8e6c9; }

a.transferable-note,
a.transferable-note:link,
a.transferable-note:visited,
a.transferable-note:active {
  display: inline-block;
  background: #fffde7;
  border: 1px solid #f9a825;
  color: #b45309 !important;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none !important;
  white-space: nowrap;
}
a.transferable-note:hover { background: #fff8c4; }

/* === PILL LINKS — shared style ============================= */
/* Used in: fms-video-links, manuals table, activity-card links,
   session-wrapper inline links, manual-open-link */
.fms-video-links a,
.fms-video-links a:link,
.fms-video-links a:visited,
.fms-video-links a:active,
#manuals table td a,
#manuals table td a:link,
#manuals table td a:visited,
#manuals table td a:active,
.activity-card ul ul a,
.session-wrapper > p > a:not(.btn-link),
.session-wrapper > p > a:not(.btn-link):link,
.session-wrapper > p > a:not(.btn-link):visited,
.session-wrapper > p > a:not(.btn-link):active {
  display: inline-block;
  background: #f0f5ff;
  border: 1px solid #c5d8f5;
  color: #08529f !important;
  text-decoration: none !important;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.fms-video-links a:hover,
#manuals table td a:hover,
.activity-card ul ul a:hover,
.session-wrapper > p > a:not(.btn-link):hover { background: #dce8fb; }

.fms-video-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.backup-links { margin-top: 6px; width: 100%; }
.backup-links a { white-space: normal; max-width: 100%; }

a.manual-open-link,
a.manual-open-link:link,
a.manual-open-link:visited,
a.manual-open-link:active {
  display: inline-block;
  background: #f0f5ff;
  border: 1px solid #c5d8f5;
  color: #08529f !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 4px;
  white-space: nowrap;
}
a.manual-open-link:hover { background: #dce8fb; }

/* === KICKSTART — ACTIVITY GRID & CARDS ===================== */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.activity-card {
  background: #f8faff;
  border: 1px solid #c5d8f5;
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 16px;
  overflow: hidden;
  min-width: 0;
}

.activity-card h4 { margin: 0 0 8px; color: #003366; font-size: 16px; }

.activity-card .tag {
  display: inline-block;
  background: #08529f;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 3px;
  padding: 2px 7px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.activity-card ul { margin: 0 0 0 16px; padding: 0; font-size: 16px; }
.activity-card ul li { margin-bottom: 4px; }

/* === KICKSTART — COLOR DOTS ================================ */
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.red-dot  { background: #ef3e35; }
.blue-dot { background: #08529f; }

/* === KICKSTART — ROLE CHIP ================================= */
.role {
  display: inline-block;
  background: #e8f0fe;
  color: #08529f;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  padding: 2px 10px;
  margin: 0 4px 4px 0;
}

/* === KICKSTART — ACTIVITY FULL (collapsible) =============== */
.activity-full {
  background: #fff;
  border: 1px solid #dde2ea;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.activity-full-header {
  padding: 16px 20px 0;
  background: #08529f;
}

.activity-full-header h4 {
  padding: 0;
  margin: 0 0 14px;
  font-size: 22px;
  color: #fff;
  line-height: 1.2;
}

.activity-type-pill {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.activity-meta {
  margin: 0 -20px;
  padding: 8px 20px;
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
}

.activity-full-header .activity-meta a,
.activity-full-header .activity-meta a:link,
.activity-full-header .activity-meta a:visited,
.activity-full-header .activity-meta a:active {
  color: #fff !important;
  text-decoration: none !important;
  font-style: normal;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  padding: 1px 7px;
  white-space: nowrap;
}
.activity-full-header .activity-meta a:hover { background: rgba(255,255,255,0.28); }

/* Collapsible <details> toggle */
details.activity-full { display: block; }
details.activity-full > summary {
  display: block;
  list-style: none;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
details.activity-full > summary::-webkit-details-marker { display: none; }
details.activity-full > summary::marker { display: none; }

details.activity-full > summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 39px;
  text-align: center;
  transition: background 0.15s;
  pointer-events: none;
}
details[open].activity-full > summary::after { content: "−"; }
details.activity-full > summary:hover::after { background: rgba(255,255,255,0.32); }

/* === KICKSTART — ACTIVITY SECTIONS ========================= */
.act-section { padding: 12px 18px; border-bottom: 1px solid #eef0f4; }
.act-section:last-child { border-bottom: none; }

.act-section-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #555;
  margin-bottom: 8px;
}

.act-section ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.55; color: #333; }
.act-section ul li { margin-bottom: 3px; }

.act-reflection {
  font-style: italic;
  color: #555;
  font-size: 16px;
  background: #fffef0;
  border-left: 3px solid #f4c430;
  padding: 8px 12px;
  margin-top: 10px;
  border-radius: 0 4px 4px 0;
}

.act-footer { padding: 10px 18px; border-top: 1px solid #eef0f4; background: #f9fafb; }
.act-footer a { font-size: 16px; }

.activity-page-ref {
  padding: 8px 20px;
  background: #eef3fb;
  border-bottom: 1px solid #dde2ea;
  font-size: 14px;
}
.activity-page-ref a,
.activity-page-ref a:link,
.activity-page-ref a:visited,
.activity-page-ref a:active { color: #08529f !important; text-decoration: none !important; font-weight: 600; }
.activity-page-ref a:hover { text-decoration: underline !important; }

/* === KICKSTART — FMS GRID ================================== */
.fms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.fms-group h6 { font-size: 16px; font-weight: 700; color: #555; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.fms-group ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.5; color: #444; }

/* === KICKSTART — SESSION WRAPPER =========================== */
.session-wrapper {
  background: #f8fbff;
  border: 2px solid #c5d8f5;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.session-wrapper > h2.section-title {
  margin-top: -12px;
  margin-left: -16px;
  margin-right: -16px;
  border-radius: 10px 10px 0 0;
}

.session-wrapper > p:first-of-type { font-size: 16px; margin-top: 6px; }
.session-wrapper > p:last-of-type { margin-bottom: 0; margin-top: 12px; }

/* === RESPONSIVE ============================================ */
@media (max-width: 600px) {
  .header { padding: 20px 16px; }
  .card   { padding: 16px 0 0; }
  .rules-grid { grid-template-columns: 1fr; }
}