/*
Theme Name: Welneez
Theme URI: https://welneez.com/
Author: Welneez
Author URI: https://welneez.com/
Description: Custom wellness blog theme for Welneez — clean, fast, SEO & AEO optimized.
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: LICENSE
Text Domain: welneez
Tags: blog, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   COLOR & FONT TOKENS
   Edit these values to match your exact brand colors/fonts.
   Everything in the theme references these variables, so changing a value
   here updates the whole site instantly.
   ========================================================================== */
:root{
  /* Brand palette — sampled from the wellness/green identity of the current site.
     Adjust the hex codes below if you want an exact match. */
  --wz-primary:        #2f9e7f;   /* main teal-green brand color (buttons, links, accents) */
  --wz-primary-dark:   #227a63;   /* hover / active state */
  --wz-primary-light:  #e6f4ef;   /* soft tinted backgrounds, badges */
  --wz-accent:         #f4a259;   /* warm accent (tags, highlights, tip boxes) */
  --wz-ink:            #223229;   /* main text color, near-black green */
  --wz-ink-soft:       #5b6b62;   /* secondary text / meta */
  --wz-bg:             #fdfaf5;  /* page background, warm off-white */
  --wz-card:           #ffffff;   /* card / surface background */
  --wz-border:         #e7e2d8;   /* hairline borders */
  --wz-success:        #2f9e7f;

  /* Typography — friendly, rounded sans, matching a wellness/lifestyle brand */
  --wz-font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --wz-font-body:    'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --wz-radius-sm: 8px;
  --wz-radius-md: 14px;
  --wz-radius-lg: 22px;
  --wz-shadow: 0 4px 20px rgba(34, 50, 41, 0.08);
  --wz-shadow-hover: 0 10px 30px rgba(34, 50, 41, 0.14);
  --wz-maxw: 1180px;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--wz-font-body);
  color: var(--wz-ink);
  background: var(--wz-bg);
  line-height: 1.7;
  font-size: 17px;
}
img{ max-width:100%; height:auto; display:block; border-radius: var(--wz-radius-md); }
a{ color: var(--wz-primary); text-decoration:none; transition: color .2s ease; }
a:hover{ color: var(--wz-primary-dark); }
h1,h2,h3,h4,h5,h6{
  font-family: var(--wz-font-heading);
  color: var(--wz-ink);
  line-height:1.25;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1{ font-size: clamp(2rem, 4vw, 2.75rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1.2em; }
.container{ max-width: var(--wz-maxw); margin: 0 auto; padding: 0 20px; }
ul.wz-reset{ list-style:none; margin:0; padding:0; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--wz-accent);
  outline-offset: 2px;
}

/* Buttons */
.wz-btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--wz-primary); color:#fff;
  padding: 12px 26px; border-radius: 999px; border:none;
  font-family: var(--wz-font-heading); font-weight:600; font-size:.95rem;
  cursor:pointer; transition: all .2s ease;
}
.wz-btn:hover{ background: var(--wz-primary-dark); color:#fff; transform: translateY(-2px); box-shadow: var(--wz-shadow-hover); }
.wz-btn--outline{ background:transparent; color: var(--wz-primary); border: 2px solid var(--wz-primary); padding:10px 24px; }
.wz-btn--outline:hover{ background: var(--wz-primary); color:#fff; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.wz-header{ background: var(--wz-card); border-bottom: 1px solid var(--wz-border); position: sticky; top:0; z-index:100; transition: all .25s ease; }
.wz-header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; gap: 20px; min-height:56px; transition: all .25s ease; }
.wz-logo{ display:flex; align-items:center; gap:8px; font-family: var(--wz-font-heading); font-weight:800; font-size:1.15rem; color: var(--wz-ink);
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 320px; line-height:1.2; transition: all .25s ease; }
.wz-logo img{ max-height:38px; width:auto; border-radius:0; flex:none; transition: max-height .25s ease; }
@media (max-width: 480px){ .wz-logo{ max-width: 200px; font-size:1rem; } }

/* Shrink header once the page is scrolled — class toggled by assets/js/main.js */
.wz-header.wz-scrolled{ box-shadow: 0 2px 12px rgba(34,50,41,.08); }
.wz-header.wz-scrolled .wz-header-inner{ padding: 6px 0; min-height:44px; }
.wz-header.wz-scrolled .wz-logo{ font-size:1rem; }
.wz-header.wz-scrolled .wz-logo img{ max-height:28px; }
.wz-nav ul{ display:flex; gap: 28px; list-style:none; margin:0; padding:0; }
.wz-nav li{ position:relative; padding-bottom:10px; margin-bottom:-10px; }
.wz-nav > ul > li > a{ display:flex; align-items:center; gap:4px; }
.wz-nav a{ color: var(--wz-ink); font-weight:600; font-size:.98rem; transition: color .2s ease; }
.wz-nav a:hover, .wz-nav a:focus-visible{ color: var(--wz-primary); }
.wz-nav .menu-item-has-children > a::after{ content:"▾"; font-size:.65em; margin-left:3px; opacity:.65; transition: transform .18s ease; }
.wz-nav .menu-item-has-children:hover > a::after{ transform: rotate(180deg); }

/* Dropdown submenu */
.wz-nav .sub-menu{
  position:absolute; top:100%; left:0;
  background: var(--wz-card); border:1px solid var(--wz-border); border-radius: var(--wz-radius-sm);
  min-width:220px; padding:8px 0; box-shadow: var(--wz-shadow);
  list-style:none; margin:0; display:flex; flex-direction:column; gap:0;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:300;
}
.wz-nav li:hover > .sub-menu,
.wz-nav li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform: translateY(0);
}
.wz-nav .sub-menu li{ padding:0; margin:0; }
.wz-nav .sub-menu a{ display:block; padding:10px 20px; font-weight:500; font-size:.92rem; white-space:nowrap; }
.wz-nav .sub-menu a:hover{ background: var(--wz-primary-light); color: var(--wz-primary-dark); }
.wz-header-actions{ display:flex; align-items:center; gap:14px; }
.wz-search-toggle, .wz-menu-toggle{ background:none; border:none; cursor:pointer; color: var(--wz-ink); font-size:1.2rem; }
.wz-menu-toggle{ display:none; }
.wz-search-form{ display:flex; align-items:center; background: var(--wz-primary-light); border-radius:999px; padding:6px 6px 6px 16px; }
.wz-search-form input[type=search]{ border:none; background:transparent; outline:none; font-family:var(--wz-font-body); font-size:.9rem; width:160px; }
.wz-search-form button{ background: var(--wz-primary); border:none; color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; }

