/*
  W01 — Platforms Code v1.0 foundation application layer.
  Loaded last on Public Front entry points.

  Cascade:
  1. Cookie / consent CSS
  2. Bootstrap + Porto/Nazaha theme (LTR or RTL)
  3. dga-tokens.css — authoritative official tokens + IBM Plex @font-face
  4. dga-chrome.css — header/footer chrome (W05 anatomy later)
  5. dga-components.css / page CSS — component wrappers (W05–W08 later)
  6. this file — foundation enforcement

  Official: https://design.dga.gov.sa/ (الإصدار 1.0)
  Freeze: docs/dga-official/official-checklist-audit/15-D02-Authoritative-Reference-Freeze.md
*/

html {
  overflow-x: clip;
}

body {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  color: var(--text-primary-paragraph) !important;
  background-color: var(--colors-base-white);
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
p, a, li, label, button, input, textarea, select,
.btn, .nav-link, .dropdown-item {
  font-family: var(--font-family-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--colors-text-primary) !important;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-display-xs) !important;
}

h1 {
  font-size: var(--font-size-display-sm) !important;
  line-height: var(--line-height-display-sm) !important;
}

h2 {
  font-size: var(--font-size-display-xs) !important;
  line-height: var(--line-height-display-xs) !important;
}

h3 {
  font-size: var(--font-size-text-xl) !important;
  line-height: var(--line-height-text-xl) !important;
  letter-spacing: 0;
}

h4, h5, h6 {
  font-size: var(--font-size-text-lg) !important;
  line-height: var(--line-height-text-lg) !important;
  letter-spacing: 0;
}

/* Homepage King / Crown Prince attribution (Phase 5):
   role (h5) official green; name (h4) official gold — not body heading black. */
.hero-wrap.style1 .hero-slide-item .hero-content h5 {
  color: var(--colors-primary-sa-flag-600-primary) !important;
  font-weight: var(--font-weight-medium);
}

.hero-wrap.style1 .hero-slide-item .hero-content h4 {
  color: var(--colors-secondary-gold-600-primary) !important;
  font-weight: var(--font-weight-semibold);
}

p {
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md) !important;
  color: var(--text-primary-paragraph) !important;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--spacing-xl);
  top: -3rem;
  z-index: 10000;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--background-primary);
  color: var(--text-oncolor-primary);
  text-decoration: none;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--spacing-xl);
  color: var(--text-oncolor-primary);
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/*
  On Color (Excel 2.2): official tokens on colored surfaces.
  --link-primary-hovered (#54c08a) fails 4.5:1 on white; keep it for dark accents only.
*/
.dga-footer.footer-wrap,
.dga-footer.footer-wrap h1,
.dga-footer.footer-wrap h2,
.dga-footer.footer-wrap h3,
.dga-footer.footer-wrap h4,
.dga-footer.footer-wrap h5,
.dga-footer.footer-wrap h6,
.dga-footer.footer-wrap p,
.dga-footer.footer-wrap a,
.dga-footer.footer-wrap li,
.dga-footer.footer-wrap span,
.dga-footer.footer-wrap button,
.dga-footer.footer-wrap i,
.dga-footer.footer-wrap address {
  color: var(--text-oncolor-primary) !important;
}

.dga-footer.footer-wrap a:hover,
.dga-footer.footer-wrap a:focus-visible {
  color: var(--link-oncolor-hovered) !important;
}

.dga-footer.footer-wrap a:visited {
  color: var(--link-oncolor-visited) !important;
}

.dga-footer.footer-wrap :focus-visible,
.dga-footer.footer-wrap a:focus-visible,
.dga-footer.footer-wrap button:focus-visible {
  outline-color: var(--text-oncolor-primary) !important;
}

/* Reports strip sits on a dark photo overlay. Runtime heading/paragraph
   !important would otherwise paint navy/gray on green (same exception as footer).
   Title: official gold (legacy #e0e049). Body/labels: white (AA).
   Primary #1b8354 on this overlay is 2.96:1 — numbers/icons use
   --link-primary-hovered #54c08a (6.21:1 AA) to keep the previous green accent. */
.event-wrap.style1 .reports-wp .reports-wp__title {
  color: var(--colors-secondary-gold-600-primary) !important;
}

.event-wrap.style1 .reports-wp .reports-wp__subtitle,
.event-wrap.style1 .reports-wp p,
.event-wrap.style1 .reports-wp strong,
.event-wrap.style1 .reports-wp .reports-itm,
.event-wrap.style1 .reports-wp .reports-txt,
.event-wrap.style1 .reports-wp .reports-txt span {
  color: var(--text-oncolor-primary) !important;
}

.event-wrap.style1 .reports-wp .reports-wp__spacer {
  color: transparent !important;
}

