/*
Theme Name:   GeneratePress Child — IndieDev
Description:  Ports the IndieDev AI Tools React design system onto GeneratePress. Nothing in the parent theme is modified.
Author:       IndieDev AI Tools
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  generatepress-child
*/

/* =====================================================================
   1 · TOKENS
   ===================================================================== */

:root{
  /* --- React @theme palette (src/index.css) --- */
  --idt-bg:#f8f9ff;
  --idt-on-surface:#0b1c30;
  --idt-on-surface-variant:#45464d;
  --idt-lowest:#ffffff;
  --idt-low:#eff4ff;
  --idt-container:#e5eeff;
  --idt-high:#dce9ff;            /* the universal border colour */
  --idt-highest:#d3e4fe;
  --idt-secondary:#0051d5;       /* the accent */
  --idt-on-secondary:#ffffff;
  --idt-fixed:#dbe1ff;
  --idt-outline:#76777d;
  --idt-outline-variant:#c6c6cd;
  --idt-error:#ba1a1a;

  /* --- non-token colours the React components use literally --- */
  --idt-emerald:#059669;
  --idt-emerald-bright:#10b981;
  --idt-emerald-soft:#ecfdf5;
  --idt-emerald-text:#047857;
  --idt-indigo:#6366f1;
  --idt-slate-900:#0f172a;
  --idt-slate-800:#1e293b;
  --idt-slate-700:#334155;

  --idt-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --idt-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --idt-container-w:1280px;
  --idt-gutter:16px;

  --idt-radius:4px;
  --idt-radius-md:6px;
  --idt-radius-lg:8px;
  --idt-radius-xl:12px;
  --idt-radius-2xl:16px;

  --idt-shadow-xs:0 1px 2px 0 rgb(0 0 0/.05);
  --idt-shadow-sm:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
  --idt-shadow-md:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);

  --idt-ease:cubic-bezier(.4,0,.2,1);
  --idt-t:180ms var(--idt-ease);

  /* --- re-point GeneratePress's own palette ---
     GP resolves these at use-time via var(), so overriding them here
     recolours its nav, links, buttons, inputs and submenus in one go.
     Same :root specificity as GP's inline sheet, but this sheet is
     enqueued later (priority 100) so it wins.

     --base/-2/-3 are white on purpose: GP uses --base for both the
     submenu background AND input borders. React's #dce9ff input border
     is set explicitly further down instead. */
  --contrast:#0b1c30;
  --contrast-2:#45464d;
  --contrast-3:#76777d;
  --base:#ffffff;
  --base-2:#ffffff;
  --base-3:#ffffff;
  --accent:#0051d5;
}

@media (min-width:640px){ :root{ --idt-gutter:24px; } }
@media (min-width:1024px){ :root{ --idt-gutter:32px; } }

/* =====================================================================
   2 · BASE
   ===================================================================== */

