/* =====================================================================
   DGA Theme override for uli.rcu.gov.sa  (injected, non-destructive)
   ---------------------------------------------------------------------
   Source of truth: DGA design system  (@platformscode/core, the engine
   behind the npm package "platformscode-new-react").
   Approach: CSS/JS token reskin. Loaded AFTER the site's own theme.css
   so these rules win. The original markup is untouched.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Fonts — IBM Plex Sans Arabic (DGA system font, AR + Latin)      */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"),
       url("fonts/IBMPlexSansArabic-Regular.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"),
       url("fonts/IBMPlexSansArabic-Medium.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"),
       url("fonts/IBMPlexSansArabic-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"),
       url("fonts/IBMPlexSansArabic-Bold.woff") format("woff");
}

/* IBM Plex Sans (Latin) — used for English / LTR so Latin text gets proper
   Latin letterforms instead of the Arabic family's Latin fallback
   (per-language font handling, as in the RCUXperience DGA build). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/* 2. DGA design tokens                                                */
/* ------------------------------------------------------------------ */
:root {
  /* Primary — Saudi flag green scale */
  --dga-primary-25:  #f7fdf9;
  --dga-primary-50:  #f3fcf6;
  --dga-primary-100: #dff6e7;
  --dga-primary-200: #b8eacb;
  --dga-primary-300: #88d8ad;
  --dga-primary-400: #54c08a;
  --dga-primary-500: #25935f;
  --dga-primary-600: #1b8354;   /* primary */
  --dga-primary-700: #166a45;   /* hover   */
  --dga-primary-800: #14573a;   /* active  */
  --dga-primary-900: #104631;
  --dga-primary-950: #092a1e;
  --dga-primary: var(--dga-primary-600);

  /* Neutral scale */
  --dga-neutral-25:  #fcfcfd;
  --dga-neutral-50:  #f9fafb;
  --dga-neutral-100: #f3f4f6;
  --dga-neutral-200: #e5e7eb;
  --dga-neutral-300: #d2d6db;
  --dga-neutral-400: #9da4ae;
  --dga-neutral-500: #6c727e;
  --dga-neutral-600: #4d5761;
  --dga-neutral-700: #384250;
  --dga-neutral-800: #1f2a37;
  --dga-neutral-900: #111927;
  --dga-black: #161616;
  --dga-white: #ffffff;

  /* Semantic */
  --dga-text:        var(--dga-neutral-900);
  --dga-text-muted:  var(--dga-neutral-600);
  --dga-border:      var(--dga-neutral-200);
  --dga-surface:     var(--dga-white);
  --dga-surface-alt: var(--dga-neutral-50);

  /* Radii & elevation */
  --dga-radius-sm: 4px;
  --dga-radius-md: 8px;
  --dga-radius-lg: 16px;
  --dga-radius-pill: 9999px;
  --dga-shadow-xs: 0px 1px 2px 0px rgba(16,24,40,.05);
  --dga-shadow-sm: 0px 1px 2px 0px rgba(16,24,40,.06), 0px 1px 3px 0px rgba(16,24,40,.10);
  --dga-shadow-md: 0px 2px 4px -2px rgba(16,24,40,.06), 0px 4px 8px -2px rgba(16,24,40,.10);
  --dga-shadow-lg: 0px 4px 6px -2px rgba(16,24,40,.03), 0px 12px 16px -4px rgba(16,24,40,.08);

  --dga-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Re-map Bootstrap CSS variables so token-driven components follow DGA */
  --bs-primary: #1b8354;
  --bs-primary-rgb: 27, 131, 84;
  --bs-link-color: #1b8354;
  --bs-link-color-rgb: 27, 131, 84;
  --bs-link-hover-color: #166a45;
  --bs-font-sans-serif: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: #111927;
}

