/* =========================================================================
   AL DUFFA REBRAND — design tokens
   -------------------------------------------------------------------------
   Loaded AFTER original-design.css, site-motion.css and site-cursor.css
   (see inc/enqueue.php — this file depends on all three so it is always
   the LAST :root block on the page). It only overrides variables those
   files already define — colors, fonts, card radius — so nothing else
   needs to change: this one file re-skins the whole site from
   teal/Raleway (AIDH) to navy-gold/DM Serif Display (Al Duffa).

   Palette and fonts match the Manus-built Al Duffa design source
   (alduffa-permanent-site) so the WordPress site matches it exactly.

   To roll back to the old AIDH look, remove the enqueue of this one file
   (and revert the Google Fonts line in inc/enqueue.php) — none of the
   other CSS files are touched.
========================================================================= */

:root{
  /* --- Brand palette (was teal/ink) --- */
  --c-ink:        #092434;   /* navy — replaces the old near-black ink.
                                Corrected to the design's real navy
                                (was #0C2D5A); the soft/deep shades
                                below are derived from this hue. */
  --c-ink-soft:   #1D597C;   /* navy-soft, for lighter navy surfaces */
  --c-teal:       #D4A73A;   /* gold — the site's primary accent now */
  --c-teal-dark:  #9C7A1E;   /* gold-deep — hover/pressed gold */
  --c-teal-light: #F5E9C6;   /* gold-soft — tint backgrounds, chips */
  --c-body:       #5C6B80;   /* muted body-text grey */
  --c-line:       #DCE2EA;
  --c-surface:    #F7F4EE;   /* warm off-white, not the old cool grey */
  --c-white:      #FFFFFF;

  /* Two extra tokens the Al Duffa design uses that AIDH's palette didn't
     need: a deep navy for the darkest surfaces (footer, hero base), and
     teal as a genuine second accent (used sparingly — the eyebrow dot,
     a few small details) rather than the primary color it was in AIDH. */
  --c-navy-deep:  #051721;
  --c-accent-2:   #1F8A8A;

  /* site-motion.css defines its own hardcoded "teal that stays readable
     on dark ink" for the footer thread / hover accents, independent of
     --c-teal above — override it too, or the footer keeps a leftover
     cyan glint against the new navy-gold palette. */
  --sm-teal-bright: #E8C567;

  /* --- Fonts --- */
  /* DM Serif Display (display serif) + DM Sans (body) replace Raleway/
     Roboto — see the matching Google Fonts URL in inc/enqueue.php.
     (Earlier phases used Marcellus + Source Sans 3; corrected to the
     design's real fonts.)
     Tajawal is added for Arabic; nothing in the theme switches to it
     yet, but it's ready for whenever Arabic pages are built. */
  --f-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
  --f-body:    "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-arabic:  "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;

  /* --- Shape --- */
  /* Al Duffa's design is sharper-edged than AIDH's rounded cards —
     small radius everywhere instead of 8/16/28px. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --shadow-card:       0 10px 30px rgba(9, 36, 52, .10);
  --shadow-card-hover: 0 16px 40px rgba(9, 36, 52, .16);

  /* --- Layout: ONE content column for the whole site --- */
  /* Header (logo/nav), hero copy, every plugin section and the footer all
     use these two values, so their left and right content edges line up
     exactly at every screen width. --wrap-max is the outer width
     including the side padding. Change them here only. */
  --wrap-max: 1320px;
  --wrap-pad: 20px;
}
@media (min-width: 992px){ :root{ --wrap-pad: 32px; } }

/* DM Serif Display ships ONE weight (400, plus italic). The inherited
   AIDH stylesheets ask for 600/700/800 on headings and on many
   var(--f-heading) labels; without this the browser fakes a bold by
   smearing the glyph outlines, which looks blurry and heavy in a
   high-contrast serif. Disabling weight synthesis makes those rules
   render the real 400 cut instead. DM Sans (body) and Tajawal load real
   bold weights, so they are unaffected. Italic synthesis stays allowed. */
html{ font-synthesis: style; }

/* The serif carries its weight through contrast, not stroke thickness —
   tighten tracking slightly on headings so they read as solid blocks. */
h1, h2, h3, h4,
.aidh-display,
.brand-name{ letter-spacing: -.005em; }

.aidh-hero__title,
.aidh-display{ letter-spacing: -.01em; }

/* -------------------------------------------------------------------------
   UI labels → DM Sans
   DM Serif Display is a large-size display face: at 12–16px (nav links,
   buttons, eyebrows, tabs, small caps labels) its hairlines thin out and
   it reads cramped. Marcellus got away with it because it's a flared,
   almost-sans letterform; DM Serif Display doesn't. So headings, big
   numbers and the site title keep the serif, while these small
   interactive/label elements — which the inherited CSS points at
   var(--f-heading) — use the body sans instead. The html/body prefix
   only raises specificity above the original rules (theme and
   stadum-elementor-blocks plugin) regardless of stylesheet load order.
------------------------------------------------------------------------- */
html body .th-btn,
html body .main-menu > ul > li > a,
html body .sub-title,
html body .accordion-button,
html body .events-tab-btn,
html body .social-feed-network,
html body .lang-btn,
html body .aidh-hero .aidh-hbtn,
html body .aidh-hero__eyebrow,
html body .aidh-hero--corporate .aidh-hero__proof-item span,
html body .aidh-btn,
html body .aidh-eyebrow,
html body .aidh-chip,
html body .aidh-tabs__btn,
html body .aidh-more,
html body .aidh-frame__caption,
html body .aidh-partner .aidh-tag{
  font-family: var(--f-body);
}

/* -------------------------------------------------------------------------
   Shared content column
   Bootstrap's .container (used by the header, footer and the older
   stadum widgets) steps between fixed widths — 960 / 1140 / 1320px with
   12px padding — while the AIDH/Al Duffa sections and hero used a fluid
   1280px column with 32px padding. That is why the hero copy did not sit
   under the logo. Here .container adopts the same fluid column as
   .aidh-container / .aidh-hero__container (which read the tokens above),
   so everything shares one left edge. Bootstrap rows inside keep their
   -12px gutters, so column content still starts on that edge.
   .container-fluid is intentionally left alone.
------------------------------------------------------------------------- */
html body .container{
  max-width: var(--wrap-max);
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

/* Elementor sections/containers placed directly on a page (boxed width):
   match the same column so content built in the editor lines up too.
   A width set on an individual section in the editor still wins. */
/* Legacy sections: Elementor columns add 10px padding on each side, so
   the section gets 10px less side padding and the inner container 20px
   more width — the text inside then starts exactly on the shared edge. */
html body .elementor-top-section.elementor-section-boxed{
  padding-left: calc(var(--wrap-pad) - 10px);
  padding-right: calc(var(--wrap-pad) - 10px);
}
html body .elementor-top-section.elementor-section-boxed > .elementor-container{
  max-width: calc(var(--wrap-max) - 2 * var(--wrap-pad) + 20px);
}
html body .elementor > .e-con-boxed{
  --content-width: calc(var(--wrap-max) - 2 * var(--wrap-pad));
  --container-default-padding-left: var(--wrap-pad);
  --container-default-padding-right: var(--wrap-pad);
}