/*
 * DGA tokens applied to the theme's general content-page building blocks:
 * content_gutenberg (rich text), features, content_two_columns,
 * dynamic_tabs_content, and accordion. These are shared, sitewide flexible-
 * content blocks (used on many pages, not just one), so restyling them here
 * once benefits every page built from them -- same approach as
 * dga-buttons.css / dga-cards.css: plain classes added alongside the
 * existing Tailwind classes, not a Tailwind rewrite.
 *
 * Covers timeline task 10 (Ministry Statute -- rich content + accordions)
 * and task 12 (Vision Realization Office -- features/tabs/two-column
 * content), following DGA's real "Content Page" guideline
 * (design.dga.gov.sa/guidelines/templates/content-page): heading 3/4,
 * ordered/unordered lists, body text, using DGA's type scale and color
 * tokens -- and its Accordion component guideline (anatomy: title/
 * expand-collapse icon/panel; ARIA: role="button", aria-expanded,
 * aria-controls).
 */

/* ---- components/alert.blade.php (<x-alert type="info|warning">) ----
   Client feedback (Reports & Publications, "No files available yet."):
   this component only ever rendered `<div class="info">...</div>` /
   `<div class="warning">...</div>` with zero CSS backing either class --
   plain unboxed text at the page's full width. Used sitewide (empty
   search/comments states, empty file lists), so styling it here fixes
   every one of those at once. DGA's own real notification color tokens
   already exist in dga-tokens.css (background/text/border/icon-info and
   -warning) -- this is the first thing to actually use them. */
.dga-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  margin-block: var(--spacing-lg);
}
.dga-alert--info {
  background-color: var(--background-info-25);
  border-color: var(--border-info-light);
  color: var(--text-info);
}
.dga-alert--warning {
  background-color: var(--background-warning-25);
  border-color: var(--border-warning-light);
  color: var(--text-warning);
}
.dga-alert::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75 22.75 17.937 22.75 12 17.937 1.25 12 1.25Zm.75 6a.75.75 0 0 0-1.5 0v6a.75.75 0 0 0 1.5 0v-6ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75 22.75 17.937 22.75 12 17.937 1.25 12 1.25Zm.75 6a.75.75 0 0 0-1.5 0v6a.75.75 0 0 0 1.5 0v-6ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}
.dga-alert--info::before {
  background-color: var(--icon-info);
}
.dga-alert--warning::before {
  background-color: var(--icon-warning);
}

/* ---- Plain default WP page template (partials/content-page.blade.php) ----
   Client feedback (Circulars page, a plain page with no ACF flexible-
   content, just raw Gutenberg content): the whole content column ran the
   full sitewide container width ($defaultContainerClass with .prose's own
   max-width canceled out via max-w-none) -- looked sprawling for a simple
   heading + a couple of file cards, and any in-content Gutenberg heading
   (h2.wp-block-heading has no explicit size class from the editor) fell
   back to a huge ~48px default, reading far too large for body content.
   Scoped to .dga-page-content only -- doesn't touch the ACF flexible-
   content templates (template-custom.blade.php etc.), which use their own
   layout entirely. */
.dga-page-content {
  /* !important: Tailwind Typography's own `.prose { max-width: 65ch }`
     compiled rule has equal specificity and loads after this stylesheet,
     so it was winning outright (measured 624px instead of this 960px). */
  max-width: 960px !important;
  margin-inline: auto;
}
.dga-page-content h2.wp-block-heading {
  font-size: 28px;
  line-height: 36px;
}
.dga-page-content .files-manager {
  margin-bottom: var(--spacing-8xl);
}

/* ---- Gutenberg "Columns" block vertical alignment fix, scoped to this
   template's intro content only (.dga-content-prose) ----
   The Ministry Statute intro row (heading in a 66.66% column, a "Learn
   More" button in the 33.33% column) was authored in the editor with
   verticalAlignment:"center" on the row -- but this theme's stripped-down
   Gutenberg block CSS doesn't actually apply align-items:center to
   .wp-block-columns (computed value was "normal"), so the heading and
   button rendered at different vertical positions instead of lining up.
   Scoped to .dga-content-prose rather than a sitewide .wp-block-columns
   rule, so this doesn't affect Columns blocks used anywhere else. */
