/*
Theme Name: Istutus
Theme URI: https://istutus.info/
Author: Trident Web Solutions SRL (Romania)
Author URI: https://tridentwebsolutions.com/
Description: A fast, modern, green-accent WordPress theme for a Finnish gardening & plant-care site (plants, houseplants, garden, pets). Includes collapsible Table of Contents, related posts, category grid, modern CTA blocks, and a clean mobile-first layout.
Version: 1.0.7
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: istutus
Tags: blog, news, one-column, two-columns, custom-logo, custom-menu, editor-style, featured-images, translation-ready
*/

/* ====== CSS Variables ====== */
:root{
  --ist-green: #4b6a4f;
  --ist-green-2:#2f5f4f;
  --ist-green-soft:#eef5ef;
  --ist-text:#1f2328;
  --ist-muted:#667085;
  --ist-border:#e6e8eb;
  --ist-bg:#ffffff;
  --ist-card:#ffffff;
  --ist-shadow: 0 14px 40px rgba(15, 23, 42, 0.10);
  --ist-radius: 24px;
  --ist-radius-sm: 14px;
  --ist-max: 1120px;
  --ist-content: 780px;
  /* DINPro is commercial. Default to a close, free alternative (Rubik) loaded via Google Fonts. */
  --ist-font: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ist-bg);
  color:var(--ist-text);
  font-family:var(--ist-font);
  line-height:1.65;
  font-size:18px;
}
@media (max-width: 768px){
  body{ font-size:19px; } /* bigger on mobile as requested */
}

a{ color: var(--ist-green-2); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover{ color: var(--ist-green); }

strong{ font-weight: 700; }
em{ font-style: italic; }

.ist-container{ width: min(var(--ist-max), calc(100% - 40px)); margin:0 auto; }
@media (max-width: 480px){ .ist-container{ width: calc(100% - 28px); } }

.ist-site{ min-height: 100vh; display:flex; flex-direction:column; }
.ist-main{ flex: 1; padding: 26px 0 60px; }

/* ====== Header ====== */
.ist-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ist-border);
}
.ist-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
  flex-wrap: wrap;
}
.ist-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 180px;
}
.ist-logo img{
  display:block;
  height: 44px;
  width: auto;
  max-width: 190px;
}
@media (max-width: 640px){
  .ist-logo img{ height: 40px; max-width: 150px; }
}
.ist-site-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  margin:0;
}
.ist-site-title a{ text-decoration:none; color: var(--ist-text); }

.ist-nav{
  display:flex;
  align-items:center;
  gap: 16px;
}
.ist-nav ul{
  list-style:none;
  display:flex;
  gap: 14px;
  padding:0;
  margin:0;
  align-items:center;
}
.ist-nav a{
  text-decoration:none;
  color: var(--ist-text);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 999px;
}
.ist-nav a:hover{ background: var(--ist-green-soft); color: var(--ist-green-2); }
.ist-nav-toggle{
  display:none;
  border:1px solid var(--ist-border);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 700;
}
@media (max-width: 900px){
  .ist-nav ul{ display:none; }
  .ist-nav-toggle{ display:inline-flex; }
  .ist-nav.ist-nav--open ul{
    display:flex;
    flex-direction:column;
    position:absolute;
    left: 20px;
    right: 20px;
    top: 66px;
    background:#fff;
    border:1px solid var(--ist-border);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--ist-shadow);
  }
  .ist-nav.ist-nav--open a{ width:100%; padding: 10px 12px; }
}

/* Mini search in header */
.ist-header-search{
  display:flex;
  align-items:center;
  gap: 8px;
  border:1px solid var(--ist-border);
  border-radius: 999px;
  padding: 8px 12px;
  background:#fff;
  min-width: 260px;
}
.ist-header-search input[type="search"]{
  border:0;
  outline:0;
  width: 100%;
  font-size: 14px;
  font-family: var(--ist-font);
}
.ist-header-search button{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  line-height:0;
}
.ist-header-search svg{ width:18px; height:18px; opacity:.75; }
@media (max-width: 900px){
  /* On mobile: keep search usable (full-width row). */
  .ist-header-search{
    order: 3;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
  }
  .ist-header-search input{ display:block; font-size: 16px; }
}

