/*
Theme Name: Al-Idara T&T Register
Theme URI: https://mangmenttt.com
Description: GeneratePress child theme implementing the approved visual design for mangmenttt.com — Arabic RTL, warm paper background, signal-red brand accent, and a distinct teal identity for the Smart Templates library. Styling only; no content, URL, SEO, schema, or plugin logic is modified.
Author: Design direction approved by site owner
Template: generatepress
Version: 1.4.3
Text Domain: idara-tt-register
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =====================================================================
   v1.2.0 — full re-skin onto the approved token set (ink/signal-red/
   paper/template-teal, IBM Plex Sans Arabic + Noto Sans Arabic +
   IBM Plex Mono), replacing the earlier navy/ochre "Register" palette.
   Every real-selector fix already verified live in prior versions
   (card grid on the home/archive loop, .entry-summary excerpt clamp,
   .post-image sizing, nav specificity, .page-header archive header,
   reading time, breadcrumbs, Smart Templates .stl-* restyle) is kept —
   only colors, fonts, and radii changed underneath them.

   SECTIONS
   1. Design tokens
   2. Base typography
   3. Header / primary navigation
   4. Breadcrumbs
   5. Content / article typography (Gutenberg core blocks)
   6. Archive / category header
   7. Homepage + archive loop → card grid (incl. sticky/hero post)
   8. Sidebar / widget-area
   9. Smart Templates plugin (.stl-*)
   10. Footer
   11. Utility / empty & error states
   12. Mobile
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS — approved palette
   --------------------------------------------------------------------- */
:root{
  --ink:#1B2430;
  --signal-red:#C5362B;
  --signal-red-dark:#9E2A21;
  --paper:#FAF8F3;
  --card:#FFFFFF;
  --slate:#616B7A;
  --slate-light:#9AA1AC;
  --border:rgba(97,107,122,.18);
  --template-teal:#0F6E56;
  --template-teal-bg:#E7F3EF;
  --rag-amber:#B8860B;
  --rag-green:#0F6E56;
  --rag-red:#C5362B;
  --radius-card:12px;
  --radius-btn:8px;
  --radius-badge:4px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --font-body:'Noto Sans Arabic',-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-heading:'IBM Plex Sans Arabic',-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

/* ---------------------------------------------------------------------
   2. BASE TYPOGRAPHY
   --------------------------------------------------------------------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
}
body.rtl{ direction:rtl; }
/* Confirmed live: GeneratePress's own .site wrapper (.site.grid-container)
   carries its own white background that sits on top of body's paper
   color, so the gap around/between cards was showing white instead of
   paper. Overriding it here lets the paper background show everywhere
   except actual card surfaces. */
/* v1.2.2 fix: confirmed live that GeneratePress's own rule
   `.one-container .container { background: #fff }` (2 classes) has
   higher specificity than a bare `.site` selector (1 class) and was
   the actual rule winning here, regardless of load order. Matching
   its selector shape with equal specificity, using the class
   GeneratePress itself puts on <body> for this layout, guarantees
   ours wins without !important. */
.site,
.one-container .site.container{ background:var(--paper); }

.entry-title,
.stl-template__title,
.stl-archive__title,
.page-title{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--ink);
}
.main-title{ font-family:var(--font-heading); font-weight:700; }
h1.entry-title{ font-size:26px; line-height:1.4; }
.entry-content h2{ font-family:var(--font-heading); font-size:20px; font-weight:700; margin-top:var(--space-6); }
.entry-content h3{ font-family:var(--font-heading); font-size:16px; font-weight:700; }
.entry-content p,
.entry-content li{
  font-size:16px;
  line-height:1.9;
  color:#2A3242;
}
.entry-meta, .stl-badge, table, .idara-reading-time{
  font-variant-numeric:tabular-nums;
}
a{ color:var(--signal-red); }
a:hover{ color:var(--signal-red-dark); }
a:focus-visible, button:focus-visible, .stl-tool-chip:focus-visible, .stl-lang-toggle:focus-visible{
  outline:2px solid var(--signal-red);
  outline-offset:2px;
}

