:root{
  --student: #3B82F6;
  --parent: #EF4444;
  --family: #10B981;
  --grid: var(--line, #e5e7eb);
  --text: var(--ink, #0f172a);
  --muted: var(--muted, #64748b);
  --col-width: 120px;
}
.timeline{ border:1px solid var(--grid); border-radius:16px; overflow-x:auto; overflow-y:visible; box-shadow:0 10px 24px rgba(2,6,23,.06); }
.timeline-head{
  display: grid;
  grid-template-columns: 220px repeat(15, minmax(var(--col-width), 1fr));
  background: linear-gradient(90deg,#fff,#f0f9ff);
  border-bottom: 1px solid var(--grid);
}
.col-head{ padding:10px; font-size:12px; color:var(--muted); text-align:center; border-left:1px solid var(--grid); }
.col-head-first{ border-left:none; grid-column: 1 / 2; padding-left:14px; text-align:left; font-weight:700; color:var(--text);}
.sticky{ position: sticky; top: 68px; z-index:2; }
.timeline-rows{ position: relative; }
.line-row{
  display: grid;
  grid-template-columns: 220px repeat(15, minmax(var(--col-width),1fr));
  align-items: center;
  min-height: 46px;
  border-bottom: 1px dashed var(--grid);
  background: white;
  position: relative;
  z-index: 0;
}
.row-label{ padding: 8px 12px; font-size: 14px; color:var(--text); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.row-canvas{ display: grid;
  grid-template-columns: repeat(15, minmax(var(--col-width),1fr));
  gap: 0;
  position: relative;
  min-height: 46px;
  overflow: visible;
  z-index: 0;
}
.grid-cell{ border-left:1px dashed var(--grid); }
.grid-cell:last-child{ border-right:1px dashed var(--grid); }
.bar, .point{
  align-self: center;
  height: 24px;
  margin: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
  z-index: 1;
}
.bar.student, .point.student{ background: var(--student); }
.bar.parent,  .point.parent{  background: var(--parent); }
.bar.family,  .point.family{  background: var(--family); }
.bar:hover, .point:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(2,6,23,.12); filter: saturate(1.05); }
.point{ padding: 0 10px; border: none; }
.page-footer{
  text-align:center; color: var(--muted);
  padding: 20px 12px; border-top: 1px solid var(--grid); margin-top: 24px;
  font-size: 13px; background: transparent;
}
.page-footer a{ color: inherit; text-decoration: underline; }
.tooltip{ pointer-events:none;
  position: absolute;
  pointer-events: none;
  background: #0f172a;
  color: white;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0;
  transition: opacity .08s ease;
  z-index: 10;
  max-width: 320px;
 max-width:360px; white-space:normal; padding:6px 8px; background:#111827; color:#fff; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.2); }


/* category dots next to filters */
.dot{ display:inline-block; width:10px; height:10px; border-radius:999px; margin: 0 6px 2px 6px; vertical-align:middle; }
.dot.student{ background: var(--student); }
.dot.parent{  background: var(--parent); }
.dot.family{  background: var(--family); }


/* === Enhancements (non-intrusive, no color changes) === */
.info-ico{ font-size:11px; margin-left:6px; cursor:pointer; opacity:.7; user-select:none; }
.info-ico:hover{ opacity:1; text-decoration: underline; }

.expander{ font-size:11px; margin-left:8px; cursor:pointer; user-select:none; text-decoration:underline; }
.details-card{
  display:none;
  padding:8px 10px;
  border:1px solid var(--grid);
  border-radius:8px;
  background:#fff;
  margin:6px 6px 0 6px;
  grid-column: var(--start-col) / var(--end-col);
  font-size:12px; line-height:1.35; color:var(--text);
}
.details-card .sec{ margin-top:6px; }
.details-card .sec h4{ margin:0 0 4px 0; font-size:12px; }
.details-card ul{ margin:0; padding-left:16px; }
.details-card a{ text-decoration: underline; }

/* Reserved style tag 'col-lock' will override below templates at runtime */

/* ensure row can grow when details expand */
.row-canvas{ height:auto !important; }
.details-card{ z-index: 5; position: relative; }

.brand .logo {
  height: 60px;    /* enlarged for better visibility */
  width: auto;     /* keep aspect ratio */
  border-radius: 0;
  object-fit: contain; /* ensure whole logo fits */
}

.brand img{height:80px;width:auto;border:none;border-radius:0;object-fit:contain}


/* === Mobile Optimization Patch === */

/* ===== Mobile Optimization Patch (v1) =====
   Scope: phones up to 768px width. No content changes, layout/UX only.
   Safe defaults: does not rely on project-specific classes.
*/
:root{
  --pad-xs: 8px;
  --pad-sm: 12px;
  --pad-md: 16px;
  --radius-lg: 14px;
}

/* Make layout predictable */
*, *::before, *::after { box-sizing: border-box; }

/* Images/videos never overflow */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Avoid horizontal scroll caused by long strings/URLs */
body { overflow-x: hidden; word-break: break-word; }

/* Clickable areas meet touch target guidelines */
a, button, [role="button"], label, input[type="checkbox"], input[type="radio"] {
  min-height: 44px;
}

/* Typographic scaling to improve readability on small screens */
@media (max-width: 768px) {
  html { font-size: 16px; } /* prevents <12px text */
  body { line-height: 1.6; letter-spacing: 0.2px; }
  h1 { font-size: 1.65rem; line-height: 1.2; }
  h2 { font-size: 1.35rem; line-height: 1.25; }
  h3 { font-size: 1.15rem; line-height: 1.3; }
  p, li { font-size: 1rem; }
}

/* Header & logo sizing (keeps long/rect logos crisp) */
@media (max-width: 768px) {
  header, .site-header, .topbar {
    padding: var(--pad-sm) var(--pad-md);
  }
  .logo, .site-logo, header img[alt*="logo" i], header .logo img {
    display: block;
    max-height: 36px; /* adjust as needed */
    width: auto;
  }
  /* If your header uses flex: */
  header .container, .site-header .container, .topbar .container {
    display: flex;
    align-items: center;
    gap: var(--pad-sm);
  }
}

/* Nav items wrap into a vertical stack when space is tight */
@media (max-width: 768px) {
  nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 0;
    margin: var(--pad-sm) 0 0;
    list-style: none;
  }
  nav li { margin: 0; }
  nav a { padding: 10px 12px; border-radius: 10px; display: inline-block; }
}

/* Primary containers get inner padding */
@media (max-width: 768px) {
  .container, .wrapper, .content, main, section, .card {
    padding-left: var(--pad-md);
    padding-right: var(--pad-md);
  }
  .card, .panel, .box {
    border-radius: var(--radius-lg);
  }
}

/* Grid & columns collapse to one column */
@media (max-width: 768px) {
  .row, .grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: var(--pad-md);
  }
  [class*="col-"] { width: 100% !important; max-width: 100% !important; }
}

/* Buttons and CTAs become full-width for easier tapping */
@media (max-width: 768px) {
  .btn, button, input[type="submit"] {
    width: 100%;
    padding: 14px 18px;
  }
}

/* Forms: inputs stretch to container width */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="url"], select, textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
  }
}