/* ====== Typography / post content ====== */
.ist-content{
  width: min(var(--ist-content), 100%);
  margin: 0 auto;
}
.ist-content h1{
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin: 0 0 14px;
}
.ist-content h2{
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.25;
  margin: 28px 0 12px;
}
.ist-content h3{
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  margin: 20px 0 10px;
}
.ist-content p{ margin: 0 0 14px; color: var(--ist-text); }
.ist-content .ist-subtitle{
  color: var(--ist-muted);
  font-size: 18px;
  margin: 0 0 18px;
}

/* Lists */
.ist-content ul, .ist-content ol{
  padding-left: 22px;
  margin: 0 0 16px;
}
.ist-content li{ margin: 6px 0; }

/* Blockquotes with plant symbolism */
.ist-content blockquote{
  margin: 20px 0;
  padding: 16px 18px 16px 18px;
  border-radius: 18px;
  background: var(--ist-green-soft);
  border: 1px solid rgba(75,106,79,.22);
  position: relative;
}
.ist-content blockquote:before{
  content: "🌿";
  position:absolute;
  left: 14px;
  top: 12px;
  font-size: 20px;
  opacity: .85;
}
.ist-content blockquote p{
  margin: 0;
  padding-left: 26px;
  color: var(--ist-text);
}

/* ====== Table of Contents ====== */
.ist-toc{
  border-radius: var(--ist-radius);
  background: var(--ist-green);
  color: #fff;
  padding: 12px 14px;
  margin: 16px 0 22px;
  box-shadow: 0 10px 26px rgba(75,106,79,.25);
}
.ist-toc summary{
  cursor:pointer;
  font-weight: 800;
  font-size: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
}
.ist-toc summary::-webkit-details-marker{ display:none; }
.ist-toc summary:after{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-left: 10px;
}
.ist-toc[open] summary:after{ transform: rotate(-135deg); }
.ist-toc nav{
  margin-top: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 18px;
  padding: 10px 12px;
}
.ist-toc ol{
  margin:0;
  padding-left: 18px;
}
.ist-toc a{ color:#fff; text-decoration:none; }
.ist-toc a:hover{ text-decoration: underline; }

/* ====== Cards / grids ====== */
.ist-grid{
  display:grid;
  gap: 18px;
}
.ist-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ist-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){
  .ist-grid--3{ grid-template-columns: 1fr; }
  .ist-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .ist-grid--4{ grid-template-columns: 1fr; }
}

