/*
Theme Name: Nivaw - Education Resources
Theme URI: https://nivaw.com
Author: Nivaw
Author URI: https://nivaw.com
Description: A clean, modern WordPress theme built for Nivaw, a blog of practical resources for teachers and students. Includes dark mode, newsletter signup, and a full set of education-focused page templates.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nivaw
Tags: blog, education, two-columns, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Fonts & Reset
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 174 84% 40%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 221 83% 53%;
  --radius: 0.75rem;
  --header-h: 64px;
}

html.dark {
  --background: 222 47% 11%;
  --foreground: 213 27% 84%;
  --card: 217 33% 17%;
  --card-foreground: 213 27% 84%;
  --popover: 217 33% 17%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 217 33% 17%;
  --secondary-foreground: 213 27% 84%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 16% 57%;
  --accent: 174 84% 40%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --border: 217 33% 25%;
  --input: 217 33% 25%;
  --ring: 221 83% 53%;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 800; }
p { margin: 0; }
table { max-width: 100%; display: block; overflow-x: auto; }

/* Comfortable min tap targets on touch devices (WCAG 2.5.5 ~44px) */
@media (pointer: coarse) {
  .btn, .newsletter-form__submit, .newsletter-form__field input[type="email"],
  .form-row input, .form-row select, .form-row textarea, .main-nav a { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
html.dark ::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* ==========================================================================
   2. Layout helpers
   ========================================================================== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.container-md { max-width: 768px; margin: 0 auto; padding: 0 1rem; }
.container-narrow { max-width: 896px; margin: 0 auto; padding: 0 1rem; }
.container-sm { max-width: 576px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px){ .container,.container-md,.container-narrow,.container-sm{ padding: 0 1.5rem; } }
@media (min-width: 1024px){ .container,.container-md,.container-narrow,.container-sm{ padding: 0 2rem; } }

.section { padding: 4rem 0; }
@media (min-width: 1024px){ .section { padding: 5rem 0; } }
.section-bg-white { background: hsl(var(--background)); }
.section-bg-muted { background: hsl(var(--muted) / 0.5); }

.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 2.5rem; gap:1rem; flex-wrap:wrap; }
.section-title { font-size: 1.5rem; font-weight: 800; color: hsl(var(--foreground)); }
.section-subtitle { margin-top:.5rem; color: hsl(var(--muted-foreground)); }
@media (min-width:1024px){ .section-title{ font-size:1.875rem; } }

.text-center { text-align: center; }
.mx-auto { margin-left:auto; margin-right:auto; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.grid-5 { grid-template-columns: repeat(2,1fr); gap:1rem; }
@media (min-width: 640px){
  .grid-2 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-5 { grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 1024px){
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .grid-4 { grid-template-columns: repeat(4,1fr); }
  .grid-5 { grid-template-columns: repeat(5,1fr); }
  .layout-with-sidebar { display:grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items:start; }
  .layout-with-sidebar-narrow { display:grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items:start; }
  .layout-with-sidebar-narrow.contact-layout { grid-template-columns: 1fr 380px; }
}
.layout-with-sidebar, .layout-with-sidebar-narrow { display:block; }

/* ==========================================================================
   3. Buttons & badges
   ========================================================================== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius: var(--radius); padding: .85rem 1.75rem; border: none; cursor:pointer; transition: all .2s ease; font-size:.95rem; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-outline { background: hsl(var(--background)); color: hsl(var(--primary)); border: 2px solid hsl(var(--primary)); }
.btn-outline:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-block { width:100%; }
.btn-sm { padding:.5rem 1rem; font-size:.85rem; border-radius: calc(var(--radius) - 2px); }
.btn-ghost { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--border)); }

.badge { display:inline-block; padding:.25rem .75rem; border-radius:9999px; font-size:.75rem; font-weight:600; }
.badge-featured { background:#f59e0b; color:#fff; }
.badge-freemium { background:#dbeafe; color:#1d4ed8; }
.badge-paid { background:#ede9fe; color:#7c3aed; }
.badge-primary { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.badge-teal { background:#ccfbf1; color:#0f766e; }
.badge-on-image { position:relative; z-index:2; margin: -0.9rem 1.25rem 0; }

/* ==========================================================================
   4. Cards
   ========================================================================== */
.card { background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.card-pad { padding: 1.5rem; }
.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgb(0 0 0 / .1); }

.icon-tile { width:3rem; height:3rem; border-radius: calc(var(--radius) - 2px); background: hsl(var(--primary) / .1); display:flex; align-items:center; justify-content:center; color: hsl(var(--primary)); flex-shrink:0; }
.icon-tile.lg { width:3.5rem; height:3.5rem; }
html.dark .icon-tile { background: hsl(var(--muted)); }

.article-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0; }
.article-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.article-thumb:hover img { transform: scale(1.06); }

.article-card { background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); overflow:hidden; display:block; }
.article-card .article-body { padding: .5rem 1.25rem 1.25rem; }
.article-card h3 { font-size:1rem; margin-bottom:.5rem; }
.article-card h3:hover { color: hsl(var(--primary)); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-size:.75rem; color: hsl(var(--muted-foreground)); }
.article-meta img { width:1.25rem; height:1.25rem; border-radius:9999px; object-fit:cover; }
.article-excerpt { font-size:.875rem; color: hsl(var(--muted-foreground)); margin-bottom:1rem; line-height:1.6; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ==========================================================================
   5. Gradients
   ========================================================================== */
.gradient-hero { background: linear-gradient(135deg, #DBEAFE 0%, #FFFFFF 50%, #CCFBF1 100%); }
.gradient-soft-blue { background: linear-gradient(135deg, #DBEAFE 0%, #CCFBF1 100%); }
.gradient-testimonials { background: linear-gradient(135deg, #DBEAFE 0%, #CCFBF1 100%); }
.newsletter-bg { background-color:#FDF2F8; }
html.dark .newsletter-bg { background-color:#1E1B4B; }

.gradient-cat-teachers{background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 100%);}
.gradient-cat-students{background:linear-gradient(135deg,#14B8A6 0%,#0D9488 100%);}
.gradient-cat-edtech{background:linear-gradient(135deg,#8B5CF6 0%,#7C3AED 100%);}
.gradient-cat-productivity{background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);}
.gradient-cat-study{background:linear-gradient(135deg,#10B981 0%,#059669 100%);}
.gradient-cat-online{background:linear-gradient(135deg,#EC4899 0%,#DB2777 100%);}
.gradient-cat-ai-edu{background:linear-gradient(135deg,#6366F1 0%,#4F46E5 100%);}
.gradient-cat-news{background:linear-gradient(135deg,#EF4444 0%,#DC2626 100%);}
.gradient-cat-resources{background:linear-gradient(135deg,#F97316 0%,#EA580C 100%);}
.gradient-cat-strategies{background:linear-gradient(135deg,#06B6D4 0%,#0891B2 100%);}
.gradient-cat-default{background:linear-gradient(135deg,#64748B 0%,#475569 100%);}

@keyframes float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-15px); } }
.animate-float { animation: float 6s ease-in-out infinite; }

/* ==========================================================================
   6. Header / Navigation
   ========================================================================== */
.site-header { position: fixed; top:0; left:0; right:0; z-index:50; background: hsl(var(--background) / .7); backdrop-filter: blur(12px); transition: all .3s ease; }
.site-header.is-scrolled { background: hsl(var(--background) / .92); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height: var(--header-h); }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.25rem; color: hsl(var(--primary)); flex-shrink:0; }
.brand svg { color: hsl(var(--primary)); }

.main-nav { display:none; align-items:center; gap:.25rem; }
@media (min-width:1024px){ .main-nav { display:flex; } }
.main-nav a { padding:.5rem .75rem; border-radius: calc(var(--radius) - 2px); font-size:.9rem; font-weight:500; color: hsl(var(--muted-foreground)); transition: all .2s; }
.main-nav a:hover { color: hsl(var(--primary)); background: hsl(var(--muted)); }
.main-nav a.is-active { color: hsl(var(--primary)); background: hsl(var(--primary) / .08); }

.header-actions { display:flex; align-items:center; gap:.25rem; }
.icon-btn { width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; border-radius: calc(var(--radius) - 2px); background:transparent; color: hsl(var(--muted-foreground)); border:none; cursor:pointer; transition: all .2s; }
.icon-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.menu-toggle { display:flex; }
@media (min-width:1024px){ .menu-toggle { display:none; } }

.header-search { display:none; border-top:1px solid hsl(var(--border)); background: hsl(var(--background)); padding: .75rem 1rem; }
.header-search.is-open { display:block; }
.header-search form { max-width: 640px; margin:0 auto; position:relative; }
.header-search input { width:100%; padding: .75rem 1rem .75rem 2.5rem; border-radius: var(--radius); border:1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.header-search input:focus { outline:2px solid hsl(var(--ring) / .4); }
.header-search .icon-left { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color: hsl(var(--muted-foreground)); }

.mobile-menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); z-index:40; display:none; }
.mobile-menu-overlay.is-open { display:block; }
.mobile-menu { position:fixed; top: var(--header-h); right:0; bottom:0; width:18rem; background: hsl(var(--background)); box-shadow:-10px 0 30px rgb(0 0 0/.15); z-index:50; transform:translateX(100%); transition: transform .3s ease; overflow-y:auto; }
.mobile-menu.is-open { transform:translateX(0); }
.mobile-menu nav { padding:1rem; }
.mobile-menu a { display:block; padding:.85rem 1rem; border-radius: var(--radius); font-weight:500; color: hsl(var(--muted-foreground)); }
.mobile-menu a.is-active { color: hsl(var(--primary)); background: hsl(var(--primary)/.08); }
@media (min-width:1024px){ .mobile-menu, .mobile-menu-overlay { display:none !important; } }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero { padding-top: calc(var(--header-h) + 3rem); min-height:70vh; display:flex; align-items:center; }
.hero-grid { display:grid; gap:3rem; align-items:center; padding: 3rem 0; }
@media (min-width:1024px){ .hero-grid { grid-template-columns: 1fr 1fr; padding: 5rem 0; } }
.hero h1 { font-size:1.9rem; line-height:1.2; color:#0f172a; }
@media (min-width:640px){ .hero h1 { font-size:2.5rem; } }
@media (min-width:1024px){ .hero h1 { font-size:3rem; } }
.hero h1 .accent { color: hsl(var(--primary)); }
.hero p.lead { margin-top:1.5rem; font-size:1.125rem; color:#475569; max-width:32rem; }
.hero-actions { margin-top:2rem; display:flex; flex-wrap:wrap; gap:1rem; }
.hero-trust { margin-top:2rem; display:flex; align-items:center; gap:.75rem; font-size:.9rem; color:#64748b; }
.avatar-stack { display:flex; }
.avatar-stack img { width:2rem; height:2rem; border-radius:9999px; border:2px solid #fff; object-fit:cover; margin-left:-.5rem; }
.avatar-stack img:first-child { margin-left:0; }
.hero-image img { width:100%; max-width:32rem; margin:0 auto; border-radius:1.25rem; box-shadow:0 20px 40px -10px rgb(0 0 0 / .15); }

/* ==========================================================================
   8. Tool & Category cards
   ========================================================================== */
.tool-card { display:block; background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); padding:1.5rem; height:100%; }
.tool-card .tool-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem; gap:.5rem; }
.tool-card h3 { font-size:1rem; margin-bottom:.25rem; display:flex; align-items:center; gap:.4rem; }
.tool-card .tool-cat { display:inline-block; padding:.15rem .65rem; background:#ccfbf1; color:#0d9488; font-size:.7rem; font-weight:600; border-radius:9999px; }
html.dark .tool-card .tool-cat { background: hsl(var(--muted)); color:#2dd4bf; }
.tool-card .tool-desc { font-size:.875rem; color: hsl(var(--muted-foreground)); margin: .75rem 0; }
.tool-card .tool-features { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.tool-feature { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color: hsl(var(--foreground)); }
.tool-feature svg { color:#14b8a6; flex-shrink:0; }
.tool-card-foot { display:flex; align-items:center; justify-content:space-between; padding-top:1rem; border-top:1px solid hsl(var(--border)); flex-wrap:wrap; gap:.5rem; }

.star-rating { display:inline-flex; align-items:center; gap:.4rem; }
.star-rating .stars { display:inline-flex; }
.star-rating svg { width:.9rem; height:.9rem; }
.star-rating .star-filled { color:#fbbf24; fill:#fbbf24; }
.star-rating .star-empty { color:#d1d5db; }
html.dark .star-rating .star-empty { color:#475569; }
.star-rating .star-value { font-size:.85rem; color: hsl(var(--muted-foreground)); }

.category-tile { display:flex; flex-direction:column; align-items:center; text-align:center; padding:1.5rem; background: hsl(var(--muted)); border-radius: calc(var(--radius) + 4px); transition: all .2s; }
.category-tile:hover { background: hsl(var(--primary) / .08); transform: translateY(-2px); }
.category-tile svg { color: hsl(var(--primary)); margin-bottom:.75rem; width:2.25rem; height:2.25rem; }
.category-tile .cat-name { font-weight:600; font-size:.875rem; }
.category-tile .cat-count { font-size:.75rem; color: hsl(var(--muted-foreground)); margin-top:.25rem; }

.category-block { position:relative; overflow:hidden; border-radius: calc(var(--radius)+4px); padding:2rem; color:#fff; display:block; transition: all .2s; }
.category-block:hover { transform: translateY(-3px); box-shadow:0 15px 30px -10px rgb(0 0 0/.25); }
.category-block .overlay { position:absolute; inset:0; background:rgba(0,0,0,.08); }
.category-block:hover .overlay { background: rgba(0,0,0,.18); }
.category-block .rel { position:relative; z-index:1; }
.category-block svg { width:3rem; height:3rem; margin-bottom:1rem; color:rgba(255,255,255,.9); }
.category-block h3 { font-size:1.25rem; margin-bottom:.4rem; }
.category-block p { color:rgba(255,255,255,.8); font-size:.875rem; margin-bottom:1rem; }
.category-block .browse-link { font-size:.875rem; font-weight:600; color:#fff; text-decoration:underline; display:inline-flex; align-items:center; gap:.3rem; }

/* ==========================================================================
   9. Popular carousel
   ========================================================================== */
.popular-scroll-wrap { position:relative; }
.popular-scroll { display:flex; gap:1.5rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; scrollbar-width:none; }
.popular-scroll::-webkit-scrollbar { display:none; }
.popular-card { position:relative; flex-shrink:0; width:320px; aspect-ratio:16/10; border-radius: calc(var(--radius)+4px); overflow:hidden; scroll-snap-align:start; display:block; }
@media(min-width:640px){ .popular-card{ width:360px; } }
.popular-card img { width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.popular-card:hover img { transform:scale(1.06); }
.popular-card .pop-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.25) 55%, transparent); }
.popular-card .pop-text { position:absolute; left:0; right:0; bottom:0; padding:1.25rem; }
.popular-card .pop-text h3 { color:#fff; font-size:1.05rem; }
.popular-card .pop-views { display:flex; align-items:center; gap:.3rem; color:rgba(255,255,255,.75); font-size:.75rem; margin-top:.4rem; }
.scroll-btn { position:absolute; top:50%; transform:translateY(-50%); width:2.5rem; height:2.5rem; border-radius:9999px; background:#fff; box-shadow:0 4px 10px rgb(0 0 0/.15); display:none; align-items:center; justify-content:center; border:none; cursor:pointer; color:#334155; }
@media(min-width:1024px){ .scroll-btn{ display:flex; } }
.scroll-btn.prev { left:-1rem; } .scroll-btn.next { right:-1rem; }

/* ==========================================================================
   10. Newsletter / Forms
   ========================================================================== */
.form-row { margin-bottom:1.25rem; }
.form-row label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.5rem; }
.form-row input, .form-row select, .form-row textarea {
  width:100%; padding:.85rem 1rem; border-radius:var(--radius); border:1px solid hsl(var(--border));
  background: hsl(var(--muted)); color: hsl(var(--foreground));
}
.form-row textarea { resize:vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline:2px solid hsl(var(--ring)/.4); }
.input-icon-wrap { position:relative; }
.input-icon-wrap svg { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color: hsl(var(--muted-foreground)); }
.input-icon-wrap input { padding-left:2.5rem; }

/* Reusable newsletter form (hero / sidebar / footer variants) */
.newsletter-form { display:flex; flex-wrap:wrap; gap:.75rem; width:100%; }
.newsletter-form__field { position:relative; flex:1 1 220px; min-width:0; }
.newsletter-form__field svg { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events:none; }
.newsletter-form__field input[type="email"] {
  width:100%; min-height:3rem; padding:.85rem 1rem .85rem 2.75rem; font-size:1rem;
  border-radius:var(--radius); border:1px solid hsl(var(--border));
  background: hsl(var(--muted)); color: hsl(var(--foreground));
}
.newsletter-form__field input[type="email"]:focus { outline:2px solid hsl(var(--ring)/.4); }
.newsletter-form__submit { flex:1 1 100%; min-height:3rem; white-space:nowrap; }
@media (min-width:480px){ .newsletter-form__submit { flex:0 0 auto; } }
.newsletter-form[data-state="loading"] .newsletter-form__submit { opacity:.7; pointer-events:none; }
.newsletter-form__msg { flex-basis:100%; font-size:.8rem; margin:0; }
.newsletter-form__msg--error { color:#ef4444; }
.newsletter-form__msg--success { color:#16a34a; }

/* Hero variant: centered, roomier gap */
.newsletter-form--hero { justify-content:center; max-width:32rem; margin:0 auto; }

/* Sidebar variant: always stacked, full-width button */
.newsletter-form--sidebar { flex-direction:column; }
.newsletter-form--sidebar .newsletter-form__field { flex-basis:auto; width:100%; }
.newsletter-form--sidebar .newsletter-form__submit { flex-basis:auto; width:100%; }

/* Footer variant: dark background inputs */
.footer-newsletter { margin-top:3rem; padding-top:2rem; border-top:1px solid #1e293b; display:flex; flex-direction:column; gap:1.5rem; align-items:stretch; justify-content:space-between; }
@media(min-width:768px){ .footer-newsletter{ flex-direction:row; align-items:center; } }
.footer-newsletter h3 { font-size:1.1rem; margin-bottom:.25rem; }
.footer-newsletter p { color:#94a3b8; font-size:.875rem; }
.footer-newsletter .newsletter-form { width:100%; }
@media(min-width:768px){ .footer-newsletter .newsletter-form{ width:auto; min-width:340px; } }
.footer-newsletter .newsletter-form__field input[type="email"] { background:#1e293b; border-color:#334155; color:#fff; }
.footer-newsletter .newsletter-form__field input[type="email"]::placeholder { color:#64748b; }
.footer-newsletter .newsletter-form__field svg { color:#64748b; }
.footer-newsletter .newsletter-form__submit { background:#14b8a6; color:#fff; }
.footer-newsletter .newsletter-form__submit:hover { background:#2dd4bf; }
.footer-newsletter .newsletter-form__msg--error { color:#fca5a5; }
.footer-newsletter .newsletter-form__msg--success { color:#5eead4; }

.newsletter-box { border-radius: calc(var(--radius)+4px); padding:1.5rem; }
.newsletter-box h4 { font-size:1rem; margin-bottom:.4rem; }
.newsletter-box p { font-size:.875rem; color: hsl(var(--muted-foreground)); margin-bottom:1rem; }

/* ==========================================================================
   11. Sidebar widgets
   ========================================================================== */
.sidebar { display:flex; flex-direction:column; gap:1.5rem; }
@media(min-width:1024px){ .sidebar { position:sticky; top:6rem; } }
.widget { background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: calc(var(--radius)+4px); padding:1.5rem; }
.widget-title { display:flex; align-items:center; gap:.5rem; font-weight:600; margin-bottom:1rem; font-size:1rem; }
.widget-title svg { color: hsl(var(--primary)); width:1rem; height:1rem; }
.widget ol, .widget ul { display:flex; flex-direction:column; gap:.75rem; }
.widget-rank { display:flex; gap:.75rem; }
.widget-rank .num { font-weight:700; font-size:1.1rem; color: hsl(var(--primary) / .35); width:1.25rem; flex-shrink:0; }
.widget-rank a { font-size:.875rem; }
.widget-rank a:hover { color: hsl(var(--primary)); }
.widget-cat-row { display:flex; align-items:center; justify-content:space-between; }
.widget-cat-row .count { font-size:.7rem; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); padding:.1rem .55rem; border-radius:9999px; }
.widget-recent-item { display:flex; align-items:flex-start; gap:.5rem; }
.widget-recent-item svg { margin-top:.2rem; color: hsl(var(--muted-foreground)); flex-shrink:0; width:1rem; height:1rem; }
.widget-recent-item .date { display:block; font-size:.7rem; color: hsl(var(--muted-foreground)); margin-top:.2rem; }
.social-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.social-circle { width:2.25rem; height:2.25rem; border-radius:9999px; background: hsl(var(--muted)); display:flex; align-items:center; justify-content:center; color: hsl(var(--muted-foreground)); transition: all .2s; }
.social-circle:hover { background: hsl(var(--primary)); color:#fff; }
.ad-slot { background: hsl(var(--muted)); border:2px dashed hsl(var(--border)); border-radius: var(--radius); min-height:250px; display:flex; align-items:center; justify-content:center; color: hsl(var(--muted-foreground)); font-size:.85rem; }

/* ==========================================================================
   12. Testimonials / FAQ
   ========================================================================== */
.testimonial-card { background: hsl(var(--card)); border-radius: calc(var(--radius)+4px); padding:2rem; box-shadow:0 1px 2px 0 rgb(0 0 0/.05); }
.testimonial-card svg.quote { color:#14b8a6; width:2rem; height:2rem; margin-bottom:1rem; }
.testimonial-card p.quote-text { font-style:italic; color: hsl(var(--muted-foreground)); line-height:1.7; margin-bottom:1.5rem; }
.testimonial-foot { display:flex; align-items:center; gap:.75rem; padding-top:1rem; border-top:1px solid hsl(var(--border)); }
.testimonial-foot img { width:3rem; height:3rem; border-radius:9999px; object-fit:cover; }
.testimonial-foot h4 { font-size:.875rem; }
.testimonial-foot p { font-size:.75rem; color: hsl(var(--muted-foreground)); }

.faq-item { border:1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--muted) / .4); overflow:hidden; margin-bottom: .75rem; }
.faq-item summary { padding:1.1rem 1.25rem; cursor:pointer; font-weight:600; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .chev { transition: transform .2s; flex-shrink:0; color: hsl(var(--muted-foreground)); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-body { padding:0 1.25rem 1.1rem; color: hsl(var(--muted-foreground)); font-size:.9rem; line-height:1.7; }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer { background:#0f172a; color:#fff; }
.footer-top { padding:4rem 0 2rem; }
.footer-grid { display:grid; gap:2rem; grid-template-columns:1fr; }
@media(min-width:640px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .footer-grid{ grid-template-columns:repeat(4,1fr); gap:3rem; } .footer-grid .brand-col{ grid-column:span 1; } }
.footer-grid .brand-col p { color:#94a3b8; font-size:.875rem; line-height:1.7; margin:1rem 0 1.5rem; }
.footer-grid h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.footer-grid ul { display:flex; flex-direction:column; gap:.6rem; }
.footer-grid a { color:#94a3b8; font-size:.875rem; }
.footer-grid a:hover { color:#2dd4bf; }
.footer-social { display:flex; gap:.75rem; }
.footer-social a { width:2.25rem; height:2.25rem; border-radius:9999px; background:#1e293b; display:flex; align-items:center; justify-content:center; color:#94a3b8; }
.footer-social a:hover { background:#334155; color:#2dd4bf; }
.footer-bottom { margin-top:2rem; padding-top:1.5rem; border-top:1px solid #1e293b; display:flex; flex-direction:column; gap:.5rem; align-items:center; justify-content:space-between; color:#64748b; font-size:.85rem; }
@media(min-width:640px){ .footer-bottom{ flex-direction:row; } }

/* ==========================================================================
   14. Page header band
   ========================================================================== */
.page-head { padding: calc(var(--header-h) + 3rem) 0 3rem; }
@media(min-width:1024px){ .page-head { padding-top: calc(var(--header-h) + 4rem); padding-bottom:4rem; } }
.page-head h1 { font-size:1.75rem; color:#0f172a; }
@media(min-width:1024px){ .page-head h1 { font-size:2.25rem; } }
.page-head p { margin-top:.75rem; color:#475569; max-width:42rem; }
.page-head.text-center p { margin-left:auto; margin-right:auto; }

/* ==========================================================================
   15. Filters / tabs / pagination
   ========================================================================== */
.pill-row { display:flex; align-items:center; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; }
.pill { padding:.5rem 1rem; border-radius:9999px; font-size:.85rem; font-weight:500; white-space:nowrap; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border:none; cursor:pointer; display:inline-block; }
.pill:hover { background: hsl(var(--border)); }
.pill.is-active, a.pill.is-active { background: hsl(var(--primary)); color:#fff; }
.filter-bar { display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
@media(min-width:640px){ .filter-bar{ flex-direction:row; align-items:center; justify-content:space-between; } }
.sort-select { padding:.5rem 1rem; border-radius:var(--radius); border:1px solid hsl(var(--border)); background: hsl(var(--card)); font-size:.875rem; }
.results-count { font-size:.875rem; color: hsl(var(--muted-foreground)); margin-bottom:1.5rem; }
.pagination { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:2rem; }
.pagination a, .pagination span { width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); font-size:.875rem; font-weight:500; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.pagination a:hover { background: hsl(var(--border)); }
.pagination .current { background: hsl(var(--primary)); color:#fff; }
.load-more-wrap { text-align:center; margin-top:1rem; }

/* ==========================================================================
   16. Single article
   ========================================================================== */
.reading-progress { position:fixed; top:0; left:0; height:3px; background: hsl(var(--primary)); z-index:100; transition:width .1s linear; width:0; }
.article-header { background: hsl(var(--background)); border-bottom:1px solid hsl(var(--border)); padding: calc(var(--header-h) + 2rem) 0 1.5rem; }
.back-link { display:inline-flex; align-items:center; gap:.35rem; font-size:.875rem; color: hsl(var(--muted-foreground)); margin-bottom:1.5rem; }
.back-link:hover { color: hsl(var(--primary)); }
.article-header h1 { font-size:1.6rem; line-height:1.25; }
@media(min-width:640px){ .article-header h1{ font-size:2rem; } }
@media(min-width:1024px){ .article-header h1{ font-size:2.4rem; } }
.article-info-row { display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1.5rem; font-size:.875rem; color: hsl(var(--muted-foreground)); }
.article-info-row .who { display:flex; align-items:center; gap:.5rem; font-weight:500; color: hsl(var(--foreground)); }
.article-info-row .who img { width:2rem; height:2rem; border-radius:9999px; object-fit:cover; }
.article-info-row .item { display:flex; align-items:center; gap:.35rem; }
.article-feature-img { border-radius: calc(var(--radius)+4px); overflow:hidden; margin-bottom:2rem; }
.article-feature-img img { width:100%; aspect-ratio:16/9; object-fit:cover; }

.article-content { max-width:none; color: hsl(var(--muted-foreground)); line-height:1.8; }
.article-content h2 { color: hsl(var(--foreground)); font-size:1.4rem; margin:2rem 0 1rem; }
.article-content h3 { color: hsl(var(--foreground)); font-size:1.15rem; margin:1.5rem 0 .75rem; }
.article-content p { margin-bottom:1.25rem; }
.article-content a { color: hsl(var(--primary)); text-decoration:underline; }
.article-content strong { color: hsl(var(--foreground)); }
.article-content ul, .article-content ol { margin: 0 0 1.25rem 1.5rem; list-style:disc; }
.article-content img { border-radius:var(--radius); margin:1.5rem 0; }

.share-bookmark-row { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; border-top:1px solid hsl(var(--border)); border-bottom:1px solid hsl(var(--border)); margin-top:2rem; flex-wrap:wrap; gap:1rem; }
.share-row { display:flex; align-items:center; gap:.6rem; }
.share-row span { font-size:.875rem; color: hsl(var(--muted-foreground)); margin-right:.4rem; }
.share-circle { width:2.25rem; height:2.25rem; border-radius:9999px; background: hsl(var(--muted)); display:flex; align-items:center; justify-content:center; color: hsl(var(--muted-foreground)); }
.share-circle:hover { background: hsl(var(--primary)); color:#fff; }
.bookmark-btn { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:var(--radius); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border:none; font-size:.875rem; font-weight:500; cursor:pointer; }

.author-box { margin-top:2rem; background: hsl(var(--muted)); border-radius: calc(var(--radius)+4px); padding:1.5rem; display:flex; gap:1rem; align-items:flex-start; }
.author-box img { width:4rem; height:4rem; border-radius:9999px; object-fit:cover; flex-shrink:0; }
.author-box h4 { font-size:1rem; }
.author-box p { font-size:.875rem; color: hsl(var(--muted-foreground)); margin-top:.35rem; }

.related-articles { margin-top:3rem; }
.related-articles h3 { font-size:1.25rem; margin-bottom:1.5rem; }
.related-item { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.related-item .thumb { width:6rem; height:4rem; border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
.related-item .thumb img { width:100%; height:100%; object-fit:cover; }
.related-item .cat { font-size:.7rem; font-weight:600; color: hsl(var(--primary)); }
.related-item h4 { font-size:.875rem; margin-top:.2rem; }

/* ==========================================================================
   17. Comments
   ========================================================================== */
.comments-area { margin-top:3rem; }
.comments-title { font-size:1.25rem; margin-bottom:1.5rem; }
.comment-list { list-style:none; margin:0 0 2rem; padding:0; }
.comment-list .comment { display:flex; gap:1rem; padding:1.25rem 0; border-bottom:1px solid hsl(var(--border)); }
.comment-list .avatar { border-radius:9999px; flex-shrink:0; }
.comment-author { font-weight:600; font-size:.9rem; }
.comment-meta a { font-size:.75rem; color: hsl(var(--muted-foreground)); }
.comment-content p { font-size:.9rem; color: hsl(var(--muted-foreground)); margin-top:.4rem; }
.comment-form p { margin-bottom:1rem; }
.comment-form input, .comment-form textarea { width:100%; padding:.75rem 1rem; border-radius:var(--radius); border:1px solid hsl(var(--border)); background: hsl(var(--muted)); }

/* ==========================================================================
   18. Misc pages: 404, search, contact, legal, sitemap, authors
   ========================================================================== */
.error-404 { min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-top: var(--header-h); }
.error-404 .code { font-size:5rem; font-weight:800; color: hsl(var(--primary) / .15); }
@media(min-width:640px){ .error-404 .code{ font-size:7rem; } }
.error-404 h1 { font-size:1.5rem; margin: .5rem 0 .75rem; }
.error-404 p { color: hsl(var(--muted-foreground)); max-width:28rem; margin: 0 auto 2rem; }
.error-404 .actions { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

.search-form-big { position:relative; margin-bottom:2rem; }
.search-form-big input { width:100%; padding:1rem 3rem 1rem 3rem; border-radius:var(--radius); border:1px solid hsl(var(--border)); background: hsl(var(--card)); font-size:1.05rem; box-shadow:0 1px 2px rgb(0 0 0/.05); }
.search-form-big svg.search-icon { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color: hsl(var(--muted-foreground)); }
.search-result-row { display:flex; gap:1rem; align-items:flex-start; padding:1rem; background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: calc(var(--radius)+4px); margin-bottom:1rem; }
.search-result-row .thumb { width:5rem; height:3.5rem; border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
.search-result-row .thumb img { width:100%; height:100%; object-fit:cover; }
.search-result-row .kind { display:flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:600; margin-bottom:.25rem; }
.search-result-row h3 { font-size:.95rem; }
.search-result-row:hover h3 { color: hsl(var(--primary)); }
.search-no-results { text-align:center; padding:4rem 0; }

.contact-info-row { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.25rem; }
.contact-info-row .icon-tile { width:2.5rem; height:2.5rem; }
.contact-info-row p.label { font-weight:600; font-size:.875rem; }
.contact-info-row p.value { font-size:.875rem; color: hsl(var(--muted-foreground)); }
.contact-faq-box { background: hsl(var(--primary) / .06); border-radius: calc(var(--radius)+4px); padding:1.5rem; }
.contact-faq-box .q { font-size:.875rem; font-weight:600; }
.contact-faq-box .a { font-size:.8rem; color: hsl(var(--muted-foreground)); margin-top:.2rem; }
.contact-faq-box .faqpair { padding-bottom:.75rem; margin-bottom:.75rem; border-bottom:1px solid hsl(var(--border)); }
.contact-faq-box .faqpair:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.form-success { text-align:center; padding:3rem 1rem; }
.form-success svg { color:#22c55e; width:4rem; height:4rem; margin:0 auto 1rem; }

.legal-section { margin-bottom:2rem; }
.legal-section h2 { font-size:1.15rem; margin-bottom:.6rem; }
.legal-section p { color: hsl(var(--muted-foreground)); line-height:1.75; margin-bottom:2rem; }

.sitemap-list { background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: calc(var(--radius)+4px); }
.sitemap-list a, .sitemap-list .row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .9rem 1.25rem; border-bottom:1px solid hsl(var(--border)); }
.sitemap-list a:last-child, .sitemap-list .row:last-child { border-bottom:none; }
.sitemap-list a:hover { background: hsl(var(--muted)); }
.sitemap-list .left { display:flex; align-items:center; gap:.75rem; }
.sitemap-list svg { color: hsl(var(--muted-foreground)); width:1rem; height:1rem; flex-shrink:0; }
.sitemap-list .count { font-size:.75rem; color: hsl(var(--muted-foreground)); flex-shrink:0; }
.sitemap-section-title { font-size:1.15rem; margin: 2rem 0 1rem; display:flex; align-items:center; gap:.5rem; }
.sitemap-section-title svg { color: hsl(var(--primary)); }

.author-profile-card { background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: calc(var(--radius)+4px); padding:2rem; text-align:center; }
.author-profile-card img { width:6rem; height:6rem; border-radius:9999px; margin:0 auto 1.25rem; object-fit:cover; border:4px solid hsl(var(--muted)); }
.author-profile-card h3 { font-size:1.15rem; }
.author-profile-card .role { font-size:.875rem; color:#0d9488; font-weight:500; margin: .25rem 0 1rem; }
.author-profile-card .bio { font-size:.875rem; color: hsl(var(--muted-foreground)); margin-bottom:1.25rem; }

/* ==========================================================================
   19. Floating UI: cookie banner, back to top
   ========================================================================== */
.cookie-banner { position:fixed; left:0; right:0; bottom:0; background: hsl(var(--card)); border-top:1px solid hsl(var(--border)); padding:1rem; z-index:60; box-shadow:0 -4px 20px rgb(0 0 0/.08); transform:translateY(100%); transition: transform .4s ease; }
.cookie-banner.is-visible { transform:translateY(0); }
.cookie-banner .inner { max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:space-between; padding:0 1rem; }
@media(min-width:640px){ .cookie-banner .inner{ flex-direction:row; } }
.cookie-banner p { font-size:.875rem; color: hsl(var(--muted-foreground)); text-align:center; }
@media(min-width:640px){ .cookie-banner p { text-align:left; } }
.cookie-banner p a { color: hsl(var(--primary)); text-decoration:underline; }
.cookie-banner .actions { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }

.back-to-top { position:fixed; bottom:1.5rem; right:1.5rem; background: hsl(var(--primary)); color:#fff; border-radius:9999px; padding:.75rem; box-shadow:0 4px 12px rgb(0 0 0/.2); z-index:50; opacity:0; pointer-events:none; transition: all .3s; border:none; cursor:pointer; display:flex; }
.back-to-top.is-visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { filter:brightness(1.1); }

/* ==========================================================================
   20. Utility spacing
   ========================================================================== */
.mt-1{margin-top:.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;} .mt-4{margin-top:2rem;}
.mb-1{margin-bottom:.5rem;} .mb-2{margin-bottom:1rem;} .mb-3{margin-bottom:1.5rem;} .mb-4{margin-bottom:2rem;}
.hidden-mobile { display:none; } @media(min-width:1024px){ .hidden-mobile{ display:block; } }
.screen-reader-text { position:absolute !important; left:-9999px; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index:200; background:#fff; padding:.5rem 1rem; border-radius:.5rem; }