/*
 * ============================================================================
 * Bayan University — brand theme
 * ============================================================================
 *
 * Recolours the site to the university crest without editing a single line of
 * the vendored stylesheets. `main.css` resolves ~1060 colour references through
 * CSS custom properties, so redefining those properties on :root re-skins
 * almost everything. The remaining ~149 hardcoded hex values are overridden
 * explicitly in section 3.
 *
 * Loaded last: after main.css, style.css and nextjs-parity.css.
 *
 * ----------------------------------------------------------------------------
 * PALETTE — sampled from the crest artwork, not estimated
 * ----------------------------------------------------------------------------
 * Decoded from the PLTE chunk of assets/img/logo/bayan-crest.png and weighted
 * by pixel count (199,805 opaque pixels):
 *
 *   #FFFFFF   57.7%   disc field — pure white, not cream
 *   #F1E4C6   10.0%   pale gold band backing the wreath
 *   #6F4100    8.7%   Arabic calligraphy — pure brown, zero blue channel
 *   #C89A11    ~1%    wheat strokes — the saturated accent gold
 *   #0066B3    2.9%   ring lettering, centre diamond, corner squares
 *
 * Blue leads because it carries the university name. Gold is the accent. Brown
 * replaces the template's near-black for headings and dark panels, and the cool
 * blue-greys become warm off-whites so every tint sits under the gold rather
 * than fighting it.
 *
 * Reproduce the sampling with:  node tools/extract-crest-palette.mjs
 */

:root {
  /* ----------------------------------------------------------- brand core */
  --bayan-blue: #0066b3;      /* exact: crest diamond + ring text */
  --bayan-blue-dark: #004aac; /* exact: deepest blue in the crest */
  --bayan-blue-deep: #003a7a;
  --bayan-blue-light: #3370b4; /* exact: crest antialias tone */
  --bayan-blue-pale: #e5ebf4;  /* exact: crest highlight */

  --bayan-gold: #c89a11;       /* exact: wheat stroke */
  --bayan-gold-dark: #a5820e;
  --bayan-gold-light: #f1e4c6; /* exact: wreath band */
  --bayan-gold-pale: #f8f0dc;

  --bayan-brown: #6f4100;      /* exact: calligraphy */
  --bayan-brown-dark: #4a2b00;
  --bayan-brown-deep: #33200a;

  --bayan-cream: #f7f5f2;      /* exact: crest off-white */
  --bayan-sand: #f3ece0;

  /* ---------------------------------------------------------------------- */
  /* 1. Template variable remap                                             */
  /* ---------------------------------------------------------------------- */

  --body: #fff;
  --black: #000;
  --white: #fff;

  /* Primary — was #005BFF */
  --theme-blue: #0066b3;
  /* Was a violet #553CDF. The crest has no violet, so this becomes the deeper
     blue used for gradients and hover states. */
  --theme-blue-2: #004aac;

  /* The template's teal/greens become the crest's gold. */
  --theme-green: #c89a11;   /* was #00E2C5 */
  --theme-green-2: #f1e4c6; /* was #C3F499 */
  --theme-green-3: #4a2b00; /* was #102F25 — deep panel, now brown */

  /* Four separate yellows collapse onto the brand gold, tones preserved. */
  --theme-yellow: #d3a70e;   /* was #FFD25D */
  --theme-yellow-2: #a5820e; /* was #F69B17 */
  --theme-yellow-3: #c89a11; /* was #FDC500 */
  --theme-yellow-4: #d9af0b; /* was #FFD335 */

  /* No purple in the crest — map to a mid blue so accents stay in family. */
  --theme-purple: #3370b4;

  /* These three are used as button/badge FILLS behind white text, so each is
     dark enough to clear 4.5:1 against #fff. #9c5e00 is itself a crest value. */
  --theme-red: #8c2f1e;
  --theme-pink: #9c4034;
  --theme-orange: #9c5e00;

  /* Headings — was near-black navy #031F42; now the crest's deep brown. */
  --header: #33200a;
  --base: #0066b3;
  /* Body copy — was cool blue-grey #5B6D84; warmed to sit on cream. */
  --text: #6a5a48;

  --border: #e8ddc6;
  --border2: #3a2e22;
  --ratting: #c89a11;

  /* Tinted backgrounds — cool blues and lilacs become cream and sand. */
  --bg: #fdfaf3;  /* was #F4F9FF */
  --bg2: #f1e4c6; /* was #E6EFFF */
  --bg3: #f6efe1; /* was #F4F0FF */
  --bg4: #5a3600; /* was #2F584E, a deep green */
  --bg5: #33200a; /* was #09224B, a deep navy */
  --bg6: #f4efe6; /* was #EDF3F5 */
  --bg7: #f9f3e8; /* was #F8F2EC */
  --bg8: #f7f1e4; /* was #F3F1FD */

  ---box-shadow: 0px 4px 25px rgba(51, 32, 10, 0.08);
}