.event-wrap.style1 .reports-wp .reports-itm:hover,
.event-wrap.style1 .reports-wp .reports-itm:visited {
  color: var(--text-oncolor-primary) !important;
}

.event-wrap.style1 .reports-wp .reports-txt h3 {
  color: var(--link-primary-hovered) !important;
}

.event-wrap.style1 .reports-wp .reports-itm svg path {
  fill: var(--link-primary-hovered);
}

.event-wrap.style1 .reports-wp .reports-itm:focus-visible {
  outline-color: var(--colors-base-white) !important;
}

.dga-scope a:not(.dga-btn):not(.btn):not(.nav-link) {
  color: var(--link-primary);
}

.dga-scope a:not(.dga-btn):not(.btn):not(.nav-link):hover,
.dga-link:hover {
  color: var(--colors-primary-sa-flag-700);
}

.dga-scope a:not(.dga-btn):not(.btn):not(.nav-link):visited,
.dga-link:visited {
  color: var(--link-primary-visited);
}

.dga-scope a:not(.dga-btn):not(.btn):not(.nav-link):focus-visible,
.dga-link:focus-visible {
  color: var(--link-primary-focused);
}

@media (min-width: 960px) {
  h1 {
    font-size: var(--font-size-display-md) !important;
    line-height: var(--line-height-display-md) !important;
  }

  h2 {
    font-size: var(--font-size-display-sm) !important;
    line-height: var(--line-height-display-sm) !important;
  }
}

.container,
.container-fluid.dga-container,
.dga-page,
.dga-header .container,
.dga-footer .container,
.dga-gov-banner .container {
  max-width: var(--container-max-width-desktop);
  padding-inline: var(--container-padding-mobile);
}

@media (min-width: 960px) {
  .container,
  .dga-page,
  .dga-header .container,
  .dga-footer .container,
  .dga-gov-banner .container {
    padding-inline: var(--container-padding-desktop);
  }
}

:focus-visible,
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

.btn.style1,
.btn-success,
.dga-btn--primary,
input[type="submit"].btn,
button.btn-success {
  background-color: var(--button-background-primary-default) !important;
  border-color: var(--button-background-primary-default) !important;
  color: var(--text-oncolor-primary) !important;
}

.btn.style1:hover,
.btn-success:hover,
.dga-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-background-primary-hovered) !important;
  border-color: var(--button-background-primary-hovered) !important;
  color: var(--text-oncolor-primary) !important;
}

.btn.style1::before,
.btn.style1::after,
.dga-btn.btn::before,
.dga-btn.btn::after {
  content: none !important;
  display: none !important;
}

.btn.style1:active,
.btn-success:active {
  background-color: var(--button-background-primary-pressed) !important;
}

.field-validation-error,
.validation-summary-errors,
.text-danger,
span[data-valmsg-for] {
  color: var(--colors-error-600) !important;
}

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error,
.form-control.is-invalid {
  border-color: var(--colors-error-border) !important;
}

.alert-success,
.dga-alert--success {
  color: var(--colors-success-600);
}

.alert-danger,
.dga-alert--error {
  color: var(--colors-error-600);
}

.alert-warning {
  color: var(--colors-warning-600);
}

.alert-info {
  color: var(--colors-info-600);
}

#cc-main,
#cc-main * {
  font-family: var(--font-family-primary) !important;
}

#floating-icon > button,
#feedback-form-wrapper .rating-input-wrapper input[type="radio"]:checked ~ span {
  background-color: var(--button-background-primary-default);
  color: var(--text-oncolor-primary);
}

.modal-header.dga-modal-header {
  background-color: var(--background-primary) !important;
  border-bottom-color: var(--colors-primary-sa-flag-700) !important;
}

/* Wave 1 — hidden on first paint. Shown only while submitting a form. */
.js-preloader,
.loader.js-preloader {
  display: none;
}

.js-preloader.is-active,
.loader.js-preloader.is-active {
  display: flex !important;
}

.hero-wrap.style1 .hero-slide-item {
  position: relative;
  min-height: 560px;
}

@media (max-width: 767px) {
  .hero-wrap.style1 .hero-slide-item {
    min-height: 480px;
  }
}

.hero-wrap.style1 .hero-slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
}

.hero-wrap.style1 .hero-slide-bg .hero-slide-bg-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hero-wrap.style1 .hero-slide-item > .container {
  position: relative;
  z-index: 1;
}

/* Owl CSS sets .owl-carousel { display:none } until JS. That hides the King
   slide (LCP) and then inserts 560px, which blows CLS. Paint the first slide. */
.hero-slider-one.owl-carousel {
  display: block !important;
  overflow: hidden;
}

