/*
Theme Name:        YesSmile
Theme URI:         https://yessmile.ae
Author:            YesSmile.ae
Author URI:        https://yessmile.ae
Description:       Professional magazine & authority theme for YesSmile.ae. Speed-optimized (targets 90+ PageSpeed), bilingual Arabic/English RTL, AdSense-ready with CLS-safe ad zones, full JSON-LD Schema, lead generation focused with WhatsApp & booking CTAs. Works with Rank Math, Polylang, WooCommerce, LiteSpeed Cache, WP Rocket, and all major plugins.
Version:           2.0.0
Requires at least: 6.0
Tested up to:      6.7
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:       yessmile
Tags:              rtl-language, blog, news, magazine, custom-header, custom-menu, featured-images, translation-ready, two-columns, right-sidebar
*/

/* ============================================================
   DESIGN TOKENS — single source of truth
============================================================ */
:root{
  --cp:      #0A7A6E; /* primary teal */
  --cpd:     #065C52; /* dark */
  --cpl:     #0E9E8E; /* light */
  --cppale:  #E8F5F3; /* pale bg */
  --ca:      #D4A017; /* accent gold */
  --cal:     #F0C843;
  --capale:  #FDF7E3;
  --cdark:   #0F1923;
  --cd2:     #1A2B3C;
  --cg1:     #2C3E50;
  --cg2:     #546E7A;
  --cg3:     #8FA3B1;
  --cg4:     #C8D6DE;
  --cg5:     #EEF2F5;
  --cw:      #FFFFFF;
  --coff:    #F7FAFB;
  --fara:    'Cairo','Tajawal',sans-serif;
  --fen:     'Playfair Display',Georgia,serif;
  --fbody:   'Tajawal','Source Sans 3',sans-serif;
  --mw:      1240px;
  --rsm:     6px;
  --rmd:     12px;
  --rlg:     20px;
  --rfl:     9999px;
  --s1:      0 2px 8px rgba(10,122,110,.08);
  --s2:      0 4px 20px rgba(10,122,110,.12);
  --s3:      0 8px 40px rgba(10,122,110,.18);
  --tr:      220ms cubic-bezier(.4,0,.2,1);
  --hh:      68px; /* header height */
}

/* ============================================================
   RESET
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--fbody);color:var(--cg1);background:var(--coff);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.rtl,html[lang="ar"] body{direction:rtl;font-family:var(--fara)}
html[lang="en"] body{direction:ltr;font-family:'Source Sans 3',system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--cp);text-decoration:none;transition:color var(--tr)}
a:hover{color:var(--cpl)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1,h2,h3,h4,h5,h6{font-family:var(--fara);color:var(--cdark);line-height:1.3;font-weight:700;margin-bottom:.5em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{font-family:var(--fen)}
h1{font-size:clamp(1.75rem,4vw,2.7rem)}
h2{font-size:clamp(1.3rem,3vw,2rem)}
h3{font-size:clamp(1.05rem,2vw,1.4rem)}
h4{font-size:1.05rem}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}

/* ============================================================
   LAYOUT
============================================================ */
.ys-w{max-width:var(--mw);margin:0 auto;padding:0 20px;width:100%}
.ys-w-sm{max-width:780px;margin:0 auto;padding:0 20px}
.ys-sec{padding:52px 0}
.ys-sec-sm{padding:28px 0}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.gauto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}

/* ============================================================
   NOTIFICATION BAR
============================================================ */
#ys-notif{background:linear-gradient(90deg,var(--ca),#e8c030,var(--ca));background-size:200%;animation:nshim 4s linear infinite;color:var(--cdark);text-align:center;padding:8px 44px;font-size:13px;font-weight:600;position:relative;z-index:1002}
@keyframes nshim{0%{background-position:200% 0}100%{background-position:-200% 0}}
#ys-notif a{color:var(--cdark);text-decoration:underline}
#ys-notif-x{position:absolute;top:50%;transform:translateY(-50%);font-size:18px;opacity:.5;line-height:1;padding:2px 6px}
html[dir="rtl"] #ys-notif-x{left:12px}html[dir="ltr"] #ys-notif-x{right:12px}
#ys-notif-x:hover{opacity:1}