body{
  background:var(--idt-bg);
  color:var(--idt-on-surface);
  font-family:var(--idt-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{
  background:rgb(0 81 213/.2);
  color:var(--idt-secondary);
}

/* Copied from src/index.css:120-136. Deliberately NOT taken from the CSS
   Google returns for the icon font — that copy sets font-size:24px. */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  font-size:20px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'liga';
}

@keyframes idt-pulse{ 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes idt-fade-in{ from{opacity:0} to{opacity:1} }
@keyframes idt-slide-up{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* =====================================================================
   3 · GENERATEPRESS CHROME
   ===================================================================== */

.grid-container{
  max-width:var(--idt-container-w);
  padding-inline:var(--idt-gutter);
}

/* GP gives .inside-header and .inside-navigation the container class too;
   without this the nav picks up a second gutter and drifts out of line. */
.inside-header .inside-navigation{
  max-width:none;
  padding-inline:0;
}

.inside-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:4rem;
  padding-block:0;
}

/* ---------- sticky header shell ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgb(255 255 255/.9);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--idt-high);
}
body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){
  body.admin-bar .site-header{ top:46px; }
}
/* Solid fallback where backdrop-filter is unsupported. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{ background:rgb(255 255 255/.97); }
}

/* ---------- navigation ---------- */
.main-navigation .main-nav ul li a{
  padding:6px 12px;
  border-radius:var(--idt-radius-md);
  font-size:.875rem;
  font-weight:500;
  color:var(--idt-on-surface-variant);
  transition:color var(--idt-t),background-color var(--idt-t);
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a{
  color:var(--idt-on-surface);
  background:rgb(239 244 255/.6);
}
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a{
  color:var(--idt-secondary);
  background:var(--idt-low);
  font-weight:600;
  box-shadow:var(--idt-shadow-xs);
}
.main-navigation ul ul{
  background:var(--idt-lowest);
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-lg);
  box-shadow:var(--idt-shadow-md);
  overflow:hidden;
}
.main-navigation .menu-toggle{
  padding:8px 12px;
  line-height:1;
  color:var(--idt-on-surface-variant);
  border-radius:var(--idt-radius-md);
}
.main-navigation .menu-toggle:hover{ color:var(--idt-on-surface); }

/* ---------- content shell ---------- */
.site-content{ padding-block:2.5rem; }
@media (min-width:1024px){ .site-content{ padding-block:4rem; } }

/* GP's boxed white article containers are the single biggest departure
   from the React look. Strip them everywhere. */
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation{
  background:none;
  padding:0;
  box-shadow:none;
}

.site-main > *{ margin-bottom:1.5rem; }

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=search],input[type=url],
input[type=password],input[type=number],textarea,select{
  background:var(--idt-lowest);
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-lg);
  color:var(--idt-on-surface);
  font-family:var(--idt-mono);
  font-size:.875rem;
  padding:10px 14px;
  transition:border-color var(--idt-t),box-shadow var(--idt-t);
}
input[type=text]:focus,input[type=email]:focus,input[type=search]:focus,
textarea:focus,select:focus{
  outline:none;
  border-color:var(--idt-secondary);
  box-shadow:0 0 0 2px rgb(0 81 213/.5);
}
::placeholder{ color:rgb(69 70 77/.6); }

/* =====================================================================
   4 · HEADER BRAND + ACTIONS
   ===================================================================== */

.site-branding.idt-brand{ display:flex; align-items:center; min-width:0; }

.idt-brand__link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width:0;
}

.idt-brand__tile{
  flex:none;
  width:40px;
  height:40px;
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-lg);
  background:var(--idt-lowest);
  transition:border-color var(--idt-t);
}
.idt-brand__tile img{ width:100%; height:100%; object-fit:contain; display:block; }
.idt-brand__link:hover .idt-brand__tile,
.idt-footer__lockup:hover .idt-brand__tile{ border-color:var(--idt-secondary); }

.idt-brand__tile--sm{ width:36px; height:36px; }

.idt-brand__text{ display:flex; flex-direction:column; min-width:0; }

.main-title.idt-brand__name{
  margin:0;
  font-size:1.125rem;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.2;
  color:var(--idt-on-surface);
  transition:color var(--idt-t);
}
.idt-brand__link:hover .idt-brand__name{ color:var(--idt-secondary); }

.idt-brand__tagline{
  font-family:var(--idt-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--idt-secondary);
}
@media (max-width:639px){ .idt-brand__tagline{ display:none; } }

.idt-header-actions{ display:flex; align-items:center; gap:8px; }

.idt-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:var(--idt-radius-lg);
  color:var(--idt-on-surface-variant);
  text-decoration:none;
  transition:color var(--idt-t),background-color var(--idt-t);
}
.idt-btn-icon:hover{ color:var(--idt-secondary); background:var(--idt-low); }
.idt-btn-icon .material-symbols-outlined{ font-size:18px; }

.idt-header-avatar{ position:relative; display:inline-flex; margin-left:4px; }
.idt-header-avatar img{
  width:32px; height:32px;
  border-radius:9999px;
  object-fit:cover;
  border:1px solid var(--idt-secondary);
  transition:transform 200ms var(--idt-ease);
}
.idt-header-avatar:hover img{ transform:scale(1.05); }
.idt-status-dot{
  position:absolute; bottom:0; right:0;
  width:10px; height:10px;
  border-radius:9999px;
  background:var(--idt-emerald-bright);
  border:2px solid var(--idt-lowest);
  animation:idt-pulse 2s var(--idt-ease) infinite;
}

@media (max-width:767px){
  .idt-header-actions{ display:none; }
}

/* =====================================================================
   5 · FOOTER
   ===================================================================== */

.site-footer{
  margin-top:4rem;
  background:var(--idt-low);
  border-top:1px solid var(--idt-high);
}
@media (min-width:640px){ .site-footer{ margin-top:6rem; } }

.idt-footer{
  max-width:var(--idt-container-w);
  margin-inline:auto;
  padding:3rem var(--idt-gutter);
}
@media (min-width:1024px){ .idt-footer{ padding-block:4rem; } }

