/*
Theme Name: Assunnah
Theme URI: https://voiceofassunnah.com
Author: Fizul Islam
Author URI: https://kawsarcoding.com
Description: Assunnah is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Assunnah comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor. Religious & News theme — advanced Customizer (1–11), two topbars, mega menu, visitor counter, AJAX reactions, 3-tier responsive, Quran/Hadith/Hijri/Zakat, Breaking Ticker, Language Switcher.
Version: 2.0.0
Text Domain: voiceofassunnah
Tags: islam, reigious, news, blog, one-column, two-columns, custom-logo, custom-menu, rtl-language-support, accessibility-ready
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ========== Base / Design Tokens ========== */
:root{
  --kc-accent:#0b72e7; --kc-link:#0b72e7; --kc-link-h:#084a9a;
  --kc-text:#1b1f24; --kc-heading:#0f172a; --kc-border:#e5e7eb;
  --kc-site-bg:#ffffff; --kc-content-bg:#ffffff;
  --kc-container:1280px; --kc-container-narrow:750px;

  /* Buttons */
  --btn-p-text:#fff; --btn-p-bg:#0b72e7; --btn-p-br:#0b72e7;
  --btn-p-text-h:#fff; --btn-p-bg-h:#094eb0; --btn-p-br-h:#094eb0;
  --btn-p-fs:15px; --btn-p-fw:600; --btn-p-pad:15px 40px; --btn-p-bw:0px; --btn-p-radius:6px;

  --btn-s-text:#0b72e7; --btn-s-bg:#fff; --btn-s-br:#0b72e7;
  --btn-s-text-h:#084a9a; --btn-s-bg-h:#eef2ff; --btn-s-br-h:#084a9a;
  --btn-s-fs:15px; --btn-s-fw:500; --btn-s-pad:15px 40px; --btn-s-bw:1px; --btn-s-radius:6px;

  /* a11y + scroll to top */
  --focus:#2563eb55; --input-focus:#a5b4fc;
  --stt-icon:#fff; --stt-bg:#111; --stt-radius:50%;

  /* SureCart */
  --sc-price-fs:18px;
}

/* Box sizing for all elements incl. pseudos */
*, *::before, *::after { box-sizing:border-box; }

/* ========== Base Typography & Layout ========== */
body{margin:0;background:var(--kc-site-bg);color:var(--kc-text);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto}
a{color:var(--kc-link);text-decoration:none}
a:hover{color:var(--kc-link-h)}
.container{max-width:var(--kc-container);padding-inline:16px;margin-inline:auto}
.container--narrow{max-width:var(--kc-container-narrow)}