/* ============================================================
   TOPBAR
============================================================ */
#ys-top-bar{background:var(--cd2);height:36px;display:flex;align-items:center}
.tb-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;height:100%}
.tb-l,.tb-r{display:flex;align-items:center;gap:12px}
.tb-link{color:rgba(255,255,255,.65);font-size:12.5px;display:flex;align-items:center;gap:4px;transition:color var(--tr)}
.tb-link:hover{color:var(--cal)}
.tb-link svg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
.ys-social{display:flex;gap:5px}
.ys-social a{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:11px;color:rgba(255,255,255,.7);transition:all var(--tr)}
.ys-social a:hover{background:var(--cp);color:#fff}
.ys-lang{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);font-size:12px;font-weight:700;padding:2px 10px;border-radius:var(--rfl);cursor:pointer;transition:all var(--tr)}
.ys-lang:hover{background:rgba(255,255,255,.2);color:#fff}

/* ============================================================
   HEADER — STICKY, SHRINKS ON SCROLL
   FIX: explicit flex layout so desktop nav always shows
============================================================ */
#masthead{
  position:sticky;top:0;z-index:1000;
  background:var(--cw);
  border-bottom:1px solid var(--cg5);
  box-shadow:var(--s1);
  height:var(--hh);
  transition:height var(--tr),box-shadow var(--tr);
}
#masthead.scrolled{height:58px;box-shadow:var(--s2)}
.h-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Logo */
.site-branding{flex-shrink:0;display:flex;align-items:center;gap:8px;min-width:0}
.site-branding img{height:46px;width:auto;transition:opacity var(--tr)}
.site-branding img:hover{opacity:.85}
.site-logo-text{font-family:var(--fara);font-size:1.45rem;font-weight:800;color:var(--cp);line-height:1;text-decoration:none;white-space:nowrap}
.site-logo-text:hover{color:var(--cpd)}
.site-tagline{font-size:11px;color:var(--cg3);display:block;margin-top:2px}

/* PRIMARY NAV — always visible on desktop */
#primary-nav{
  flex:1;
  display:flex;         /* always flex on desktop */
  justify-content:center;
  align-items:center;
  min-width:0;
}
#primary-nav ul{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
#primary-nav ul li{position:relative}
#primary-nav ul li a{
  display:block;padding:8px 12px;font-size:13.5px;font-weight:600;
  color:var(--cg1);border-radius:var(--rsm);
  transition:all var(--tr);white-space:nowrap;
}
#primary-nav ul li a:hover,
#primary-nav ul li.current-menu-item>a,
#primary-nav ul li.current-menu-parent>a{color:var(--cp);background:var(--cppale)}
/* Dropdown */
#primary-nav ul .sub-menu{
  display:none;position:absolute;top:calc(100% + 6px);
  min-width:200px;background:var(--cw);border-radius:var(--rmd);
  box-shadow:var(--s3);border:1px solid var(--cg5);
  padding:6px;z-index:200;flex-direction:column;gap:2px;
}
html[dir="rtl"] #primary-nav ul .sub-menu{right:0}
html[dir="ltr"] #primary-nav ul .sub-menu{left:0}
#primary-nav ul li:hover>.sub-menu{display:flex}
#primary-nav ul .sub-menu li a{font-size:13px;padding:8px 12px;border-radius:var(--rsm);width:100%}
#primary-nav ul .sub-menu li a:hover{color:var(--cp);background:var(--cppale)}

/* Header right */
.h-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.h-search-btn{width:34px;height:34px;border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;color:var(--cg2);transition:all var(--tr)}
.h-search-btn:hover{background:var(--cg5);color:var(--cp)}