.idt-footer__grid{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:768px){
  .idt-footer__grid{ grid-template-columns:repeat(12,1fr); gap:2rem 3rem; }
  .idt-footer__brand{ grid-column:span 5; }
  .idt-footer__index{ grid-column:span 3; }
  .idt-footer__subscribe{ grid-column:span 4; }
}

.idt-footer__lockup{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  margin-bottom:1rem;
}
.idt-footer__name{
  font-size:1.125rem;
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--idt-on-surface);
  transition:color var(--idt-t);
}
.idt-footer__lockup:hover .idt-footer__name{ color:var(--idt-secondary); }

.idt-footer__copy{
  margin:0 0 1rem;
  max-width:24rem;
  font-size:.875rem;
  line-height:1.625;
  color:var(--idt-on-surface-variant);
}

.idt-footer__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:var(--idt-radius);
  background:var(--idt-container);
  border:1px solid var(--idt-high);
  font-family:var(--idt-mono);
  font-size:11px;
  font-weight:500;
  color:var(--idt-secondary);
}
.idt-footer__badge .material-symbols-outlined{ font-size:14px; }

.idt-footer__heading{
  margin:0 0 12px;
  font-family:var(--idt-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--idt-on-surface);
}

.idt-footer__links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.875rem;
}
.idt-footer__links li{ margin:0; }
.idt-footer__links a{
  color:var(--idt-on-surface-variant);
  text-decoration:none;
  transition:color var(--idt-t);
}
.idt-footer__links a:hover{ color:var(--idt-secondary); }
.idt-footer__rss{ display:inline-flex; align-items:center; gap:4px; }
.idt-footer__rss .material-symbols-outlined{ font-size:14px; }
.idt-footer__links--extra{ margin-top:8px; }

/* ---------- legal bar ---------- */
.site-info{
  background:transparent;
  border-top:1px solid var(--idt-high);
  font-size:.75rem;
  color:var(--idt-on-surface-variant);
}
.site-info .inside-site-info{
  display:block;
  max-width:var(--idt-container-w);
  margin-inline:auto;
  padding:2rem var(--idt-gutter);
  text-align:left;
}
.idt-legal{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
  font-size:.75rem;
  color:var(--idt-on-surface-variant);
}
@media (min-width:768px){
  .idt-legal{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
  }
}
.idt-legal__left{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem 1.5rem;
}
@media (min-width:768px){ .idt-legal__left{ justify-content:flex-start; } }
.idt-legal__sep{ color:var(--idt-high); }
.idt-legal__ethics{ color:var(--idt-emerald-text); font-weight:500; }
.idt-legal__right{
  display:flex;
  align-items:center;
  gap:1rem;
  font-family:var(--idt-mono);
  font-size:11px;
}
.idt-legal__right a{
  color:var(--idt-on-surface-variant);
  text-decoration:none;
  transition:color var(--idt-t);
}
.idt-legal__right a:hover{ color:var(--idt-secondary); }

/* =====================================================================
   6 · SUBSCRIBE COMPONENT (shared: hero / footer / articles banner)
   ===================================================================== */

.idt-subscribe{ display:flex; gap:8px; margin:0; }
.idt-subscribe__input{ flex:1 1 auto; min-width:0; }
.idt-subscribe__btn{
  flex:none;
  padding:10px 20px;
  border:0;
  border-radius:var(--idt-radius-lg);
  background:var(--idt-secondary);
  color:var(--idt-on-secondary);
  font-family:var(--idt-font);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--idt-t);
}
.idt-subscribe__btn:hover{ background:rgb(0 81 213/.9); }
.idt-subscribe__ok{
  display:flex;
  align-items:center;
  gap:6px;
  margin:8px 0 0;
  font-family:var(--idt-mono);
  font-size:.75rem;
  color:var(--idt-emerald);
}
.idt-subscribe__ok .material-symbols-outlined{ font-size:14px; }

/* Honeypot — off-screen rather than display:none, since some bots skip
   fields that are not rendered. */
.idt-subscribe__hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

/* =====================================================================
   7 · HOME — idt-* components
   ===================================================================== */

/* WP 7.x still wraps every group block's children in this div, and GP
   prints `padding:40px` plus a max-width on it. Left alone, the hero and
   every card double-pad. This rule is mandatory, not cosmetic. */