/* ========== Header / Nav ========== */
.kc-topbar,.kc-topbar2{font-size:14px}
.kc-topbar{background:#0d1b2a;color:#e9ecef}
.kc-topbar2{background:#12263a;color:#e9ecef;border-bottom:1px solid #0e2235}
.kc-top-flex{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:8px 0}
.kc-menu{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.kc-menu li{position:relative}
.kc-header{background:#fff;position:relative;z-index:30;border-bottom:1px solid #edf2f7}
.kc-brand{display:flex;align-items:center;gap:10px;padding:14px 0}
.kc-nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.kc-menu>li>a{display:flex;gap:6px;align-items:center;padding:10px 0;color:#1b1f24;font-weight:600}

/* Multi dropdown + mega */
.kc-submenu,.kc-mega{position:absolute;inset-inline-start:0;top:100%;min-width:240px;background:#fff;border:1px solid #e9eef3;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.07);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s}
.kc-menu li:hover>.kc-submenu,.kc-menu li:focus-within>.kc-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.kc-submenu a{display:block;padding:10px 14px;color:#1c1f23}
.kc-submenu li{border-bottom:1px dashed #edf2f7}
.kc-submenu li:last-child{border-bottom:0}
.kc-submenu .kc-submenu{left:100%;top:0;margin-left:8px}
.kc-mega{width:min(920px,95vw);padding:18px}
.kc-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kc-caret{margin-left:6px}
.kc-burger{display:none;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff}

/* ========== Buttons ========== */
.button,.btn,.wp-element-button,.wp-block-button__link{
  color:var(--btn-p-text);background:var(--btn-p-bg);border:var(--btn-p-bw) solid var(--btn-p-br);
  padding:var(--btn-p-pad);border-radius:var(--btn-p-radius);font-size:var(--btn-p-fs);font-weight:var(--btn-p-fw);
}
.button:hover,.btn:hover,.wp-element-button:hover,.wp-block-button__link:hover{color:var(--btn-p-text-h);background:var(--btn-p-bg-h);border-color:var(--btn-p-br-h)}
.btn-secondary,.is-style-outline .wp-block-button__link{
  color:var(--btn-s-text);background:var(--btn-s-bg);border:var(--btn-s-bw) solid var(--btn-s-br);
  padding:var(--btn-s-pad);border-radius:var(--btn-s-radius);font-size:var(--btn-s-fs);font-weight:var(--btn-s-fw)
}
.btn-secondary:hover,.is-style-outline .wp-block-button__link:hover{color:var(--btn-s-text-h);background:var(--btn-s-bg-h);border-color:var(--btn-s-br-h)}

/* ========== Breadcrumb + Views ========== */
.kc-breadcrumb{font-size:13px;color:#6b7280;margin:8px 0}
.kc-views{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:#5e6b79;background:#f1f5f9;border-radius:999px;padding:4px 8px}

/* ========== Scroll to top ========== */
.kc-stt{position:fixed;right:20px;bottom:20px;display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--stt-radius);background:var(--stt-bg);color:var(--stt-icon);cursor:pointer}
.kc-stt.show{display:flex}

/* ========== Widgets / Notices ========== */
.kc-qv-ar{font-size:20px;line-height:1.8;text-align:right}
.kc-qv-tr{margin-top:6px;color:#374151}
.kc-qv-ref{color:#6b7280}
.kc-hj-notice{background:#fef3c7;border:1px solid #fde68a;padding:8px;border-radius:8px;color:#92400e}

/* ========== SureCart tweaks (scoped minimally) ========== */
.sc-product-card{border:1px solid var(--kc-border);border-radius:12px;padding:12px}
.sc-product-card .sc-product-title{font-weight:600}
.sc-product-card .sc-product-price{font-size:var(--sc-price-fs);font-weight:700}
.sc-product-card .sc-add-to-cart,.sc-button{border-radius:10px}
body.sc-archive-cols-2 .sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.sc-archive-cols-3 .sc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.sc-archive-cols-4 .sc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ========== Language switcher / Breaking ticker ========== */
.kc-lang a{margin-left:10px;color:#e5e7eb}
.kc-lang a:hover{color:#fff;text-decoration:underline}
.kc-breaking{background:#0b72e7;color:#fff}
.kc-breaking .container{display:flex;gap:12px;align-items:center;overflow:hidden}
.kc-ticker{display:flex;gap:24px;white-space:nowrap;animation:kc-marquee 25s linear infinite}
.kc-ticker a{color:#fff}
@keyframes kc-marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ========== Forms / Focus ========== */
:focus-visible{outline:3px solid var(--focus)}
input:focus{box-shadow:0 0 0 3px var(--input-focus)}

/* ========== Gutenberg / Content defaults ========== */
img, video { max-width:100%; height:auto; }
.alignleft { float:left; margin:0 1.2em 1em 0; }
.alignright { float:right; margin:0 0 1em 1.2em; }
.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignwide { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.alignfull { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.wp-caption { max-width:100%; }
.wp-caption-text { font-size:14px; color:#6b7280; text-align:center; margin-top:6px; }

/* Screen reader utilities & skip link */
.screen-reader-text {
  position:absolute !important;
  height:1px;width:1px;overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px); white-space:nowrap;
  clip-path: inset(50%); border:0; padding:0; margin:-1px;
}
.screen-reader-text:focus {
  position:static !important; clip:auto !important; clip-path:none !important;
  height:auto;width:auto;margin:0;padding:10px 14px; background:#fff; color:#111;
  border:2px solid #111; z-index:1000;
}
.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:10px; top:10px; }

/* Clearer focus on nav links for keyboard users */
.kc-menu > li > a:focus-visible,
.kc-submenu a:focus-visible { outline:3px solid var(--focus); border-radius:6px; }

/* ========== Responsive tiers ========== */
@media (max-width:1024px){
  .kc-burger{display:block}
  .kc-menu{position:fixed;inset:70px 0 0 0;flex-direction:column;gap:0;background:#fff;overflow:auto;transform:translateX(-100%);transition:transform .25s;padding:12px}
  .kc-menu.open{transform:translateX(0)}
}
@media (max-width:480px){
  .container{padding-inline:12px}
}

/* ========== Reduced Motion (a11y) ========== */
@media (prefers-reduced-motion: reduce) {
  .kc-ticker { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ========== RTL Support ========== */
:root[dir="rtl"] .kc-caret { margin-left:0; margin-right:6px; }
:root[dir="rtl"] .kc-submenu { right:0; left:auto; }
:root[dir="rtl"] .kc-submenu .kc-submenu { right:100%; left:auto; margin-right:8px; margin-left:0; }
:root[dir="rtl"] .kc-ticker { animation-name: kc-marquee-rtl; }
@keyframes kc-marquee-rtl { 0%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ========== Print Styles ========== */
@media print {
  .kc-topbar, .kc-topbar2, .kc-header, .kc-burger, .kc-mega, .kc-breaking, .kc-stt { display:none !important; }
  a::after { content:" (" attr(href) ")"; font-size:12px; }
  body { color:#000; }
}

/* =======================================================
   EXTRA SECTIONS YOU PROVIDED (merged below)
   ======================================================= */

/* Hero area + latest posts grid */
.hero-area {
  padding: 40px 0;
  border-bottom: 1px solid var(--kc-border);
}

.home-latest-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 20px;
  margin-top: 40px;
}

/* Cookie consent banner */
.kc-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: #111;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  z-index: 9999;
  animation: kc-fade-in .3s ease;
}

.kc-cookie-btn {
  background: var(--kc-accent, #0b72e7);
  color: #fff;
  border: 0;
  padding: 8px 18px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
}

.kc-cookie-btn:hover { opacity: .85; }

.kc-cookie-banner.hide {
  animation: kc-fade-out .3s ease;
  opacity: 0;
}

@keyframes kc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kc-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Pagination styling */
.kc-pagination .pagination {
  display: flex;
  gap: 8px;
}
.kc-pagination a,
.kc-pagination span {
  padding: 6px 12px;
  border-radius: 5px;
  background: #f1f5f9;
}
.kc-pagination .current {
  background: var(--kc-accent);
  color: #fff;
}