/* Insights (blog) styles — reuses the main site's design tokens so it
   looks native. Fonts are loaded via the Google Fonts <link> in
   inc/public_header.php / inc/app_header.php (same stylesheet the main
   site uses), not self-hosted here. */

:root{
  --radius:10px;
  --cream:#F6F2EB;            /* == site --parchment */
  --parchment:#F6F2EB;        /* alias so CSS copied verbatim from site.css (footer) matches */
  --ink:#1A2535;               /* == site --text-primary, used as body text */
  --teal:#1F7D52;               /* == site --emerald-mid, used for accents/focus */
  --teal-deep:#1A6B45;         /* == site --emerald, used for buttons/links */
  --teal-soft:rgba(36,151,106,0.12); /* == site --emerald-lite */
  --emerald-glow:#24976A;      /* == site --emerald-glow, used by footer legal-panel links */
  --coral:#B8922A;              /* == site --gold, used for small accents */
  --font-display:"Playfair Display", Georgia, serif;
  --font-sans:"DM Sans", system-ui, -apple-system, sans-serif;
  --border:#E0D9CE;             /* == site --parchment-3 */
  --muted:#EDE8DF;              /* == site --parchment-2 */
  --muted-foreground:#4A5568;   /* == site --text-mid */
  --destructive:#8B2215;        /* == site's rescue/error red */
  --navy:#152236;                /* == site --navy, used for headings */
  --dur:0.3s;                    /* == site --dur, used by footer link/hover transitions */
  --ease:cubic-bezier(0.4,0,0.2,1); /* == site --ease, used by footer legal-panel accordion */
  --max-w:1180px;                /* == site --max-w, used by .container (footer) */
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;font-weight:500;color:var(--navy);line-height:1.2}
a{color:var(--teal-deep)}
a:hover{color:var(--coral)}
html{scroll-padding-top:112px}
.blog-header{position:sticky;top:0;z-index:50;background:rgba(12,21,33,.96);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.06)}
.blog-header-inner{max-width:72rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem}
.blog-logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff}
.blog-logo-img{height:68px;width:auto;display:block}
.blog-nav{display:flex;gap:1.25rem;align-items:center;font-size:.9rem}
.blog-nav a{color:rgba(255,255,255,.68);text-decoration:none;font-weight:500}
.blog-nav a:hover{color:#fff}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.wrap-narrow{max-width:44rem;margin:0 auto;padding:0 1.25rem}
.container{max-width:var(--max-w);margin-inline:auto;padding-inline:clamp(1.25rem, 4vw, 2.5rem)}
.blog-hero{padding:3rem 0 2rem;text-align:center}
.blog-hero h1{font-size:2.5rem;margin:0 0 .5rem}
.blog-hero p{color:var(--muted-foreground);max-width:38rem;margin:0 auto}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.75rem;padding:1rem 0 4rem}
.post-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.post-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--muted)}
.post-card .body{padding:1.1rem 1.25rem 1.4rem}
.post-card h3{font-size:1.15rem;margin:0 0 .4rem}
.post-card p{color:var(--muted-foreground);font-size:.92rem;margin:0}
.post-meta{font-size:.8rem;color:var(--muted-foreground);margin-top:.7rem}
.empty-state{padding:4rem 1rem;text-align:center;color:var(--muted-foreground)}
article.post{padding:2.5rem 0 5rem}
article.post h1{font-size:2.25rem;margin-bottom:.5rem}
article.post .post-meta{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
article.post .featured{width:100%;border-radius:var(--radius);margin-bottom:2rem;aspect-ratio:16/9;object-fit:cover}
article.post .content{font-size:1.06rem}
article.post .content img{max-width:100%;height:auto;border-radius:.5rem;margin:1.25rem 0}
article.post .content h2{margin-top:2rem}
article.post .content h3{margin-top:1.5rem}
article.post .content a{text-decoration:underline}
article.post .content blockquote{border-left:3px solid var(--coral);margin:1.5rem 0;padding:.25rem 0 .25rem 1.25rem;color:var(--muted-foreground);font-style:italic}
article.post .content pre{background:var(--muted);padding:1rem;border-radius:.5rem;overflow:auto}
article.post .content ul,article.post .content ol{padding-left:1.5rem}

/* forms / app UI (login, editor, admin) */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.form-group input[type=text],.form-group input[type=email],.form-group input[type=password],.form-group textarea,.form-group select{
  width:100%;padding:.65rem .85rem;border:1px solid var(--border);border-radius:.5rem;font:inherit;font-size:.95rem;background:#fff;color:var(--ink)
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in oklab, var(--teal) 20%, transparent)}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.6rem;border-radius:999px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;border:2px solid transparent;text-decoration:none;font-family:var(--font-sans);background:var(--teal-deep);color:#fff;box-shadow:0 4px 20px rgba(26,107,69,0.28);transition:all .3s cubic-bezier(0.4,0,0.2,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(26,107,69,0.38);background:var(--teal)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--ink)}
.btn-outline:hover{background:var(--muted)}
.btn-danger{background:var(--destructive);color:#fff}
.btn-danger:hover{opacity:.9}
.btn-sm{padding:.4rem .9rem;font-size:.8rem}
.alert{padding:.85rem 1rem;border-radius:.5rem;font-size:.9rem;margin-bottom:1.25rem}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.badge{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.badge-draft{background:var(--muted);color:var(--muted-foreground)}
.badge-pending{background:#fef9c3;color:#854d0e}
.badge-approved,.badge-published{background:#dcfce7;color:#166534}
.badge-rejected{background:#fee2e2;color:#991b1b}
table.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}
table.admin-table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-foreground);border-bottom:1px solid var(--border);padding:.6rem .5rem}
table.admin-table td{padding:.85rem .5rem;border-bottom:1px solid var(--border);vertical-align:middle}
.app-shell{min-height:100vh;background:var(--cream)}
.app-header{background:rgba(12,21,33,.96);backdrop-filter:blur(16px) saturate(1.4);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.app-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem}
.app-header a{color:#fff}
.app-header .blog-nav a{color:rgba(255,255,255,.85)}
.app-header .blog-nav a:hover{color:#fff}
.app-main{padding:2.5rem 0}
.two-col{display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start}
@media (max-width:800px){.two-col{grid-template-columns:1fr}}
.editor-toolbar-note{font-size:.8rem;color:var(--muted-foreground);margin-top:.4rem}
.section-title{font-size:1.5rem;margin:0 0 1.25rem}
.muted{color:var(--muted-foreground)}
.stack{display:flex;flex-direction:column;gap:.6rem}
.row{display:flex;gap:.6rem;align-items:center}
.space-between{display:flex;justify-content:space-between;align-items:center}
/* ============================================================ FOOTER
   (copied verbatim from /site.css so Insights/Resources match the main
   landing page's footer exactly, per site-wide request.)
   site.css has a page-wide `* { margin:0; padding:0 }` reset that this
   stylesheet doesn't (blog/app content here relies on default browser
   spacing for paragraphs, lists, etc.), so the footer's own <ul>/<li>/<p>
   elements would otherwise keep their default browser margins (a <ul>'s
   ~1em top margin and ~40px left padding, an unreset <p>'s top margin
   stacking with the explicit bottom margin below) -- that's what was
   throwing off column alignment and adding extra gaps around the
   legal-panel triggers. Reset only the specific elements that carry a
   default browser margin/padding (not *, which would also strip the
   .container rule's own margin/padding-inline below and re-break the
   centering/side-padding of the whole footer). */
/* Floating "go to homepage" button -- present on every Resources/Insights
   page (public and logged-in alike), including generated static resource
   posts. Copied verbatim from the main site's .site-home-btn (site.css)
   so it looks and sits identically everywhere; here it's a plain link
   (no scroll-to-top case -- these pages are never "home") so it needs no
   JS of its own. See public_footer.php / app_footer.php for the markup. */
.site-home-btn {
  /* 31.5px, not a round 28/30px: at the page's natural resting scroll
     position (all the way down), this centers the button vertically
     between .footer-bottom's top border and the next line below it (the
     first .legal-panel's top border) -- see site.css's matching comment,
     which this mirrors exactly since both stylesheets share the same
     footer structure/padding. */
  position: fixed; left: 24px; bottom: 31.5px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21,34,54,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  opacity: 0.6; transition: opacity var(--dur), background var(--dur);
}
.site-home-btn:hover { opacity: 1; background: rgba(21,34,54,0.85); }
.site-home-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.footer ul, .footer ol, .footer li, .footer p, .footer h1, .footer h2, .footer h3, .footer h4 { margin: 0; padding: 0; }
.footer { background: #080E18; padding-block: 3rem 1.6rem; }
.footer-cols { display: flex; gap: 2.4rem; border: none; }
.footer-cols > .footer-col { flex: 1 1 0; min-width: 0; border: none; }
.footer-brand { display: flex; align-items: flex-start; }
.footer-logo-img { height: 40px; width: auto; display: block; }
.footer-col-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246,242,235,0.35); margin-block-end: 1rem; }
.footer-menu { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; border: none; }
.footer-menu a { font-size: 0.83rem; color: rgba(246,242,235,0.55); transition: color var(--dur); }
.footer-menu a:hover { color: rgba(246,242,235,0.9); }
.footer-info p { font-size: 0.83rem; color: rgba(246,242,235,0.55); margin: 0 0 0.6rem; }
.footer-info p:last-child { margin-block-end: 0; }
.footer-info p strong { color: rgba(246,242,235,0.85); font-weight: 600; }
.footer-info a { color: rgba(246,242,235,0.55); transition: color var(--dur); }
.footer-info a:hover { color: rgba(246,242,235,0.9); }
/* padding-block (not padding-block-start) so the footer links/social icons
   sit centered top-to-bottom between this rule's own top border and the
   next element's top border directly below (the first .legal-panel, flush
   against this element and showing its own 1px border even collapsed).
   0.8rem top+bottom (not the original 1.6rem top-only) keeps the total
   distance between the two lines the same as before this was made
   symmetric -- see the matching comment in site.css's .footer-bottom. */
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.4rem; padding-block: 0.8rem; border-block-start: 1px solid rgba(246,242,235,0.08); }
.footer-links { display: flex; gap: 1.6rem; list-style: none; flex-wrap: wrap; border: none; }
.footer-links a { font-size: 0.76rem; color: rgba(246,242,235,0.28); transition: color var(--dur); }
.footer-links a:hover { color: rgba(246,242,235,0.65); }
.footer-social { display: flex; gap: 1rem; }
/* The LinkedIn/Facebook marks are now full-color vector logos (their own
   official badge colors baked into the SVG -- see /assets/logo/), not
   currentColor line icons, so there's no color rule to apply here anymore;
   only the same dim/brighten-on-hover treatment as before. */
.footer-social a { opacity: 0.82; transition: opacity var(--dur); display: flex; }
.footer-social a:hover { opacity: 1; }
.footer-social img { width: 19px; height: 19px; display: block; }
/* Same font, size and color as the top nav's own links (.blog-nav a) so
   "Privacy Policy"/"Terms" read as part of the same site typography. */
.footer-legal-trigger { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.68); transition: color var(--dur); }
.footer-legal-trigger:hover, .footer-legal-trigger[aria-expanded="true"] { color: #fff; }
@media (max-width: 720px) { .footer-cols { flex-direction: column; gap: 2rem; } }
/* .site-home-btn floats at a fixed pixel offset from the viewport's left
   edge (see above), not from .footer-bottom's own container, so as the
   viewport narrows and .container's side inset shrinks toward its floor,
   the Privacy Policy/Terms links end up underneath it -- see the matching,
   more detailed comment in site.css for the exact math this mirrors. */
/* ".footer .footer-links", not just ".footer-links": the earlier
   ".footer ul, .footer li, ..." reset above (one class + one type
   selector) otherwise outweighs a plain ".footer-links" (one class) and
   silently wins the margin-inline-start back to 0. */
@media (max-width: 1300px) { .footer .footer-links { margin-inline-start: 60px; } }
/* Expandable legal panels */
.legal-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); border-top: 1px solid rgba(255,255,255,0.06); }
.legal-panel.open { max-height: 1400px; border-top-color: rgba(255,255,255,0.1); }
.legal-panel-inner { padding-block: 2rem 1.4rem; max-width: 760px; }
.legal-panel-inner h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--parchment); margin-block-end: 0.9rem; }
.legal-panel-inner p { font-size: 0.82rem; line-height: 1.7; color: rgba(246,242,235,0.55); margin-block-end: 0.9rem; }
.legal-panel-inner a { color: var(--emerald-glow); text-decoration: underline; }

/* ============================================================ RESPONSIVE (blog + admin header)
   The header nav (public "Main site / Insights / Author login" and the
   logged-in "Write / Admin / Log out" bar) is a plain flex row with no
   wrap, so on narrow phones it was overflowing instead of dropping to a
   second line. Wrapping is enough here — these are short link lists,
   not the full site nav, so a hamburger menu would be overkill. */
@media (max-width: 640px) {
  .blog-header-inner,
  .app-header .wrap {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }
  .blog-nav {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    width: 100%;
  }
}
@media (max-width: 400px) {
  .blog-nav { font-size: 0.82rem; gap: 0.55rem 0.85rem; }
}