/* ==========================================================================
   Al Bariq AlFedhi Contracting Est. - Design tokens, reset, base, layout
   ==========================================================================
   Load order:  styles.css  ->  components.css  ->  responsive.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand ---------------------------------------------------------------- */
  --navy:            #0f3777;   /* primary brand colour (matches logo ink)   */
  --navy-deep:       #0a2450;
  --navy-ink:        #071a3a;   /* darkest - footers, hero scrims            */
  --navy-tint:       #e8edf7;   /* pale navy wash for section backgrounds    */
  --steel:           #2f5d8c;
  --gold:            #c49a52;   /* accent - use sparingly                    */
  --gold-soft:       #f2e7d3;

  /* Neutrals -------------------------------------------------------------- */
  --charcoal:        #1b2430;
  --ink:             #16202c;
  --muted:           #667085;
  --border:          #dce2e8;
  --border-strong:   #c3ccd6;
  --surface:         #ffffff;
  --surface-alt:     #f5f7fa;
  --surface-sunken:  #eef1f6;
  --white:           #ffffff;

  /* Status ---------------------------------------------------------------- */
  --danger:          #b42318;
  --danger-soft:     #fef3f2;
  --success:         #0d7a52;
  --success-soft:    #eaf7f1;

  /* Typography ------------------------------------------------------------ */
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-arabic:  "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  /* Fluid type scale (clamp: min / preferred / max) ------------------------ */
  --fs-display: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);
  --fs-h1:      clamp(1.95rem, 1.35rem + 2.4vw, 3.1rem);
  --fs-h2:      clamp(1.6rem,  1.22rem + 1.5vw, 2.4rem);
  --fs-h3:      clamp(1.2rem,  1.06rem + 0.55vw, 1.5rem);
  --fs-h4:      clamp(1.03rem, 0.98rem + 0.25vw, 1.18rem);
  --fs-lead:    clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.9125rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.78rem;

  /* Spacing --------------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;

  /* One row pitch shared by the footer Quick Links and Contact lists, so
     their rows line up with each other. */
  --footer-row-gap: 0.55rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);

  /* Layout ---------------------------------------------------------------- */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 68ch;
  --gutter:         clamp(1.15rem, 0.7rem + 2vw, 2.5rem);

  /* The masthead is a slim navy utility bar in normal flow, followed by a
     white header that sticks to the top of the viewport. Only the header is
     ever pinned, so --header-h is what anchor scrolling has to clear. */
  --header-h:       100px;
  --preheader-h:    42px;

  /* Radii - restrained, industrial. Never fully rounded cards. ------------- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;

  /* Elevation ------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 32, 56, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 32, 56, 0.07);
  --shadow-md: 0 8px 24px rgba(16, 32, 56, 0.09);
  --shadow-lg: 0 18px 48px rgba(16, 32, 56, 0.14);

  /* Motion ---------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    140ms;
  --t-base:    240ms;
  --t-slow:    420ms;

  --focus-ring: 0 0 0 3px rgba(15, 55, 119, 0.28);

  /* Blueprint hatch used behind media placeholders ------------------------ */
  --blueprint:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 28px 100%;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Belt and braces against horizontal scroll. `clip` rather than `hidden`
     on purpose: `hidden` turns <body> into a scroll container, which stops
     `position: sticky` working on the header. `clip` does not. */
  overflow-x: clip;
}

/* RTL readiness: every directional rule below uses logical properties. */
[dir="rtl"] body { font-family: var(--font-arabic), var(--font-body); }

img,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

img { object-fit: cover; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* :where() holds this at zero specificity, so it strips the browser's default
   40px indent and never fights a component that sets its own padding.

   Written as a bare ul[class] it was (0,1,1) - more specific than any
   single-class rule - so .mobile-nav__list asking for 1.5rem of inline
   padding got its left side silently zeroed. The drawer's menu items sat
   flush against the panel edge while the logo above them and the button
   below them were inset, and the same was true of both submenus. */
:where(ul[class], ol[class]) {
  list-style: none;
  padding-inline-start: 0;
}

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--navy-ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

hr {
  border: 0;
  border-block-start: 1px solid var(--border);
}

/* Focus: always visible, never removed. ---------------------------------- */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--gold);
}

::selection {
  background: var(--navy);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-inline-size: var(--container-wide); }
.container--text { max-inline-size: var(--container-text); }

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight   { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.section--alt     { background: var(--surface-alt); }
.section--sunken  { background: var(--surface-sunken); }
.section--tint    { background: var(--navy-tint); }

.section--dark {
  background: var(--navy-ink);
  color: rgba(255, 255, 255, 0.82);
}

.section--dark :where(h1, h2, h3, h4) { color: var(--white); }

/* Grid helpers - auto-fit keeps every card grid reflowing without
   per-breakpoint overrides. */
.grid { display: grid; gap: var(--space-lg); }

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.stack > * + * { margin-block-start: var(--space-md); }
.stack--lg > * + * { margin-block-start: var(--space-lg); }

.flow > * + * { margin-block-start: 1em; }

/* Skip link -------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-md);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
}

.skip-link:focus-visible {
  inset-block-start: 0;
  outline-offset: -2px;
}

/* Screen-reader-only ----------------------------------------------------- */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden icon sprite ----------------------------------------------------- */
.icon-sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Directional icons must mirror in RTL. */
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-block-end: var(--space-sm);
}

.eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 2px;
  background: var(--gold);
  flex: none;
}

.section--dark .eyebrow { color: var(--gold); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--muted);
}

.section--dark .lead { color: rgba(255, 255, 255, 0.78); }

.text-muted { color: var(--muted); }
.text-sm    { font-size: var(--fs-sm); }
.text-xs    { font-size: var(--fs-xs); }

.arabic {
  font-family: var(--font-arabic), var(--font-body);
  direction: rtl;
  unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   5. Section heading
   -------------------------------------------------------------------------- */
.section-head {
  max-inline-size: 62ch;
  margin-block-end: clamp(2rem, 1.5rem + 1.6vw, 3.25rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow { justify-content: center; }

.section-head > p { margin-block-start: var(--space-md); }

/* Heading paired with a trailing action (e.g. "View all") ----------------- */
.section-head--split {
  max-inline-size: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}

.section-head--split > div { max-inline-size: 58ch; }

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */
.is-hidden { display: none !important; }

.no-scroll { overflow: hidden; }

.center { text-align: center; }

/* Spacing utilities live at the END of components.css, not here. Several
   components reset `margin: 0` on lists, and because components.css loads
   after this file an equally-specific utility declared here would lose. */

/* --------------------------------------------------------------------------
   7. Reveal-on-scroll base state
   -------------------------------------------------------------------------- */
/* `.js` is set by main.js so content stays visible if JavaScript never runs. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: auto;
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .back-to-top,
  .mobile-nav,
  .cta-banner { display: none !important; }

  body { color: #000; background: #fff; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}