/* Hamburger — HIDDEN on desktop */
#nav-toggle{
  display:none; /* hidden by default — shown only in mobile media query */
  flex-direction:column;gap:5px;
  width:38px;height:38px;padding:7px;
  border-radius:var(--rsm);transition:background var(--tr);
}
#nav-toggle:hover{background:var(--cg5)}
#nav-toggle span{display:block;height:2px;background:var(--cg1);border-radius:2px;transition:all 200ms;transform-origin:center}
#nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
#nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Search overlay */
#h-search{
  display:none;position:absolute;top:100%;left:0;right:0;
  background:var(--cw);border-bottom:2px solid var(--cp);
  padding:14px 0;box-shadow:var(--s2);z-index:999;
}
#h-search.open{display:block}
#h-search .si{display:flex;gap:8px;align-items:center}
#h-search input[type="search"]{flex:1;padding:10px 16px;border:1.5px solid var(--cg4);border-radius:var(--rfl);font-family:var(--fbody);font-size:15px;outline:none;transition:border-color var(--tr)}
#h-search input[type="search"]:focus{border-color:var(--cp)}
#h-search button{background:var(--cp);color:#fff;padding:10px 20px;border-radius:var(--rfl);font-size:14px;font-weight:600;font-family:var(--fbody);border:none;cursor:pointer;transition:background var(--tr)}
#h-search button:hover{background:var(--cpd)}

