/*
Theme Name: Lumi Souq
Theme URI: https://shop.lumisouq.com
Description: Bespoke Arabic-RTL ecommerce theme for Lumi Souq (Egypt). Child of Storefront. Design system per brand spec: navy/blue palette, Cairo type, token-driven. Phase 1 = foundation (tokens, RTL, header trust bar, base components).
Author: Lumi Souq
Template: storefront
Version: 0.1.0
Text Domain: lumisouq
*/

/* ============================================================
   1. DESIGN TOKENS  (single source of truth — brand spec §52)
   ============================================================ */
:root{
  --color-primary:#073B73;
  --color-primary-2:#0757B9;
  --color-action:#0967D8;
  --color-accent:#FFAD0A;
  --color-danger:#E53935;
  --color-success:#159447;

  --color-text:#14213D;
  --color-text-muted:#667085;
  --color-border:#E5EAF0;
  --color-bg:#FFFFFF;
  --color-bg-soft:#F7F9FC;
  --color-star:#FFB400;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --container:1360px;

  --shadow-sm:0 2px 10px rgba(16,24,40,.05);
  --shadow-md:0 8px 30px rgba(16,24,40,.08);

  /* spacing scale (brand spec §53) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px;
}

/* ============================================================
   2. BASE / RTL / TYPOGRAPHY  (§32 native RTL, §2 type scale)
   ============================================================ */
body{
  font-family:"Cairo",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  font-size:16px;
  line-height:1.75;
}
h1,h2,h3,h4{ color:var(--color-text); font-weight:800; line-height:1.3; }
h1{ font-size:2.375rem; }   /* ~38px */
h2{ font-size:1.875rem; }   /* ~30px */
h3{ font-size:1.4rem; }
a{ color:var(--color-action); text-decoration:none; }
a:hover{ color:var(--color-primary-2); }

/* container width (§3) */
.col-full{ max-width:var(--container); padding-inline:var(--s-8); }

/* ============================================================
   3. BUTTONS  (§8 conversion CTAs)
   ============================================================ */
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce .button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt{
  background:var(--color-action);
  color:#fff;
  border:0;
  border-radius:var(--radius-md);
  font-weight:700;
  font-family:inherit;
  padding:.7em 1.5em;
  transition:background .15s ease, transform .15s ease;
}
button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{
  background:var(--color-primary-2);
  color:#fff;
}

/* prices + sale badge */
.woocommerce ins, .woocommerce .price, .price{ color:var(--color-primary); font-weight:800; }
.woocommerce del{ color:var(--color-text-muted); font-weight:500; }
.woocommerce span.onsale{
  background:var(--color-danger); color:#fff;
  border-radius:var(--radius-sm); min-height:auto; min-width:auto;
  padding:.25em .6em; line-height:1.4;
}

/* ============================================================
   4. TOP TRUST BAR  (§4 global header trust strip)
   ============================================================ */
.ls-topbar{ background:var(--color-primary); color:#fff; font-size:13px; }
.ls-topbar .col-full{
  display:flex; gap:var(--s-6); flex-wrap:wrap;
  align-items:center; justify-content:center; padding-block:var(--s-2);
}
.ls-topbar .ls-item{ display:inline-flex; align-items:center; gap:6px; opacity:.96; }
@media(max-width:768px){
  .ls-topbar{ font-size:12px; }
  .ls-topbar .ls-item:nth-child(n+3){ display:none; }
}

/* ============================================================
   5. HEADER / FOOTER base (refined in the header/footer phase)
   ============================================================ */
.site-header{ background:#fff; border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-sm); }
.storefront-primary-navigation{ background:#fff; border-bottom:1px solid var(--color-border); }
.site-footer{ background:var(--color-primary); color:#dbe6f4; }
.site-footer a{ color:#c2d3ea; }
.site-footer a:hover{ color:#fff; }

/* ============================================================
   6. PRODUCT CARD baseline  (§8 — refined in the card phase)
   ============================================================ */
.woocommerce ul.products li.product{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--s-3);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:15px; font-weight:600; color:var(--color-text);
  min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.woocommerce .star-rating span{ color:var(--color-star); }

/* ============================================================
   7. RESPONSIVE base  (§33)
   ============================================================ */
@media(max-width:768px){
  .col-full{ padding-inline:var(--s-4); }
  h1{ font-size:1.7rem; }
  h2{ font-size:1.4rem; }
  body{ font-size:15px; }
}

/* ============================================================
   8. FOOTER  (§47 rich, clean footer)
   ============================================================ */
.ls-footer{ background:var(--color-primary); color:#dbe6f4; }
.ls-footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:var(--s-8); padding-block:var(--s-12);
}
.ls-footer h3{ color:#fff; margin:0 0 var(--s-3); }
.ls-footer h4{ color:#fff; font-size:1.05rem; margin:0 0 var(--s-4); }
.ls-footer p{ color:#b9cae2; line-height:1.9; margin:0; }
.ls-footer ul{ list-style:none; margin:0; padding:0; }
.ls-footer li{ margin-bottom:var(--s-2); color:#c2d3ea; }
.ls-footer a{ color:#c2d3ea; }
.ls-footer a:hover{ color:#fff; }
.ls-pay{ margin-top:var(--s-4); display:inline-block; background:rgba(255,255,255,.10);
  padding:6px 14px; border-radius:var(--radius-sm); color:#fff; font-size:13px; }
.ls-footer__bar{ border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:#a9bcd7; }
.ls-footer__bar .col-full{ padding-block:var(--s-4); text-align:center; }
@media(max-width:900px){ .ls-footer__grid{ grid-template-columns:1fr 1fr; gap:var(--s-6); } }
@media(max-width:560px){ .ls-footer__grid{ grid-template-columns:1fr; } }

/* ============================================================
   9. MOBILE STICKY BOTTOM NAV  (§5)
   ============================================================ */
.ls-mobnav{ display:none; }
@media(max-width:768px){
  .ls-mobnav{
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:999;
    background:#fff; border-top:1px solid var(--color-border);
    box-shadow:0 -2px 12px rgba(16,24,40,.08); padding:6px 0;
  }
  .ls-mobnav a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:11px; color:var(--color-text-muted);
  }
  .ls-mobnav a:hover{ color:var(--color-action); }
  .ls-mobnav a span{ font-size:20px; line-height:1; position:relative; }
  .ls-mobnav__cart b{
    position:absolute; top:-7px; inset-inline-end:-11px; background:var(--color-danger);
    color:#fff; font-size:10px; font-weight:700; line-height:1.5; border-radius:999px; padding:0 5px;
  }
  body{ padding-bottom:66px; } /* clearance for the fixed bar */
}

/* ============================================================
   10. HEADER polish (full restructure comes in the header phase)
   ============================================================ */
.site-header .storefront-product-search .search-field,
.site-header .widget_product_search .search-field{
  border-radius:var(--radius-md); border:1px solid var(--color-border);
  background:var(--color-bg-soft); padding:.7em 1em;
}
.site-header .site-header-cart .cart-contents{ color:var(--color-text); font-weight:700; }
.site-header .site-header-cart .cart-contents:hover{ color:var(--color-action); }

/* ============================================================
   11. CUSTOM HEADER + CATEGORY NAV  (§4)
   ============================================================ */
.ls-header{ display:flex; align-items:center; gap:var(--s-6); padding-block:var(--s-4); }
.ls-header__brand{ flex:0 0 auto; }
.ls-header__brand a{ display:inline-block; font-size:1.6rem; font-weight:800; color:var(--color-primary); line-height:1.15; }
.ls-header__brand .ls-tag{ display:block; font-size:12px; font-weight:500; color:var(--color-text-muted); }

.ls-search{
  flex:1 1 auto; display:flex; align-items:stretch; max-width:640px;
  border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:#fff;
}
.ls-search__cat{
  border:0; border-inline-end:1px solid var(--color-border); background:var(--color-bg-soft);
  padding:0 10px; color:var(--color-text); font-family:inherit; font-size:14px; max-width:150px;
}
.ls-search input[type="search"]{ flex:1; min-width:0; border:0; padding:.7em 1em; font-family:inherit; outline:none; }
.ls-search button{ border:0; background:var(--color-action); color:#fff; padding:0 18px; font-size:16px; cursor:pointer; }
.ls-search button:hover{ background:var(--color-primary-2); }

.ls-header__actions{ flex:0 0 auto; display:flex; align-items:center; gap:var(--s-6); }
.ls-header__actions a{ display:inline-flex; align-items:center; gap:6px; color:var(--color-text); font-size:14px; font-weight:600; }
.ls-header__actions a:hover{ color:var(--color-action); }
.ls-header__actions span[aria-hidden]{ font-size:20px; }
.ls-cart{ position:relative; }
.ls-cart__icon{ position:relative; }
.ls-cart__icon b{
  position:absolute; top:-8px; inset-inline-end:-11px; background:var(--color-danger);
  color:#fff; font-size:10px; font-weight:700; line-height:1.6; border-radius:999px; padding:0 5px;
}

.ls-nav{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.ls-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.ls-nav li a{ display:block; padding:12px 16px; color:var(--color-text); font-weight:600; font-size:15px; }
.ls-nav li a:hover{ color:var(--color-action); }
.ls-nav__home a{ color:var(--color-action); }

@media(max-width:768px){
  .ls-header{ flex-wrap:wrap; gap:var(--s-3); padding-block:var(--s-3); }
  .ls-header__brand a{ font-size:1.3rem; }
  .ls-search{ order:3; flex-basis:100%; max-width:none; }
  .ls-header__actions{ margin-inline-start:auto; gap:var(--s-4); }
  .ls-acct-label, .ls-cart__label{ display:none; }
  .ls-nav{ display:none; }
}