.hero-slider-one.owl-carousel .owl-stage-outer {
  overflow: hidden;
}

.dga-home .event-slider-one.owl-carousel,
.dga-home .blog-slider-one.owl-carousel {
  display: block !important;
}

.dga-home .event-slider-one:not(.owl-loaded) > *:not(:first-child),
.dga-home .blog-slider-one:not(.owl-loaded) > *:not(:first-child) {
  display: none;
}

/* First King slide paints before Owl wraps items. Hide the Prince slide until then. */
.hero-slider-one:not(.owl-loaded) .hero-slide-item:not(:first-child) {
  display: none;
}

.hero-slider-one.owl-loaded .owl-item {
  opacity: 0;
  visibility: hidden;
}

.hero-slider-one.owl-loaded .owl-item.active {
  opacity: 1;
  visibility: visible;
}

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

/* Blanket img { height:auto } above would collapse logos until decode (CLS). */
.header-wrap .navbar-brand img {
  height: 50px;
  width: auto;
  max-height: 50px;
}

.header-wrap .navbar-brand:not(.v-logo) img {
  width: 98px;
  height: 50px;
}

/* Vision 2030 PNG is 103×68. Keep that box at header height. */
.header-wrap .navbar-brand.v-logo img {
  width: 76px;
  height: 50px;
  object-fit: contain;
}

@media (max-width: 991px) {
  .header-wrap .navbar-brand img {
    height: 48px;
    max-height: 48px;
  }

  .header-wrap .navbar-brand:not(.v-logo) img {
    width: 94px;
    height: 48px;
  }

  .header-wrap .navbar-brand.v-logo img {
    width: 73px;
    height: 48px;
  }
}

/* dark-theme.css is not on first paint. Hide the unused lockup or both logos stack. */
.header-wrap .navbar-brand .logo-dark {
  display: none;
}

html.theme-dark .header-wrap .navbar-brand .logo-light {
  display: none;
}

html.theme-dark .header-wrap .navbar-brand .logo-dark {
  display: block;
}

.header-wrap .header-bottom {
  min-height: 90px;
}

.select-lang img {
  width: 18px;
  height: 12px;
  object-fit: cover;
}

/* Flex + align-items:center ignores the child's aspect-ratio (desktop CLS). */
.hero-wrap.style1 .hero-slide-item .d-flex.align-items-center {
  display: block;
  width: 100%;
  max-width: 622px;
}

.hero-wrap.style1 .d-flex picture {
  display: block;
  width: 100%;
  max-width: 622px;
  aspect-ratio: 622 / 500;
}

.hero-wrap.style1 .d-flex picture .hero-iimg,
.hero-wrap.style1 .hero-slide-item .hero-iimg {
  width: 100%;
  height: 100%;
  max-width: 622px;
  aspect-ratio: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  .hero-wrap.style1 .hero-slide-item .row > [class*="col-"]:first-child {
    min-height: 500px;
  }
}

table.dga-table,
.table.dga-table {
  width: 100%;
}

@media (max-width: 599px) {
  .dga-scope .dga-table,
  table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Wave 2 — reserve LCP/hero/news/stamp boxes; AOS must not hide first viewport.
   Size is reserved on `picture` (above). Do not set height:auto on the img or the
   box collapses until decode. */

.dga-home .event-wrap.style1 .owl-carousel:not(.blog-slider-one) {
  min-height: 420px;
}

@media (max-width: 767px) {
  .dga-home .event-wrap.style1 .owl-carousel:not(.blog-slider-one) {
    min-height: 360px;
  }
}

.dga-home .hero-wrap [data-aos],
.dga-home .event-wrap [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.dga-scope .dga-news-card__media img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Picture wrap nested the 43% width (img 43% of picture 43% ≈ 94px). Size the
   picture instead so the president photo fills the original about-band box. */
.about-wrap.style1 .about-img-wrap > picture,
.about-wrap.style1 .about-img-wrap picture.about-img-one {
  display: inline-block;
  vertical-align: top;
  width: calc(43% - 11px);
}

.about-wrap.style1 .about-img-wrap > picture img.about-img-one,
.about-wrap.style1 .about-img-wrap picture.about-img-one img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

#carouselExampleControls .carousel-item img,
.dga-page .carousel-item img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* W11: keep native scroll/swipe; avoid 300ms tap delay on interactive controls. */
.dga-scope a,
.dga-scope button,
.dga-scope [role="button"],
.dga-scope [role="switch"],
.dga-header a,
.dga-header button,
.dga-footer a,
.dga-footer button {
  touch-action: manipulation;
}

/* W11 / Excel 38.3: do not hide controls behind motion when the user requests less. */
@media (prefers-reduced-motion: reduce) {
  html:not(.theme-dark) *,
  html *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}