/*
Theme Name: StatStudyHub
Theme URI: https://statstudyhub.com
Author: Dominic Tanui
Author URI: https://statstudyhub.com
Description: Classic (non-block) theme for StatStudyHub — Tailwind CDN, Lucide, DM Serif Text. Modular/hardened.
Version: 0.4.0
License: GPLv2 or later
Text Domain: statstudyhub
*/

/* --------------------------------------------------------------------------
   Global layout helpers
-------------------------------------------------------------------------- */

/* Sticky header + content offset */
:root{
  --ssh-header-h: 64px;   /* keep in sync with header height */
  --ssh-adminbar-h: 0px;
  --ssh-hero-overlap: 24px;     /* how much the hero tucks under header (mobile) */
}
@media (min-width:1024px){
  :root{ --ssh-hero-overlap: 36px; }
}
/* Sticky footer layout helpers */
html, body { height: 100%; }
#page { min-height: 100dvh; display: flex; flex-direction: column; }
#content { flex: 1 0 auto; }             /* grow to push footer down */
footer { flex-shrink: 0; }               /* never shrink the footer */

/* tame extra top/bottom gaps in footer section */
footer .ssh-footer-wrap { padding-top: 1.25rem; padding-bottom: 1.25rem; }
@media (min-width: 768px){
  footer .ssh-footer-wrap { padding-top: 1.75rem; padding-bottom: 1.75rem; }
}

/* WP admin bar compensation (desktop/mobile) */
body.admin-bar{ --ssh-adminbar-h: 32px; }
@media (max-width:782px){
  body.admin-bar{ --ssh-adminbar-h: 46px; }
}

/* Default: push content below sticky header */
.has-sticky-offset #content{
  padding-top: calc(var(--ssh-header-h) + var(--ssh-adminbar-h));
}
/* Home/front: allow the hero to overlap the header slightly */
.home.has-sticky-offset #content,
.front-page.has-sticky-offset #content{
  padding-top: calc(var(--ssh-header-h) + var(--ssh-adminbar-h) - var(--ssh-hero-overlap));
}
/* The hero wrapper receives the matching negative margin */
.ssh-hero-overlap{
  margin-top: calc(var(--ssh-hero-overlap) * -1);
}

/* Break out of centered containers for full-bleed sections */
.ssh-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100%;
  max-width: 100%;
  margin-top: 30px;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* --------------------------------------------------------------------------
   Card polish (Google-like)
-------------------------------------------------------------------------- */
.ssh-card{
  transition: box-shadow 900ms cubic-bezier(0.2,0,0,1),
              transform 900ms cubic-bezier(0.2,0,0,1);
  will-change: transform, box-shadow;
}
.ssh-card:hover,
.ssh-card:focus-visible{
  box-shadow: 0 18px 50px rgba(2, 6, 23, .08);
  transform: translateY(-1px);
}
.ssh-card .ssh-zoom{
  transform: scale(1);
  transition: transform 900ms cubic-bezier(0.2,0,0,1);
  will-change: transform;
}
.ssh-card:hover .ssh-zoom,
.ssh-card:focus-visible .ssh-zoom{
  transform: scale(1.03);
}
/* fallback shadow token */
.shadow-card{
  box-shadow:
    0 1px 2px rgba(2,6,23,0.04),
    0 8px 24px rgba(2,6,23,0.06);
}
/* avoid sub-pixel blur on scaled images */
img.ssh-zoom{
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  image-rendering: -webkit-optimize-contrast;
}

/* --------------------------------------------------------------------------
   Full-bleed, animated flat-fade backgrounds for sections
   Usage:
     <section class="ssh-bleed ssh-flatfade ssh-flatfade-blue ssh-fade-animated …">
     <section class="ssh-bleed ssh-flatfade ssh-flatfade-ash  ssh-fade-animated …">
-------------------------------------------------------------------------- */

.ssh-flatfade{ position: relative; isolation: isolate; }
.ssh-flatfade::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* ensure actual section content sits above the pseudo layer */
.ssh-flatfade > *{ position: relative; z-index: 1; }