/* ------------------------------------------------------------------------ */
/* 2. Selection and focus                                                    */
/* ------------------------------------------------------------------------ */

::selection {
  background-color: var(--bayan-blue);
  color: #fff;
}

/* The template ships no visible focus style; add one for keyboard users. */
:focus-visible {
  outline: 2px solid var(--bayan-blue);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------ */
/* 3. Hardcoded-colour overrides                                             */
/*                                                                           */
/* main.css sets these literally rather than through a variable, so they have */
/* to be restated. Grouped by the original value being replaced.             */
/* ------------------------------------------------------------------------ */

/* --- Marquee ribbons ---------------------------------------------------- */
.theme-blue-bg { background-color: var(--bayan-blue) !important; }
.theme-blue-bg-2 { background-color: var(--bayan-blue-dark) !important; }
.theme-green-bg,
.theme-green-bg-1 { background-color: var(--bayan-gold) !important; }
.theme-green-bg-2 { background-color: var(--bayan-gold-light) !important; }

/* Marquee text on gold wants the dark brown, not the original dark green. */
.mycustom-marque.theme-green-bg-1 .cmn-textslide,
.mycustom-marque.theme-green-bg .cmn-textslide,
.cmn-textslide.text-color-2 {
  color: var(--bayan-brown-dark) !important;
}

/* --- Hardcoded dark panels ----------------------------------------------
 *
 * Only sections that hardcode a colour are listed. `.footer-bg` already
 * resolves through `--header`, and `.footer-section-3` has no background at all
 * in the original — it is a LIGHT footer carrying the dark wordmark, so
 * forcing it dark would hide its own logo.
 * ---------------------------------------------------------------------- */
.hero-1 {
  background-color: var(--bayan-brown-deep); /* was #031F42 */
}

/* footer-section-5 only paints a background below 1400px, and it was violet. */
@media (max-width: 1399px) {
  .footer-section-5 {
    background-color: var(--bayan-blue-dark); /* was #553CDF */
  }
}

/* --- Star ratings (#F8BC26, #FFA900, #FDC500) --------------------------- */
.star i,
.rating i,
.ratting i,
.star-rating i {
  color: var(--bayan-gold);
}

/* --- Button hierarchy ---------------------------------------------------
 *
 * The template had two distinct accents: teal for the primary `.theme-btn`
 * (`--theme-green`) and yellow for `.yellow-btn` (`--theme-yellow`). Mapping
 * both onto the crest would make them the same gold, so the primary takes the
 * crest's blue and the secondary keeps the gold. That also matches the crest
 * itself, where blue carries the name and gold is the surround.
 *
 * Hover is untouched: main.css grows two `--header`-coloured circles from the
 * corners and switches the label to white, which reads correctly over both.
 * ---------------------------------------------------------------------- */
.theme-btn {
  background-color: var(--bayan-blue);
  color: #fff;
}

.theme-btn.yellow-btn {
  background-color: var(--bayan-gold);
  color: var(--bayan-brown-dark);
}

/* --- Light-filled button variants ---------------------------------------
 *
 * REGRESSION GUARD. The template's default label was `var(--header)` — dark —
 * so the several descendant rules in main.css that repaint ONLY the background
 * to a light colour still read fine. Switching the base label to white for the
 * blue fill silently broke every one of them: white on #FDFAF3 measures
 * 1.04:1, i.e. invisible.
 *
 * Each selector below is a main.css rule that sets a light background and no
 * colour. Enumerated from `node tools/find-palette-leaks.mjs`; re-run it after
 * any template update to catch new ones.
 * ---------------------------------------------------------------------- */
.event-list-wrapper .event-list-items .event-btn .theme-btn,
.popular-program-box-items .content .theme-btn,
.hero-5 .hero-content .theme-btn,
.business-courses-main-items .courses-card-items-hover .courses-content .theme-btn {
  color: var(--bayan-brown-deep);
}

/* Hover fills these with `--header` and flips the label white, which stays
   correct — but be explicit so a future palette change cannot break it. */
.event-list-wrapper .event-list-items .event-btn .theme-btn:hover,
.popular-program-box-items .content .theme-btn:hover,
.hero-5 .hero-content .theme-btn:hover,
.business-courses-main-items .courses-card-items-hover .courses-content .theme-btn:hover {
  color: #fff;
}

/* The outlined "Admin" button in header-1 sits on white — keep it readable. */
.header-1 .header-right .header-button .theme-btn.style-2 {
  color: var(--bayan-brown-deep);
  border-color: var(--border);
}

.header-1 .header-right .header-button .theme-btn.style-2:hover {
  color: #fff;
}

/* Headers 3/4/5 use a ghost button — transparent fill, white border, white
 * label — which reads correctly over the dark hero it floats on. But `.sticky`
 * sets `background-color: var(--white)`, so once the header pins, that button
 * is white-on-white and vanishes. (Pre-existing in the template; fixed here
 * because the rebrand is the right moment to.) */
.header-3.sticky .header-button .theme-btn {
  border-color: var(--bayan-blue);
  color: var(--bayan-blue);
}

.header-3.sticky .header-button .theme-btn:hover {
  border-color: var(--bayan-brown-deep);
  color: #fff;
}

/* --- Warm decorative tints (#FFF1E0, #FFEFF0, #FFF9E3, #FFCCCF) --------- */
.icon-bg-1 { background-color: var(--bayan-gold-pale); }
.icon-bg-2 { background-color: var(--bayan-blue-pale); }

/* --- Neutral greys (#E4E4E5, #E2E2E2, #EBEBEB, #F2F2F2, #F5F6FA) -------- */
hr,
.border-line,
.divider {
  border-color: var(--border);
}

/* ------------------------------------------------------------------------ */
/* 4. Component nudges                                                       */
/*                                                                           */
/* With green and violet gone, a few components read better against the       */
/* blue-on-cream pairing.                                                     */
/* ------------------------------------------------------------------------ */

/* Section eyebrow headings ("Get In Touch") carried the old teal. Gold at full
   strength fails contrast at this size, so the eyebrow uses a darkened gold.
   #8a6d24 cleared 4.5:1 on pure white but only reached 4.35:1 on the tinted
   sections (--bg8 #f7f1e4), so it is darkened again: 5.62:1 on white and
   5.14:1 on the tint. */
.section-title h6 {
  color: #816320;
}

/* The `.color-*` eyebrow variants have specificity (0,2,1) and outrank the rule
   above, so each has to be restated or it keeps its own low-contrast hue. */
.section-title.color-pink h6,
.section-title.color-yellow h6,
.section-title.color-red h6,
.section-title.color-blue h6,
.section-title.color-green h6 {
  color: #816320;
}

/* On dark panels the eyebrow needs the light gold instead. */
.section-title.text-white h6,
.cta-newsletter-section .section-title h6,
.footer-section .section-title h6 {
  color: var(--bayan-gold-light);
}

.footer-section .list-area li a:hover,
.footer-section .contact-info li a:hover {
  color: var(--bayan-gold);
}

/* The oversized footer wordmark sits behind the columns as a faint wash. */
.footer-name h2 {
  color: rgba(200, 154, 17, 0.13);
}

/* Preloader. */
.preloader {
  background-color: var(--bayan-cream);
}

.preloader .txt-loading .letters-loading {
  color: var(--bayan-blue);
}

/* The crest is wider than the wordmark it replaces; give it room in the
   header and keep it legible at small sizes. */
.header-logo img,
.top-logo img,
.header-logo-2 img,
.offcanvas__logo img,
.widget-head img {
  height: 42px;
  width: auto;
  max-width: none;
}

@media (max-width: 575px) {
  .header-logo img,
  .top-logo img,
  .offcanvas__logo img {
    height: 34px;
  }
}

/* ==========================================================================
   Letter-spacing and the Arabic script
   ==========================================================================

   Kurdish and Arabic are cursive: the letters in a word are joined, and the
   shape a letter takes depends on what it is joined to. Tracking prises those
   joins apart. The same rule that makes an English small-caps label look
   considered makes a Kurdish one look like a different, worse typeface — which
   is exactly what it looked like, most visibly in the Colleges panel, where
   the footer links carried 0.675px, the column headings 0.07px and the links
   between them none at all. Three tracking values in one panel read as three
   fonts.

   Measured on the Kurdish homepage before this rule: 32 elements holding
   Arabic-script text with a non-zero computed letter-spacing, from three
   separate rules, none of which had anything to do with each other. It is not
   a component's bug. It is what happens when a Latin-designed template is
   given a script it was not drawn for.

   So it is corrected once, here, for everything.

   `!important` is deliberate and is the reason this works. The offending
   declarations live in template rules three and four classes deep — a
   selector this general loses to every one of them on specificity, and
   enumerating them would leave the next component to reintroduce the bug.
   This is not a design preference being forced through; it is a correction
   that has to hold for a whole writing system, including code not yet
   written. There is no case where cursive script wants tracking.

   Latin text inside an RTL page — an email address, a Latin acronym — is
   unaffected in any way that matters: it loses tracking it was only given
   because it sat in a heading.
   ========================================================================== */

[dir="rtl"],
[dir="rtl"] *,
:lang(ku),
:lang(ku) *,
:lang(ar),
:lang(ar) * {
  letter-spacing: normal !important;
}