.ist-card{
  /* Match the reference style: image + title on white page, no boxed card */
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ist-card__media{
  position:relative;
  aspect-ratio: 16/9;
  background: #f3f4f6;
  border-radius: 28px;
  overflow:hidden;
  display:block;
}
.ist-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ist-card__body{ padding: 14px 0 0; }
.ist-card__title{
  margin: 0;
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.6px;
}
.ist-card__title a{ color: var(--ist-text); text-decoration:none; }
.ist-card__title a:hover{ color: var(--ist-green-2); }
.ist-card__meta{ display:none; }

@media (max-width: 520px){
  .ist-card__media{ border-radius: 24px; }
  .ist-card__title{ font-size: 30px; }
}

/* Hero card (front page) */
.ist-hero{
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid var(--ist-border);
  box-shadow: var(--ist-shadow);
}
.ist-hero__media{
  position:relative;
  aspect-ratio: 21/9;
  background:#f3f4f6;
}
.ist-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ist-hero__overlay{
  position:absolute;
  left: 18px;
  bottom: 16px;
  right: 18px;
  /* No container background. Background highlight is applied per-line on the title span
     with box-decoration-break for Safari/mobile correctness. */
  padding: 0;
}
.ist-hero__title{ margin:0; font-size: clamp(28px, 4vw, 64px); line-height:1.08; letter-spacing: -.8px; }
.ist-hero__title-bg{
  display:inline;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 10px 14px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ist-hero__title-bg[data-ist-split="1"]{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}
.ist-hero__line{
  display:inline-block;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 10px 14px;
  margin: 0 0 10px 0;
}
.ist-hero__line:last-child{ margin-bottom: 0; }
.ist-hero__overlay a{ text-decoration:none; color: var(--ist-text); }
.ist-hero__overlay a:hover{ color: var(--ist-green-2); }

@media (max-width: 520px){
  .ist-hero__title{ font-size: 34px; }
  .ist-hero__title-bg{ padding: 10px 12px; border-radius: 16px; }
  .ist-hero__line{ padding: 10px 12px; border-radius: 16px; margin-bottom: 8px; }
}

/* ====== Search block (front page) ====== */
.ist-search-section{
  margin-top: 34px;
  border-radius: 34px;
  background: #f3f1eb; /* warm-ish neutral like screenshot but still clean */
  padding: 46px 0 44px;
}
.ist-search-section h2{
  text-align:center;
  font-size: clamp(30px, 4vw, 56px);
  margin: 0 0 22px;
  letter-spacing: -.6px;
}
.ist-searchbar{
  width: min(820px, calc(100% - 40px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap: 10px;
  background:#fff;
  border:1px solid var(--ist-border);
  border-radius: 999px;
  padding: 10px 14px;
}
.ist-searchbar input[type="search"]{
  width:100%;
  border:0;
  outline:0;
  font-size: 18px;
  padding: 10px 8px;
  font-family: var(--ist-font);
}
.ist-searchbar button{
  border:0;
  background: transparent;
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 999px;
}
.ist-searchbar button:hover{ background: var(--ist-green-soft); }
.ist-searchbar svg{ width:22px; height:22px; }

/* Category grid */
.ist-cat-grid{
  width: min(var(--ist-max), calc(100% - 40px));
  margin: 26px auto 0;
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 980px){ .ist-cat-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px){ .ist-cat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ist-cat-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
  padding: 16px 10px;
}
.ist-cat-card__icon{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ist-cat-card__icon img{ width: 60px; height:60px; object-fit:contain; display:block; }
.ist-cat-card__icon svg{ width: 52px; height:52px; opacity:.9; }
.ist-cat-card a{ text-decoration:none; color: var(--ist-text); font-weight: 800; }
.ist-cat-card a:hover{ color: var(--ist-green-2); }

/* ====== Featured image in post ====== */
.ist-featured{
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid var(--ist-border);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
  margin: 18px 0 18px;
}
.ist-featured img{ width:100%; height:auto; display:block; }

/* ====== Related posts ====== */
.ist-related{
  margin-top: 40px;
}
.ist-related h2{
  font-size: 30px;
  margin: 0 0 16px;
}
.ist-related-grid{
  /* Uses the same card component as the front-page grid (see .ist-card) */
  gap: 18px;
}

/* ====== Footer ====== */
.ist-footer{
  border-top: 1px solid var(--ist-border);
  background: #ffffff;
}
.ist-footer__inner{
  padding: 44px 0;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px){ .ist-footer__inner{ grid-template-columns: 1fr; } }

.ist-footer h3{
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: .2px;
}
.ist-footer p{
  margin: 0 0 12px;
  color: var(--ist-muted);
}
.ist-footer ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.ist-footer a{ color: var(--ist-text); text-decoration:none; }
.ist-footer a:hover{ color: var(--ist-green-2); }
.ist-footer__bottom{
  padding: 16px 0 22px;
  color: var(--ist-muted);
  font-size: 13px;
}

/* ====== Buttons (including CTA button block) ====== */
.ist-btn, .wp-block-button__link, .ist-cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--ist-green-2);
  color: #fff !important;
  text-decoration:none;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 18px rgba(47,95,79,.22);
}
.ist-btn:hover, .wp-block-button__link:hover, .ist-cta-button:hover{
  background: var(--ist-green);
}

/* ====== Product box block ====== */
.ist-product-box{
  margin: 18px 0 22px;
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
  background: linear-gradient(135deg, rgba(75,106,79,.14), rgba(47,95,79,.06));
}
.ist-product-box__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  padding: 18px;
  align-items:center;
}
@media (max-width: 900px){
  .ist-product-box__inner{ grid-template-columns: 1fr; }
}
.ist-product-box__content h3{
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
}
.ist-product-box__content p{
  margin: 0 0 14px;
  color: var(--ist-muted);
}
.ist-product-box__media{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  aspect-ratio: 4/3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ist-product-box__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ====== Search results / archives ====== */
.ist-archive-title{ margin: 0 0 18px; font-size: 30px; }
.ist-archive-grid{ display:grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){ .ist-archive-grid{ grid-template-columns: 1fr; } }

/* ====== 404 ====== */
.ist-404{
  text-align:center;
  padding: 40px 0;
}
.ist-404__icon{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: var(--ist-green-soft);
  border: 1px solid rgba(75,106,79,.18);
  margin: 0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ist-404__icon span{ font-size: 48px; }
.ist-404 h1{ margin: 0 0 10px; font-size: 38px; }
.ist-404 p{ margin: 0 auto 18px; color: var(--ist-muted); width: min(620px, 100%); }

/* ====== Utilities ====== */
.ist-muted{ color: var(--ist-muted); }