/* =============================================================
   ALAQAAR — BASE STYLESHEET
   Design tokens (colors/spacing/type), a small reset, layout
   primitives (container, buttons, icons), and the header/footer
   chrome shared by every section. Section-specific rules
   (hero, about, services, projects, biography, contact) live in
   sections.css; RTL-only overrides live in rtl.css.
   Mobile-first throughout: base rules target small screens, and
   min-width media queries progressively enhance for larger ones.
   ============================================================= */

:root {
  /* Client-specified palette (2026-09-20 redesign): cream site background,
     navy cards/navbar, a darker navy for the top info bar, and gold reserved
     for accents only (borders, icons, headings, CTA buttons — never a full
     background fill). Variable *names* (--color-navy, --color-gold, ...) are
     kept as-is since every component below already references them. */
  --color-navy: #474e56;
  --color-navy-light: #5b636d;
  --color-navy-hover: #737c88; /* ~3 shades lighter than --color-navy, used for the layered Contact button's hover face */
  --color-black: #363b41;
  --color-gold: #b28a50;
  --color-gold-light: #cba876;
  --color-gold-dark: #93703f;
  --color-cream: #ebddd4;
  --color-cream-shade: #cbb896; /* darker cream/tan, the layered Contact button's back-layer color */
  --color-white: #ffffff;
  --color-text: #33302b;
  --color-text-muted: #6f6656;
  --color-border: #cbb896;
  --color-ink: #232d36; /* dark slate used as the "main text" color on light backgrounds (About section headings/body, heading pills). Card icon frames are gold (--icon-frame-color), not ink. */

  /* Subtly deeper cream tones for section rhythm (footer, biography, our
     media, CTA bands) — everything still reads as "cream", just a touch
     richer than the main --color-cream background so alternating sections
     remain visually distinct without introducing a new hue. */
  --color-surface: #ded0b4;
  --color-surface-strip: #d4c29e;

  /* Two type systems, chosen per script — see wwwroot/css/fonts.css for why
     Oswald/Didact Gothic (no Arabic glyphs) only apply under [dir="ltr"]
     (English), while Arabic (this site's default) uses IBM Plex Sans
     Arabic throughout (switched from Cairo, 2026-09-21 refinement pass —
     a cleaner contemporary Naskh-style sans per the client's reference).
     --font-heading/--font-body are the ones components actually use. */
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-heading: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-base: var(--font-body);

  /* Widened from 1180px: on anything wider than a laptop screen, the old
     cap left a large, increasingly lopsided empty margin on both sides of
     .site-main's already-narrower-than-the-viewport content column (see
     the "margin-inline-start: var(--sidebar-width)" rule below) — most
     visible in the Projects section's 2-up carousel, whose cards were far
     smaller than the space actually available next to the sidebar. 1600px
     uses that space properly up to large monitors while still capping out
     before an ultra-wide screen would stretch card images/line lengths
     too far. */
  --container-max: 1600px;
  --gutter: 1.25rem;
  /* 0 at tablet/desktop: the thin top info bar was removed there
     (2026-09-24) — it only survives on phones (<576px, redefined to
     2.5rem in the mobile drawer block at the end of this file), where it
     still hosts the drawer hamburger. */
  --mobile-header-height: 0px;
  --navbar-height: 88px;

  /* Navbar logo. The PNG (3402x681) has transparent margins around the
     artwork: 407px on its left, 341px on its right. --navbar-logo-art-start
     is that margin on the inline-start side at the displayed height, so
     anything lined up with the logo (the hero captions) can match the
     VISIBLE artwork, not the image box. --navbar-brand-margin is the logo's
     own inline margin (1.5rem on desktop, see the >=992px block). */
  --navbar-logo-height: 67.2px;
  --navbar-brand-margin: 0px;
  --navbar-logo-art-start: calc(var(--navbar-logo-height) * 407 / 681);

  /* Sharper, flatter corners than a typical SaaS/bootstrap template —
     reads closer to an architecture/interior-design studio site. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 3px rgba(21, 17, 13, 0.06);
  --shadow-md: 0 6px 24px rgba(21, 17, 13, 0.10);

  --transition: 200ms ease;

  /* Soft-relief surface + ink (redesign 2026-10; night mode overrides them
     under html[data-mode="dark"] in header.css). */
  --nm-bg: #ebddd4; --nm-hi: #fff8f1; --nm-lo: #c9b5a3;
  --ink: #232d36; --muted: #5d5348;
  --gold: #b28a50; --gold-light: #cba876; --gold-dark: #93703f;
}
/* Arabic: the logo's inline-start is its RIGHT edge (341px transparent margin). */
[dir="rtl"] { --navbar-logo-art-start: calc(var(--navbar-logo-height) * 341 / 681); }

/* English pages get the flair-egypt-inspired Latin pairing: bold uppercase
   Oswald for headings, clean Didact Gothic for body copy. Scoped to
   [dir="ltr"] (set on <html> in _Layout.cshtml whenever the active culture
   is English) so it never applies to Arabic text. */
