/* =========================
   Azm Site – style.css (v13)
   ========================= */

/* ===== Design tokens ===== */
:root{
  --primary:#267FDD;      /* main brand blue */
  --primary-600:#1f6bb8;  /* hover/darker */
  --primary-50:#eaf3fe;   /* soft tint background */

  --text:#0f172a;
  --muted:#475569;
  --bg:#f6f8fb;
  --card:#ffffff;
  --border:#e5e9f1;

  --shadow:0 6px 18px rgba(2,19,51,.08);
  --wa:#25D366;

  /* STEP 2: CLS guardrails (header height tokens) */
  --header-h: 80px;
  --header-h-sm: 72px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scrollbar-gutter: stable;}
body{
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.85;
  font-size:16px;
  overflow-x:hidden; /* prevent tiny horizontal overflow (+ signs) */
}

/* ===== Layout ===== */
.container{max-width:1120px;margin:0 auto;padding:0 18px}
main.container{padding-top:28px}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--primary);
  box-shadow:0 2px 16px rgba(38,127,221,.22);

  /* STEP 2: lock header height to prevent CLS on font swap */
  min-height: var(--header-h);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0;
/* STEP 2: keep nav-wrap from collapsing during load */
  min-height: var(--header-h);
}

/* Brand (logo + name) */
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:#fff}
.brand-logo{height:68px; width:auto; display:block}
.brand-text{display:flex; flex-direction:column}
.site-title{font-family:"Changa", sans-serif; font-weight:800; font-size:24px; color:#fff}
.site-subtitle{color:rgba(255,255,255,.82); font-size:12px}

/* ===== Nav ===== */
.nav{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.nav a{color:#fff; text-decoration:none; font-weight:700; position:relative}
.nav a:hover{opacity:.9}
.nav .btn.small{
  padding:10px 14px; font-weight:800;
  background:#fff; color:var(--primary)!important; border:none; box-shadow:var(--shadow);
}
.nav .btn.small:hover{background:#f8fbff; color:var(--primary-600)!important}

/* Active page underline */
.nav a.active::after{
  content:''; position:absolute; bottom:-6px; left:0; right:0; height:3px;
  background:#fff; border-radius:2px;
}

/* Social (Facebook icon) */
.social{display:flex; align-items:center; gap:10px; margin-inline-start:6px}
.icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:transparent; border:1px solid rgba(255,255,255,.65);
  color:#fff; text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.icon-link:hover{transform:translateY(-1px); border-color:#fff; background:rgba(255,255,255,.14)}

/* ===== Buttons (general) ===== */
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px;
  border:1px solid var(--primary); background:var(--primary);
  color:#fff; text-decoration:none; font-weight:800; box-shadow:var(--shadow)
}
.btn:hover{background:var(--primary-600); border-color:var(--primary-600)}
.btn.outline{background:transparent; color:var(--primary); border-color:var(--primary)}
.btn.tiny{padding:6px 10px; font-size:13px; border-radius:10px}

/* ===== Hero / Titles (card container) ===== */
.hero{
  margin:32px 0; padding:36px 28px;
  border-radius:18px;
  background:linear-gradient(180deg, var(--primary-50) 0%, rgba(245,249,255,.4) 100%);
  border:0;
  box-shadow:none;

  /* STEP 2: stabilize hero box height to avoid early layout shifts */
  min-height: clamp(280px, 60vh, 640px);
}
.hero h2{
  font-family:"Changa", sans-serif;
  font-weight:800; font-size:38px; margin:0 0 10px 0; letter-spacing:.2px
}
.hero p{margin:0 0 16px 0; color:var(--muted); font-size:18px}
.page-title{font-family:"Changa", sans-serif; font-weight:800; font-size:30px; margin:8px 0 16px}

/* ===== LCP-friendly hero image (overrides & layering) ===== */
/* Make the hero a stacking context and remove any background-image to avoid double downloads */
.hero{ position:relative; overflow:hidden; background-image:none !important; }

/* Picture/img fill the card; sits at z-index:0 */
.hero picture{ display:block; position:relative; z-index:0; }
.hero-img{ width:100%; height:auto; display:block; }

/* Overlay sits ABOVE the image but BELOW the text */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.10) 100%);
  z-index:1; pointer-events:none;
}

/* All hero content except the <picture> stays above overlay */
.hero > :not(picture){ position:relative; z-index:2; }

/* Improve text readability on top of imagery */
.hero .page-title,
.hero h2, .hero p, .hero li{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}