.idt-hero > .wp-block-group__inner-container,
.idt-latest > .wp-block-group__inner-container,
.idt-section-head > .wp-block-group__inner-container,
.idt-post-item > .wp-block-group__inner-container,
.idt-post-body > .wp-block-group__inner-container,
.idt-post-meta > .wp-block-group__inner-container{
  max-width:none;
  margin:0;
  padding:0;
}

/* ---------- hero ---------- */
.idt-hero{
  position:relative;
  margin:0 0 3rem;
  padding:3rem;
  background-color:var(--idt-low);
  /* React layers a #0051d5 dot grid at opacity .03 over #eff4ff, which
     resolves to exactly rgb(232,239,254). Precomputed here so no extra
     element, blend mode or opacity wrapper is needed. */
  background-image:radial-gradient(rgb(232 239 254) 1px,transparent 1px);
  background-size:16px 16px;
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-2xl);
  overflow:hidden;
}
@media (max-width:639px){ .idt-hero{ padding:1.5rem; } }

.idt-hero h1{
  margin:0 0 1.5rem;
  max-width:48rem;
  font-size:clamp(1.875rem,4vw,3rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.025em;
  color:var(--idt-on-surface);
}
.idt-hero > .wp-block-group__inner-container > p,
.idt-hero p{
  margin:0 0 1.5rem;
  max-width:48rem;
  font-size:1rem;
  line-height:1.625;
  color:var(--idt-on-surface-variant);
}
@media (min-width:640px){
  .idt-hero p{ font-size:1.125rem; }
}

.idt-hero .wp-block-buttons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0 0 2rem;
}

/* ---------- buttons ---------- */
.wp-block-button__link{
  font-family:var(--idt-font);
}
/* GP's inline sheet paints any button without a background class grey
   (#55555e / hover #3f4047). Without this, buttons outside the idt-*
   variants look broken. */
.wp-block-button__link:not(.has-background){
  background-color:var(--idt-secondary);
  color:var(--idt-on-secondary);
}
.wp-block-button__link:not(.has-background):hover{
  background-color:rgb(0 81 213/.9);
  color:var(--idt-on-secondary);
}

.idt-btn-primary .wp-block-button__link{
  padding:10px 26px;
  border:1px solid var(--idt-secondary);
  border-radius:var(--idt-radius-lg);
  background:var(--idt-secondary);
  color:var(--idt-on-secondary);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color var(--idt-t),border-color var(--idt-t);
}
.idt-btn-primary .wp-block-button__link:hover{
  background:rgb(0 81 213/.9);
  border-color:rgb(0 81 213/.9);
  color:var(--idt-on-secondary);
}

/* Named "ghost" in the page markup, but React has no true transparent
   button — the secondary style is a bordered one. Rendered as outline. */
.idt-btn-ghost .wp-block-button__link{
  padding:10px 26px;
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-lg);
  background:var(--idt-lowest);
  color:var(--idt-on-surface);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color var(--idt-t),color var(--idt-t);
}
.idt-btn-ghost .wp-block-button__link:hover{
  background:var(--idt-lowest);
  border-color:var(--idt-secondary);
  color:var(--idt-secondary);
}

/* ---------- hero extras (search + subscribe + metrics) ---------- */
.idt-hero__actions{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:0 0 1.5rem;
}
@media (min-width:768px){
  .idt-hero__actions{ grid-template-columns:1fr 1fr; }
}

.idt-hero__search{ position:relative; display:flex; margin:0; }
.idt-hero__search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--idt-on-surface-variant);
  font-size:18px;
}
.idt-hero__search input[type=search]{
  width:100%;
  padding-left:42px;
}

.idt-metrics{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 2rem;
  padding-top:1rem;
  border-top:1px solid var(--idt-container);
  font-family:var(--idt-mono);
  font-size:.75rem;
  color:var(--idt-on-surface-variant);
}
.idt-metric{ display:inline-flex; align-items:center; gap:8px; }
.idt-metric strong{ color:var(--idt-on-surface); font-weight:600; }
.idt-metric__dot{
  width:8px; height:8px;
  border-radius:9999px;
  flex:none;
}
.idt-metric__dot--emerald{ background:var(--idt-emerald-bright); }
.idt-metric__dot--accent{ background:var(--idt-secondary); }
.idt-metric__dot--indigo{ background:var(--idt-indigo); }

