/* ==========================================================================
   Arabic layer. Loaded only on the Arabic template, over style.css.
   Everything here is either a typeface swap or a mirror — no new layout.
   ========================================================================== */

@font-face { font-family: 'Aktiv Arabic'; src: url('assets/fonts/AktivArabic-Light.woff2') format('woff2');  font-weight: 300; font-display: swap; }
@font-face { font-family: 'Aktiv Arabic'; src: url('assets/fonts/AktivArabic-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Aktiv Arabic'; src: url('assets/fonts/AktivArabic-Black.woff2') format('woff2');  font-weight: 900; font-display: block; }

/* ---------- type ----------
   GC Grind and DX Monstral have no Arabic glyphs at all, so every headline
   moves to Aktiv Black — the brandbook's own Arabic face. Uppercase is
   meaningless in Arabic and italic would be a faked oblique, so both go. */
.dc-ar body, body.dc-ar { font-family: 'Aktiv Arabic', system-ui, sans-serif; font-weight: 300; }

.dc-ar .grind,
.dc-ar #dc-player .dc-lbl b,
.dc-ar #dc-shop .dc-ring text,
.dc-ar #dc-num,
.dc-ar #dc-lead,
.dc-ar #dc-tail .a,
.dc-ar #dc-tail .b,
.dc-ar .dc-btn span,
.dc-ar #dc-foot nav a {
  font-family: 'Aktiv Arabic', sans-serif;
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
}

/* the brand's own name stays in the Latin face wherever it appears */
.dc-ar #dc-player .dc-lbl b { font-family: 'GC Grind', sans-serif; font-weight: 400; text-transform: uppercase; }

/* Arabic sets shorter than Latin at the same point size and sits lower on the
   line, so the display sizes need pulling back and the leading opening up */
.dc-ar #dc-lead { font-size: clamp(26px, 7.1vw, 100px); line-height: 1.12; transform-origin: right center; }
.dc-ar #dc-tail .a { font-size: clamp(32px, 8.8vw, 126px); line-height: 1.1; }
.dc-ar #dc-tail .b { font-size: clamp(36px, 9.6vw, 138px); line-height: 1.1; }
.dc-ar #dc-lockup .a { font-size: clamp(20px, 2.2vw, 31px); line-height: 1.15; }
.dc-ar #dc-lockup .b { font-size: clamp(25px, 2.9vw, 40px); line-height: 1.15; }
/* Aktiv Black sits smaller on the em than GC Grind, so the Arabic lockup
   needs more point size than the English one to carry the same weight */
.dc-ar #dc-slogan { flex-direction: row; }
.dc-ar #dc-slogan .a { font-size: clamp(34px, 5.4vw, 78px); }
.dc-ar #dc-slogan .b { font-size: clamp(42px, 6.8vw, 98px); }
.dc-ar #dc-depth .d2 span,
.dc-ar #dc-seekers .h2 span { line-height: 1.16; }
.dc-ar p { line-height: 1.9; }

/* the counter: Arabic-Indic digits change width as they climb, so lock the
   box and use the face's tabular figures */
.dc-ar #dc-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; min-width: 2.1ch; text-align: center; }

/* The header deliberately does NOT mirror: logo left, player and switcher
   right, exactly as the English page. Arabic runs inside the label still
   shape right-to-left on their own — bidi handles that regardless. */
.dc-ar #dc-hdr { direction: ltr; }

/* ---------- mirror ----------
   Most of the page is centred, so this is the whole of it. */

/* the seekers face into the page, so they flip with the reading direction */
.dc-ar #dc-seeker img,
.dc-ar #dc-reader,
.dc-ar #dc-depth img { transform: scaleX(-1); }
.dc-ar #dc-crowd img { transform: translateY(150px) scaleX(-1); }
.dc-ar #dc-crowd img.dc-in { transform: translateY(0) scaleX(-1); }

.dc-ar #dc-reader { right: auto; left: clamp(0px, 6vw, 90px); }

/* flex-start / flex-end are LOGICAL — dir="rtl" already flips them, so the
   crowd and the one-bite block mirror on their own. Only the physical
   properties below need touching, or they end up double-mirrored. */
.dc-ar #dc-crowd { padding-left: 0; padding-right: clamp(0px, 2.8vw, 40px); }
.dc-ar #dc-crowd .f2 { margin-left: 0; margin-right: clamp(-30px, -3.8vw, -54px); }
.dc-ar #dc-crowd .f3 { margin-left: 0; margin-right: clamp(-36px, -4.6vw, -66px); }
.dc-ar #dc-crowd .f4 { margin-left: 0; margin-right: clamp(-32px, -4vw, -58px); }

.dc-ar #dc-onebite { right: auto; left: clamp(0px, 7.6vw, 110px); }

/* the pack shot's dark side moves across so the copy still lands on it.
   No object-position mirror here: the photo fills the container's width
   exactly, so it has no horizontal slack to shift into — only the scrim
   direction matters. The ramp is a little stronger than the English one
   because the Arabic headline starts closer to the box's edge. */