/* CTA style on hero */
.hero .btn.outline{
  background:#fff !important;
  color:#267fdd !important;
  border-color:#fff !important;
  text-shadow:none;
}
.hero .btn.outline:hover{
  background:#f5f9ff !important;
  color:#1f6bb8 !important;
  border-color:#f5f9ff !important;
}

/* ===== Cards (Products page / generic) ===== */

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:18px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.card h3{font-family:"Changa", sans-serif; font-weight:700; margin:0 0 6px 0}
.card p{margin:0; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px}
.chip{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--primary-50); font-weight:700; font-size:12px; color:var(--primary-600)}
/* Reserve space and stop CLS for product images */
.product-media{
  position: relative;
  aspect-ratio: 7 / 4;        /* ~350x200 slot on cards */
  overflow: hidden;
  border-radius: 12px;
  background: #f3f6fb;        /* subtle placeholder */
}

/* Fill the slot like a background while keeping SEO-friendly <img> */
.product-media picture,
.product-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Forms ===== */
.form{display:grid; gap:12px; max-width:560px}
.form input,.form textarea{padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:#fff; color:var(--text)}
.form button{margin-top:8px}
.captcha{margin-top:6px}

/* ===== Tables (Admin inbox) ===== */
.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:var(--shadow)}
.table{width:100%; border-collapse:collapse; min-width:720px}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:right; vertical-align:top}
.table thead th{background:var(--primary-50)}
.table td.wrap{white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; max-width:640px}
.pager{display:flex; gap:10px; margin-top:12px}

/* ===== Modal (Admin viewer) ===== */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:100}
.modal__overlay{position:absolute; inset:0; background:rgba(2,19,51,.45); backdrop-filter:saturate(140%) blur(2px)}
.modal__content{
  position:relative; margin:6vh auto; width:min(840px, calc(100% - 32px));
  background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:16px;
}
.modal__header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--border)}
.modal__header h3{font-family:"Changa", sans-serif; margin:0}
.modal__close{background:transparent; border:none; font-size:26px; line-height:1; cursor:pointer}
.modal__body{padding:12px 0}
.meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; margin:0 0 10px}
.meta dt{font-weight:800; color:var(--muted)}
.meta dd{margin:0}
.message-box{
  max-height:40vh; overflow:auto; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  background:var(--primary-50); border:1px solid var(--border); border-radius:12px; padding:12px
}
.modal__footer{display:flex; gap:10px; justify-content:flex-start; padding-top:10px; border-top:1px solid var(--border)}
.modal__footer .disabled{pointer-events:none; opacity:.6}