/* ---------- latest section ---------- */
.idt-latest{ margin:0; }
.idt-section-head{ margin-bottom:1.5rem; }
.idt-section-head > .wp-block-group__inner-container{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--idt-high);
}
.idt-label{
  margin:0;
  font-family:var(--idt-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--idt-on-surface);
}
.idt-more{ margin:0; font-size:.875rem; }
.idt-more a{
  color:var(--idt-secondary);
  text-decoration:none;
  transition:color var(--idt-t);
}
.idt-more a:hover{ color:rgb(0 81 213/.8); }

/* ---------- post list → cards ---------- */
.wp-block-post-template{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.5rem;
}
.wp-block-post-template li{ margin:0; padding:0; }

.idt-post-item{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  align-items:start;
  margin:0;
  padding:1.5rem;
  background:var(--idt-lowest);
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-xl);
  transition:border-color var(--idt-t),box-shadow var(--idt-t);
}
.idt-post-item:hover{
  border-color:rgb(0 81 213/.6);
  box-shadow:var(--idt-shadow-sm);
}

/* The featured image is first in the DOM, so auto-placement would put it
   top-left. Pin it to column 2 explicitly. */
@media (min-width:640px){
  .idt-post-item{
    grid-template-columns:2fr 1fr;
  }
  .idt-post-item > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:1.25rem;
    align-items:start;
  }
  .idt-post-item .wp-block-post-featured-image{
    grid-column:2;
    grid-row:1;
    margin:0;
  }
  .idt-post-item .idt-post-body{
    grid-column:1;
    grid-row:1;
  }
}

.idt-post-item .wp-block-post-featured-image{
  aspect-ratio:16/10;
  border-radius:var(--idt-radius-lg);
  overflow:hidden;
  border:1px solid var(--idt-container);
  background:var(--idt-low);
  margin:0;
}
.idt-post-item .wp-block-post-featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 300ms var(--idt-ease);
}
.idt-post-item:hover .wp-block-post-featured-image img{ transform:scale(1.03); }
.idt-post-item .wp-block-post-featured-image:empty{ display:none; }
.idt-post-item:has(.wp-block-post-featured-image:empty){ grid-template-columns:1fr; }

.idt-post-body{ margin:0; min-width:0; }

.idt-post-item .wp-block-post-title{
  margin:0 0 .5rem;
  font-size:1.125rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
}
@media (min-width:640px){
  .idt-post-item .wp-block-post-title{ font-size:1.25rem; }
}
.idt-post-item .wp-block-post-title a{
  color:var(--idt-on-surface);
  text-decoration:none;
  transition:color var(--idt-t);
}
.idt-post-item:hover .wp-block-post-title a{ color:var(--idt-secondary); }

.idt-post-item .wp-block-post-excerpt{ margin:0 0 .75rem; }
.idt-post-item .wp-block-post-excerpt__excerpt{
  margin:0;
  font-size:.875rem;
  line-height:1.625;
  color:var(--idt-on-surface-variant);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.idt-post-item .wp-block-post-excerpt__more-link{ display:none; }

.idt-post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:0;
  font-family:var(--idt-mono);
  font-size:.75rem;
  color:var(--idt-on-surface-variant);
}
.idt-post-meta .wp-block-post-date,
.idt-post-meta .wp-block-post-terms{ margin:0; font-size:.75rem; }
.idt-post-meta .wp-block-post-date time{ font-variant-numeric:tabular-nums; }
.idt-post-meta .wp-block-post-terms a{
  padding:2px 8px;
  border-radius:var(--idt-radius);
  background:var(--idt-container);
  color:var(--idt-secondary);
  font-weight:600;
  text-decoration:none;
  transition:background-color var(--idt-t);
}
.idt-post-meta .wp-block-post-terms a:hover{ background:var(--idt-fixed); }
/* Separator lives on the gap, not as a ::before on the terms — otherwise a
   post with no category renders a dangling bullet. */
.idt-post-meta .wp-block-post-date::after{
  content:"•";
  margin-left:.5rem;
  color:var(--idt-outline-variant);
}
.idt-post-meta:not(:has(.wp-block-post-terms)) .wp-block-post-date::after,
.idt-post-meta:has(.wp-block-post-terms:empty) .wp-block-post-date::after{
  content:none;
}

/* =====================================================================
   8 · POSTS INDEX (/articles/) — card grid
   ===================================================================== */

.idt-index-header{ margin-bottom:2rem; }