/* Per-language font (idea from the RCUXperience DGA build): Arabic uses the
   Arabic family (above, the default); English/LTR leads with IBM Plex Sans
   (Latin) and keeps the Arabic family as fallback for any Arabic glyphs. */
html[lang="en"],
html[dir="ltr"] {
  --dga-font: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-sans-serif: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------ */
/* 3. Base typography                                                  */
/* ------------------------------------------------------------------ */
body,
.navbar,
.btn,
input, select, textarea, button,
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label, div {
  font-family: var(--dga-font) !important;
}

body {
  color: var(--dga-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* 4. Color utilities remapped to DGA green                           */
/* ------------------------------------------------------------------ */
.text-primary { color: var(--dga-primary) !important; }
.bg-primary   { background-color: var(--dga-primary) !important; }
.border-primary { border-color: var(--dga-primary) !important; }
.green-text   { color: var(--dga-primary-600) !important; font-weight: 600; }

a { color: var(--dga-primary-600); }
a:hover { color: var(--dga-primary-700); }

/* ------------------------------------------------------------------ */
/* 5. Buttons — DGA button styling                                     */
/* ------------------------------------------------------------------ */
.btn {
  border-radius: var(--dga-radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Primary / dark / success -> DGA solid green.
   `.btn.primary` is the Umbraco Forms submit-button convention (e.g. the
   registration "إرسال" button), distinct from Bootstrap's `.btn-primary`. */
.btn-primary,
.btn-dark,
.btn-success,
.btn.primary,
button.primary,
input.primary[type="submit"] {
  color: #fff !important;
  background-color: var(--dga-primary-600) !important;
  border-color: var(--dga-primary-600) !important;
  box-shadow: var(--dga-shadow-xs);
}
.btn-primary:hover, .btn-dark:hover, .btn-success:hover, .btn.primary:hover,
.btn-primary:focus, .btn-dark:focus, .btn-success:focus, .btn.primary:focus {
  color: #fff !important;
  background-color: var(--dga-primary-700) !important;
  border-color: var(--dga-primary-700) !important;
}
.btn-primary:active, .btn-dark:active, .btn-success:active, .btn.primary:active {
  background-color: var(--dga-primary-800) !important;
  border-color: var(--dga-primary-800) !important;
}

/* Light / outline-light  ->  DGA white button (used for hero CTA) */
.btn-light {
  color: var(--dga-primary-700) !important;
  background-color: #fff !important;
  border-color: #fff !important;
  box-shadow: var(--dga-shadow-sm);
}
.btn-light:hover, .btn-light:focus {
  color: var(--dga-primary-800) !important;
  background-color: var(--dga-primary-50) !important;
  border-color: var(--dga-primary-50) !important;
}

/* Outline variant -> DGA secondary (green outline) */
.btn-outline-primary,
.btn-outline-dark {
  color: var(--dga-primary-700) !important;
  border-color: var(--dga-primary-600) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-dark:hover {
  color: #fff !important;
  background-color: var(--dga-primary-600) !important;
}

:focus-visible,
.btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--dga-primary-200);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 6. Header / navbar — DGA chrome                                     */
/* ------------------------------------------------------------------ */
/* ---- White DGA header (Figma) ---------------------------------------
   The site ships dark/green headers (bg-dark) and a transparent hero
   header. Force a clean white header bar with a bottom border. */
header,
header.mb-auto,
header.bg-dark,
.cover-container > header {
  background-color: #fff !important;
  border-bottom: 1px solid var(--dga-border);
}
.navbar { background: transparent !important; }

/* Inner-page headers ship with `p-3` (1rem ring) that makes the bar taller
   than the home header. Remove it so every header is the same compact height. */
header.p-3 { padding: 0 !important; }

/* ---- Full-bleed header (Figma): stretch edge-to-edge, no outer gaps ----
   On the home page the header sits inside `.cover-container` which has a
   1rem (p-3) padding ring; negative margins cancel it so the white bar
   reaches the viewport edges and butts against the stamp bar (no top gap). */
.cover-container > header {
  margin: -1rem -1rem 0 -1rem !important;
}
/* DGA header height: white bar 116px (nav items 72px, centered). */
header .navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 116px;
}
/* full width with Figma side padding (100px @1920, responsive down) */
header .container-fluid {
  max-width: 100% !important;
  padding-inline: clamp(1.25rem, 5.2vw, 100px) !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;   /* logo + nav grouped at the start */
}
/* The Figma header has NO RCU logo — hide its wrapper. */
header .navbar-collapse .ms-5 { display: none !important; }
/* Two-group layout (Figma): logo at the start, main nav right beside it,
   register + language switcher pushed to the far end. The nav group must
   grow to fill the row so the margin-auto below reaches the far edge. */
header .navbar-brand { margin-inline-end: 48px !important; }   /* gap after logo */
header .navbar-brand img { width: auto !important; height: 38px !important; }
header .navbar > .container-fluid > .d-flex { flex: 1 1 auto !important; min-width: 0; }
header .navbar .navbar-collapse { flex: 1 1 auto !important; }
header .navbar .navbar-nav { display: flex !important; flex: 1 1 auto !important; width: 100% !important; align-items: center; }

/* Inner-page footer keeps the DGA deep-green band (it also uses .bg-dark,
   but the header rules above win for <header> via higher specificity).
   The home footer has no .bg-dark and stays transparent over the hero. */
footer.bg-dark {
  background-color: var(--dga-primary-900) !important;
}

/* Nav items — DGA "Header Menu Item": 72px tall, 16px medium, #161616 text */
.navbar .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 72px;
  color: var(--dga-black) !important;        /* #161616 */
  font-weight: 500 !important;
  font-size: 16px !important;
  padding-inline: 16px !important;
  margin-inline: 0;
  border-radius: var(--dga-radius-sm);       /* 4px */
  transition: background-color .15s ease, color .15s ease;
}
.navbar .nav-link:hover {
  color: var(--dga-primary-700) !important;
  background: var(--dga-primary-50);
}
/* Active item -> filled green pill + lighter-green selector bar at the bottom */
.navbar .nav-link.active {
  color: #fff !important;
  background: var(--dga-primary-600) !important;
  font-weight: 600 !important;
}
.navbar .nav-link.active::after {
  content: "" !important;
  position: absolute;
  left: 8px; right: 8px; bottom: 0;
  height: 6px;
  border-radius: var(--dga-radius-pill);
  background: var(--dga-primary-400);        /* #54c08a selector */
}
/* Separate the utility actions (register + language switch) from the main nav,
   pushing them to the far edge (Figma layout). Identify them by POSITION, not
   href: the language switcher is always the last nav item and register the
   2nd-last — href-matching breaks because the active page's self-link and the
   language switcher's cross-language URL both confuse a [href*=registration]. */
.navbar-nav .nav-link:nth-last-child(2) { margin-inline-start: auto !important; }

/* Nav icons (24px per Figma): translate on the language switcher (last item),
   person on register (2nd-last item). */
.navbar .nav-link.en::before,
.navbar .nav-link.ar::before,
.navbar-nav .nav-link:nth-last-child(2)::before {
  content: "";
  width: 24px; height: 24px;
  flex: 0 0 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.navbar .nav-link.en::before,
.navbar .nav-link.ar::before        { background-image: url("img/icon-translate.svg"); }
.navbar-nav .nav-link:nth-last-child(2)::before { background-image: url("img/icon-user.svg"); }

/* Mobile hamburger readable on the white header */
.navbar-toggler { border-color: var(--dga-border) !important; }
.navbar-toggler-icon { filter: invert(20%) sepia(0%) saturate(0%); }

/* ---- Responsive header (< lg / 992px — Bootstrap navbar-expand-lg) ----
   Below the breakpoint Bootstrap collapses the menu, but the desktop rules
   above (nowrap row, 72px centred pill items, margin-auto utilities) make it
   open as a narrow column wedged BESIDE the logo. Rework the collapsed state
   into a proper full-width dropdown: a compact bar (logo + hamburger) with a
   stacked, edge-aligned menu panel underneath. */
@media (max-width: 991.98px) {
  /* Let the header row wrap so the menu panel can drop to its own line. */
  header .navbar > .container-fluid {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 0;
  }
  /* Compact bar on mobile — 116px is too tall for just logo + toggler. */
  header .navbar { min-height: 72px; }
  /* Flatten the .d-flex wrapper so the toggler and the collapse panel become
     direct children of .container-fluid: the toggler sits on the bar and the
     panel wraps to a full-width line below it. */
  header .navbar .d-flex { display: contents !important; }
  /* Hamburger to the far edge, opposite the logo. */
  header .navbar .navbar-toggler {
    margin-inline-start: auto !important;
    order: 1;
  }
  /* The collapse panel takes the full width on the next row. */
  header .navbar .navbar-collapse {
    order: 2;
    flex-basis: 100% !important;
    width: 100% !important;
    border-top: 1px solid var(--dga-border);
    margin-top: 8px;
  }
  /* Stacked, full-width, edge-aligned menu list. */
  header .navbar .navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding-block: 8px;
    gap: 2px;
  }
  /* Menu items become full-width tappable rows (not centred pills). */
  header .navbar .nav-link {
    height: auto !important;
    width: 100%;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    border-radius: var(--dga-radius-md) !important;
  }
  /* Drop the desktop "push utilities to the end" offset + selector bar that
     don't translate to a vertical list. */
  header .navbar-nav .nav-link:nth-last-child(2) { margin-inline-start: 0 !important; }
  header .navbar .nav-link.active::after { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* 7. Hero (homepage cover) — DGA green wash over photo                */
/* ------------------------------------------------------------------ */
.cover-container {
  position: relative;
  background-image: url("img/hero-home.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
}
/* DGA green gradient scrim over the hero photo. The heading + pattern sit on
   the inline-start column (right in AR, left in EN), so the green is heaviest
   there and fades to reveal the photo on the other side. */
.cover-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Exact Figma hero gradient: solid #074d31 for the right half, fading to
     transparent across the left half (reveals the photo). AR/RTL = green right. */
  background: linear-gradient(to left, #074d31 0%, #074d31 50%, rgba(7,77,49,0) 100%);
}
/* English / LTR: flip the green to the left (heading sits left there) */
html[dir="ltr"] .cover-container::after,
.ltr .cover-container::after {
  background: linear-gradient(to right, #074d31 0%, #074d31 50%, rgba(7,77,49,0) 100%);
}
.cover-container > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/* 8. Cards, sections, tables                                          */
/* ------------------------------------------------------------------ */
.card {
  border-radius: var(--dga-radius-lg) !important;
  border: 1px solid var(--dga-border) !important;
  box-shadow: var(--dga-shadow-sm);
}

section .inner {
  border-radius: var(--dga-radius-lg);
}

/* Language program / data tables -> DGA table (neutral, bordered) per Figma.
   These tables are plain <table><tr><td> (no thead/th), so target the first
   row as the header. Tokens: header bg #f3f4f6, head text #384250,
   border #d2d6db, body #161616, padding 8/16, radius 4. */
.table-responsive table,
.container table {
  border-collapse: collapse !important;
  width: 100% !important;
  border-radius: var(--dga-radius-sm);
  overflow: hidden;
}
.table-responsive table td,
.container table td {
  border: 1px solid var(--dga-neutral-300) !important;  /* #d2d6db */
  padding: 8px 16px !important;
  color: var(--dga-black) !important;                   /* #161616 */
  vertical-align: middle;
}
/* first row = header */
.table-responsive table tr:first-child td,
.container table tr:first-child td {
  background-color: var(--dga-neutral-100) !important;  /* #f3f4f6 */
  color: var(--dga-neutral-700) !important;             /* #384250 */
  font-weight: 600;
}
.table-responsive table tr:first-child td p,
.container table tr:first-child td p {
  color: var(--dga-neutral-700) !important;
  margin: 0;
}

ul li::marker { color: var(--dga-primary-600); }

.text-secondary { color: var(--dga-neutral-600) !important; }
/* Language-section heading -> DGA deep-green (text-primary-sa-flag #14573a) */
.text-secondary.h3 { color: var(--dga-primary-800) !important; }

/* ------------------------------------------------------------------ */
/* 9. Footer + digital-stamp trust card -> DGA surface                 */
/* ------------------------------------------------------------------ */
/* The page sets <body class="text-white">, whose .text-white !important
   would make the stamp text invisible on a light card. Re-assert dark
   text INSIDE the card so it is readable on the hero and the green footer. */
.digital-stamp-card {
  border-radius: var(--dga-radius-lg) !important;
  border: 1px solid var(--dga-border);
  background-color: #fff !important;
  box-shadow: var(--dga-shadow-md);
  padding: 16px 28px !important;
}
.digital-stamp-card,
.digital-stamp-card h6,
.digital-stamp-card p,
.digital-stamp-card div,
.digital-stamp-card li,
.digital-stamp-card span {
  color: var(--dga-neutral-800) !important;
}
.digital-stamp-card .digital-stamp-header h6 {
  color: var(--dga-neutral-900) !important;
  font-weight: 600;
}
/* Green accents (verify link, "sa"/"HTTPS" highlights, links) */
.digital-stamp-card .green-text,
.digital-stamp-card a,
.digital-stamp-card .btn-digital-stamp-card span {
  color: var(--dga-primary-700) !important;
}
.digital-stamp-card .btn-digital-stamp-card {
  cursor: pointer;
}

/* ---- Digital stamp relocated to a TOP utility bar (Figma) ---------- */
.dga-stamp-bar {
  width: 100%;
  background: var(--dga-neutral-100);   /* #f3f4f6 per Figma */
  display: flex;
  align-items: center;
  min-height: 32px;
}
.digital-stamp-card.dga-stamp-top {
  width: 100%;
  max-width: none;          /* full width — align to the header, not a centered container */
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* match the header's responsive side padding so stamp + logo align */
  padding: 4px clamp(1.25rem, 5.2vw, 100px) !important;
}
.digital-stamp-card.dga-stamp-top .digital-stamp-header h6 {
  font-size: 14px;
}
/* keep the expandable body (when opened) readable as a dropdown panel */
.digital-stamp-card.dga-stamp-top .digital-stamp-body {
  padding-top: 16px;
}

/* Collapse the expandable body from FIRST PAINT. The site's own
   `display:none` rule lives in an inline <style> at the BOTTOM of <body>
   (Home.cshtml / _Master.cshtml), so it is parsed only AFTER the stamp at
   the top of <body> has already painted expanded -> a visible flash on
   refresh. dga-theme.css is <link>-ed in <head> (render-blocking), so
   asserting the collapsed state here applies before first paint and kills
   the flash. NO !important: jQuery's slideToggle sets an inline
   display:block on click, which must still win to expand the panel. */
.digital-stamp-card .digital-stamp-body {
  display: none;
}

/* Language-section label card: swap the gold bg SVG for a DGA-green copy.
   Inline `background:url(bgLanguage.svg)` is overridden via background-image. */
[style*="bgLanguage.svg"] {
  background-image: url("img/bgLanguage-green.svg") !important;
}

/* ------------------------------------------------------------------ */
/* 10. Forms — DGA fields (Umbraco Forms: registration / contact)      */
/* ------------------------------------------------------------------ */
/* Umbraco Forms markup is bespoke (not Bootstrap): text inputs carry
   class="text" and a fixed width:400px from the default theme, <select>
   has an empty class, and radio/checkbox lists are native <input> + sibling
   <label> + <br>. Rules are scoped to .umbraco-forms-form and use !important
   to win over the default theme CSS and the page's inline <style> block. */

/* Values mirror the DGA "RCU revamp" form skin (rcurevamp
   src/assets/scss/customizations/_rcu-forms.scss), the same DGA design applied
   on the RCU site. Signature traits: 40px field, 16px text, 1px #9da4ae border,
   4px radius, an ANIMATED 2px centre-out underline (#0d121c) that grows on
   focus, hover→black border, focus→#384250 border + shadow; custom-drawn 20px
   radio/checkbox that fill DGA green (#1b8354) when checked; 14px/400 labels;
   16px/500 primary button. */

/* DGA token literals not in :root */
.umbraco-forms-form { --dga-neutral-950: #0d121c; --dga-error: #b42318; }

/* Field block rhythm */
.umbraco-forms-form .umbraco-forms-field { margin-bottom: 18px; }
.umbraco-forms-form .umbraco-forms-field-wrapper { margin-top: 0; }

/* Labels — DGA "Input label": 14px, regular, black (#161616), 8px below */
.umbraco-forms-form .umbraco-forms-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 400 !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dga-black) !important;
}
/* Required indicator (the field wrapper carries .mandatory) */
.umbraco-forms-form .umbraco-forms-field.mandatory > .umbraco-forms-label::after {
  content: " *";
  color: var(--dga-error);
  font-weight: 600;
}

/* Text inputs, selects, textareas — the DGA field box with the centre-out
   underline. The underline is a no-repeat linear-gradient background bar
   (#0d121c, 2px tall) sized 0% wide at rest and animated to 100% on focus. */
.umbraco-forms-form input.text,
.umbraco-forms-form input[type="text"],
.umbraco-forms-form input[type="email"],
.umbraco-forms-form input[type="tel"],
.umbraco-forms-form input[type="number"],
.umbraco-forms-form input[type="date"],
.umbraco-forms-form input[type="password"],
.umbraco-forms-form input[type="search"],
.umbraco-forms-form select,
.umbraco-forms-form textarea,
.form-control,
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 40px;                                 /* DGA field height */
  padding: 8px 12px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--dga-neutral-900) !important;         /* #111927 filled value */
  background-color: #fff !important;
  border: 1px solid var(--dga-neutral-400) !important;   /* #9da4ae */
  border-radius: var(--dga-radius-sm) !important;        /* 4px */
  font-family: var(--dga-font) !important;
  background-image: linear-gradient(to right, var(--dga-neutral-950) 0%, var(--dga-neutral-950) 100%);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 2px;
  box-shadow: none !important;
  transition: background-size .3s ease-in-out, border-color .3s ease-in-out, box-shadow .15s ease-in-out;
}
.umbraco-forms-form textarea {
  min-height: 104px;
  resize: vertical;
  background-position: center calc(100% - 1px);
}
.umbraco-forms-form ::placeholder { color: var(--dga-neutral-500); opacity: 1; }

/* The Umbraco Forms default theme caps text inputs/areas at
   `max-width:400px !important` (same specificity as the rule above, but it
   loads later so it wins). Re-assert full width at HIGHER specificity via the
   field wrapper so DGA fields fill the row like the selects do. */
.umbraco-forms-form .umbraco-forms-field-wrapper input.text,
.umbraco-forms-form .umbraco-forms-field-wrapper textarea,
.umbraco-forms-form .umbraco-forms-field-wrapper select {
  width: 100% !important;
  max-width: 100% !important;
}

/* Select — DGA chevron stacked with the underline (two background layers).
   appearance is already reset above; restore room for the chevron. */
.umbraco-forms-form select,
.form-select {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23384250' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"),
    linear-gradient(to right, var(--dga-neutral-950) 0%, var(--dga-neutral-950) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left 12px center, center bottom;   /* RTL default: chevron on the left */
  background-size: 1.25rem 1.25rem, 0% 2px;
  padding-left: 40px !important;
  cursor: pointer;
}
html[lang="en"] .umbraco-forms-form select,
html[dir="ltr"] .umbraco-forms-form select,
html[lang="en"] .form-select,
html[dir="ltr"] .form-select {
  background-position: right 12px center, center bottom;  /* LTR: chevron on the right */
  padding-left: 12px !important;
  padding-right: 40px !important;
}
.umbraco-forms-form select:focus,
.form-select:focus {
  background-size: 1.25rem 1.25rem, 100% 2px;            /* grow only the underline layer */
}

/* Hover — DGA: black border */
.umbraco-forms-form input.text:hover,
.umbraco-forms-form input[type="text"]:hover,
.umbraco-forms-form input[type="email"]:hover,
.umbraco-forms-form input[type="tel"]:hover,
.umbraco-forms-form input[type="number"]:hover,
.umbraco-forms-form input[type="date"]:hover,
.umbraco-forms-form input[type="search"]:hover,
.umbraco-forms-form select:hover,
.umbraco-forms-form textarea:hover {
  border-color: var(--dga-black) !important;          /* #161616 */
}

/* Focus — DGA: #384250 border, underline grows to 100%, soft elevation shadow */
.umbraco-forms-form input.text:focus,
.umbraco-forms-form input[type="text"]:focus,
.umbraco-forms-form input[type="email"]:focus,
.umbraco-forms-form input[type="tel"]:focus,
.umbraco-forms-form input[type="number"]:focus,
.umbraco-forms-form input[type="date"]:focus,
.umbraco-forms-form input[type="search"]:focus,
.umbraco-forms-form select:focus,
.umbraco-forms-form textarea:focus,
.form-control:focus,
.form-select:focus {
  outline: none !important;
  border-color: var(--dga-neutral-700) !important;   /* #384250 */
  background-size: 100% 2px;                          /* underline (single-layer inputs) */
  box-shadow: var(--dga-shadow-md) !important;
}

/* Radio & checkbox lists — DGA custom-drawn 20px controls.
   Markup is <input><label>…</label><br> repeated, so line-height drives the
   row rhythm and the input carries the gap to its label. */
.umbraco-forms-form .radiobuttonlist,
.umbraco-forms-form .checkboxlist {
  display: block;
  line-height: 2.2;
  padding-top: 2px;
}
.umbraco-forms-form .radiobuttonlist input[type="radio"],
.umbraco-forms-form .checkboxlist input[type="checkbox"],
.umbraco-forms-form input[type="radio"],
.umbraco-forms-form input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  /* The default theme forces `.checkboxlist input { width:auto;height:auto }`
     and the control computes to display:inline, where width/height are ignored
     (it collapses to a ~2px line). inline-block makes the 20px box apply. */
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  margin-inline-end: 12px !important;
  padding: 0 !important;
  vertical-align: middle;
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 1px solid var(--dga-neutral-400) !important;   /* #9da4ae */
  cursor: pointer;
  transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}
/* Radio = circle; checked shows a centred green dot (robust radial-gradient,
   not an ::before — pseudo-elements are unreliable on <input>). */
.umbraco-forms-form .radiobuttonlist input[type="radio"],
.umbraco-forms-form input[type="radio"] { border-radius: 50% !important; }
.umbraco-forms-form .radiobuttonlist input[type="radio"]:hover:not(:checked),
.umbraco-forms-form input[type="radio"]:hover:not(:checked),
.umbraco-forms-form .checkboxlist input[type="checkbox"]:hover:not(:checked),
.umbraco-forms-form input[type="checkbox"]:hover:not(:checked) {
  border-color: var(--dga-black) !important;
}
.umbraco-forms-form .radiobuttonlist input[type="radio"]:checked,
.umbraco-forms-form input[type="radio"]:checked {
  border-color: var(--dga-primary-600) !important;
  background-image: radial-gradient(circle at center, var(--dga-primary-600) 0 5px, transparent 6px) !important;
}
/* Checkbox = 2px-rounded square; checked fills green with a white tick */
.umbraco-forms-form .checkboxlist input[type="checkbox"],
.umbraco-forms-form input[type="checkbox"] { border-radius: 2px !important; }
.umbraco-forms-form .checkboxlist input[type="checkbox"]:checked,
.umbraco-forms-form input[type="checkbox"]:checked {
  background-color: var(--dga-primary-600) !important;
  border-color: var(--dga-primary-600) !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m5 10 3.5 3.5L15 7'/></svg>") !important;
  background-size: 16px 16px !important;
}
.umbraco-forms-form .radiobuttonlist input[type="radio"]:focus-visible,
.umbraco-forms-form .checkboxlist input[type="checkbox"]:focus-visible,
.umbraco-forms-form input[type="radio"]:focus-visible,
.umbraco-forms-form input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(27, 131, 84, .25) !important;
}
.umbraco-forms-form .radiobuttonlist label,
.umbraco-forms-form .checkboxlist label {
  display: inline;
  font-weight: 400 !important;
  font-size: 16px;
  color: var(--dga-neutral-900) !important;
  vertical-align: middle;
  cursor: pointer;
}

/* Validation — DGA error (#b42318): red border + red underline + red message */
.umbraco-forms-form .input-validation-error,
.umbraco-forms-form input.input-validation-error,
.umbraco-forms-form select.input-validation-error,
.umbraco-forms-form textarea.input-validation-error {
  border-color: var(--dga-error) !important;
  background-image: linear-gradient(to right, var(--dga-error) 0%, var(--dga-error) 100%) !important;
}
.umbraco-forms-form .field-validation-error,
.umbraco-forms-form .field-validation-error span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--dga-error) !important;
}

/* Submit button — DGA primary: 16px/500, padding 10px 20px, radius 4px
   (colours come from §5; override §5's radius-md to the DGA 4px). */
.umbraco-forms-navigation { margin-top: 4px; }
.umbraco-forms-navigation input[type="submit"],
.umbraco-forms-navigation .btn {
  min-height: 40px;
  padding: 10px 20px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: var(--dga-radius-sm) !important;   /* 4px */
}

::selection { background: var(--dga-primary-200); color: var(--dga-primary-900); }

/* ------------------------------------------------------------------ */
/* 11. DGA standard footer (home page, per Figma)                     */
/* ------------------------------------------------------------------ */
.cover-container > footer { display: none !important; }   /* hide old in-hero copyright */

.dga-footer {
  background: var(--dga-neutral-50);
  border-top: 1px solid var(--dga-border);
  font-family: var(--dga-font);
}
.dga-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 2rem;
}
.dga-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.1rem;
}
.dga-footer-links a {
  color: var(--dga-primary-700);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.dga-footer-links a:hover { text-decoration: underline; }
.dga-footer-copyright {
  color: var(--dga-neutral-900);
  font-weight: 700;
  margin: 0 0 .4rem;
}
.dga-footer-meta {
  color: var(--dga-neutral-500);
  font-size: .9rem;
  margin: 0 0 .25rem;
}
.dga-footer-logos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex: 0 0 auto;
}
.dga-footer-logos .dga-footer-dga { height: 52px; width: auto; }
.dga-footer-logos .dga-footer-uli { height: 44px; width: auto; }

@media (max-width: 768px) {
  .dga-footer-inner { flex-direction: column; align-items: flex-start; }
  .dga-footer-logos { align-items: flex-start; flex-direction: row; }
}