/* ===== Flash messages ===== */
.flash-wrap{margin:16px 0}
.flash{padding:12px 14px; border-radius:12px; margin-bottom:8px}
.flash.error{background:#ffe6e6; border:1px solid #ffb3b3}
.flash.success{background:#e6ffef; border:1px solid #b3ffd0}

/* ===== Footer ===== */
.footer{
  margin-top:40px; padding-top:16px; border-top:1px solid var(--border);
  color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:12px
}

/* ===== WhatsApp FAB ===== */
.whatsapp-fab{
  position:fixed; left:18px; bottom:18px;
  width:56px; height:56px; border-radius:50%;
  background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-fab:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(2,19,51,.12)}

/* ===== Clean Hamburger (stacked bars, no borders) ===== */
.hamburger{display:none; background:transparent; border:none; padding:0; cursor:pointer}
.hamburger span{display:block; width:28px; height:3px; background:#fff; border-radius:3px}

/* ===== Mobile tweaks ===== */
@media (max-width: 900px){
  .hamburger{
    display:inline-flex;
    flex-direction:column;
    align-items:center; justify-content:center;
    width:56px; height:56px;
  }
  .hamburger span{margin:5px 0}

  .nav{
    position:absolute; inset-inline:0; top:80px;
    background:var(--primary);
    display:none; flex-direction:column; gap:12px; padding:14px 18px;
  }
  .nav.open{display:flex}
}

@media (max-width: 768px){
  .container{padding:0 14px}
  .brand-logo{height:56px}
  .site-title{font-size:21px}
  .site-subtitle{display:none}
  .hero{padding:24px; min-height: clamp(240px, 56vh, 560px);} /* STEP 2: stabilize mobile hero */
  .hero h2{font-size:30px}
  .hero p{font-size:16px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .cta-row .btn, .form .btn{width:100%}

  /* STEP 2: smaller fixed header on mobile to avoid jump */
  .site-header{min-height: var(--header-h-sm);}
  .nav-wrap{min-height: var(--header-h-sm);}
}

@media (max-width: 480px){
  .brand{gap:10px}
  .brand-logo{height:48px}
  .nav a{font-size:16px}
  .nav .btn.small{padding:10px 12px}
  .hero{padding:20px}
  .hero h2{font-size:26px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .whatsapp-fab{right:16px; left:auto; width:60px; height:60px}
  .icon-link{width:40px; height:40px}
}

/* === Accessibility helper === */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* === SEO intro block === */
.seo-intro{
  background:transparent;
  border-radius:0;
  padding:0;
  margin-block:24px;
  box-shadow:none;
  line-height:1.9;
}
.seo-intro h2{ font-size:1.35rem; margin:0 0 10px; }
.seo-intro h3{ font-size:1.05rem; margin:16px 0 8px; }
.seo-intro p{ margin:10px 0; }
.seo-intro ul{ padding-inline-start:1.2em; margin:8px 0; }
.seo-intro li{ margin:4px 0; }

/* two-column on desktop, single on mobile */
.seo-grid{ display:grid; gap:14px; }
@media (min-width: 900px){
  .seo-grid{ grid-template-columns: 1fr 1fr; }
}

/* Color override for SEO block text on hero */
.seo-intro,
.seo-intro h2,
.seo-intro h3,
.seo-intro p,
.seo-intro li {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* === Prevent tiny horizontal bleed from full-bleed hero inside .container === */
.container { overflow-x: clip; }
html, body { overflow-x: clip; }

/* Ensure hero H1 is readable */
.hero .page-title{
  color:#fff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* ===== Catalog accordion (RTL friendly) ===== */
.accordion{display:grid;gap:12px;margin:16px 0}
.acc{border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow)}
.acc[open]{box-shadow:0 8px 24px rgba(2,19,51,.10)}
.acc__summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-weight:700}
.acc__summary::-webkit-details-marker{display:none}
.acc__chev{width:10px;height:10px;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.acc[open] .acc__chev{transform:rotate(-135deg)}
.acc__content{padding:0 16px 14px 16px;border-top:1px solid var(--border);color:var(--muted)}
.bottom-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* Scope the catalog CTA button variants so they don't override site-wide .btn */
.bottom-cta .btn{display:inline-block;padding:.6rem 1rem;border:1px solid var(--primary,#267FDD);border-radius:.6rem;text-decoration:none}
.bottom-cta .btn-primary{background:var(--primary,#267FDD);color:#fff}
.bottom-cta .btn-secondary{background:#fff;color:var(--primary,#267FDD)}

/* === HOTFIX: make hero image behave like a background but stay discoverable === */
.hero { position: relative; overflow: hidden; border-radius: 18px; }

/* Put the <picture>/<img> behind content and fill the card */
.hero picture { position: absolute; inset: 0; z-index: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Keep overlay above image but below text */
.hero::before { z-index: 1; }
.hero > :not(picture) { position: relative; z-index: 2; }

/* Ensure hero retains card padding/background and text sits on top */
.hero { background: linear-gradient(180deg, var(--primary-50) 0%, rgba(245,249,255,.4) 100%); }
.hero .page-title, .hero h2, .hero p, .hero li {
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* === HOTFIX: restore Facebook icon placement in the header nav === */
.site-header .nav .social { margin-inline-start: 6px !important; order: initial !important; }

/* (Optional) If the site title looked larger, lock it back to the intended size */
.site-title { font-size: 24px !important; }

/* === DESKTOP NAV HOTFIX: keep one row, CTA inline, Facebook last-left === */
@media (min-width: 901px){
  /* keep the nav on a single line */
  .nav{ flex-wrap: nowrap; align-items:center; }

  /* make sure items don't wrap individually */
  .nav a,
  .nav .btn.small,
  .nav .social { white-space: nowrap; }

  /* show CTA just before Facebook (and keep it in the same row) */
  .nav .btn.small{ order: 98; }

  /* push Facebook block to the far left and make it the last item */
  .site-header .nav .social{
    margin-inline-start: auto !important; /* in RTL this becomes margin-right:auto */
    order: 99 !important;
  }
}

/* keep normal (compact) spacing */
.site-header .nav .social { margin-inline-start: 6px; }

/* === Step 6: tiny hero stabilizer for small screens (no visual change) === */
@media (max-width: 900px){
  .hero{ min-height: 48vh; }
}

/* ensures zero gaps & no layout jump */
.product-media img { display:block; width:100%; height:auto; }