.idt-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:1rem;
  padding:4px 12px;
  border-radius:var(--idt-radius);
  background:var(--idt-fixed);
  color:var(--idt-secondary);
  font-family:var(--idt-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.idt-eyebrow .material-symbols-outlined{ font-size:14px; }

.page-title.idt-index-title,
.entry-title{
  margin:0 0 .75rem;
  font-size:clamp(1.875rem,3vw,2.25rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.025em;
  color:var(--idt-on-surface);
}
.entry-title a{
  color:inherit;
  text-decoration:none;
  transition:color var(--idt-t);
}
.entry-title a:hover{ color:var(--idt-secondary); }

.idt-index-lead{
  margin:0;
  max-width:42rem;
  font-size:1rem;
  line-height:1.625;
  color:var(--idt-on-surface-variant);
}

/* The injected header and the pagination are grid children too — pin them
   to full width so they do not become cards. */
.blog .site-main,
.archive .site-main{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  align-items:start;
}
@media (min-width:768px){
  .blog .site-main,
  .archive .site-main{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .blog .site-main,
  .archive .site-main{ grid-template-columns:repeat(3,1fr); }
}
.blog .site-main > .page-header,
.blog .site-main > .paging-navigation,
.blog .site-main > .no-results,
.archive .site-main > .page-header,
.archive .site-main > .paging-navigation,
.archive .site-main > .no-results{
  grid-column:1 / -1;
}

.blog .site-main > article,
.archive .site-main > article{ margin-bottom:0; min-width:0; }

.blog .inside-article,
.archive .inside-article{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0;
  background:var(--idt-lowest);
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-xl);
  box-shadow:var(--idt-shadow-xs);
  overflow:hidden;
  transition:border-color var(--idt-t),box-shadow var(--idt-t);
}
.blog .inside-article:hover,
.archive .inside-article:hover{
  border-color:var(--idt-secondary);
  box-shadow:var(--idt-shadow-md);
}

/* Image on top without moving it in the DOM. */
.idt-card-media{ order:1; margin:0; border-bottom:1px solid var(--idt-container); }
.idt-card-media a{ display:block; }
.idt-card-media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  transition:transform 300ms var(--idt-ease);
}
.blog .inside-article:hover .idt-card-media img{ transform:scale(1.03); }

.blog .entry-header,
.archive .entry-header{ order:2; padding:1.25rem 1.25rem 0; }
.blog .entry-summary,
.archive .entry-summary{ order:3; padding:.5rem 1.25rem 0; flex:1 1 auto; }
.blog .inside-article > footer.entry-meta,
.archive .inside-article > footer.entry-meta{ order:4; padding:0 1.25rem 1.25rem; }
.blog .inside-article > .entry-content{ order:3; padding:.5rem 1.25rem 1.25rem; }

.blog .entry-header .entry-meta,
.archive .entry-header .entry-meta{
  margin-top:.5rem;
  font-family:var(--idt-mono);
  font-size:.6875rem;
  color:var(--idt-on-surface-variant);
}
.blog .entry-summary p,
.archive .entry-summary p{
  margin:0;
  font-size:.8125rem;
  line-height:1.625;
  color:var(--idt-on-surface-variant);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog footer.entry-meta,
.archive footer.entry-meta{
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px solid var(--idt-container);
  font-family:var(--idt-mono);
  font-size:.6875rem;
}
.blog footer.entry-meta a,
.archive footer.entry-meta a{
  color:var(--idt-on-surface-variant);
  text-decoration:none;
}
.blog footer.entry-meta a:hover,
.archive footer.entry-meta a:hover{ color:var(--idt-secondary); }

/* ---------- pagination ---------- */
.paging-navigation{ border-top:1px solid var(--idt-container); padding-top:1.5rem; }
.paging-navigation .nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--idt-mono);
  font-size:.75rem;
}
.paging-navigation .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 10px;
  border-radius:var(--idt-radius);
  background:var(--idt-container);
  color:var(--idt-on-surface);
  text-decoration:none;
  transition:background-color var(--idt-t);
}
.paging-navigation .page-numbers:hover{ background:var(--idt-high); }
.paging-navigation .page-numbers.current{
  background:var(--idt-secondary);
  color:var(--idt-on-secondary);
}

/* ---------------------------------------------------------------------
   Sidebars
   ---------------------------------------------------------------------
   Layout comes from GeneratePress settings, not from here:
     /articles/  → blog_layout_setting   = no-sidebar  (full-width card grid)
     single post → single_layout_setting = right-sidebar
     homepage    → an in-content sidebar, see the .idt-latest grid below

   Widgets are carded so GP's built-ins and the homepage stack read as one
   family.
   ------------------------------------------------------------------------- */

