/*
Theme Name: Iulia Badita
Theme URI: https://www.iuliabadita.ro/
Author: SEO Marketing Agency SRL
Author URI: https://client.seoagency.ro/
Description: Temă WordPress feminină și modernă pentru blogul IuliaBadita.ro — beauty, lifestyle, dezvoltare personală, modă, nutriție și sănătate. Include pagini personalizate Despre noi, Contact și Publicitate. Administrată de SEO Marketing Agency SRL.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iulia-badita
Tags: blog, feminine, lifestyle, custom-menu, featured-images, threaded-comments, translation-ready, right-sidebar
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  --coral:#F2795A;
  --coral-dark:#E15A3B;
  --coral-soft:#FBEEE7;
  --teal:#3FBEC2;
  --teal-dark:#2BA1A5;
  --teal-soft:#E6F6F6;
  --cream:#FCF8F4;
  --blush:#FBF1EC;
  --ink:#2C2729;
  --ink-soft:#574F51;
  --muted:#9C8F90;
  --line:#EFE5DE;
  --white:#ffffff;

  --shadow-sm:0 2px 10px rgba(44,39,41,.05);
  --shadow-md:0 14px 40px -18px rgba(44,39,41,.22);
  --shadow-lg:0 30px 70px -30px rgba(226,90,59,.30);

  --radius:18px;
  --radius-lg:28px;
  --radius-pill:999px;

  --wrap:1180px;
  --gap:clamp(1.4rem,3vw,2.4rem);

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-dark);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--coral)}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.15;
  font-weight:600;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
blockquote{
  margin:1.6em 0;padding:1.1em 1.5em;
  border-left:4px solid var(--teal);
  background:var(--teal-soft);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--font-display);font-style:italic;
  color:var(--ink);
}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
hr{border:0;height:1px;background:var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 2.4rem,var(--wrap));margin-inline:auto}
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:800;
  color:var(--coral);
  margin:0 0 .9rem;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.2rem;z-index:200;border-radius:0 0 10px 0}
.skip-link:focus{left:0;color:#fff}

/* Brush underline signature (echoes the logo swoosh) */
.brush{position:relative;display:inline-block}
.brush::after{
  content:"";position:absolute;left:-4%;right:-4%;bottom:-.18em;height:.42em;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'><path d='M3 11 C 45 3, 90 13, 130 7 S 188 4, 197 9' stroke='%233FBEC2' stroke-width='5' fill='none' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
  z-index:-1;opacity:.9;
}
.brush--coral::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'><path d='M3 11 C 45 3, 90 13, 130 7 S 188 4, 197 9' stroke='%23F2795A' stroke-width='5' fill='none' stroke-linecap='round'/></svg>")}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-body);font-weight:800;font-size:.98rem;
  padding:.85rem 1.7rem;border-radius:var(--radius-pill);
  border:2px solid transparent;cursor:pointer;line-height:1;
  transition:transform .18s ease,box-shadow .18s ease,background .2s ease,color .2s ease;
}
.btn--primary{background:var(--coral);color:#fff;box-shadow:var(--shadow-lg)}
.btn--primary:hover{background:var(--coral-dark);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal-dark);transform:translateY(-2px)}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-dark);color:#fff;transform:translateY(-2px)}