/* ============================================================
   BUTTONS
============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border-radius:var(--rfl);font-family:var(--fbody);font-size:14px;font-weight:700;border:2px solid transparent;transition:all var(--tr);text-decoration:none;white-space:nowrap;line-height:1;cursor:pointer}
.btn-p{background:var(--cp);color:#fff;border-color:var(--cp)}
.btn-p:hover{background:var(--cpd);color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(10,122,110,.3)}
.btn-a{background:var(--ca);color:var(--cdark);border-color:var(--ca)}
.btn-a:hover{background:var(--cal);color:var(--cdark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(212,160,23,.35)}
.btn-o{background:transparent;color:var(--cp);border-color:var(--cp)}
.btn-o:hover{background:var(--cp);color:#fff}
.btn-sm{padding:7px 16px;font-size:13px}
.btn-lg{padding:13px 30px;font-size:16px}
/* Book CTA — pulsing gold */
.btn-book{background:linear-gradient(135deg,var(--ca),#e8b830);color:var(--cdark);border:none;font-weight:800;animation:pgold 2.5s ease-in-out infinite}
.btn-book:hover{color:var(--cdark);transform:translateY(-2px);box-shadow:0 6px 24px rgba(212,160,23,.45)}
@keyframes pgold{0%{box-shadow:0 0 0 0 rgba(212,160,23,.4)}70%{box-shadow:0 0 0 9px rgba(212,160,23,0)}100%{box-shadow:0 0 0 0 rgba(212,160,23,0)}}

/* ============================================================
   BREADCRUMB
============================================================ */
#ys-bc{background:var(--cw);border-bottom:1px solid var(--cg5);padding:9px 0;font-size:13px;color:var(--cg3)}
#ys-bc a{color:var(--cp)}
#ys-bc .sep{margin:0 5px;color:var(--cg4)}
#ys-bc .cur{color:var(--cg2)}

/* ============================================================
   AD ZONES — CLS-SAFE (reserved height prevents layout shift)
============================================================ */
.ys-ad{display:block;width:100%;clear:both;overflow:hidden}
.ys-ad::before{content:'إعلان · Ad';display:block;font-size:10px;color:var(--cg3);text-align:center;padding:3px 0 1px;letter-spacing:.4px}
/* Reserve minimum height so page doesn't jump when ad loads */
.ys-ad ins.adsbygoogle{display:block;min-height:90px;width:100%}
.ys-ad-hero{background:var(--coff);padding:10px 0;border-bottom:1px solid var(--cg5)}
/* Force fixed container height for sidebar ads — eliminates CLS */
.ys-ad-sidebar ins.adsbygoogle{min-height:250px}
.ys-ad-infeed ins.adsbygoogle{min-height:120px}

/* ============================================================
   HERO
============================================================ */
.ys-hero{background:linear-gradient(140deg,var(--cd2) 0%,var(--cpd) 55%,var(--cp) 100%);color:#fff;padding:60px 0;position:relative;overflow:hidden}
.ys-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23fff' fill-opacity='.04'/%3E%3C/svg%3E");pointer-events:none}
.hero-content{position:relative;max-width:680px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(212,160,23,.2);border:1px solid rgba(212,160,23,.38);color:var(--cal);font-size:12px;font-weight:600;padding:5px 14px;border-radius:var(--rfl);margin-bottom:14px}
.hero h1{color:#fff;font-size:clamp(1.85rem,4.5vw,3rem);line-height:1.2;margin-bottom:12px}
.hero h1 em{font-style:normal;color:var(--cal)}
.hero-desc{color:rgba(255,255,255,.75);font-size:1.02rem;margin-bottom:26px;line-height:1.8}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-stats{display:flex;gap:36px;margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.hs-num{font-size:1.9rem;font-weight:800;color:var(--cal);line-height:1}
.hs-lbl{font-size:12px;color:rgba(255,255,255,.6);margin-top:3px}

/* ============================================================
   TRUST BAR
============================================================ */
.ys-trust{background:var(--cw);border-bottom:1px solid var(--cg5);padding:13px 0}
.trust-inner{display:flex;align-items:center;justify-content:space-around;gap:14px;flex-wrap:wrap}
.ti{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cg1)}
.ti-ico{width:34px;height:34px;background:var(--cppale);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.ti small{display:block;font-size:11px;font-weight:400;color:var(--cg3)}

/* ============================================================
   SECTION HEADING
============================================================ */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.sec-title{font-size:1.25rem;font-weight:800;color:var(--cdark);display:flex;align-items:center;gap:8px}
.sec-title::before{content:'';display:block;width:4px;height:22px;background:var(--cp);border-radius:var(--rfl);flex-shrink:0}
.sec-more{font-size:13px;font-weight:700;color:var(--cp);display:flex;align-items:center;gap:3px;white-space:nowrap}
.sec-more:hover{color:var(--cpl)}

/* ============================================================
   CARDS
============================================================ */
.ys-card{background:var(--cw);border-radius:var(--rlg);border:1px solid var(--cg5);overflow:hidden;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);display:flex;flex-direction:column}
.ys-card:hover{transform:translateY(-4px);box-shadow:var(--s3);border-color:var(--cg4)}
/* Fixed aspect ratio on thumbnails prevents CLS */
.card-thumb{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--cg5)}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 380ms var(--tr)}
.ys-card:hover .card-thumb img{transform:scale(1.05)}
.card-cat-tag{position:absolute;top:10px;right:10px}
html[dir="ltr"] .card-cat-tag{right:auto;left:10px}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--rfl);font-size:11px;font-weight:700;letter-spacing:.3px}
.bp{background:var(--cp);color:#fff}
.ba{background:var(--ca);color:var(--cdark)}
.bn{background:#dcfce7;color:#166534}
.bh{background:#fee2e2;color:#991b1b}
.card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column}
.card-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--cg3);margin-bottom:7px;flex-wrap:wrap}
.card-meta a{color:var(--cg3)}
.card-meta a:hover{color:var(--cp)}
.card-title{font-size:.98rem;font-weight:700;color:var(--cdark);line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-title a{color:inherit}
.card-title a:hover{color:var(--cp)}
.card-excerpt{font-size:13px;color:var(--cg2);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;margin-bottom:12px}
.card-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--cg5);font-size:12px;color:var(--cg3)}
.rm{font-size:13px;font-weight:700;color:var(--cp);display:flex;align-items:center;gap:3px;transition:gap var(--tr)}
html[dir="rtl"] .rm::after{content:'←'}html[dir="ltr"] .rm::after{content:'→'}
.rm:hover{color:var(--cpl);gap:7px}
/* Horizontal card */
.card-h{flex-direction:row;align-items:stretch}
.card-h .card-thumb{aspect-ratio:auto;width:190px;flex-shrink:0}
/* Big overlay card */
.card-big{position:relative;border-radius:var(--rlg);overflow:hidden;min-height:360px;display:flex;align-items:flex-end;background:var(--cg5)}
/* Explicit width/height on img prevents CLS */
.card-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 380ms var(--tr)}
.card-big:hover img{transform:scale(1.04)}
.card-big-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,25,35,.92) 0%,rgba(10,25,35,.25) 60%,transparent 100%)}
.card-big-body{position:relative;padding:22px;color:#fff;width:100%}
.card-big-body .card-meta{color:rgba(255,255,255,.6)}
.card-big-body .card-meta a{color:rgba(255,255,255,.6)}
.card-big-title{font-size:clamp(1.05rem,2.5vw,1.45rem);font-weight:700;color:#fff;line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-big-title a{color:inherit}
.card-big-title a:hover{color:var(--cal)}

/* ============================================================
   FEATURED GRID (homepage)
============================================================ */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:18px;margin-bottom:36px}
.feat-grid .card-big:first-child{grid-row:1/3;min-height:440px}

/* ============================================================
   HOMEPAGE LAYOUT
============================================================ */
.home-wrap{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.home-main{min-width:0}
.home-side{min-width:0}

/* ============================================================
   SINGLE POST LAYOUT
============================================================ */
.single-wrap{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start;padding:36px 0}
.single-main{min-width:0}
.single-side{min-width:0}
/* Article header */
.art-header{margin-bottom:24px}
.art-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.art-title{font-size:clamp(1.55rem,3.5vw,2.3rem);color:var(--cdark);line-height:1.25;margin-bottom:10px}
.art-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--cg3);flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--cg5)}
.art-meta a{color:var(--cp)}
.art-meta .sep{color:var(--cg4)}
/* Featured image — fixed aspect ratio prevents CLS */
.feat-img{border-radius:var(--rlg);overflow:hidden;margin-bottom:24px;aspect-ratio:16/7;background:var(--cg5)}
.feat-img img{width:100%;height:100%;object-fit:cover}
/* Content */
.entry-content{font-size:16px;line-height:1.9;color:var(--cg1)}
.entry-content h2{font-size:1.45rem;margin-top:2em;padding-top:1.6em;border-top:2px solid var(--cg5);color:var(--cpd)}
.entry-content h3{font-size:1.15rem;margin-top:1.6em;color:var(--cdark)}
.entry-content p{margin-bottom:1.25em}
html[dir="rtl"] .entry-content ul,html[dir="rtl"] .entry-content ol{padding-right:1.4em;margin-bottom:1.25em}
html[dir="ltr"] .entry-content ul,html[dir="ltr"] .entry-content ol{padding-left:1.4em;margin-bottom:1.25em}
.entry-content li{margin-bottom:.45em}
.entry-content blockquote{padding:14px 18px;margin:24px 0;font-style:italic;font-size:1.02rem;background:var(--cppale);border-radius:0 var(--rmd) var(--rmd) 0}
html[dir="rtl"] .entry-content blockquote{border-right:4px solid var(--cp)}
html[dir="ltr"] .entry-content blockquote{border-left:4px solid var(--cp);border-radius:var(--rmd) 0 0 var(--rmd)}
.entry-content a{color:var(--cp);border-bottom:1px solid rgba(10,122,110,.25)}
.entry-content a:hover{border-color:var(--cp)}
.entry-content img{border-radius:var(--rmd);margin:18px auto}
.entry-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.entry-content table th{background:var(--cp);color:#fff;padding:9px 12px}
html[dir="rtl"] .entry-content table th{text-align:right}html[dir="ltr"] .entry-content table th{text-align:left}
.entry-content table td{padding:9px 12px;border-bottom:1px solid var(--cg5)}
.entry-content table tr:nth-child(even){background:var(--coff)}
.entry-content pre,.entry-content code{background:var(--cd2);color:#a8d8c8;padding:14px 18px;border-radius:var(--rmd);font-size:14px;overflow-x:auto;margin:16px 0;display:block}
/* Author box */
.author-box{background:var(--cw);border:1px solid var(--cg5);border-radius:var(--rlg);padding:20px;display:flex;gap:14px;align-items:flex-start;margin:36px 0}
.author-av{width:68px;height:68px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--cg5)}
.author-name{font-weight:700;color:var(--cdark);margin-bottom:3px;display:block}
.author-bio{font-size:14px;color:var(--cg2);line-height:1.6;margin:0}
/* Related */
.related{margin-top:40px;padding-top:28px;border-top:2px solid var(--cg5)}

/* ============================================================
   SIDEBAR
============================================================ */
.ys-side .widget{background:var(--cw);border:1px solid var(--cg5);border-radius:var(--rlg);padding:18px;margin-bottom:18px}
.ys-side .widget-title{font-size:.92rem;font-weight:700;color:var(--cdark);margin-bottom:12px;padding-bottom:9px;border-bottom:2px solid var(--cppale);position:relative}
.ys-side .widget-title::after{content:'';position:absolute;bottom:-2px;width:34px;height:2px;background:var(--cp)}
html[dir="rtl"] .ys-side .widget-title::after{right:0}html[dir="ltr"] .ys-side .widget-title::after{left:0}
.ys-side .widget ul li{padding:7px 0;border-bottom:1px solid var(--cg5);font-size:14px}
.ys-side .widget ul li:last-child{border:none;padding-bottom:0}
.ys-side .widget ul li a{color:var(--cg1)}
.ys-side .widget ul li a:hover{color:var(--cp)}
/* Sidebar lead widget */
.side-lead{background:linear-gradient(150deg,var(--cpd),var(--cp));border-radius:var(--rlg);padding:18px;color:#fff;margin-bottom:18px;text-align:center}
.side-lead h3{color:#fff;font-size:.95rem;margin-bottom:7px}
.side-lead p{color:rgba(255,255,255,.78);font-size:13px;margin-bottom:12px}
.side-lead .btn{width:100%;justify-content:center}
/* Search widget */
.ys-side .widget_search .search-form{display:flex;gap:7px}
.ys-side .widget_search .search-field{flex:1;padding:8px 12px;border:1.5px solid var(--cg4);border-radius:var(--rfl);font-size:14px;font-family:var(--fbody);outline:none;transition:border-color var(--tr)}
.ys-side .widget_search .search-field:focus{border-color:var(--cp)}
.ys-side .widget_search .search-submit{background:var(--cp);color:#fff;padding:8px 14px;border-radius:var(--rfl);font-size:14px;font-family:var(--fbody);border:none;cursor:pointer;transition:background var(--tr)}
.ys-side .widget_search .search-submit:hover{background:var(--cpd)}
/* Recent posts */
.rp{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--cg5)}
.rp:last-child{border:none;padding-bottom:0}
/* Fixed thumbnail size prevents CLS */
.rp-thumb{width:68px;height:52px;border-radius:var(--rsm);overflow:hidden;flex-shrink:0;background:var(--cg5)}
.rp-thumb img{width:68px;height:52px;object-fit:cover}
.rp-title{font-size:13px;font-weight:600;color:var(--cdark);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rp-title:hover{color:var(--cp)}
.rp-date{font-size:11px;color:var(--cg3);margin-top:2px;display:block}

/* ============================================================
   CTA SECTION
============================================================ */
.ys-cta{background:linear-gradient(135deg,var(--cpd),var(--cp));color:#fff;border-radius:var(--rlg);padding:44px 36px;text-align:center;position:relative;overflow:hidden}
.ys-cta::before{content:'';position:absolute;top:-60%;right:-10%;width:280px;height:280px;background:rgba(255,255,255,.04);border-radius:50%}
.ys-cta h2{color:#fff;margin-bottom:9px}
.ys-cta p{color:rgba(255,255,255,.8);margin-bottom:22px}
.ys-cta .btn-a{font-size:15px;padding:13px 30px}

/* ============================================================
   PAGINATION
============================================================ */
.ys-pages{display:flex;justify-content:center;align-items:center;gap:5px;margin:44px 0;flex-wrap:wrap}
.ys-pages .page-numbers{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--rmd);font-size:14px;font-weight:600;color:var(--cg1);border:1.5px solid var(--cg4);background:var(--cw);transition:all var(--tr)}
.ys-pages .page-numbers:hover,.ys-pages .page-numbers.current{background:var(--cp);border-color:var(--cp);color:#fff}
.ys-pages .page-numbers.dots{border:none;background:none;cursor:default}

/* ============================================================
   ARCHIVE & SEARCH HEADERS
============================================================ */
.arch-head{background:var(--cw);border-bottom:1px solid var(--cg5);padding:28px 0}
.arch-title{font-size:clamp(1.3rem,3vw,2rem);color:var(--cdark);margin-bottom:5px}
.arch-desc{font-size:15px;color:var(--cg2);margin:0}
.arch-wrap{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start;padding:32px 0}
.srch-head{background:var(--cppale);padding:28px 0;border-bottom:1px solid rgba(10,122,110,.1)}
.srch-form{display:flex;gap:8px;max-width:580px;margin-top:14px}
.srch-form input{flex:1;padding:11px 16px;border:2px solid var(--cp);border-radius:var(--rfl);font-size:15px;font-family:var(--fbody);outline:none}
.srch-form button{background:var(--cp);color:#fff;padding:11px 22px;border-radius:var(--rfl);font-size:14px;font-weight:600;font-family:var(--fbody);border:none;cursor:pointer;transition:background var(--tr)}
.srch-form button:hover{background:var(--cpd)}

/* ============================================================
   FOOTER
============================================================ */
#colophon{background:var(--cd2);color:rgba(255,255,255,.75);padding:52px 0 0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
.foot-logo{height:46px;width:auto;margin-bottom:12px;opacity:.9}
.foot-about{font-size:14px;color:rgba(255,255,255,.52);line-height:1.75;margin-bottom:14px}
.foot-col-title{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-links{display:flex;flex-direction:column;gap:7px}
.foot-links a{font-size:14px;color:rgba(255,255,255,.52);transition:all var(--tr)}
.foot-links a:hover{color:var(--cal)}
html[dir="rtl"] .foot-links a:hover{padding-right:4px}html[dir="ltr"] .foot-links a:hover{padding-left:4px}
.foot-social{display:flex;gap:7px;margin-top:14px}
.foot-social a{width:32px;height:32px;background:rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.62);transition:all var(--tr)}
.foot-social a:hover{background:var(--cp);color:#fff;transform:translateY(-2px)}
.foot-contact{display:flex;flex-direction:column;gap:8px}
.fci{display:flex;align-items:center;gap:6px;font-size:13.5px;color:rgba(255,255,255,.52)}
.fci a{color:rgba(255,255,255,.52)}
.fci a:hover{color:var(--cal)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.07);padding:14px 0}
.foot-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.32)}
.foot-bottom-inner a{color:rgba(255,255,255,.38)}
.foot-bottom-inner a:hover{color:var(--cal)}
.fbl{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   FLOATING ELEMENTS
============================================================ */
/* WhatsApp */
#ys-wa{position:fixed;width:50px;height:50px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(37,211,102,.42);z-index:890;transition:all var(--tr);text-decoration:none;bottom:78px}
html[dir="rtl"] #ys-wa{left:16px}html[dir="ltr"] #ys-wa{right:16px}
#ys-wa:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(37,211,102,.52)}
#ys-wa svg{width:24px;height:24px;fill:#fff}
#ys-wa-tip{position:absolute;background:var(--cdark);color:#fff;font-size:12px;font-weight:600;padding:4px 11px;border-radius:var(--rfl);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--tr)}
html[dir="rtl"] #ys-wa-tip{left:calc(100% + 9px)}html[dir="ltr"] #ys-wa-tip{right:calc(100% + 9px)}
#ys-wa:hover #ys-wa-tip{opacity:1}
/* Scroll top */
#ys-stb{position:fixed;width:40px;height:40px;background:var(--cp);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:var(--s2);z-index:880;border:none;opacity:0;pointer-events:none;transition:all var(--tr);bottom:78px}
html[dir="rtl"] #ys-stb{right:74px}html[dir="ltr"] #ys-stb{left:16px}
#ys-stb.show{opacity:1;pointer-events:auto}
#ys-stb:hover{background:var(--cpd);transform:translateY(-2px)}
/* Lead bar */
#ys-lb{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--cpd);color:#fff;padding:10px 16px;z-index:900;box-shadow:0 -4px 18px rgba(0,0,0,.2);align-items:center;justify-content:space-between;gap:10px}
#ys-lb.show{display:flex}
#ys-lb p{margin:0;font-size:14px;font-weight:600}

/* ============================================================
   FORMS
============================================================ */
.ys-form input,.ys-form textarea,.ys-form select{width:100%;padding:11px 15px;border:1.5px solid var(--cg4);border-radius:var(--rmd);font-family:var(--fbody);font-size:15px;color:var(--cg1);background:var(--cw);outline:none;transition:border-color var(--tr),box-shadow var(--tr);margin-bottom:12px}
.ys-form input:focus,.ys-form textarea:focus{border-color:var(--cp);box-shadow:0 0 0 3px rgba(10,122,110,.1)}
.ys-form label{display:block;font-size:14px;font-weight:600;color:var(--cg1);margin-bottom:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ============================================================
   404
============================================================ */
.e404{text-align:center;padding:72px 20px}
.e404-num{font-size:7rem;font-weight:800;color:var(--cppale);line-height:1}

/* ============================================================
   UTILITIES
============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tc{text-align:center}.tm{color:var(--cg2)}.tp{color:var(--cp)}.ta{color:var(--ca)}
.divider{height:1px;background:var(--cg5);margin:24px 0}

/* ============================================================
   RESPONSIVE — 900px (tablet)
============================================================ */
@media(max-width:900px){
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat-grid .card-big:first-child{grid-row:auto;min-height:240px}
  .home-wrap,.single-wrap,.arch-wrap{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .form-row{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   RESPONSIVE — 640px (mobile)
   NAV: hidden, shown via JS toggle
   HAMBURGER: shown
============================================================ */
@media(max-width:640px){
  #ys-top-bar{display:none}

  /* Mobile nav — off-screen until .open */
  #primary-nav{
    display:none; /* hidden until toggled */
    position:fixed;
    top:var(--hh);left:0;right:0;bottom:0;
    background:var(--cw);
    padding:20px 16px;
    flex-direction:column;
    overflow-y:auto;
    box-shadow:var(--s3);
    z-index:999;
  }
  #primary-nav.open{display:flex}
  #primary-nav ul{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  #primary-nav ul li a{font-size:16px;padding:12px 14px;border-radius:var(--rmd)}
  #primary-nav ul .sub-menu{position:static;display:flex;flex-direction:column;box-shadow:none;border:none;padding:0 0 0 14px;margin-top:2px}
  html[dir="rtl"] #primary-nav ul .sub-menu{padding:0 14px 0 0}

  /* Show hamburger on mobile */
  #nav-toggle{display:flex}

  /* Hide phone button in header on mobile */
  .h-actions .btn-o{display:none}

  .feat-grid,.g2,.g3,.g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:20px}
  .foot-bottom-inner{flex-direction:column;text-align:center}
  .ys-hero{padding:36px 0}
  .hero-stats{gap:18px}
  .card-h{flex-direction:column}
  .card-h .card-thumb{width:100%;aspect-ratio:16/9}
  .ys-cta{padding:32px 18px}
  .ys-sec{padding:32px 0}
  .single-wrap{padding:20px 0}

  /* Mobile: WhatsApp and scroll top position */
  #ys-wa{bottom:74px}
  #ys-stb{display:none}
}

/* ============================================================
   PRINT
============================================================ */
@media print{
  #ys-top-bar,#masthead,#colophon,#ys-wa,#ys-stb,#ys-lb,.ys-ad,aside{display:none!important}
  body{font-size:12pt;color:#000}
  a{color:#000;text-decoration:underline}
  .entry-content h2{border:none;padding-top:0}
}