@media (max-width: 960px){
  .wz-nav{ display:none; }
  .wz-menu-toggle{ display:block; }
}
.wz-nav-mobile{ position:absolute; left:0; right:0; top:100%; background: var(--wz-card); border-bottom: 1px solid var(--wz-border); box-shadow: var(--wz-shadow); padding: 18px 20px 24px; max-height: 75vh; overflow-y:auto; }
.wz-nav-mobile .sub-menu{ list-style:none; padding-left:18px; margin:4px 0 8px; border-left: 2px solid var(--wz-primary-light); }
.wz-nav-mobile li{ margin-bottom:2px; }
.wz-nav-mobile > ul > li{ border-bottom: 1px solid var(--wz-border); padding-bottom:4px; margin-bottom:4px; }
.wz-nav-mobile > ul > li:last-child{ border-bottom:none; }
.wz-nav-mobile > ul > li > a{ font-weight:700; }
.wz-nav-mobile a{ display:block; padding:10px 4px; color: var(--wz-ink); }
.wz-nav-mobile a:hover{ color: var(--wz-primary); }

/* ==========================================================================
   HERO
   ========================================================================== */
.wz-hero{ padding: 64px 0 56px; }
.wz-hero-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.wz-eyebrow{ display:inline-block; background: var(--wz-primary-light); color: var(--wz-primary-dark); padding:6px 16px; border-radius:999px; font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; }
.wz-hero h1{ margin-bottom:.4em; }
.wz-hero p.lead{ font-size:1.1rem; color: var(--wz-ink-soft); max-width: 46ch; }
.wz-hero-actions{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.wz-hero-media img{ border-radius: var(--wz-radius-lg); box-shadow: var(--wz-shadow); }
@media (max-width: 860px){ .wz-hero-inner{ grid-template-columns: 1fr; } }

/* ==========================================================================
   CATEGORY PILLS
   ========================================================================== */
.wz-categories{ padding: 30px 0 10px; }
.wz-cat-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; list-style:none; margin:0; padding:0; }
.wz-cat-grid a{ display:flex; flex-direction:column; align-items:center; gap:10px; background: var(--wz-card); border:1px solid var(--wz-border); border-radius: var(--wz-radius-md); padding: 22px 10px; text-align:center; font-weight:700; color: var(--wz-ink); transition: all .2s ease; }
.wz-cat-grid a:hover{ border-color: var(--wz-primary); transform: translateY(-4px); box-shadow: var(--wz-shadow); }
.wz-cat-emoji{ font-size:1.8rem; }
@media (max-width: 880px){ .wz-cat-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 480px){ .wz-cat-grid{ grid-template-columns: repeat(2,1fr); } }

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.wz-section{ padding: 48px 0; }
.wz-section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:20px; flex-wrap:wrap; }
.wz-section-head h2{ margin:0; }
.wz-section-head .wz-view-all{ font-weight:700; font-size:.9rem; }