/* =========================================================
   4. HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(252,248,244,.86);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--coral) 0%,var(--coral) 32%,var(--teal) 68%,var(--teal) 100%);
}
.site-brand{position:relative;display:inline-flex;align-items:center;padding:.3rem .9rem;z-index:1}
.site-brand::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius-pill);
  background:
    radial-gradient(60% 130% at 22% 50%,var(--coral-soft) 0%,transparent 72%),
    radial-gradient(60% 130% at 80% 50%,var(--teal-soft) 0%,transparent 72%);
  opacity:.95;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:78px;
}
.site-brand img{height:46px;width:auto}
.site-brand .site-title-text{font-family:var(--font-display);font-weight:900;font-size:1.4rem;color:var(--ink)}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:.4rem;
  color:var(--ink);
}
.nav-toggle svg{width:28px;height:28px}

.main-nav ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem;margin:0;padding:0}
.main-nav a{
  display:block;color:var(--ink-soft);font-weight:700;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.06em;
  padding:.55rem .7rem;border-radius:var(--radius-pill);
}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--coral-dark);background:var(--coral-soft)}
.main-nav .menu-item-publicitate>a,.main-nav a[href*="publicitate"]{
  background:var(--teal);color:#fff;
}
.main-nav .menu-item-publicitate>a:hover,.main-nav a[href*="publicitate"]:hover{background:var(--teal-dark);color:#fff}

/* =========================================================
   5. LAYOUT GRID
   ========================================================= */
.site-main{padding:clamp(2.2rem,5vw,4rem) 0}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.layout--full{grid-template-columns:minmax(0,1fr)}

/* =========================================================
   6. HERO (home)
   ========================================================= */
.home-hero{
  background:
    radial-gradient(60% 90% at 88% -10%,var(--coral-soft) 0%,transparent 60%),
    radial-gradient(50% 80% at 6% 110%,var(--teal-soft) 0%,transparent 60%),
    var(--cream);
  padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid var(--line);
}
.home-hero .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.home-hero h1{font-size:clamp(2.3rem,5.2vw,3.5rem);font-weight:600}
.home-hero .lead{font-size:1.15rem;max-width:44ch;color:var(--ink-soft)}
.hero-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.hero-tags a{
  font-size:.8rem;font-weight:800;padding:.45rem 1rem;border-radius:var(--radius-pill);
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
}
.hero-tags a:hover{border-color:var(--coral);color:var(--coral-dark)}

.hero-feature{position:relative}
.hero-feature .card{box-shadow:var(--shadow-md)}
.hero-quote{
  font-family:var(--font-display);font-style:italic;font-size:1.05rem;
  color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin-top:1rem;
  box-shadow:var(--shadow-sm);
}

/* =========================================================
   7. POST CARDS
   ========================================================= */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.8rem}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.1rem);margin:0}
.section-head .more-link{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;height:100%;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card .thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--blush)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.05)}
.card .card-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card .card-title{font-size:1.22rem;margin:0;line-height:1.25}
.card .card-title a{color:var(--ink)}
.card .card-title a:hover{color:var(--coral-dark)}
.card .excerpt{font-size:.95rem;color:var(--ink-soft);margin:0}
.card .meta{margin-top:auto;display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted);padding-top:.4rem}

.cat-pill{
  display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  padding:.3rem .75rem;border-radius:var(--radius-pill);
  background:var(--coral-soft);color:var(--coral-dark);
}
.cat-pill.alt{background:var(--teal-soft);color:var(--teal-dark)}

.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap)}

/* List style (archive / blog) — robust flex, no overlap */
.post-list{display:flex;flex-direction:column;gap:var(--gap)}
.post-row{
  display:flex;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;
}
.post-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post-row .thumb{flex:0 0 42%;max-width:380px;min-height:232px;overflow:hidden;display:block;background:var(--blush)}
.post-row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-row .row-body{
  flex:1 1 0;min-width:0;padding:1.6rem 1.9rem;
  display:flex;flex-direction:column;justify-content:center;gap:.5rem;
}
.post-row h2{font-size:1.5rem;margin:.2rem 0 .3rem}
.post-row h2 a{color:var(--ink)}
.post-row h2 a:hover{color:var(--coral-dark)}

/* =========================================================
   8. SINGLE POST
   ========================================================= */
