/* =====================================================================
   IndieDev AI Tools — homepage styling
   Loaded by the mu-plugin idt-homepage.php. Safe from theme updates.
   Last updated: 2026-09-23

   Layout model:
     .grid-container = 808px wide with 24px side padding -> 760px content
   ===================================================================== */

/* ---------- 1. design tokens (also re-point GeneratePress's palette) ---------- */
:root{
  --idt-bg:#fefefe;
  --idt-fg:#171717;
  --idt-muted:#6b6b6b;
  --idt-faint:#a3a3a3;
  --idt-border:#e8e6e3;
  --idt-accent:#0d6e64;

  /* GeneratePress reads these; overriding them recolours the whole theme
     (nav, links, buttons) so nothing falls back to the default blue */
  --contrast:#171717;
  --contrast-2:#6b6b6b;
  --contrast-3:#a3a3a3;
  --base:#f0efed;
  --base-2:#fefefe;
  --base-3:#fefefe;
  --accent:#0d6e64;
}

/* ---------- 2. base ---------- */
body{
  background:var(--idt-bg);
  color:var(--idt-fg);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* links inside article bodies stay underlined for readability */
.entry-content a{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- 3. homepage shell ---------- */
.home .site-content{ padding:0; }
.home .inside-article{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.home .entry-content{ margin:0; }
.home .site-main{ padding:0; }

/* WordPress injects an inner wrapper around group blocks and GP adds
   max-width + 40px padding to it, which would double up our container.
   Neutralise it so each section controls its own spacing. */
.home .wp-block-group__inner-container{
  max-width:none;
  width:auto;
  margin-left:0;
  margin-right:0;
  padding:0;
}

.home .is-right-sidebar,
.home .is-left-sidebar{ display:none; }

/* ---------- 4. hero ---------- */
.home .idt-hero{ padding:88px 0 68px; margin:0; }

.home .idt-hero h1{
  margin:0 0 22px;
  font-size:clamp(1.875rem, 4.6vw, 2.375rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.022em;
  color:var(--idt-fg);
}
.home .idt-hero p{
  margin:0;
  max-width:36em;
  font-size:1.0625rem;
  line-height:1.8;
  color:var(--idt-muted);
}
.home .idt-hero .wp-block-buttons{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
  flex-wrap:wrap;
}

.home .idt-btn-primary .wp-block-button__link{
  padding:11px 26px;
  border-radius:999px;
  background:var(--idt-fg);
  color:#fff;
  font-size:.9375rem;
  line-height:1.5;
  border:1px solid var(--idt-fg);
  text-decoration:none;
  transition:opacity .18s ease;
}
.home .idt-btn-primary .wp-block-button__link:hover{ opacity:.82; color:#fff; }

.home .idt-btn-ghost .wp-block-button__link{
  padding:10px 24px;
  border-radius:999px;
  background:transparent;
  color:var(--idt-fg);
  font-size:.9375rem;
  line-height:1.5;
  border:1px solid var(--idt-border);
  text-decoration:none;
  transition:border-color .18s ease, color .18s ease;
}
.home .idt-btn-ghost .wp-block-button__link:hover{
  border-color:var(--idt-accent);
  color:var(--idt-accent);
}

/* ---------- 5. latest section ---------- */
.home .idt-latest{ padding:0 0 88px; margin:0; }

.home .idt-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-bottom:20px;
}
.home .idt-label{
  margin:0;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--idt-faint);
  text-transform:uppercase;
}
.home .idt-more{ margin:0; font-size:.875rem; }
.home .idt-more a{
  color:var(--idt-muted);
  text-decoration:none;
  transition:color .18s ease;
}
.home .idt-more a:hover{ color:var(--idt-accent); }

/* ---------- 6. post list ---------- */
.home .wp-block-post-template{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--idt-border);
}
.home .wp-block-post-template li{
  margin:0;
  padding:0;
  border-bottom:1px solid var(--idt-border);
}

.home .idt-post-item{
  display:flex;
  gap:24px;
  padding:26px 0;
  margin:0;
}

.home .idt-post-item .wp-block-post-featured-image{
  flex:none;
  width:172px;
  margin:0;
}
.home .idt-post-item .wp-block-post-featured-image img{
  width:172px;
  height:108px;
  object-fit:cover;
  border-radius:6px;
  display:block;
  transition:opacity .18s ease;
}
.home .idt-post-item:hover .wp-block-post-featured-image img{ opacity:.88; }
.home .idt-post-item .wp-block-post-featured-image:empty{ display:none; }

.home .idt-post-body{ flex:1 1 auto; min-width:0; margin:0; }

.home .idt-post-item .wp-block-post-title{
  margin:0;
  font-size:1.125rem;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.008em;
}
.home .idt-post-item .wp-block-post-title a{
  color:var(--idt-fg);
  text-decoration:none;
  transition:color .18s ease;
}
.home .idt-post-item:hover .wp-block-post-title a{ color:var(--idt-accent); }

.home .idt-post-item .wp-block-post-excerpt{ margin:6px 0 0; }
.home .idt-post-item .wp-block-post-excerpt__excerpt{
  font-size:.9375rem;
  line-height:1.7;
  color:var(--idt-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home .idt-post-item .wp-block-post-excerpt__more-link{ display:none; }

.home .idt-post-meta{
  display:flex;
  align-items:center;
  margin:9px 0 0;
  font-size:.8125rem;
  color:var(--idt-faint);
}
.home .idt-post-meta .wp-block-post-date,
.home .idt-post-meta .wp-block-post-terms{
  margin:0;
  font-size:.8125rem;
  color:var(--idt-faint);
}
.home .idt-post-meta .wp-block-post-date time{ font-variant-numeric:tabular-nums; }
.home .idt-post-meta .wp-block-post-terms a{
  color:var(--idt-faint);
  text-decoration:none;
  transition:color .18s ease;
}
.home .idt-post-meta .wp-block-post-terms a:hover{ color:var(--idt-accent); }
.home .idt-post-meta .wp-block-post-terms::before{
  content:"·";
  padding:0 .45em;
  color:var(--idt-faint);
}

/* ---------- 7. mobile ---------- */
@media (max-width:640px){
  .home .idt-hero{ padding:56px 0 44px; }
  .home .idt-post-item{ gap:16px; padding:22px 0; }
  .home .idt-post-item .wp-block-post-featured-image,
  .home .idt-post-item .wp-block-post-featured-image img{
    width:104px; height:66px; border-radius:4px;
  }
  .home .idt-post-item .wp-block-post-title{ font-size:1.0313rem; }
  .home .idt-post-item .wp-block-post-excerpt{ display:none; }
}

/* ---------- 8. flex rows ----------
   GeneratePress wraps the children of every group block in an extra
   .wp-block-group__inner-container div. So the flex row has to go on
   whichever element actually holds the children. The :has() fallback
   keeps this working if that wrapper ever goes away. */

.home .idt-section-head > .wp-block-group__inner-container,
.home .idt-section-head:not(:has(> .wp-block-group__inner-container)){
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}

.home .idt-post-item > .wp-block-group__inner-container,
.home .idt-post-item:not(:has(> .wp-block-group__inner-container)){
  display:flex;
  align-items:flex-start;
  gap:24px;
  width:100%;
}

.home .idt-post-meta > .wp-block-group__inner-container,
.home .idt-post-meta:not(:has(> .wp-block-group__inner-container)){
  display:flex;
  align-items:center;
  width:100%;
}

/* the text column must be allowed to shrink, or long titles overflow */
.home .idt-post-body{ flex:1 1 auto; min-width:0; }

/* =====================================================================
   9. right sidebar (articles index + single posts only)
   The homepage, Contact and About stay full width.
   ===================================================================== */

/* make the content + sidebar sit side by side, whatever wraps them */
.site-content:has(> .widget-area.sidebar),
.site-content > .grid-container:has(> .widget-area.sidebar){
  display:flex;
  align-items:flex-start;
  gap:40px;
}

.site-content .content-area{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}
.site-content .widget-area.sidebar.is-right-sidebar{
  flex:0 0 240px;
  width:240px;
}

/* strip GeneratePress's own widget chrome */
.widget-area.sidebar .inside-right-sidebar{ padding:0; }
.widget-area.sidebar .widget.inner-padding{ padding:0; }
.widget-area.sidebar .widget{ margin:0 0 38px; }

/* widget headings mirror the "LATEST" label on the homepage */
.widget-area.sidebar .widget-title,
.widget-area.sidebar h2,
.widget-area.sidebar h3{
  margin:0 0 14px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--idt-faint);
}

.widget-area.sidebar ul,
.widget-area.sidebar ol{
  list-style:none;
  margin:0;
  padding:0;
}
.widget-area.sidebar li{
  padding:9px 0;
  border-bottom:1px solid var(--idt-border);
  font-size:.9375rem;
  line-height:1.6;
  color:var(--idt-muted);
}
.widget-area.sidebar li:last-child{ border-bottom:0; }

.widget-area.sidebar a{
  color:var(--idt-muted);
  text-decoration:none;
  transition:color .18s ease;
}
.widget-area.sidebar a:hover{ color:var(--idt-accent); }

.widget-area.sidebar time,
.widget-area.sidebar .wp-block-latest-posts__post-date,
.widget-area.sidebar .wp-block-latest-comments__comment-date{
  display:block;
  margin-top:3px;
  font-size:.8125rem;
  color:var(--idt-faint);
}

/* search: the visible <h3> already says "Search", so hide the duplicate
   block label visually while keeping it for screen readers */
.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;
  border:0;
}
.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;
  padding:9px 12px;
  border:1px solid var(--idt-border);
  border-radius:6px;
  background:#fff;
  font-size:.9375rem;
  color:var(--idt-fg);
  transition:border-color .18s ease;
}
.widget-area.sidebar .wp-block-search__input:focus{
  outline:none;
  border-color:var(--idt-accent);
}
.widget-area.sidebar .wp-block-search__button{
  flex:none;
  padding:9px 16px;
  border:0;
  border-radius:6px;
  background:var(--idt-fg);
  color:#fff;
  font-size:.875rem;
  cursor:pointer;
  transition:opacity .18s ease;
}
.widget-area.sidebar .wp-block-search__button:hover{ opacity:.82; }

/* collapse to one column on small screens */
@media (max-width:880px){
  .site-content:has(> .widget-area.sidebar),
  .site-content > .grid-container:has(> .widget-area.sidebar){
    display:block;
  }
  .site-content .widget-area.sidebar.is-right-sidebar{
    width:auto;
    margin-top:48px;
  }
}

/* widget content wrapped in a group block gets GP's inner-container
   constraint; strip it inside the sidebar */
.widget-area.sidebar .wp-block-group__inner-container{
  max-width:none;
  width:auto;
  margin:0;
  padding:0;
}
.widget-area.sidebar .wp-block-group{ margin:0; }

/* ---------- 10. posts index heading ---------- */
.idt-index-header{
  margin:0 0 28px;
  padding:0;
  background:transparent;
  border:0;
}
.idt-index-title{
  margin:0;
  font-size:1.75rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--idt-fg);
}

