/* ==========================================================================
   Gul & Gift — Urdu and Arabic support

   Self-hosted, and deliberately structured so an English visitor downloads
   none of it. Every @font-face below carries the Arabic unicode-range, so a
   browser only fetches the file when the page actually contains characters in
   that range. The stylesheet itself is a few KB; the 376 KB of font data is
   never touched on an English page.

   Only the Arabic subsets are self-hosted. Latin text keeps using DM Sans,
   which the theme already loads, so nothing is duplicated.
   ========================================================================== */

/* Noto Nastaliq Urdu ships a single weight — 400 and 600 are byte-identical
   upstream, so one file serves the whole range rather than two. */
@font-face{
  font-family:'Noto Nastaliq Urdu';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/noto-nastaliq-urdu-400-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                U+FE70-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF,
                U+1EE00-1EEFF;
}

@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                U+FE70-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF,
                U+1EE00-1EEFF;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                U+FE70-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF,
                U+1EE00-1EEFF;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                U+FE70-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF,
                U+1EE00-1EEFF;
}

/* --------------------------------------------------------------------------
   Per-language typography.

   Nastaliq is a sloping, deeply stacked script: set at Latin line-height it
   collides with itself. It also reads small at a given px size, so it is
   sized up rather than matched to DM Sans.
   -------------------------------------------------------------------------- */
html[lang^="ur"] body,
html[lang^="ur"] button,
html[lang^="ur"] input,
html[lang^="ur"] select,
html[lang^="ur"] textarea{
  font-family:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
  line-height:2.05;
  font-size:1.05em;
}
html[lang^="ur"] h1,
html[lang^="ur"] h2,
html[lang^="ur"] h3,
html[lang^="ur"] h4,
html[lang^="ur"] .entry-title{
  font-family:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
  line-height:1.9;
  font-weight:400;      /* nastaliq has no true bold; faux-bold smears it */
}

html[lang^="ar"] body,
html[lang^="ar"] button,
html[lang^="ar"] input,
html[lang^="ar"] select,
html[lang^="ar"] textarea{
  font-family:'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  line-height:1.75;
}
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] .entry-title{
  font-family:'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  line-height:1.45;
}

/* Prices, phone numbers and order IDs stay in Latin digits and stay LTR,
   otherwise "Rs 4,000" reorders into nonsense inside an RTL paragraph. */
html[lang^="ur"] .price,
html[lang^="ar"] .price,
html[lang^="ur"] .woocommerce-Price-amount,
html[lang^="ar"] .woocommerce-Price-amount,
.gg-ltr{
  direction:ltr;
  unicode-bidi:isolate;
  font-family:'DM Sans', system-ui, sans-serif;
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   Right-to-left layout.

   Covers the theme chrome and our own components. Liore's utility classes are
   physical rather than logical, so anything that reads left/right explicitly
   has to be mirrored here.
   -------------------------------------------------------------------------- */
[dir="rtl"] body{ text-align:right; }

[dir="rtl"] .header-inner,
[dir="rtl"] .footer-inner,
[dir="rtl"] .navigation .menu,
[dir="rtl"] .header-actions,
[dir="rtl"] .iconbox{ flex-direction:row-reverse; }

[dir="rtl"] .navigation .menu .sub-menu{
  left:auto;
  right:0;
  text-align:right;
}

[dir="rtl"] ul,
[dir="rtl"] ol{ padding-left:0; padding-right:1.4em; }

/* Our own components. */
[dir="rtl"] .gg-cat__body,
[dir="rtl"] .gg-trust-strip .iconbox-detail,
[dir="rtl"] .gg-el{ text-align:right; }

/* The trust rail must start at the right edge and scroll leftwards. */
[dir="rtl"] .gg-trust-strip{ direction:rtl; }

/* Anything genuinely directional — a "next" chevron — flips with the page. */
[dir="rtl"] .gg-flip{ transform:scaleX(-1); }

/* --------------------------------------------------------------------------
   Language switcher, in the top bar.
   Sits on deep forest (#061F18); white text on that measures well past AAA.
   -------------------------------------------------------------------------- */
.gg-langs{
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.gg-langs__item{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:12px;
  line-height:1.5;
  color:#FFFFFF;
  text-decoration:none;
  white-space:nowrap;
  opacity:.72;
  transition:opacity .15s ease, background-color .15s ease;
}
.gg-langs__item:hover,
.gg-langs__item:focus-visible{
  opacity:1;
  background-color:rgba(255,255,255,.12);
  color:#FFFFFF;
}
.gg-langs__item.is-current{
  opacity:1;
  background-color:#E89A3A;
  color:#0A382E;          /* forest on amber = 5.63, AA. White here fails. */
  font-weight:600;
}
.gg-langs__item:focus-visible{
  outline:2px solid #E89A3A;
  outline-offset:2px;
}
/* Each label is set in its own script, so name the font per item. */
.gg-langs__item[lang^="ur"]{ font-family:'Noto Nastaliq Urdu', serif; font-size:13px; }
.gg-langs__item[lang^="ar"]{ font-family:'IBM Plex Sans Arabic', sans-serif; }

@media (max-width: 767.98px){
  .gg-langs__item{ padding:3px 7px; font-size:11px; }
}

@media (prefers-reduced-motion: reduce){
  .gg-langs__item{ transition:none; }
}