.widget-area.sidebar{ padding:0; }
.widget-area.sidebar .inside-right-sidebar,
.widget-area.sidebar .inside-left-sidebar{ padding:0; }

.widget-area.sidebar .widget{
  margin:0 0 1.5rem;
  padding:1.5rem;
  background:var(--idt-lowest);
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-xl);
}
.widget-area.sidebar .widget:last-child{ margin-bottom:0; }

.widget-area.sidebar .widget-title,
.widget-area.sidebar > .widget h2,
.widget-area.sidebar > .widget h3{
  margin:0 0 1rem;
  font-family:var(--idt-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--idt-on-surface);
}

.widget-area.sidebar ul,
.widget-area.sidebar ol{ list-style:none; margin:0; padding:0; }
.widget-area.sidebar li{
  margin:0;
  padding:.5rem 0;
  border-bottom:1px solid var(--idt-container);
  font-size:.875rem;
  line-height:1.6;
  color:var(--idt-on-surface-variant);
}
.widget-area.sidebar li:last-child{ border-bottom:0; padding-bottom:0; }
.widget-area.sidebar a{
  color:var(--idt-on-surface-variant);
  text-decoration:none;
  transition:color var(--idt-t);
}
.widget-area.sidebar a:hover{ color:var(--idt-secondary); }
.widget-area.sidebar time{
  display:block;
  margin-top:2px;
  font-size:.75rem;
  color:var(--idt-outline);
}

/* The visible heading already says "Search", so keep the label for screen
   readers only. */
.widget-area.sidebar .wp-block-search__label{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.widget-area.sidebar .wp-block-search__inside-wrapper{ display:flex; gap:8px; }
.widget-area.sidebar .wp-block-search__input{ flex:1 1 auto; min-width:0; }
.widget-area.sidebar .wp-block-search__button{
  flex:none;
  padding:10px 16px;
  border:0;
  border-radius:var(--idt-radius-lg);
  background:var(--idt-secondary);
  color:var(--idt-on-secondary);
  font-family:var(--idt-font);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color var(--idt-t);
}
.widget-area.sidebar .wp-block-search__button:hover{ background:rgb(0 81 213/.9); }

/* =====================================================================
   8b · HOMEPAGE SIDEBAR
   React splits only the LOWER section of its homepage: the hero and the
   pinned card stay full width, and the article stream shares a 2:1 grid
   with the widget column. GeneratePress's own sidebar would squeeze the
   hero too, so the split is done here as an in-content grid instead —
   .idt-latest holds section-head + query (column 1) and the widget stack
   (column 2, spanning both rows).
   ===================================================================== */

@media (min-width:1024px){
  .idt-latest{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    column-gap:2.5rem;
    row-gap:0;
    align-items:start;
  }
  .idt-latest > .idt-section-head { grid-column:1; grid-row:1; }
  .idt-latest > .wp-block-query   { grid-column:1; grid-row:2; }
  .idt-latest > .idt-home-sidebar { grid-column:2; grid-row:1 / span 2; }
}

.idt-widgets{ display:grid; gap:1.5rem; }

.idt-widget{
  padding:1.5rem;
  background:var(--idt-lowest);
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius-xl);
}

/* Two classes deep so this outranks `.entry-content h2`, which would
   otherwise blow the widget headings up to 1.5rem. */
.idt-widget > .idt-widget__title{
  margin:0 0 1rem;
  font-family:var(--idt-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--idt-on-surface);
}

.idt-widget__author{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:.75rem; }
.idt-widget__avatar{
  flex:none;
  width:64px; height:64px;
  border-radius:var(--idt-radius-xl);
  object-fit:cover;
  border:1px solid var(--idt-secondary);
}
.idt-widget__ident{ min-width:0; }
.idt-widget__name{
  margin:0;
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
  color:var(--idt-on-surface);
}
.idt-widget__role{
  margin:2px 0 0;
  font-family:var(--idt-mono);
  font-size:.75rem;
  font-weight:500;
  color:var(--idt-secondary);
}
.idt-widget__bio{
  margin:0 0 1rem;
  font-size:.8125rem;
  line-height:1.625;
  color:var(--idt-on-surface-variant);
}
.idt-widget__cta{
  display:block;
  padding:8px 12px;
  border:1px solid var(--idt-high);
  border-radius:var(--idt-radius);
  background:var(--idt-low);
  color:var(--idt-on-surface);
  font-family:var(--idt-mono);
  font-size:.75rem;
  text-align:center;
  text-decoration:none;
  transition:background-color var(--idt-t),color var(--idt-t);
}
.idt-widget__cta:hover{ background:var(--idt-container); color:var(--idt-on-surface); }