/* Palettes (tweakable) */
.ssh-flatfade-blue{ --bg1:#F3F7FF; --t1: rgba(37,99,235,.08); --t2: rgba(59,130,246,.06); }
.ssh-flatfade-ash { --bg1:#F7F9FB; --t1: rgba(2,6,23,.05);   --t2: rgba(2,6,23,.04); }
@media (min-width:1024px){
  .ssh-flatfade-blue{ --bg1:#EEF4FF; }
  .ssh-flatfade-ash { --bg1:#F5F7FA; }
}

/* Compose the background: two soft radial blobs + vertical fade */
.ssh-flatfade::before{
  background:
    radial-gradient(40% 60% at 20% 10%, var(--t1, rgba(0,0,0,.04)), transparent 60%),
    radial-gradient(50% 70% at 80% 0%,  var(--t2, rgba(0,0,0,.03)), transparent 70%),
    linear-gradient(180deg, var(--bg1, #F7F9FB) 0%, #FFFFFF 85%);
  background-repeat: no-repeat;
  background-size: 120% 120%, 140% 140%, auto;
  background-position: 0% 0%, 100% 0%, 0 0;
}

/* Gentle animated drift for the blobs */
.ssh-fade-animated::before{ animation: sshFloat 28s ease-in-out infinite; }
@keyframes sshFloat{
  0%   { background-position: 0% 0%,   100% 0%, 0 0; }
  50%  { background-position: 12% 8%,  92% 6%,  0 0; }
  100% { background-position: 0% 0%,   100% 0%, 0 0; }
}
/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  .ssh-fade-animated::before{ animation: none; }
}
/* ------------------------------
   Article/page body typography
   (formats all editor HTML nicely)
   ------------------------------ */

.entry-content,
.entry-content *{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.entry-content{
  color: #0f172a; /* slate-900 */
  line-height: 1.75;
  font-size: 17px;
}

@media (min-width: 768px){
  .entry-content{ font-size: 18px; line-height: 1.8; }
}

/* Headings scale (bold + spacing) */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
  color:#0f172a;
  font-weight: 800;
  line-height: 1.15;
  margin: 1.6em 0 0.6em;
}

.entry-content h1{ font-size: clamp(2rem, 2.2rem + 1vw, 3rem); }
.entry-content h2{ font-size: clamp(1.75rem, 1.9rem + .6vw, 2.25rem); }
.entry-content h3{ font-size: clamp(1.375rem, 1.5rem + .4vw, 1.75rem); }
.entry-content h4{ font-size: 1.25rem; }
.entry-content h5{ font-size: 1.1rem; }
.entry-content h6{ font-size: 1rem; }

/* Paragraphs & inline */
.entry-content p{ margin: 1rem 0; font-weight: 500; } /* slightly bolder, “bit bold” */
.entry-content strong{ font-weight: 800; }
.entry-content em{ font-style: italic; }
.entry-content a{ color:#1d4ed8; text-decoration: none; }
.entry-content a:hover{ text-decoration: underline; }

/* Lists */
.entry-content ul,
.entry-content ol{ margin: 1rem 0 1rem 1.25rem; }
.entry-content ul{ list-style: disc; }
.entry-content ol{ list-style: decimal; }
.entry-content li{ margin: .35rem 0; }
.entry-content li > ul,
.entry-content li > ol{ margin-top:.35rem; }

/* Blockquote */
.entry-content blockquote{
  margin: 1.5rem 0;
  padding: .9rem 1rem;
  background:#f8fafc;
  border-left: 4px solid #cbd5e1;
  color:#334155;
  font-style: italic;
}

/* Code */
.entry-content code{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background:#f1f5f9;
  padding:.15rem .35rem;
  border-radius:.375rem;
  font-size: .95em;
}
.entry-content pre{
  overflow:auto;
  background:#0b1220;
  color:#e2e8f0;
  padding:1rem 1.25rem;
  border-radius:.75rem;
  margin:1.25rem 0;
}
.entry-content pre code{ background:transparent; padding:0; color:inherit; }

/* Tables */
.entry-content table{
  width:100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: .95em;
}
.entry-content th,
.entry-content td{
  border:1px solid #e2e8f0;
  padding:.6rem .75rem;
  vertical-align: top;
}
.entry-content th{
  background:#f8fafc;
  font-weight:800;
  text-align:left;
}

/* Images / figures */
.entry-content img{ max-width:100%; height:auto; border-radius:.75rem; }
.entry-content figure{ margin:1.25rem 0; }
.entry-content figcaption{
  text-align:center;
  color:#64748b;
  font-size:.875rem;
  margin-top:.5rem;
}

/* HR */
.entry-content hr{
  border:0;
  border-top:1px solid #e2e8f0;
  margin:2rem 0;
}

/* Misc */
.entry-content kbd{
  background:#111827;
  color:#fff;
  padding:.15rem .35rem;
  border-radius:.25rem;
  font-size:.85em;
}
.entry-content sup, .entry-content sub{ font-size:.8em; }
/* =====================  Drop cap: first paragraph  ====================== */
.entry-content p:first-of-type::first-letter{
  float: left;
  font-weight: 900;
  font-size: clamp(3.2rem, 2.4rem + 3vw, 4.5rem); /* ~3 lines high */
  line-height: .8;
  margin: .15rem .55rem 0 0;
  color: #0f172a; /* slate-900 */
  font-family: "DM Serif Text", ui-serif, Georgia, Cambria, "Times New Roman", serif;
}

/* ======================  TOC minor cosmetics  =========================== */
.ssh-toc .ssh-toc-chip{ transition: background-color .25s ease; }
.ssh-toc a.is-active{
  background: #fff1f2;              /* rose-50 */
  color: #be123c;                    /* rose-700 */
}
.ssh-toc a.is-active .ssh-toc-chip{
  background: #e11d48 !important;   /* rose-600 */
}