.post-hero{margin-bottom:2rem}
.post-hero .cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.post-hero h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:600;margin-bottom:.7rem}
.post-hero .meta{color:var(--muted);font-size:.9rem;font-weight:700}
.featured-wrap{border-radius:var(--radius-lg);overflow:hidden;margin:1.6rem 0 2.2rem;box-shadow:var(--shadow-md)}
.entry-content{font-size:calc(1.1rem * var(--reader-scale,1))}
.entry-content h2{font-size:1.7rem;margin-top:2rem}
.entry-content h3{font-size:1.35rem;margin-top:1.6rem}
.entry-content img{border-radius:var(--radius);margin:1.4rem 0}
.entry-content a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--coral)}
.post-tags{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.post-tags a{font-size:.8rem;background:var(--blush);padding:.35rem .9rem;border-radius:var(--radius-pill);color:var(--ink-soft)}

.author-box{
  display:flex;gap:1.2rem;align-items:center;margin-top:2.4rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem 1.6rem;box-shadow:var(--shadow-sm);
}
.author-box .avatar{width:64px;height:64px;border-radius:50%;background:var(--coral-soft);flex:none;display:grid;place-items:center;font-family:var(--font-display);font-weight:900;color:var(--coral-dark);font-size:1.4rem}

/* =========================================================
   9. SIDEBAR
   ========================================================= */
.sidebar{display:flex;flex-direction:column;gap:1.6rem;position:sticky;top:104px}
.widget{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem 1.5rem 1.4rem;box-shadow:var(--shadow-sm)}
.widget::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--coral),var(--teal))}
.widget .widget-title{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;position:relative;padding-bottom:.6rem}
.widget .widget-title::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--coral),var(--teal))}
.widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.widget li{border-bottom:1px solid var(--line)}
.widget li:last-child{border-bottom:0}
.widget li a{display:flex;align-items:center;gap:.55rem;padding:.6rem 0;color:var(--ink-soft);font-weight:600;font-size:.95rem}
.widget li a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;opacity:.5;transition:opacity .2s,transform .2s}
.widget li a:hover{color:var(--coral-dark)}
.widget li a:hover::before{opacity:1;transform:scale(1.25)}
.widget select{width:100%;padding:.6rem .8rem;border-radius:12px;border:1px solid var(--line);font-family:inherit;background:#fff}
.widget-cta{background:linear-gradient(160deg,var(--teal) 0%,var(--teal-dark) 100%);color:#fff;border:0}
.widget-cta::before{display:none}
.widget-cta .widget-title{color:#fff}
.widget-cta .widget-title::after{background:#fff}
.widget-cta p{color:rgba(255,255,255,.92)}
.widget-cta li a,.widget-cta li a::before{color:#fff}
.widget-cta .btn{margin-top:.4rem}

.search-form{display:flex;gap:.5rem}
.search-form input[type=search]{flex:1;padding:.7rem 1rem;border-radius:var(--radius-pill);border:1px solid var(--line);font-family:inherit}
.search-form button{border:0;background:var(--coral);color:#fff;border-radius:var(--radius-pill);padding:0 1.1rem;font-weight:800;cursor:pointer}

/* =========================================================
   10. PAGINATION
   ========================================================= */
.pagination{margin-top:2.6rem}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center}
.pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 .7rem;
  border-radius:var(--radius-pill);background:#fff;border:1px solid var(--line);
  color:var(--ink-soft);font-weight:800;text-decoration:none;transition:transform .15s,border-color .2s,color .2s;
}
.pagination .page-numbers.current{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:var(--shadow-sm)}
.pagination a.page-numbers:hover{border-color:var(--coral);color:var(--coral-dark);transform:translateY(-2px)}
.pagination .dots{border-color:transparent;background:transparent}

/* =========================================================
   11. PAGE (generic) + PAGE HEADER
   ========================================================= */
.page-header{
  background:
    radial-gradient(50% 100% at 85% 0%,var(--coral-soft) 0,transparent 55%),
    radial-gradient(45% 90% at 8% 100%,var(--teal-soft) 0,transparent 55%),
    var(--cream);
  padding:clamp(2.4rem,5vw,3.8rem) 0;border-bottom:1px solid var(--line);text-align:center;
}
.page-header h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:600;margin:0}
.page-header p{max-width:60ch;margin:1rem auto 0;color:var(--ink-soft);font-size:1.1rem}
.page-body{padding:clamp(2.2rem,5vw,3.6rem) 0}
.prose{max-width:760px;margin-inline:auto;font-size:1.1rem}
.prose h2{font-size:1.7rem;margin-top:2rem}
.prose h3{font-size:1.3rem;margin-top:1.6rem}

/* Company / info card */
.info-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem 1.8rem;box-shadow:var(--shadow-sm);margin:1.8rem 0;
}
.info-card dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:0}
.info-card dt{font-weight:800;color:var(--ink)}
.info-card dd{margin:0;color:var(--ink-soft)}

/* =========================================================
   12. PUBLICITATE PAGE (advertising landing)
   ========================================================= */
.pub-hero{
  background:
    radial-gradient(55% 110% at 92% -5%,var(--coral-soft) 0,transparent 58%),
    radial-gradient(45% 90% at 4% 108%,var(--teal-soft) 0,transparent 58%),
    var(--cream);
  padding:clamp(2.6rem,6vw,4.6rem) 0;border-bottom:1px solid var(--line);
}
.pub-hero .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.pill-badge{
  display:inline-block;font-weight:800;font-size:.82rem;
  background:var(--coral-soft);color:var(--coral-dark);
  padding:.45rem 1.1rem;border-radius:var(--radius-pill);margin-bottom:1.2rem;
  border:1px solid rgba(242,121,90,.25);
}
.pub-hero h1{font-size:clamp(2.3rem,5.4vw,3.6rem);font-weight:600;margin-bottom:.8rem}
.pub-hero p.lead{font-size:1.15rem;color:var(--ink-soft);max-width:48ch}
.pub-hero p.lead a{font-weight:800;color:var(--coral-dark);text-decoration:underline;text-underline-offset:3px}
.pub-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.pub-shot{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line);background:#fff}
.pub-shot img{width:100%;display:block}

.pub-features{padding:clamp(2.4rem,5vw,3.6rem) 0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,1.8rem)}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem 1.7rem;box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.feature .ficon{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--coral-soft);color:var(--coral-dark);margin-bottom:1rem;
}
.feature:nth-child(2) .ficon{background:var(--teal-soft);color:var(--teal-dark)}
.feature h3{font-size:1.25rem;color:var(--coral-dark);margin-bottom:.5rem}
.feature:nth-child(2) h3{color:var(--teal-dark)}
.feature p{margin:0;color:var(--ink-soft);font-size:.98rem}