/* =====================================================================
   11. box model — side padding
   GeneratePress's .grid-container has NO side padding of its own, and we
   zeroed .inside-article's padding on the front page. Without this the
   content touches the viewport edge on any screen narrower than the
   container. With box-sizing:border-box the max-width includes the
   padding, so a 1000px container yields 952px of usable content.
   ===================================================================== */
.grid-container{
  padding-left:24px;
  padding-right:24px;
}

/* the front page shell must not cancel that padding — only its own
   vertical rhythm is ours to control */
.home .site-content{ padding-left:24px; padding-right:24px; }

/* GP insets the article by 40px on desktop / 30px on mobile; inside a
   sidebar layout that pushes the article out of line with the sidebar,
   so drop it wherever a sidebar is present and rely on the gap instead */
.site-content:has(> .widget-area.sidebar) .inside-article,
.site-content > .grid-container:has(> .widget-area.sidebar) .inside-article{
  padding-left:0;
  padding-right:0;
}
.site-content:has(> .widget-area.sidebar) .inside-article,
.site-content > .grid-container:has(> .widget-area.sidebar) .inside-article{
  background:transparent;
  border:0;
  box-shadow:none;
}

/* =====================================================================
   12. correction — double side padding
   .grid-container (the #page wrapper) is what supplies the 24px side
   padding. .site-content sits INSIDE it, so padding there would inset the
   front page twice and misalign it against the header. Keep it at zero.
   ===================================================================== */
.home .site-content{
  padding-left:0;
  padding-right:0;
}