.idt-widget__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.idt-widget__tag{
  padding:4px 10px;
  border-radius:var(--idt-radius);
  background:var(--idt-low);
  color:var(--idt-on-surface-variant);
  font-family:var(--idt-mono);
  font-size:.75rem;
  text-decoration:none;
  transition:color var(--idt-t),background-color var(--idt-t);
}
.idt-widget__tag:hover{ color:var(--idt-secondary); background:var(--idt-fixed); }
.idt-widget__empty{ font-size:.8125rem; color:var(--idt-outline); }

/* ---------- dark dispatch box ---------- */
.idt-widget--dark{
  background:var(--idt-slate-900);
  border-color:var(--idt-slate-900);
}
.idt-widget--dark > .idt-widget__title{ color:#fff; }
.idt-widget--dark .idt-widget__bio{ color:var(--idt-slate-300); }
.idt-widget--dark .idt-subscribe{ flex-direction:column; }
.idt-widget--dark .idt-subscribe__input{
  background:var(--idt-slate-800);
  border-color:var(--idt-slate-700);
  color:#fff;
}
.idt-widget--dark .idt-subscribe__input::placeholder{ color:var(--idt-slate-400); }
.idt-widget--dark .idt-subscribe__input:focus{
  border-color:#3b82f6;
  box-shadow:none;
}
.idt-widget--dark .idt-subscribe__btn{ width:100%; }
.idt-widget--dark .idt-subscribe__ok{ color:#34d399; }

/* =====================================================================
   9 · CONTENT (About, Contact, single posts)
   ===================================================================== */

.entry-content{
  font-family:var(--idt-font);
  font-size:1rem;
  line-height:1.625;
  color:var(--idt-on-surface-variant);
}
.entry-content > *{ max-width:46rem; }
.entry-content p{ margin:0 0 1.25rem; }
.entry-content h2{
  margin:2.5rem 0 1rem;
  font-size:1.5rem;
  font-weight:700;
  line-height:2rem;
  letter-spacing:-.015em;
  color:var(--idt-on-surface);
}
.entry-content h3{
  margin:2rem 0 .75rem;
  font-size:1.125rem;
  font-weight:600;
  color:var(--idt-on-surface);
}
.entry-content strong{ font-weight:600; color:var(--idt-on-surface); }
.entry-content a{
  color:var(--idt-secondary);
  text-decoration:none;
  text-underline-offset:2px;
}
.entry-content a:hover{ text-decoration:underline; }
.entry-content ul,
.entry-content ol{ margin:0 0 1.25rem; padding-left:1.25rem; }
.entry-content li{ margin-bottom:.5rem; }
.entry-content li::marker{ color:var(--idt-outline-variant); }
.entry-content blockquote{
  margin:1.5rem 0;
  padding:.25rem 0 .25rem 1rem;
  border-left:2px solid var(--idt-secondary);
  background:rgb(239 244 255/.4);
  border-radius:0 var(--idt-radius) var(--idt-radius) 0;
  font-style:italic;
  color:var(--idt-on-surface-variant);
}
.entry-content code{
  padding:2px 6px;
  border-radius:var(--idt-radius);
  background:var(--idt-container);
  font-family:var(--idt-mono);
  font-size:.875rem;
  color:var(--idt-on-surface);
}
.entry-content pre{
  padding:1rem;
  border-radius:var(--idt-radius-lg);
  background:var(--idt-slate-900);
  color:#f1f5f9;
  font-family:var(--idt-mono);
  font-size:.8125rem;
  line-height:1.625;
  overflow-x:auto;
}
.entry-content pre code{ background:none; padding:0; color:inherit; }
.entry-content img{ border-radius:var(--idt-radius-lg); height:auto; }
.entry-content table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.entry-content th,
.entry-content td{
  padding:.625rem .75rem;
  border:1px solid var(--idt-high);
  text-align:left;
}
.entry-content th{ background:var(--idt-low); font-weight:600; color:var(--idt-on-surface); }

/* GP's `underline_links` is set to "never"; restore underlines inside
   running text where they aid scanning, but not on buttons or cards. */
.entry-content p a,
.entry-content li a{ text-decoration:underline; }

.page .entry-header{
  margin-bottom:2rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--idt-container);
}

/* =====================================================================
   10 · UTILITIES
   ===================================================================== */

.idt-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}