.dga-content-prose .wp-block-columns {
  align-items: center;
}

/* ---- Generic content typography (shared across all blocks below) ---- */
.dga-content-eyebrow {
  font-family: var(--font-family-arabic);
  color: var(--text-primary);
}
.dga-content-heading {
  font-family: var(--font-family-arabic);
  color: var(--text-display);
  font-weight: var(--font-weight-bold);
}
.dga-content-subheading {
  font-family: var(--font-family-arabic);
  color: var(--text-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}
.dga-content-text {
  font-family: var(--font-family-arabic);
  color: var(--text-primary-paragraph);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
}
.dga-content-text a {
  color: var(--link-primary);
  text-decoration: underline;
}
.dga-content-text a:hover {
  color: var(--link-primary-hovered);
}

/* These typography classes set an explicit color on themselves, which
   overrides (rather than inherits) whatever text color an ancestor
   section intends -- fine on the default light sections, but it silently
   defeats a dark-background section's own `text-white` (e.g. VRO's
   "Our Programs" tabs block, `bg-primary-700 text-white`), leaving dark
   text on a dark background. `color: inherit` lets the section's own
   intended color win instead of guessing a fixed on-color token. */
.text-white .dga-content-eyebrow,
.text-white .dga-content-heading,
.text-white .dga-content-subheading,
.text-white .dga-content-text {
  color: inherit;
}
.text-white .dga-content-text a {
  color: inherit;
  text-decoration-color: currentColor;
}
.text-white .dga-content-text a:hover {
  opacity: 0.85;
}

/* ---- content_gutenberg: rich text (headings/paragraphs/lists/links) ---- */
.dga-content-prose {
  font-family: var(--font-family-arabic);
  color: var(--text-primary-paragraph);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
}
/* Client report: a logo/graphic with a plain white canvas (not
   transparent) can show a visible mismatched edge wherever it sits
   directly against a page's ambient background -- affects any page that
   embeds a standalone image in raw Gutenberg content, not just this one.
   A neutral frame makes any image (white-canvas logo or a real photo)
   read as deliberately placed regardless of the image's own background
   color, rather than looking like a mismatch bug. Scoped to a bare image
   as the ONLY content of its figure/paragraph (a standalone content
   image), not inline images. */
.dga-content-prose img,
.prose img {
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-md);
}
.dga-content-prose h2 {
  color: var(--text-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-xs);
  line-height: var(--line-height-display-xs);
}
.dga-content-prose h3 {
  color: var(--text-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
}
.dga-content-prose h4 {
  color: var(--text-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}
.dga-content-prose p {
  color: var(--text-primary-paragraph);
}
.dga-content-prose ul li::marker,
.dga-content-prose ol li::marker {
  color: var(--text-primary);
}
.dga-content-prose a {
  color: var(--link-primary);
  text-decoration: underline;
}
.dga-content-prose a:hover {
  color: var(--link-primary-hovered);
}

/* ---- features component: cards ---- */
.dga-feature-card {
  /* Explicit padding here, not left to the template's own p-6 class --
     that class is only applied for non-center alignment (see
     components/features.blade.php), so center-aligned feature grids
     (e.g. the About page's Vision/Mission/Vision 2030 cards) were
     rendering with a card background/shadow but zero internal padding. */
  padding: var(--spacing-xl);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-lg);
  background-color: var(--background-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease;
}
.dga-feature-card:hover {
  box-shadow: var(--shadow-md);
}

/* Fixed size regardless of the source icon asset's own dimensions --
   the assets used so far happen to be 48x48, but nothing enforced that,
   so a differently-sized icon on a future feature item would throw card
   layouts out of alignment with each other. */
.dga-feature-card__icon {
  width: 48px;
  height: 48px;
}

/* Temporary, no-build fallback for the AOS "cards only show after clicking"
   bug on the National Investment Strategy page. AOS.init() (app.js) measures
   offsets before images/fonts settle, so these fade-up cards can stay
   opacity:0 until a scroll/click forces a recalc. The real fix is the
   AOS.refresh()-on-load added in app.js, which needs a bud rebuild to ship;
   until that bundle is deployed, keep this page's feature cards visible.
   Scoped to page-id-967 so other pages' fade-up animations are untouched.
   `!important` is required because the bundled aos.css (which sets
   [data-aos]{opacity:0}) loads after this file. Remove once the rebuilt
   bundle carries the refresh fix. */
.page-id-967 .dga-feature-item--full[data-aos],
.page-id-967 .dga-feature-item--half[data-aos],
.page-id-967 .dga-feature-item--third[data-aos],
.page-id-967 .dga-feature-item--quarter[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

.dga-feature-item--full,
.dga-feature-item--half,
.dga-feature-item--third,
.dga-feature-item--quarter {
  margin-bottom: var(--spacing-xl);
}
@media (min-width: 1024px) {
  .dga-feature-item--full,
  .dga-feature-item--half,
  .dga-feature-item--third,
  .dga-feature-item--quarter {
    margin-bottom: var(--spacing-2xl, 2rem);
  }
}

/* features.blade.php used to build its column width as a dynamically
   interpolated Tailwind class (e.g. 'lg:w-' . '1/4') -- Tailwind's
   build-time content scanner can't see a class assembled from a PHP
   string at runtime, so it was never included in the precompiled
   bundle and had zero effect (confirmed: zero occurrences of "w-1/4"
   in the compiled CSS). Real, hand-written CSS instead, matching the
   theme's documented convention for any class that must vary by data
   rather than being a static, scannable Tailwind utility. */
.dga-feature-item--full,
.dga-feature-item--half,
.dga-feature-item--third,
.dga-feature-item--quarter {
  width: 100%;
}
@media (min-width: 1024px) {
  /* This file loads before the theme's compiled Tailwind bundle, so a
     rule here can't reliably out-cascade a same-specificity Tailwind
     utility like .w-full loaded after it -- source order breaks the
     tie, not the media query. features.blade.php no longer applies
     w-full alongside these classes, for exactly that reason.

     Widths use calc() to subtract each item's share of the row's total
     gap (gap-x-8 = 32px, N-1 gaps per row of N items) -- a plain
     percentage (e.g. flat 25% for 4 items) ignores the gap entirely,
     so N items at N% each plus (N-1) gaps always exceeds 100% and the
     last item silently wraps to the next row instead of the row
     actually holding N items, leaving unfilled space at the row's end. */
  .dga-feature-item--half {
    width: calc(50% - 16px);
  }
  .dga-feature-item--third {
    width: calc(33.3333% - 21.3333px);
  }
  .dga-feature-item--quarter {
    width: calc(25% - 24px);
  }
}

/* ---- horizontal_tabs: underline-style tab controls ----
   Distinct from .dga-tab-control (dynamic_tabs_content) on purpose:
   that component is white text on a dark background, this one is
   dark-gray text on white with a bottom-border underline -- reusing
   the same class would force white-on-white text. Colour already
   comes from Tailwind's primary-500/600 utility classes, which now
   compile to the real DGA green after the tailwind.config.cjs fix, so
   only typography needs setting here. */
.dga-tab-control-underline {
  font-family: var(--font-family-arabic);
  /* Flowbite swaps its active/inactive Tailwind classes (border-blue-600
     vs border-gray-100, etc.) instantly with no transition of its own --
     this is what actually animates the colour change smoothly when
     switching tabs, matching every other tab list on the site now that
     they all have some kind of animated feedback (sliding indicator or,
     here, an animated border colour). */
  transition: border-color .2s ease, color .2s ease;
}
/* Client feedback (tab styling pass, 2026-09): hovering an *inactive* tab
   here previewed the same green border Flowbite gives the actual active
   tab (from the `hover:border-primary-500` Tailwind class already in the
   markup) -- indistinguishable from "this is selected". Matches what
   every other tab list on the site now does (Laws page, reusable
   dga-tabs.blade.php component): a black bar previews "you're pointing at
   this tab", green means "this is the selected one". `!important` wins
   over that Tailwind hover utility; `.inactive` (now kept correctly in
   sync by dga-tab-control.js, see its own updated comment) is what keeps
   the *active* tab's hover looking green like before, unaffected. Same
   2px thickness/position as the active state already -- both are just
   this one element's own border-bottom, only the colour changes. */
.dga-tab-control-underline.inactive:hover {
  border-color: var(--border-black, #000) !important;
}

/* ---- dynamic_tabs_content: tab controls ---- */
.dga-tab-control.active {
  border-color: var(--colors-base-white) !important;
  color: var(--colors-base-white) !important;
}
.dga-tab-control.inactive {
  color: var(--alpha-white-70) !important;
  border-color: var(--alpha-white-30) !important;
}

/* ---- accordion component ---- */
.dga-accordion__trigger {
  color: var(--text-display);
}
.dga-accordion__trigger.open .dga-accordion__title,
.dga-accordion__trigger:hover .dga-accordion__title {
  color: var(--text-primary);
}
.dga-accordion__panel {
  border-bottom: 1px solid var(--border-neutral-secondary);
}

/* ---- DGA "Heavy Content Page with TOC" layout
   (template-dga-content-page.blade.php, timeline task 10) ---- */
.dga-content-page__layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .dga-content-page__layout {
    flex-direction: row;
  }
}

.dga-content-page__toc {
  flex-shrink: 0;
  width: 100%;
}
@media (min-width: 1024px) {
  .dga-content-page__toc {
    width: 260px;
    position: sticky;
    top: var(--spacing-8);
  }
}
.dga-content-page__toc-label {
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-bold);
  color: var(--text-display);
  font-size: var(--font-size-text-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--spacing-3);
}
.dga-content-page__toc nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  border-inline-start: 2px solid var(--border-neutral-secondary);
}
.dga-content-page__toc nav a {
  display: block;
  padding-inline-start: var(--spacing-4);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  color: var(--text-primary-paragraph);
  text-decoration: none;
  transition: color .15s ease;
}
.dga-content-page__toc nav a:hover {
  color: var(--text-primary);
}

.dga-content-page__sections {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.dga-accordion-item {
  border-bottom: 1px solid var(--border-neutral-secondary);
  /* Lives here (always-rendered, never clipped), not on the collapsible
     .dga-accordion__panel below -- see that rule's own comment for why. */
  padding-bottom: var(--spacing-6);
}
.dga-accordion-item .dga-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding-block: var(--spacing-5);
  background: none;
  border: 0;
  text-align: start;
  cursor: pointer;
}
.dga-accordion-item .dga-accordion__title {
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}
.dga-accordion__chevron {
  flex-shrink: 0;
  color: var(--icon-primary);
  transition: transform .2s ease;
}
.dga-accordion__chevron.is-open {
  transform: rotate(180deg);
}
.dga-accordion-item .dga-accordion__panel {
  border-bottom: 0;
  /* Smooth expand/collapse matching DGA's own real accordion component
     (confirmed from a live capture of its compiled CSS): max-height +
     overflow:hidden animated via transition, since height can't animate
     to/from "auto" in CSS alone -- max-height is set to the panel's real
     scrollHeight via Alpine's :style binding in the template (JS has to
     measure it, same reason DGA's own version does this via JS too, not
     pure CSS). transition: all 0.3s ease-in-out is DGA's own exact timing
     -- written directly here rather than as Tailwind utility classes,
     since this theme's precompiled CSS bundle silently drops any
     Tailwind class that wasn't already present in it at build time. */
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}
/* Client feedback: content sat flush against the trigger row with no
   breathing room when a panel opened. Padding lives on this inner wrapper
   rather than directly on .dga-accordion__panel -- a border-box element
   with max-height:0 still renders at (at least) its own padding in
   Chromium, so padding there leaked a gap into the *collapsed* state too.
   This inner element isn't height-constrained itself, so its padding is
   simply part of what gets clipped by the parent's overflow:hidden. */
.dga-accordion__panel-inner {
  padding-top: var(--spacing-3, 12px);
}