/* ---------------------------------------------------------------------
   3. HEADER / PRIMARY NAVIGATION
   Real confirmed classes: .site-header, .main-navigation,
   .inside-navigation, .menu-toggle, .main-title, .site-description
   --------------------------------------------------------------------- */
.site-header{
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  position:relative;
  z-index:2;
}
.main-navigation{ background:var(--ink); }
.main-navigation .inside-navigation{ border-top:1px solid rgba(255,255,255,.12); }
.main-navigation a{
  font-family:var(--font-heading);
  color:#fff;
  opacity:.9;
  font-weight:500;
  font-size:15px;
}
/* v1.1.1 specificity fix, kept: mirrors GeneratePress's own selector
   structure so our color reliably wins without !important. */
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items{
  font-family:var(--font-heading);
  color:#fff;
  opacity:.9;
  font-size:15px;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a{
  color:#fff;
  opacity:1;
  font-weight:700;
  background:transparent;
}
/* Smart Templates nav link gets the teal "product" treatment from the
   approved mockup (.navrow a.product) — matched by URL since GP menus
   have no such class natively. Lightened for contrast on dark navy. */
.main-navigation a[href*="smart-template"],
.main-navigation .main-nav ul li a[href*="smart-template"]{
  color:#5FCBAE;
  opacity:1;
}
/* v1.2.1 fix, kept: the rules above are more specific than the base
   `a:hover` rule in section 2, so hovering never visibly changed
   color before. Adding `:hover` to the same selectors makes each one
   more specific than its own non-hover version, so this always wins
   regardless of file order. */
.main-navigation a:hover,
.main-navigation .main-nav ul li a:hover{
  color:var(--signal-red) !important;
  opacity:1 !important;
}
.main-title, .main-title a{ color:#fff; }
.site-description{ color:rgba(255,255,255,.65); font-size:13px; }
.menu-toggle{
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-btn);
  color:#fff;
}

/* ---------------------------------------------------------------------
   4. BREADCRUMBS
   --------------------------------------------------------------------- */
.idara-breadcrumbs, .idara-breadcrumbs *{
  font-family:var(--font-heading);
  font-size:12.5px;
  color:var(--slate);
}
.idara-breadcrumbs{ margin:0 0 var(--space-4); }
.idara-breadcrumbs a{ color:var(--slate); text-decoration:none; }
.idara-breadcrumbs a:hover{ color:var(--signal-red); }
.idara-breadcrumbs .breadcrumb_last{ color:var(--ink); }

.stl-breadcrumbs{ margin-bottom:var(--space-4); }
.stl-breadcrumbs__list{ font-family:var(--font-heading); font-size:12.5px; color:var(--slate); }
.stl-breadcrumbs__link{ color:var(--slate); text-decoration:none; }
.stl-breadcrumbs__link:hover{ color:var(--template-teal); }
.stl-breadcrumbs__current{ color:var(--ink); }
.stl-breadcrumbs__sep{ color:var(--slate-light); }

/* ---------------------------------------------------------------------
   5. CONTENT / ARTICLE — Gutenberg core blocks
   --------------------------------------------------------------------- */
.entry-meta{ font-size:13px; color:var(--slate); }
.entry-meta a{ color:var(--slate); }
.idara-reading-time{
  color:var(--slate);
  font-size:13px;
  margin:-8px 0 var(--space-4);
}

.entry-content table,
.wp-block-table table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.entry-content table th,
.wp-block-table table th{
  background:var(--ink);
  color:#fff;
  padding:10px 12px;
  text-align:right;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:12.5px;
}
.entry-content table td,
.wp-block-table table td{
  padding:9px 12px;
  border-bottom:1px solid var(--border);
}
.entry-content table tr:nth-child(even) td,
.wp-block-table table tr:nth-child(even) td{ background:#F3F0E8; }

.entry-content blockquote,
.entry-content .wp-block-quote,
.entry-content .wp-block-pullquote{
  background:var(--template-teal-bg);
  border-radius:var(--radius-btn);
  border-right:3px solid var(--template-teal);
  padding:16px 18px;
  margin:var(--space-5) 0;
}
.entry-content blockquote p{ color:#1E4A3D; margin:0; font-size:14px; }

.entry-content .wp-block-button__link,
.wp-block-button__link{
  background:var(--signal-red);
  color:#fff;
  font-family:var(--font-heading);
  border-radius:var(--radius-btn);
  font-weight:600;
  font-size:14px;
  padding:11px 22px;
}
.entry-content .wp-block-button__link:hover{ background:var(--signal-red-dark); }
.entry-content .is-style-outline .wp-block-button__link{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--border);
}
.entry-content img{ border-radius:var(--radius-btn); height:auto; }

/* ---------------------------------------------------------------------
   6. ARCHIVE / CATEGORY HEADER — real classes: .page-header,
   .page-title, .taxonomy-description
   --------------------------------------------------------------------- */
.page-header{
  background:linear-gradient(135deg,#1B2430,#26314A);
  color:#fff;
  border-radius:var(--radius-card);
  padding:28px;
  margin-bottom:var(--space-6);
}
.page-header .page-title{
  color:#fff;
  font-size:22px;
  margin:8px 0;
}
.page-header .taxonomy-description{
  color:#C3C8D1;
  font-size:13.5px;
  line-height:1.8;
  margin:0;
  max-width:640px;
}

/* ---------------------------------------------------------------------
   7. HOMEPAGE + ARCHIVE LOOP → CARD GRID
   Confirmed live: article is a direct child of main.site-main;
   GeneratePress's native excerpt setting is on (.entry-summary is
   genuinely short); real inner order is .entry-header → .post-image →
   .entry-summary → .entry-meta.

   v1.2.1: switched from auto-fill to a FIXED column count (3 → 2 → 1)
   so the layout is predictable, bumped card typography up, and added
   an "avoid a lone last card" rule so an incomplete final row never
   shows a single orphaned card.
   --------------------------------------------------------------------- */
.home .site-main,
.archive .site-main:not(.stl-archive),
.blog .site-main{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:stretch;
}
.home article,
.archive article,
.blog article{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;
  margin:0;
  box-shadow:0 2px 8px rgba(27,36,48,.06);
}
/* The Smart Templates plugin inserts its own homepage widget
   (.stlhc-section) as a direct sibling of the post articles inside
   main.site-main — confirmed live. Without this, the grid above
   squeezes that whole multi-card section into a single column cell
   like a regular post, which is what caused the visibly mismatched
   block sizes. Spanning it full-width keeps our post grid predictable
   while letting the plugin's own section lay out normally beneath it. */
.home .site-main > .stlhc-section,
.archive .site-main:not(.stl-archive) > .stlhc-section,
.blog .site-main > .stlhc-section{
  grid-column:1/-1;
}
.home .inside-article,
.archive .inside-article,
.blog .inside-article{
  display:flex;
  flex-direction:column;
  height:100%;
  padding-bottom:18px;
}
.post-image, .post-image img{ width:100%; height:auto; }
.home .post-image,
.archive .post-image,
.blog .post-image{ order:-1; margin:0; }
.home .post-image img,
.archive .post-image img,
.blog .post-image img{
  max-height:190px;
  object-fit:cover;
}
.home .entry-header,
.archive .entry-header,
.blog .entry-header{ padding:16px 18px 0; }
.home .entry-title,
.archive .entry-title,
.blog .entry-title{
  font-family:var(--font-heading);
  font-size:17px;
  font-weight:600;
  line-height:1.5;
  margin:0;
}
.home .entry-title a,
.archive .entry-title a,
.blog .entry-title a{ color:var(--ink); text-decoration:none; }
.home .entry-title a:hover,
.archive .entry-title a:hover,
.blog .entry-title a:hover{ color:var(--signal-red); }
.home .entry-summary,
.archive .entry-summary,
.blog .entry-summary{
  padding:9px 18px 0;
  font-size:14.5px;
  color:var(--slate);
  line-height:1.75;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home .entry-meta,
.archive .entry-meta,
.blog .entry-meta{
  padding-top:9px;
  margin-top:auto;
  font-size:12px;
  color:var(--slate-light);
  border-top:1px solid var(--border);
  margin-left:18px;
  margin-right:18px;
  padding-left:0;
  padding-right:0;
}
.home .entry-meta a,
.archive .entry-meta a,
.blog .entry-meta a{ color:var(--slate-light); }

/* Sticky/pinned post (the book announcement) — hero treatment
   spanning the full grid width, image beside content, matching the
   approved .hero-book component. Uses the real .sticky class
   GeneratePress already applies; no template change. Image column
   widened (170px → 230px) and typography enlarged per feedback. */
.home article.sticky{
  grid-column:1/-1;
  border-top:3px solid var(--signal-red);
}
.home article.sticky .inside-article{
  display:grid;
  grid-template-columns:230px 1fr;
  grid-template-rows:auto auto 1fr;
  column-gap:var(--space-6);
  row-gap:10px;
  padding:var(--space-6);
  height:auto;
}
.home article.sticky .post-image{ order:0; grid-row:1/4; grid-column:1; position:relative; }
.home article.sticky .post-image img{
  max-height:none;
  height:100%;
  border-radius:var(--radius-btn);
}
/* "Featured" ribbon on the cover — purely presentational label, not
   fabricated data (no price/rating claims), just flags this as the
   pinned/current release. */
.home article.sticky .post-image::before{
  content:"الأحدث";
  position:absolute;
  top:10px;
  right:-2px;
  background:var(--signal-red);
  color:#fff;
  font-family:var(--font-heading);
  font-size:11px;
  font-weight:700;
  padding:4px 14px;
  border-radius:4px 0 0 4px;
  z-index:2;
  box-shadow:-2px 2px 6px rgba(27,36,48,.25);
}
/* Real call-to-action: the cover image is already wrapped in a link
   to the book page (confirmed live) — this overlays a button-styled
   label INSIDE that same real anchor, so it's genuinely clickable,
   not a decorative fake button. */
.home article.sticky .post-image a{ display:block; position:relative; }
.home article.sticky .post-image a::after{
  content:"اقرأ المقال ←";
  position:absolute;
  bottom:0; left:0; right:0;
  background:var(--signal-red);
  color:#fff;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  text-align:center;
  padding:10px 8px;
  border-radius:0 0 var(--radius-btn) var(--radius-btn);
}
/* Each text element pinned to its own row and aligned to the row's
   start, so the extra vertical space (needed to make the text column
   match the image's height) collects in the flexible last row
   (grid-template-rows above) rather than appearing as a gap between
   the title and the excerpt. */
.home article.sticky .entry-header{ grid-row:1; grid-column:2; padding:0; align-self:start; }
.home article.sticky .entry-title{ font-size:25px; }
.home article.sticky .entry-summary{
  grid-row:2;
  grid-column:2;
  align-self:start;
  padding:0;
  -webkit-line-clamp:4;
  font-size:15.5px;
}
.home article.sticky .entry-meta{
  grid-row:3;
  grid-column:2;
  align-self:start;
  border-top:none;
  padding:8px 0 0;
  margin:0;
}
@media(max-width:820px){
  .home article.sticky .inside-article{ grid-template-columns:1fr; grid-template-rows:auto; }
  .home article.sticky .post-image,
  .home article.sticky .entry-header,
  .home article.sticky .entry-summary,
  .home article.sticky .entry-meta{ grid-row:auto; grid-column:1; }
}

/* Fixed breakpoints for the column count above (3 → 2 → 1). */
@media(max-width:900px){
  .home .site-main, .archive .site-main:not(.stl-archive), .blog .site-main{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:560px){
  .home .site-main, .archive .site-main:not(.stl-archive), .blog .site-main{
    grid-template-columns:1fr;
  }
}

/* Avoid a single card left alone on the last row. Category/tag
   archives have no hero card, so the row rhythm starts at item 1;
   the homepage's sticky hero is always item 1, shifting the rhythm
   by one for the regular cards that follow it. */
@media(min-width:901px){
  .archive .site-main:not(.stl-archive) > article:nth-child(3n+1):last-child,
  .blog .site-main > article:nth-child(3n+1):last-child{ grid-column:1/-1; }
  .home .site-main > article:nth-child(3n+2):last-child{ grid-column:1/-1; }
}
@media(min-width:561px) and (max-width:900px){
  .archive .site-main:not(.stl-archive) > article:nth-child(2n+1):last-child,
  .blog .site-main > article:nth-child(2n+1):last-child{ grid-column:1/-1; }
  .home .site-main > article:nth-child(2n+2):last-child{ grid-column:1/-1; }
}

/* ---------------------------------------------------------------------
   8. SIDEBAR / WIDGET-AREA
   --------------------------------------------------------------------- */
.sidebar.widget-area{ padding-top:0; }
.sidebar.widget-area .widget{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:18px;
  margin-bottom:var(--space-4);
}
.sidebar.widget-area .widget-title{
  font-family:var(--font-heading);
  font-size:11px;
  font-weight:700;
  color:var(--slate-light);
  letter-spacing:.3px;
  margin-bottom:var(--space-2);
}
.sidebar.widget-area .widget ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.sidebar.widget-area .widget li{
  counter-increment:toc;
  font-size:13px;
  padding:6px 0;
  color:var(--ink);
  border-bottom:1px solid var(--border);
}
.sidebar.widget-area .widget li:last-child{ border:none; }
.sidebar.widget-area .widget li::before{
  content:counter(toc)". ";
  color:var(--signal-red);
  font-weight:700;
  font-family:var(--font-mono);
  direction:ltr;
  display:inline-block;
}

/* ---------------------------------------------------------------------
   9. SMART TEMPLATES PLUGIN — real classes confirmed live
   --------------------------------------------------------------------- */
.stl-archive__header{ margin-bottom:var(--space-5); }
.stl-archive__title{ font-size:20px; }
.stl-archive__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

.stl-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;
  position:relative;
  box-shadow:0 2px 8px rgba(27,36,48,.06);
}
.stl-card__link{ color:inherit; text-decoration:none; display:block; }
.stl-card__link:hover .stl-card__title{ color:var(--template-teal); }
.stl-card__title{
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  padding:0 16px;
  margin-top:10px;
}
.stl-card__excerpt{
  font-size:13px;
  color:var(--slate);
  line-height:1.7;
  padding:0 16px;
}
.stl-card__meta{ padding:8px 16px 16px; }

.stl-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-heading);
  font-size:11px;
  font-weight:600;
  padding:3px 9px;
  border-radius:var(--radius-badge);
  background:var(--ink);
  color:#fff;
}
.stl-badge--category{
  background:var(--template-teal-bg);
  color:var(--template-teal);
}
/* Reserved for a future "tested" indicator class — not wired to any
   plugin data yet (see readme.txt "known gaps"). */
.stl-badge--tested{
  background:var(--template-teal);
  color:#fff;
}

.stl-hero{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
}
.stl-template__title{ font-family:var(--font-heading); font-size:24px; margin:10px 0 12px; }
.stl-template__excerpt{ font-size:14.5px; color:var(--slate); line-height:1.8; }

.stl-generate{
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius-card);
  padding:20px;
}
.stl-generate__title{ font-family:var(--font-heading); font-size:14px; font-weight:700; }
.stl-generate__subtitle{ color:#9AA1AC; font-size:11px; }
.stl-step__num{ color:var(--template-teal); font-family:var(--font-mono); }
.stl-tool-chip, .stl-lang-toggle{
  font-family:var(--font-heading);
  border:1px solid rgba(255,255,255,.2);
  color:#B7BDC9;
  border-radius:999px;
  font-size:11px;
  padding:6px 4px;
}
.stl-tool-chip.is-active, .stl-lang-toggle.is-active{
  background:var(--template-teal);
  border-color:var(--template-teal);
  color:#fff;
}
.stl-copy-btn{
  width:100%;
  background:var(--signal-red);
  color:#fff;
  border:none;
  border-radius:var(--radius-btn);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  padding:12px;
}
.stl-copy-btn:hover{ background:var(--signal-red-dark); }
.stl-copy-status.is-error{ color:var(--signal-red); }
.stl-prompt-box{
  background:rgba(255,255,255,.06);
  border-radius:var(--radius-btn);
}
.stl-prompt-text{ color:#B7BDC9; font-size:12.5px; }
.stl-disclaimer{ color:#9AA1AC; font-size:11px; }

.stl-compat__badge{
  background:var(--template-teal-bg);
  color:var(--template-teal);
  border-radius:var(--radius-badge);
  font-size:11px;
}
.stl-benefit__title{ font-family:var(--font-heading); color:var(--ink); font-weight:600; font-size:14px; }
.stl-benefit__desc{ color:var(--slate); font-size:13px; }
.stl-benefit__icon{ color:var(--template-teal); }

/* "What it creates / use cases / common mistakes" cards — already
   exist in the plugin; RAG-style left border only, restyled colors. */
.stl-edu-card{
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--card);
}
.stl-edu-card--red{ border-right:3px solid var(--rag-red); }
.stl-edu-card--info{ border-right:3px solid var(--template-teal); }
.stl-edu-card--green{ border-right:3px solid var(--rag-green); }

.stl-source-card{
  background:#FFF7ED;
  border:1px solid #E9D8B8;
  border-radius:var(--radius-card);
}
.stl-source-card__title{ font-family:var(--font-heading); font-size:14px; color:#4A3A18; }
.stl-source-card__details{ font-size:13px; color:#6B5423; }
.stl-book-cta{
  background:var(--signal-red);
  color:#fff;
  border-radius:var(--radius-btn);
  font-family:var(--font-heading);
  font-weight:600;
}
.stl-book-cta:hover{ background:var(--signal-red-dark); }

.stl-related{ margin-top:var(--space-6); }
.stl-related__title{ font-family:var(--font-heading); font-size:17px; font-weight:600; }
.stl-related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ---------------------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------------------- */
.site-footer, .footer-widgets{
  background:var(--ink);
  color:#fff;
}
/* Safety net so any widget content (plain text, lists, not just
   links/titles) is explicitly readable against the dark background,
   regardless of default WP/GP widget styling specificity. */
.footer-widgets p,
.footer-widgets li,
.footer-widgets span,
.footer-widgets div{ color:#fff; }
.footer-widgets .widget-title{
  font-family:var(--font-heading);
  font-size:12px;
  color:#F3C6C1;
  font-weight:700;
}
.site-footer .footer-widgets a,
.footer-widgets a{ color:#fff !important; opacity:.9; text-decoration:none; }
.site-footer .footer-widgets a:hover,
.footer-widgets a:hover{ opacity:1; color:#F3C6C1 !important; text-decoration:underline; }
.site-info{
  background:var(--ink);
  color:rgba(255,255,255,.75);
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.15);
}
.site-info a{ color:rgba(255,255,255,.9); }
.site-info a:hover{ color:#F3C6C1; }

/* ---------------------------------------------------------------------
   11. UTILITY / EMPTY & ERROR STATES
   --------------------------------------------------------------------- */
.idara-state-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:48px 24px;
  text-align:center;
  max-width:440px;
  margin:40px auto;
}
.idara-state-box h2{ font-family:var(--font-heading); font-size:18px; margin:0 0 8px; }
.idara-state-box p{ font-size:13.5px; color:var(--slate); }
.idara-error-line{ font-size:12.5px; color:var(--signal-red); margin-top:8px; }

/* ---------------------------------------------------------------------
   12. MOBILE
   --------------------------------------------------------------------- */
@media(max-width:820px){
  .stl-archive__grid, .stl-related__grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  h1.entry-title{ font-size:21px; }
  .entry-content p, .entry-content li{ font-size:15px; }
  .idara-breadcrumbs{ font-size:11.5px; }
}
@media(max-width:560px){
  .stl-archive__grid, .stl-related__grid{ grid-template-columns:1fr; }
  .stl-generate{ padding:14px; }
}