/* Tables: make horizontally scrollable with sticky header */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.08);
}
.table-responsive table { min-width: 640px; border-collapse: collapse; }
.table-responsive thead th {
  position: sticky; top: 0; background: #fff; z-index: 2;
}

/* Ensure tooltips aren't clipped on mobile */
@media (max-width: 768px) {
  .tooltip, [role="tooltip"] {
    max-width: 90vw;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* Timeline / Gantt bars: ensure they remain tappable and visible */
@media (max-width: 768px) {
  .gantt, .timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--pad-sm);
  }
  .gantt .bar, .timeline .bar { min-height: 32px; }
}

/* Iframes (Calendly, maps, YouTube) become responsive */
.embed-responsive, .video-wrapper, .map-wrapper, .iframe-wrapper {
  position: relative;
  width: 100%;
  padding: 0;
}
.embed-responsive iframe,
.video-wrapper iframe,
.map-wrapper iframe,
.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Aspect ratio helper when parent has data-aspect */
[data-aspect="16/9"] { aspect-ratio: 16 / 9; }
[data-aspect="4/3"]  { aspect-ratio: 4 / 3; }
[data-aspect="1/1"]  { aspect-ratio: 1 / 1; }

/* Images with text beside them stack vertically on phones */
@media (max-width: 768px) {
  .media, .hero, .split, .feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pad-md);
    align-items: start;
  }
}

/* Spacing fix for lists and dense sections */
@media (max-width: 768px) {
  ul, ol { padding-left: 1.25rem; }
  section + section { margin-top: 1rem; }
}

/* Footer: stack columns and ensure tap targets are big enough */
@media (max-width: 768px) {
  footer .row, footer .grid { grid-template-columns: 1fr; }
  footer a { padding: 8px 0; display: inline-block; }
}

/* Avoid double tap to zoom on form controls (iOS) */
@supports (-webkit-overflow-scrolling: touch) {
  input, select, textarea { font-size: 16px; }
}

/* Hide elements explicitly marked as desktop-only */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: initial !important; }
}

/* Prevent sticky headers from covering anchor targets */
:target::before {
  content: "";
  display: block;
  height: 72px; /* approximate header height */
  margin-top: -72px;
}