/*
Theme Name: Leagle
Description: Custom editorial theme for theleagle.in — Columbia Law Review-inspired: didone display type, steel-blue masthead, light-blue nav strip, hairline rules.
Version: 0.2.0
Author: Kairos
Text Domain: leagle
*/

:root {
  --blue-deep: #306793;
  --blue-header: #306793; /* CLR deep blue; lifts wordmark contrast to 6:1 */
  --blue-dark: #24547e;
  --blue-mid: #689cba;
  --blue-light: #accde1;
  --blue-pale: #b9d9ec;
  --blue-mist: #e7f2f9;
  --ink: #3e4547;
  --muted: #6d7477; /* ≥4.5:1 on white — dates/bylines must pass AA */
  --hairline: #dadcdc;
  --bg: #fff;
  --bg-soft: #fafafa;
  --display: "Playfair Display", "Bodoni MT", Didot, Georgia, serif; /* didone voice that stays readable at 1x screens */
  --body: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --container: 1200px;
  --reading: 720px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh; display: flex; flex-direction: column; /* sticky footer */
}
body > main, body > .site-main { flex: 1; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
button { font-family: var(--sans); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

/* ================= masthead — CLR: deep blue bar, white serif wordmark ================= */
.masthead { background: var(--blue-header); }
.masthead-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 22px 0;
}
.wordmark {
  margin: 0; white-space: nowrap;
  font-family: var(--display); font-weight: 500; font-size: 30px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.wordmark a { color: #fff; }
.wordmark a:hover { text-decoration: none; }
.wordmark .bar { opacity: 0.55; font-weight: 400; padding: 0 6px; }
.brand-tag {
  margin: 3px 0 0 2px; font-family: var(--body); font-style: italic;
  font-size: 13.5px; color: rgba(255, 255, 255, 0.78);
}

.masthead-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* subscribe — one 38px row, input + button flush */
.subscribe { display: flex; align-items: stretch; }
.subscribe input[type="email"] {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  border: 0; padding: 0 14px; height: 38px; width: 220px;
}
.subscribe input[type="email"]:focus { outline: 2px solid var(--blue-pale); }
.subscribe button {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  height: 38px; padding: 0 24px 0 26px; cursor: pointer; /* extra left pad balances letter-spacing's trailing gap */
  background: #24547e; color: #fff; border: 0;
}
.subscribe button:hover { background: #1b4266; }
.subscribe-note { font-family: var(--sans); font-size: 13px; color: #fff; }

/* search — magnifier in the blue bar, CLR-style */
.mast-search { position: relative; }
.mast-search summary {
  list-style: none; cursor: pointer; color: #fff; opacity: 0.85;
  display: flex; align-items: center; height: 38px; padding: 0 4px;
}
.mast-search summary::-webkit-details-marker { display: none; }
.mast-search summary:hover { opacity: 1; }
.mast-search[open] form {
  position: absolute; right: 0; top: 44px; z-index: 20;
  display: flex; background: #fff; border: 1px solid var(--hairline);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.mast-search input {
  font-family: var(--sans); font-size: 14px; border: 0; padding: 0 12px;
  height: 38px; width: 200px;
}
.mast-search button { border: 0; background: var(--blue-deep); color: #fff; height: 38px; padding: 0 14px; cursor: pointer; }

/* ================= nav strip — CLR: light blue, deep blue caps ================= */
.site-nav { background: var(--blue-light); }
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: nowrap; justify-content: center;
  column-gap: clamp(10px, 2.2vw, 32px); /* one row always: gaps and type scale down before wrapping */
}

/* silence plugin chrome that fights the design (floating social icons, inline like buttons) */
.sfsi_outr_div, .sfsi_wDiv, .norm_row.sfsi_wDiv, div[id^="sfsi_floater"], .wpulike { display: none !important; }
/* direct children only — flyout content inside the <li> must not inherit item styling */
.nav-list > li > a {
  display: block; padding: 14px 2px; white-space: nowrap;
  font-family: var(--sans); font-size: clamp(10.5px, 0.95vw, 13px); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-dark); /* 5:1 on the light strip */
}
.nav-list > li > a:hover { color: #1b4266; text-decoration: none; }
/* negative margins: the pill must not change occupied width or the row reflows/wraps */
.nav-list .current > a { background: var(--blue-deep); color: #fff; padding-left: 14px; padding-right: 14px; margin: 0 -14px; }
.nav-list .current > a:hover { color: #fff; }

/* self-learning group (IBC Daily / Tax Weekend / Course Lab): one continuous
   deep-blue band, inset from the strip edges so it reads as its own element —
   full-height it merges with the masthead above (same blue) */
.nav-learn { margin-top: 7px; margin-bottom: 7px; }
.nav-learn + .nav-learn { margin-left: calc(-1 * clamp(10px, 2.2vw, 32px)); } /* swallow the flex gap inside the band */
.nav-list .nav-learn > a { background: var(--blue-deep); color: #fff; padding: 7px clamp(12px, 1.4vw, 18px); }
.nav-learn + .nav-learn > a { border-left: 1px solid rgba(255, 255, 255, 0.3); }
.nav-list .nav-learn > a:hover { background: var(--blue-dark); color: #fff; }
.nav-learn .nav-flyout { top: calc(100% + 7px); } /* li is 7px shorter; keep flyouts on one line with the rest */
/* learn flyouts invert to match their band: white on deep blue */
.nav-learn .nav-flyout { background: var(--blue-deep); border-color: var(--blue-dark); border-top-color: #fff; }
.nav-learn .nav-flyout-title, .nav-learn .nav-flyout-title a, .nav-learn .nav-flyout-excerpt { color: #fff; }
.nav-learn .nav-flyout .entry-meta { color: rgba(255, 255, 255, 0.9); } /* ≥4.5:1 on blue-deep */
/* current-page marker inside the band: darker segment + white underline */
.nav-list .nav-learn.current > a { background: var(--blue-dark); margin: 0; padding: 7px clamp(12px, 1.4vw, 18px); box-shadow: inset 0 -3px 0 #fff; }

/* nav flyouts — hover peek at the latest post behind each link */
.nav-item { position: relative; }
.nav-flyout {
  display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 100%;
  z-index: 30; width: 300px; padding: 16px 18px; text-align: center;
  background: #fff; border: 1px solid var(--hairline); border-top: 3px solid var(--blue-deep);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.nav-item:hover .nav-flyout, .nav-item:focus-within .nav-flyout { display: block; }
.nav-flyout-title { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.3; margin: 6px 0; }
.nav-flyout-title a { color: var(--ink); white-space: normal; }
.nav-flyout-excerpt { font-size: 13.5px; margin: 0; color: var(--ink); }
@media (hover: none) { .nav-flyout { display: none !important; } }
/* below 900px the strip scrolls horizontally instead of shrinking further; flyouts off (would be clipped) */
@media (max-width: 900px) {
  .site-nav .container { padding: 0 12px; }
  .nav-list { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .nav-list::-webkit-scrollbar { display: none; }
  .nav-flyout { display: none !important; }
}

/* ================= announcement banner ================= */
.banner { color: #fff; }
.banner-inner {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; padding: 14px 24px; text-align: center;
}
.banner-heading { font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.banner-text { font-style: italic; font-size: 15px; margin: 0; }
.banner-cta {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); padding: 7px 16px; white-space: nowrap;
}
.banner-cta:hover { background: #fff; color: var(--ink); text-decoration: none; }

/* ================= homepage — sectioned article feed ================= */
.home-section { padding-top: 34px; }
.home-section-head { text-align: center; position: relative; max-width: 860px; margin: 0 auto; padding: 0 24px; }
.home-section-head::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 50%;
  border-top: 1px solid var(--hairline);
}
.home-section-head .label { position: relative; background: var(--bg); padding: 0 18px; font-size: 14px; }
.home-section-more { text-align: center; font-family: var(--sans); font-size: 13px; margin: 0 0 8px; }
.vl-grid-home { max-width: 860px; margin: 26px auto 20px; padding: 0 24px; }
.feed { max-width: 860px; margin: 0 auto; padding: 0 24px; list-style: none; }
.feed li { border-bottom: 1px solid var(--hairline); padding: 34px 0; text-align: center; }
.feed li:last-child { border-bottom: 0; }
.feed .entry-title { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.25; margin: 10px 0 10px; }
.feed .entry-title a { color: var(--ink); }
.feed .entry-title a:hover { color: var(--blue-deep); text-decoration: none; }
.entry-meta { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.entry-excerpt { font-size: 16px; max-width: var(--reading); margin: 8px auto 0; }

.pagination, .navigation { text-align: center; padding: 30px 0 50px; font-family: var(--sans); font-size: 14px; }
.pagination a, .navigation a { padding: 6px 10px; }
.pagination .current { color: var(--muted); padding: 6px 10px; }

/* ================= archives ================= */
.archive-head { text-align: center; padding: 48px 24px 10px; }
.archive-title { font-family: var(--display); font-size: 42px; font-weight: 700; margin: 8px 0 14px; }

/* ================= single / page ================= */
.single-main { max-width: var(--reading); margin: 0 auto; padding: 52px 24px 64px; }
.single-main .label { display: block; text-align: center; }
.single-title { font-family: var(--display); font-size: 38px; font-weight: 700; line-height: 1.2; margin: 14px 0 10px; text-align: center; }
.single-main .entry-meta { display: block; text-align: center !important; margin-bottom: 34px; } /* beats plugin CSS loaded after theme */
/* single-view carousel slides keep a sane height */
.category-visualaw .single-content .lg-carousel img { width: 100%; object-fit: contain; }
.single-content { font-size: 18px; }
.single-content h2, .single-content h3 { font-family: var(--display); line-height: 1.25; }
.single-content figure { margin: 28px 0; }
.single-content blockquote {
  border-left: 3px solid var(--blue-light); margin: 24px 0; padding: 4px 0 4px 22px;
  font-style: italic;
}
.pdf-embed { width: 100%; height: 75vh; border: 1px solid var(--hairline); margin: 24px 0; }
/* single-view carousel (grid-category posts): uniform stage so the tallest slide doesn't leave dead space */
.leagle-grid-post .single-content .lg-track > figure { margin: 0; height: min(70vh, 560px); }
.leagle-grid-post .single-content .lg-track img { width: 100%; height: 100%; object-fit: contain; background: var(--blue-mist); }
/* read-meter's span targets .entry-content, not our wrapper — style it as meta */
.single-content .bsf-rt-reading-time, .single-content .rt-reading-time {
  display: block; text-align: center; font-family: var(--sans); font-size: 13px;
  color: var(--muted); margin-bottom: 24px;
}

/* ================= Visualaw — Instagram profile grid ================= */
.visualaw-feed { max-width: 935px; margin: 0 auto; padding: 36px 20px 64px; }
.visualaw-feed > header { text-align: center; padding-bottom: 26px; }
.vl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
.vl-tile { display: block; }
.vl-tile:hover { text-decoration: none; }
.vl-tile > span { display: block; } /* spans inside <a>; inline layout collapses the grid rows */
.vl-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--blue-mist); }
.vl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.vl-fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--blue-mid); }
.vl-tile:hover .vl-thumb img { transform: scale(1.03); }
.vl-multi {
  position: absolute; top: 8px; right: 8px; color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.vl-title {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink);
  margin: 8px 2px 0; line-height: 1.35;
}
.vl-tile:hover .vl-title { color: var(--blue-deep); }
.vl-date { font-family: var(--sans); font-size: 12px; color: var(--muted); margin: 2px 2px 0; }
@media (max-width: 640px) { .vl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } } /* 2-up keeps titles readable */
/* carousel controls, insta-style */
.lg-carousel { position: relative; overflow: hidden; }
.lg-track { display: flex; transition: transform 0.3s ease; }
.lg-track > * { flex: 0 0 100%; }
.lg-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95); border: 0; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; font-size: 15px; line-height: 1;
  color: #262626; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); z-index: 2;
}
.lg-arrow[disabled] { display: none; }
.lg-prev { left: 10px; }
.lg-next { right: 10px; }
.lg-dots { display: flex; gap: 4px; justify-content: center; padding: 10px 0 2px; }
.lg-dots span { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.lg-dots .on { background: var(--blue-deep); }

/* ================= footer ================= */
.site-footer { border-top: 1px solid var(--hairline); background: var(--bg-soft); margin-top: 56px; }
.footer-inner { padding: 28px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-inner, .site-footer a { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.site-footer a:hover { color: var(--blue-deep); }

/* ================= responsive ================= */
@media (max-width: 900px) {
  .masthead-inner { flex-wrap: wrap; justify-content: center; padding: 16px 0; }
  .masthead-tools { margin: 0; }
  .wordmark { font-size: clamp(17px, 5.6vw, 22px); } /* 360px phones must not h-scroll */
  .hero-title { font-size: 32px; }
  .archive-title, .single-title { font-size: 30px; }
  .feed .entry-title { font-size: 23px; }
  .nav-list { column-gap: 22px; }
  .subscribe input[type="email"] { width: 150px; }
}