[dir="ltr"] {
  --font-heading: "Oswald", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Didact Gothic", "Segoe UI", Tahoma, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
}

/* Oswald reads best with a touch of extra tracking — scoped to [dir="ltr"]
   only (rather than a base rule zeroed back out for RTL) since Arabic
   headings use Cairo at its normal spacing. */
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4 {
  letter-spacing: 0.015em;
}

p { margin: 0 0 1em; }

button { font-family: inherit; cursor: pointer; }
/* Form fields don't inherit font-family by default (browsers give them a
   system font) — without this, the navbar search box and form inputs
   typed/placeholder Arabic would fall back to a different face. */
input, textarea, select { font-family: inherit; }

/* Respect users who've asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Small cream spacer between two sections — used where a whole section
   was removed (see the "Our Story" removal, 2026-09-20) and the two
   remaining sections' own padding isn't quite enough on its own, without
   reintroducing a large empty block. */
.section-spacer { height: 2.5rem; background: var(--color-cream); }

/* Offset by the stacked fixed mobile header (phones) + navbar height (plus a little
   breathing room) so an anchor-jump never lands a heading underneath
   them. */
section[id] { scroll-margin-top: calc(var(--mobile-header-height) + var(--navbar-height) + 24px); }

/* Accessible skip-link: off-screen until it receives keyboard focus. */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -3rem;
  background: var(--color-gold);
  color: var(--color-navy);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus { top: calc(var(--mobile-header-height) + var(--navbar-height) + 0.5rem); }

/* ---------- Icons ---------- */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 2.25rem; height: 2.25rem; }
.icon--gold { color: var(--color-gold-dark); }

/* ---------- Icon frames (site-wide) ----------
   Every card's icon frame — Services squares, Guarantee / What Sets Apart /
   Choose Your Designer / Our Branches / About feature circles, the Our Media play discs, the /Services page
   circles — gets the same gold border as the gold icons inside it. This is
   the ONLY place that border is set: shape, size and fill stay with each
   component in sections.css. A frame that needs a thinner line sets
   --icon-frame-width on itself (the Designer circles use 1.5px). */
:root { --icon-frame-color: var(--color-gold); }
.service-card__icon,
.guarantee-feature-card__icon,
.why-apart-item__icon,
.designer-item__icon,
.feature-list__icon,
.branch__icon,
.media-card__play { border: var(--icon-frame-width, 2px) solid var(--icon-frame-color); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition), color var(--transition);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }

/* ---------- Shared section scaffolding ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 1rem;
}
.eyebrow--light { color: var(--color-gold-light); }

.section-heading { max-width: 720px; margin: 0.75rem auto 4rem; text-align: center; }
.section-title {
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 4rem);
  text-transform: uppercase;
  font-weight: 700;
}
[dir="ltr"] .section-title { font-family: 'Josefin Sans', var(--font-heading); font-weight: 700; letter-spacing: 0.08em; }
/* Phones: the wide-tracked English uppercase title ("WHY ALAQAAR") broke onto
   several lines — smaller and tighter there so short titles stay on one line. */
@media (max-width: 575.98px) {
  [dir="ltr"] .section-title { font-size: 1.9rem; letter-spacing: 0.04em; }
}
.section-subtitle { color: var(--color-text-muted); font-size: 1.05rem; }

/* Shared section heading pill (the "مشاريعنا المميزة" style): thin gold
   outline, transparent inside, bold text. Used by every home-page section
   heading — don't restyle it per section; on a dark background set
   --heading-pill-color on the section instead (see .partners etc. in
   sections.css). Long headings wrap inside the pill and stay centered. */
:root {
  --heading-pill-border: var(--color-gold);
  --heading-pill-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem);
  --heading-pill-padding: 0.35em 1.4em;
}
.heading-pill {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 1.25rem;
  padding: var(--heading-pill-padding);
  border: 1.5px solid var(--heading-pill-border);
  border-radius: 999px;
  background: transparent;
  color: var(--heading-pill-color, var(--color-ink));
  font-size: var(--heading-pill-size);
  font-weight: 700; /* heaviest real weight of the self-hosted fonts */
  line-height: 1.3;
  text-align: center;
  overflow-wrap: break-word;
}
[dir="ltr"] .heading-pill { font-family: 'Josefin Sans', var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; }
/* Dark-background sections: cream text, border stays gold. */
.partners,
.designer-section,
.guarantee-section { --heading-pill-color: var(--color-cream); }

/* "ALAQAAR" inherits its parent's font, size and color everywhere. In
   large headings only, Helpers/BrandMarkHtml.Bold wraps it in a plain
   <strong>; pin that to real 700 rather than the UA's relative "bolder". */
:is(h1, h2, h3, .about__statement) > strong { font-weight: 700; }

.alert {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.alert--success { background: #eaf6ec; color: #1e6b34; border: 1px solid #bfe4c6; }
.alert--error { background: #fdecec; color: #a3271f; border: 1px solid #f3c6c2; }

.social-links { display: flex; align-items: center; gap: 0.75rem; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.social-links a:hover { transform: translateY(-2px); }