/* ============================================================================
   Hopetown Guide / Blog template  (FD #6497)
   Scoped under .htg-wrap so it never leaks into the rest of the site.
   Brand: accent #ff5152, text #2b2b2b. Uses the theme's own fonts.
   ========================================================================== */

.htg-wrap{
  --htg-accent:#ff5152;
  --htg-accent-dark:#c0272d;
  --htg-text:#2b2b2b;
  --htg-muted:#6b6b6b;
  --htg-border:#e7e7e7;
  --htg-tint:#fff4f4;
  --htg-zebra:#faf7f7;
  color:var(--htg-text);
}

/* ---- Reset a bit of Jupiter's default single chrome inside our template ---- */
.htg-wrap *{box-sizing:border-box;}
.htg-wrap img{max-width:100%;height:auto;}

/* ---- Template-scoped theme fixes (only apply on the guide post template) ---- */
/* #mk-theme-container uses overflow:hidden, which disables position:sticky for
   the sidebar. Free it here — the body still clips horizontal overflow, so no
   sideways scrollbar appears. */
body.post-template-single-guide-php #mk-theme-container{overflow:visible !important;}

/* ---------------------------------------------------------------- Banner --- */
.htg-banner{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:flex-end;
  /* Branded gradient shows when a post has no featured image; a featured image
     (set inline on the element) overrides this. */
  background:linear-gradient(135deg,#3a1214 0%,#8f1d27 55%,#c0272d 100%) center/cover no-repeat;
  border-radius:0 0 14px 14px;
  overflow:hidden;
}
.htg-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.72) 100%);
}
.htg-banner-inner{position:relative;z-index:2;width:100%;padding:2.4rem 2rem;color:#fff;}
.htg-banner-inner .htg-crumbs{font-size:.82rem;opacity:.85;margin:0 0 .6rem;}
.htg-banner-inner .htg-crumbs a{color:#fff;text-decoration:none;opacity:.9;}
.htg-banner h1{
  color:#fff;margin:0;line-height:1.15;
  font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700;
  text-shadow:0 1px 14px rgba(0,0,0,.35);max-width:56rem;
}
.htg-meta{margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.9rem;opacity:.95;}
.htg-meta span{display:inline-flex;align-items:center;gap:.4rem;}

/* -------------------------------------------------------------- Layout ----- */
.htg-wrap{max-width:1180px;margin:0 auto;padding:0 20px 60px;}
.htg-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;
  margin-top:40px;align-items:start;
}
.htg-main{min-width:0;} /* allow tables to shrink instead of overflowing grid */

/* -------------------------------------------------------------- Article ---- */
.htg-article{font-size:1.0625rem;line-height:1.75;}
.htg-article > *:first-child{margin-top:0;}
.htg-article p{margin:0 0 1.25em;}
.htg-article h2{
  font-size:1.65rem;line-height:1.25;margin:2em 0 .6em;
  color:#1f1f1f;scroll-margin-top:90px;
}
.htg-article h3{font-size:1.3rem;line-height:1.3;margin:1.7em 0 .5em;color:#1f1f1f;scroll-margin-top:90px;}
.htg-article h4{font-size:1.05rem;margin:1.2em 0 .4em;color:#1f1f1f;}
.htg-article a{color:var(--htg-accent);text-decoration:underline;text-underline-offset:2px;}
.htg-article a:hover{text-decoration:none;}
.htg-article ul,.htg-article ol{margin:0 0 1.25em;padding-left:1.6em;}
.htg-article ul{list-style:disc;}
.htg-article ol{list-style:decimal;}
.htg-article li{margin:.45em 0;padding-left:.2em;}
.htg-article img{border-radius:8px;margin:1.2em 0;}

/* Callout note boxes */
.htg-article .ht-note,
.htg-article .htg-note{
  background:var(--htg-tint);border:1px solid #ffd0d0;
  border-radius:8px;padding:.95em 1.15em;margin:1.6em 0;
}
.htg-article .ht-note strong,.htg-article .htg-note strong{color:var(--htg-accent-dark);}

/* -------------------------------------------------- Article tables (desktop) */
.htg-article table{
  width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem;
  background:#fff;border:1px solid var(--htg-border);border-radius:8px;overflow:hidden;
}
.htg-article thead th{background:var(--htg-accent);color:#fff;text-align:left;font-weight:600;vertical-align:top;}
.htg-article th,.htg-article td{padding:.7em .95em;border:1px solid #ededed;vertical-align:top;}
.htg-article thead th h1,.htg-article thead th h2,.htg-article thead th h3,.htg-article thead th h4{margin:0;color:#fff;font-size:1rem;}
.htg-article tbody tr:nth-child(even){background:var(--htg-zebra);}
.htg-article td h4{margin:0 0 .2em;}

/* -------------------------------------------------------------- Sidebar ---- */
.htg-sidebar{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:22px;}
.htg-widget{border:1px solid var(--htg-border);border-radius:12px;background:#fff;overflow:hidden;}
.htg-widget-head{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--htg-muted);padding:.9rem 1.1rem;border-bottom:1px solid var(--htg-border);}

/* Table of contents */
.htg-toc ul{list-style:none;margin:0;padding:.5rem .4rem;max-height:60vh;overflow:auto;}
.htg-toc li{margin:0;}
.htg-toc a{
  display:block;padding:.42rem .8rem;border-radius:6px;color:#3a3a3a;text-decoration:none;
  font-size:.9rem;line-height:1.35;
}
.htg-toc a:hover{background:#faf7f7;color:var(--htg-accent-dark);}
.htg-toc a.htg-toc-h3{padding-left:1.5rem;font-size:.85rem;color:#5a5a5a;}
.htg-toc a.is-active{background:var(--htg-tint);color:var(--htg-accent-dark);font-weight:600;}

/* Lead-capture CTA card */
.htg-cta{background:linear-gradient(160deg,#fff 0%,#fff4f4 100%);border-color:#ffd7d7;text-align:center;padding:1.5rem 1.25rem;}
.htg-cta h4{margin:0 0 .4rem;font-size:1.15rem;color:#1f1f1f;}
.htg-cta p{margin:0 0 1rem;font-size:.9rem;color:var(--htg-muted);line-height:1.5;}

/* Buttons */
.htg-btn{
  display:inline-block;background:var(--htg-accent);color:#fff !important;text-decoration:none !important;
  font-weight:600;padding:.8rem 1.5rem;border-radius:8px;border:0;cursor:pointer;
  transition:background .15s ease,transform .15s ease;line-height:1.2;
}
.htg-btn:hover{background:var(--htg-accent-dark);transform:translateY(-1px);color:#fff !important;}
.htg-btn-block{display:block;width:100%;}
.htg-btn-sm{padding:.6rem 1.15rem;font-size:.92rem;}

/* -------------------------------------------------------- School cards ----- */
.htg-schools{margin:2.5em 0;}
.htg-card{
  display:block;
  border:1px solid var(--htg-border);border-radius:14px;overflow:hidden;
  margin:0 0 1.8rem;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:box-shadow .2s ease,transform .2s ease;
}
.htg-card:hover{box-shadow:0 8px 26px rgba(0,0,0,.10);transform:translateY(-2px);}
/* Landscape banner image on top, full card width; content stacks below. */
.htg-card-media{position:relative;width:100%;aspect-ratio:16/9;background:#f3f3f3;}
.htg-card-media:empty{display:none;}
.htg-card-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;margin:0;}
.htg-rank{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--htg-accent);color:#fff;font-weight:700;font-size:.95rem;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.htg-card-body{padding:1.5rem 1.7rem 1.7rem;}
.htg-card-name{margin:0 0 .35rem;font-size:1.3rem;color:#1f1f1f;line-height:1.25;}
.htg-card-rating{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .7rem;font-size:.92rem;}
.htg-stars{color:#e0e0e0;letter-spacing:1px;font-size:1.05rem;}
.htg-star-full{color:#f5a623;}
.htg-star-half{background:linear-gradient(90deg,#f5a623 50%,#e0e0e0 50%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.htg-rating-num{font-weight:700;color:#1f1f1f;}
.htg-rating-count{color:var(--htg-muted);}
.htg-card-blurb{color:#3a3a3a;line-height:1.7;font-size:.98rem;}
.htg-card-blurb p{margin:0 0 .8em;}
.htg-best-for{margin:.6rem 0 1rem;font-size:.95rem;color:#3a3a3a;}
.htg-best-for strong{color:var(--htg-accent-dark);}

/* Per-school info table */
.htg-info{width:100%;border-collapse:collapse;margin:.9rem 0 1.1rem;font-size:.92rem;border:1px solid var(--htg-border);border-radius:8px;overflow:hidden;}
.htg-info th{width:38%;text-align:left;font-weight:600;color:#1f1f1f;background:var(--htg-zebra);padding:.55em .8em;border:1px solid #ededed;vertical-align:top;}
.htg-info td{padding:.55em .8em;border:1px solid #ededed;vertical-align:top;}
.htg-card-cta{margin-top:.4rem;}

/* ------------------------------------------------ Blog landing grid -------- */
.htg-banner-sub{color:#fff;margin:.8rem 0 0;font-size:1.05rem;max-width:44rem;opacity:.95;text-shadow:0 1px 10px rgba(0,0,0,.3);}
.htg-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:44px 0 24px;}
.htg-blog-card{display:flex;flex-direction:column;border:1px solid var(--htg-border);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;transition:box-shadow .2s ease,transform .2s ease;}
.htg-blog-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.10);transform:translateY(-3px);}
.htg-blog-media{display:block;width:100%;aspect-ratio:16/9;background:#eee center/cover no-repeat;}
.htg-blog-media[data-noimg]{background:linear-gradient(135deg,#3a1214 0%,#8f1d27 55%,#c0272d 100%);}
.htg-blog-body{display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.3rem 1.4rem;}
.htg-blog-date{font-size:.78rem;color:var(--htg-muted);}
.htg-blog-name{font-size:1.12rem;line-height:1.35;color:#1f1f1f;font-weight:600;}
.htg-blog-card:hover .htg-blog-name{color:var(--htg-accent-dark);}
.htg-blog-ex{font-size:.92rem;line-height:1.6;color:#555;}
@media (max-width:960px){.htg-blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.htg-blog-grid{grid-template-columns:1fr;}}

/* ------------------------------------------------ Related posts block ------ */
.htg-related{margin:3.5rem 0 1rem;}
.htg-related-title{font-size:1.5rem;color:#1f1f1f;margin:0 0 1.3rem;}
.htg-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.htg-related-card{display:flex;flex-direction:column;border:1px solid var(--htg-border);border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;transition:box-shadow .2s ease,transform .2s ease;}
.htg-related-card:hover{box-shadow:0 8px 26px rgba(0,0,0,.10);transform:translateY(-2px);}
.htg-related-media{display:block;width:100%;aspect-ratio:16/9;background:#eee center/cover no-repeat;}
.htg-related-media[data-noimg]{background:linear-gradient(135deg,#3a1214 0%,#8f1d27 55%,#c0272d 100%);}
.htg-related-body{display:block;padding:1rem 1.15rem 1.2rem;}
.htg-related-date{display:block;font-size:.78rem;color:var(--htg-muted);margin:0 0 .35rem;}
.htg-related-name{display:block;font-size:1.05rem;line-height:1.35;color:#1f1f1f;font-weight:600;}
.htg-related-card:hover .htg-related-name{color:var(--htg-accent-dark);}

/* ---------------------------------------------------- Responsive / mobile -- */
@media (max-width:960px){
  .htg-layout{grid-template-columns:1fr;gap:0;}
  .htg-sidebar{position:static;order:2;margin-top:40px;flex-direction:column;}
  .htg-main{order:1;}
  .htg-toc ul{max-height:none;}
}

@media (max-width:782px){
  .htg-article{font-size:1rem;}
  .htg-banner{min-height:260px;}

  /* School card banner a touch shorter on phones */
  .htg-card-media{aspect-ratio:3/2;}

  /* Related posts stack */
  .htg-related-grid{grid-template-columns:1fr;gap:18px;}

  /* Article comparison tables → stacked cards (no horizontal scroll, no shrink).
     data-label is injected by guide.js from each column header. */
  .htg-article table,
  .htg-article tbody,
  .htg-article tr,
  .htg-article td{display:block;width:100%;}
  .htg-article thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);}
  .htg-article tr{margin:0 0 1.1em;border:1px solid var(--htg-border);border-radius:10px;overflow:hidden;background:#fff;}
  .htg-article tbody tr:nth-child(even){background:#fff;}
  .htg-article td{
    position:relative;padding:.65em .9em .65em 42%;text-align:left;border:0;
    border-bottom:1px solid #f0f0f0;min-height:2.4em;
  }
  .htg-article td:last-child{border-bottom:0;}
  .htg-article td::before{
    content:attr(data-label);position:absolute;left:.9em;top:.65em;width:36%;
    padding-right:.6em;font-weight:600;color:#1f1f1f;white-space:normal;line-height:1.3;
  }
  .htg-article td[data-label=""]::before{content:none;}

  /* Per-school info tables read fine as label/value; keep them tidy */
  .htg-info th{width:40%;}
}