/* ==========================================================================
   POST CARDS / GRID
   ========================================================================== */
.wz-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.wz-grid--2{ grid-template-columns: repeat(2, 1fr); }
.wz-card{ background: var(--wz-card); border-radius: var(--wz-radius-md); overflow:hidden; border:1px solid var(--wz-border); transition: all .25s ease; display:flex; flex-direction:column; }
.wz-card:hover{ box-shadow: var(--wz-shadow-hover); transform: translateY(-4px); border-color: transparent; }
.wz-card-thumb{ aspect-ratio: 16/10; overflow:hidden; }
.wz-card-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:0; transition: transform .4s ease; }
.wz-card:hover .wz-card-thumb img{ transform: scale(1.06); }
.wz-card-body{ padding: 20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.wz-card-cat{ font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--wz-primary); }
.wz-card h3{ margin:0; font-size:1.15rem; }
.wz-card h3 a{ color: var(--wz-ink); }
.wz-card h3 a:hover{ color: var(--wz-primary); }
.wz-card-excerpt{ color: var(--wz-ink-soft); font-size:.95rem; margin:0; }
.wz-card-meta{ display:flex; align-items:center; gap:12px; font-size:.8rem; color: var(--wz-ink-soft); margin-top:auto; padding-top:8px; }
.wz-card-meta span{ display:flex; align-items:center; gap:5px; }

@media (max-width: 980px){ .wz-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .wz-grid, .wz-grid--2{ grid-template-columns: 1fr; } }

/* Compact list rows (used for popular/recent widgets) */
.wz-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.wz-list-item{ display:flex; gap:14px; align-items:flex-start; }
.wz-list-rank{ font-family: var(--wz-font-heading); font-weight:800; font-size:1.3rem; color: var(--wz-primary-light); -webkit-text-stroke: 1px var(--wz-primary); width:28px; flex:none; }
.wz-list-thumb{ width:76px; height:76px; flex:none; border-radius: var(--wz-radius-sm); overflow:hidden; }
.wz-list-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.wz-list-content h4{ margin:0 0 4px; font-size:.98rem; line-height:1.4; }
.wz-list-content h4 a{ color: var(--wz-ink); }
.wz-list-content .wz-meta-row{ font-size:.78rem; color: var(--wz-ink-soft); }

/* ==========================================================================
   WHY CHOOSE / INFO BLOCK
   ========================================================================== */
.wz-info-block{ background: var(--wz-primary-light); border-radius: var(--wz-radius-lg); padding: 48px; display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; }
.wz-info-block h2{ margin-bottom:.3em; }
@media (max-width: 780px){ .wz-info-block{ grid-template-columns:1fr; padding:32px 24px; } }