.dc-ar #dc-pack .scrim { background: linear-gradient(270deg, rgba(30,1,42,.96) 0%, rgba(30,1,42,.86) 28%, rgba(30,1,42,.3) 50%, rgba(30,1,42,0) 64%); }
/* The banner puts the product on the right and the clear lavender on the
   left, so mirroring the copy dropped it on top of the box. This section
   keeps the English placement in both languages — the artwork decides the
   side here, not the reading direction. The text itself still runs RTL. */

@media (max-width: 900px) {
  .dc-ar #dc-crowd { justify-content: center; padding-right: 0; }
  .dc-ar #dc-crowd .f1 { margin-right: 0; }
  .dc-ar #dc-crowd .f2 { margin-right: -18px; }
  .dc-ar #dc-crowd .f3 { margin-right: -21px; }
  .dc-ar #dc-crowd .f4 { margin-right: -20px; }
  .dc-ar #dc-player { left: auto; right: 16px; }
  .dc-ar #dc-slogan .b { font-size: clamp(30px, 9vw, 52px); }
  .dc-ar #dc-lockup .a { font-size: 22px; }
  .dc-ar #dc-lockup .b { font-size: 27px; }
  .dc-ar #dc-shop .dc-ring text { font-size: 11px; }
  .dc-ar #dc-shop .dc-ring text.dot { font-size: 14px; }
  .dc-ar #dc-shop { right: auto; left: 16px; }
}

/* the D/C mark, the ghost DC and the counter's climb are deliberately NOT
   mirrored — the mark is the logo, and numbers count up the same way. */

/* Arabic is a joined script, so the English trick of opening the ring up with
   letter-spacing would break the words apart. A fourth repeat fills the
   circumference instead, pulled back with word-spacing. */
.dc-ar #dc-shop .dc-ring text { letter-spacing: 0; word-spacing: 0; font-size: 10px; fill: var(--white); }
.dc-ar #dc-shop .dc-ring text.dot { font-size: 13px; fill: rgba(253,249,255,.55); }

/* ---------- 72 ----------
   The number carries the section, so it runs far larger than the English
   "72 Hours" line. Sized against the cookie behind it (clamp(300px, 45vw,
   640px) wide) so the whole stack stays inside the biscuit at every width. */
.dc-ar #dc-72 .s1 { font-size: clamp(24px, 3.6vw, 52px); margin-bottom: clamp(4px, 0.8vw, 12px); }
.dc-ar #dc-72 .s2 { font-size: clamp(168px, 34vw, 350px); line-height: .8; }
.dc-ar #dc-72 .s3 { font-size: clamp(24px, 3.6vw, 52px); margin-top: clamp(2px, 0.6vw, 10px); }

/* ---------- mobile header ----------
   "زيارة المتجر" sets ~50% wider than "Visit Shop", which pushed the button
   into the centred logo at 375px. Both come down a notch on the Arabic page
   only, so the English header is untouched. */
@media (max-width: 900px) {
  .dc-ar .dc-visit { font-size: 12px; padding: 0 10px; letter-spacing: 0; height: 34px; }
  .dc-ar #dc-hdr img { height: 24px; }
  /* the RTL right-alignment out-specifies the mobile centring rule, so the
     portrait banner's copy has to be re-centred here explicitly */
  .dc-ar #dc-pack .dc-copy { left: 0; right: 0; align-items: center; text-align: center; }
}

/* background-position is physical — the caret would otherwise sit under the text */
.dc-ar .dc-f select { background-position: left 16px center; }
.dc-ar .dc-f > span:first-child { letter-spacing: 0; font-family: 'Aktiv Arabic', sans-serif; font-weight: 900; font-size: clamp(16px, 1.6vw, 19px); }
.dc-ar .dc-ct-h { line-height: 1.15; }

/* The phone field reads left to right in both languages: dial code first,
   number after. Under dir=rtl the grid would otherwise put the code on the
   right, which is not how anyone writes a phone number. */
.dc-ar .dc-phone { direction: ltr; }
.dc-ar .dc-phone select { background-position: right 16px center; padding-inline: 16px 42px; }
@media (max-width: 560px) {
  .dc-ar .dc-phone select { background-position: right 8px center; padding-inline: 12px 26px; }
}

/* the chevron points the way the language reads */
.dc-ar .dc-back svg { transform: scaleX(-1); }
.dc-ar .dc-back { padding: 9px 12px 9px 16px; }
.dc-ar .dc-back span { font-family: 'Aktiv Arabic', sans-serif; font-weight: 900;
  text-transform: none; letter-spacing: 0; font-size: 14px; }

.dc-ar .dc-f input, .dc-ar .dc-f select, .dc-ar .dc-f textarea,
.dc-ar .dc-phone, .dc-ar .dc-phone select, .dc-ar .dc-phone input {
  font-family: 'Aktiv Arabic', system-ui, sans-serif; font-weight: 300;
}
.dc-ar .dc-prose-h { line-height: 1.15; }
.dc-ar .dc-prose h2 { letter-spacing: 0; font-family: 'Aktiv Arabic', sans-serif; font-weight: 900; }
.dc-ar .dc-prose { line-height: 1.9; }