.pub-how{padding:0 0 clamp(2.6rem,6vw,4.4rem)}
.pub-how h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:1.6rem}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--coral);
  border-radius:var(--radius);padding:1.2rem 1.6rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);
}
.step:nth-child(even){border-left-color:var(--teal)}
.step .num{font-family:var(--font-display);font-weight:900;font-size:1.7rem;color:var(--coral)}
.step:nth-child(even) .num{color:var(--teal)}
.step p{margin:0;color:var(--ink)}
.step p a{font-weight:800;color:var(--coral-dark)}

.pub-final{
  text-align:center;background:linear-gradient(160deg,var(--coral) 0%,var(--coral-dark) 100%);
  color:#fff;border-radius:var(--radius-lg);padding:clamp(2.2rem,5vw,3.4rem);box-shadow:var(--shadow-lg);
  margin-top:1rem;
}
.pub-final h2{color:#fff;font-size:clamp(1.7rem,4vw,2.4rem)}
.pub-final p{color:rgba(255,255,255,.92);max-width:52ch;margin-inline:auto}
.pub-final .btn--ghost{background:#fff}

/* =========================================================
   13. CONTACT
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4vw,3rem);align-items:start}
.contact-form .field{margin-bottom:1.1rem}
.contact-form label{display:block;font-weight:800;color:var(--ink);margin-bottom:.4rem;font-size:.92rem}
.contact-form input,.contact-form textarea{
  width:100%;padding:.85rem 1rem;border-radius:14px;border:1px solid var(--line);
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-cards{display:flex;flex-direction:column;gap:1rem}
.contact-card{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow-sm)}
.contact-card .cicon{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--teal-dark);display:grid;place-items:center;flex:none}
.contact-card h3{margin:0 0 .2rem;font-size:1.05rem}
.contact-card p{margin:0;font-size:.95rem}

/* =========================================================
   14. FOOTER
   ========================================================= */
.site-footer{background:var(--ink);color:#cdc4c5;padding:clamp(2.6rem,5vw,3.6rem) 0 1.4rem;margin-top:clamp(2.5rem,5vw,4rem)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.4rem}
.site-footer h4{color:#fff;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.site-footer a{color:#cdc4c5}
.site-footer a:hover{color:#fff}
.site-footer .footer-brand img{height:48px;margin-bottom:1rem;filter:brightness(0) invert(1);opacity:.95}
.site-footer .footer-brand p{max-width:38ch;color:#a89fa0;font-size:.95rem}
.footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.footer-company{font-size:.9rem;color:#a89fa0;line-height:1.6;margin-top:.6rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.4rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.85rem;color:#a89fa0}

/* Article tools: share + copy link + font size */
.article-tools{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin:0 0 2rem;padding:.7rem .9rem .7rem 1.2rem;
  background:linear-gradient(120deg,var(--coral-soft),var(--teal-soft));
  border:1px solid var(--line);border-radius:var(--radius-pill);
}
.article-tools .group{display:flex;align-items:center;gap:.5rem}
.article-tools .tools-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.tool-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;
  transition:transform .15s,background .2s,color .2s,border-color .2s;text-decoration:none;
}
.tool-btn:hover{transform:translateY(-2px);color:#fff}
.tool-btn svg{width:18px;height:18px}
.tool-btn.fb:hover{background:#1877f2;border-color:#1877f2}
.tool-btn.x:hover{background:#111;border-color:#111}
.tool-btn.wa:hover{background:#25d366;border-color:#25d366}
.tool-btn.pin:hover{background:#e60023;border-color:#e60023}
.tool-btn.copy:hover{background:var(--coral);border-color:var(--coral)}
.tool-btn.copied{background:var(--teal);border-color:var(--teal);color:#fff}
.font-ctrl{display:flex;align-items:center;gap:.4rem}
.font-ctrl button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-family:var(--font-display);font-weight:900;color:var(--ink);line-height:1;
  transition:transform .15s,background .2s,color .2s,border-color .2s;
}
.font-ctrl button:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-2px)}
.font-ctrl .fs-small{font-size:.82rem}
.font-ctrl .fs-large{font-size:1.18rem}
.ib-toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:.7rem 1.3rem;border-radius:var(--radius-pill);
  font-weight:700;font-size:.9rem;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:300;
}
.ib-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:560px){
  .article-tools{flex-direction:column;align-items:stretch;border-radius:var(--radius-lg)}
  .article-tools .group{justify-content:space-between}
}

/* =========================================================
   15. COMMENTS
   ========================================================= */
.comments-area{margin-top:2.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.8rem;box-shadow:var(--shadow-sm)}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{border-bottom:1px solid var(--line);padding:1rem 0}
.comment-form input,.comment-form textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;font-family:inherit;margin-bottom:.9rem}

/* =========================================================
   16. RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .sidebar .widget{flex:1 1 280px}
  .home-hero .hero-grid,.pub-hero .grid,.contact-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .main-nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:.8rem 1.2rem 1.2rem;display:none;box-shadow:var(--shadow-md);
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:.2rem}
  .main-nav a{padding:.75rem .9rem}
  .post-row{flex-direction:column}
  .post-row .thumb{flex:none;max-width:none;width:100%;aspect-ratio:16/9;min-height:0}
  .post-row .row-body{padding:1.2rem 1.4rem 1.4rem}
  .feature-grid,.footer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .section-head{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}