/* Daily tip */
.wz-tip-box{ background: #fff7ec; border: 1px solid #f3ddb5; border-radius: var(--wz-radius-md); padding: 24px 28px; display:flex; gap:16px; align-items:flex-start; }
.wz-tip-box .emoji{ font-size:1.6rem; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.wz-newsletter{ background: var(--wz-ink); color:#fff; border-radius: var(--wz-radius-lg); padding: 48px; text-align:center; }
.wz-newsletter h2{ color:#fff; }
.wz-newsletter p{ color:#cfe0d8; max-width:56ch; margin:0 auto 24px; }
.wz-newsletter-form{ display:flex; gap:12px; max-width:460px; margin:0 auto; }
.wz-newsletter-form input[type=email]{ flex:1; padding:14px 18px; border-radius:999px; border:none; font-size:1rem; }
.wz-newsletter-form button{ white-space:nowrap; }
.wz-newsletter--inline{ margin: 48px 0; padding: 36px; }
@media (max-width:600px){ .wz-newsletter-form{ flex-direction:column; } }

/* ==========================================================================
   SINGLE POST
   ========================================================================== */
.wz-single-wrap{ padding: 40px 0 60px; }
.wz-single-layout{ display:grid; grid-template-columns: 2.1fr 1fr; gap: 56px; align-items:start; }
.wz-breadcrumbs{ font-size:.85rem; color: var(--wz-ink-soft); margin-bottom:18px; }
.wz-breadcrumbs a{ color: var(--wz-ink-soft); }
.wz-single-header{ margin-bottom: 26px; }
.wz-single-header .wz-card-cat{ margin-bottom:10px; display:inline-block; }
.wz-single-meta{ display:flex; align-items:center; gap:18px; color: var(--wz-ink-soft); font-size:.9rem; margin-top:14px; flex-wrap:wrap; }
.wz-single-meta .wz-author{ display:flex; align-items:center; gap:8px; font-weight:700; color: var(--wz-ink); }
.wz-author img{ width:34px; height:34px; border-radius:50%; }
.wz-featured-image{ margin: 26px 0 34px; }
.wz-content{ font-size: 1.08rem; }
.wz-content h2{ margin-top:1.6em; }
.wz-content h3{ margin-top:1.4em; }
.wz-content blockquote{ border-left: 4px solid var(--wz-primary); background: var(--wz-primary-light); margin:24px 0; padding: 18px 24px; border-radius: 0 var(--wz-radius-sm) var(--wz-radius-sm) 0; font-style:italic; }
.wz-content ul, .wz-content ol{ padding-left: 1.4em; }
.wz-content figure{ margin: 0 0 1.5em; }
.wz-toc{ background: var(--wz-card); border:1px solid var(--wz-border); border-radius: var(--wz-radius-md); padding: 22px 26px; margin: 0 0 32px; }
.wz-toc summary{ font-weight:800; font-family: var(--wz-font-heading); cursor:pointer; }
.wz-toc ul{ margin: 14px 0 0; padding-left: 1.2em; }

.wz-tags{ display:flex; gap:10px; flex-wrap:wrap; margin: 30px 0; }
.wz-tags a{ background: var(--wz-primary-light); color: var(--wz-primary-dark); padding:6px 16px; border-radius:999px; font-size:.82rem; font-weight:700; }

.wz-author-box{ display:flex; gap:20px; background: var(--wz-card); border:1px solid var(--wz-border); border-radius: var(--wz-radius-md); padding:26px; margin: 34px 0; }
.wz-author-box img{ width:64px; height:64px; border-radius:50%; flex:none; }

/* Sidebar */
.wz-sidebar{ display:flex; flex-direction:column; gap:36px; }
.wz-widget{ background: var(--wz-card); border:1px solid var(--wz-border); border-radius: var(--wz-radius-md); padding: 24px; }
.wz-widget h3{ font-size:1.05rem; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--wz-primary-light); }

@media (max-width: 960px){
  .wz-single-layout{ grid-template-columns: 1fr; }
  .wz-sidebar{ position:static; }
}

/* Related posts */
.wz-related{ margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--wz-border); }

/* Comments */
.wz-comments{ margin-top: 50px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list .comment-body{ background: var(--wz-card); border:1px solid var(--wz-border); border-radius: var(--wz-radius-md); padding:20px; margin-bottom:16px; }
.comment-respond input[type=text], .comment-respond input[type=email], .comment-respond textarea{
  width:100%; padding:12px 16px; border:1px solid var(--wz-border); border-radius: var(--wz-radius-sm); font-family: var(--wz-font-body); margin-bottom:14px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.wz-footer{ background: var(--wz-ink); color:#cfe0d8; margin-top: 70px; padding: 56px 0 24px; }
.wz-footer a{ color:#e7f3ee; }
.wz-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom: 40px; }
.wz-footer h4{ color:#fff; font-family: var(--wz-font-heading); margin-bottom:16px; }
.wz-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.92rem; }
.wz-footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-top:22px; font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width: 780px){ .wz-footer-grid{ grid-template-columns: 1fr 1fr; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}