/* ==========================================================================
   seu-layout.css — footer/header matching the official university website (seu.edu.sa)
   Rules below are copied verbatim from the site CSS (extracted from the live page, 2026-09)
   and rely on Bootstrap 5 already loaded by master-seu (.container/.row/.col-md-3/.h6/.border-bottom/.py-5).
   Loaded by layouts/master-seu only.
   ========================================================================== */

:root {
  --text-oncolor-primary: #fff;
  --spacing-md: 8px;
}

/* ---- Footer (seu.edu.sa) ---- */
.footer.seu-site-footer { background-color: rgb(7, 77, 49); }

/* Neutralize Tailwind preflight inside the footer so it matches Bootstrap reboot as on the site */
.seu-site-footer h2 { font-size: 1rem; font-weight: 500; line-height: 1.2; margin-top: 0; margin-bottom: 1rem; }
.seu-site-footer h2.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.seu-site-footer a { color: #fff; text-decoration: none; }
.seu-site-footer small { font-size: 0.875em; }
.seu-site-footer ul { list-style: none; }

.footerLinksList { list-style: none; padding: 0; margin: 0 16px; }
.footerLinksList * { color: var(--text-oncolor-primary); text-decoration: none; }
.footerLinksList > li { padding: 4px 0; }
/* Cancel the legacy footer rule (styles.css: .footer ul li:first-child) */
.seu-site-footer .footerLinksList > li:first-child { border-bottom: 0; padding-bottom: 4px; }
.footerLinksList a:hover { text-decoration: underline; }
.footerLinksList a i { margin-inline-end: 4px; }

.footer .social-icons,
.footer .mobile-app-icons { display: flex; gap: var(--spacing-md); margin: 8px 16px 32px; flex-wrap: wrap; }
.footer .social-icons .icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid #fff; border-radius: 4px; padding: 4px;
  color: #f8f9fa;
}
.footer .social-icons .icon svg { width: 16px; height: 16px; }
.footer .social-icons .icon:hover { background-color: #f8f9fa; color: #000; }
.footer .mobile-app-icons .icon svg { color: #fff; }
.footer .mobile-app-icons .icon:hover svg { fill: #fff; color: rgb(22, 22, 22); }

.footerBottom { display: flex; justify-content: space-between; }
.footerBottom .footerCopyright .links,
.footerLogos { flex-wrap: wrap; display: flex; }
.footerBottom .links a { text-decoration: underline; }
.footerLogos { width: 25%; min-width: 200px; justify-content: center; gap: 15px; filter: brightness(0) invert(1); }
@media (max-width: 768px) {
  .footerLogos { width: 100%; }
  .footerBottom { display: flex; justify-content: center; margin: auto; }
  .footerBottom .footerCopyright .links { justify-content: center; }
}

/* ---- RTL: the official site uses bootstrap.rtl (text-start = right) while this platform loads the LTR build
        (text-start = left). Fix the direction inside the footer only ---- */
[dir="rtl"] .seu-site-footer .row.text-start,
[dir="rtl"] .seu-site-footer .row.text-start > [class*="col-"] { text-align: right !important; }
[dir="rtl"] .seu-site-footer .footerBottom { text-align: center !important; }
@media (min-width: 768px) {
  /* text-align only — do not touch justify-content on footerBottom (space-between pushes the logos to the far left as on the site) */
  [dir="rtl"] .seu-site-footer .footerBottom,
  [dir="rtl"] .seu-site-footer .footerBottom .footerCopyright { text-align: right !important; }
  [dir="rtl"] .seu-site-footer .footerBottom .links { text-align: right !important; justify-content: flex-start; }
}
[dir="rtl"] .seu-site-footer .footerLinksList { padding-right: 0; }

/* ---- Font Awesome icons: the global rule (* { font-family !important }) breaks the icon font ---- */
.seu-site-footer .fas,
.seu-site-footer .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900; }

/* ==========================================================================
   Header — copied verbatim from style-DGA.min.css of seu.edu.sa (2026-09)
   ========================================================================== */
:root {
  --spacing-xs: 4px;
  --spacing-xl: 16px;
  --radius-sm: 4px;
  --background-neutral-100: #F3F4F6;
  --background-neutral-400: #9DA4AE;
  --background-primary-400: #54C08A;
  --button-background-neutral-hovered: #F3F4F6;
  --button-background-neutral-pressed: #E5E7EB;
  --button-background-primary-default: #1B8354;
}

/* As on the site: sticky header at the top (the government strip above it scrolls away normally).
   The .seu-site-header wrapper has no box (display: contents) so stickiness is not confined to its own height */
.seu-site-header { display: contents; }
.seu-site-header header { position: sticky; top: 0; z-index: 1020; }
.seu-site-header .nav { --bs-nav-link-color: #000; --bs-nav-link-hover-color: #000; }
.seu-site-header .nav.navbar { height: 85px; background-color: #fff; z-index: 1040; transition: .2s; box-shadow: rgba(0,0,0,.05) 0 2px 4px; }
.seu-site-header .nav .navbar-collapse { justify-content: space-between; }
.seu-site-header .nav .navbar-collapse.show { overflow-y: auto; max-height: 60svh; }
.seu-site-header .navbar-brand { padding: 0; margin: 0; height: 100%; display: flex; align-items: center; }
.seu-site-header .navbar-brand img { height: 75px; width: auto; }
.seu-site-header .nav-link,
.seu-site-header .nav-link:active,
.seu-site-header .nav-link:hover { color: #000; white-space: nowrap; text-decoration: none; }
.seu-site-header .textIcon { display: flex; align-items: center; gap: 4px; }
.seu-site-header .textIcon > i { padding: 0 1.25px; }
.seu-site-header .sideItems .textIcon > i { font-size: 20px; }
.seu-site-header .nav-item > .nav-link::before {
  display: none; content: ""; position: absolute; height: 6px;
  width: calc(100% - var(--spacing-md) * 2); z-index: 2; border-radius: 9999px;
  background-color: var(--background-primary-400); bottom: 0;
}
.seu-site-header .nav-item:hover > .nav-link::before { display: block; background-color: var(--background-neutral-400); }
.seu-site-header .nav-item.active > .nav-link::before { display: block; background-color: var(--background-primary-400); }
.seu-site-header .nav-item.active * { color: #fff; }
.seu-site-header .navbar-toggler { padding: 0; border: unset !important; outline: unset !important; box-shadow: unset !important; }
/* Neutralize Tailwind preflight + the global font rule inside the header */
.seu-site-header ul { list-style: none; }
.seu-site-header img { max-width: none; }

@media (min-width: 992px) {
  .seu-site-header .navbar .container-fluid { background-color: #fff; }
  .seu-site-header .nav-item,
  .seu-site-header .nav-item > .nav-link { display: flex; gap: var(--spacing-xs); }
  .seu-site-header .nav-item { position: static; height: 85px; flex-direction: row; align-items: center; border-radius: var(--radius-sm); fill: currentColor; }
  .seu-site-header .nav-item:hover { background-color: var(--button-background-neutral-hovered); }
  .seu-site-header .nav-item.active { background-color: var(--button-background-primary-default); }
  .seu-site-header .nav-item > .nav-link { position: relative; height: 100%; align-items: center; justify-content: center; z-index: 2; padding: var(--spacing-md) var(--spacing-xl) !important; }
}
@media (min-width: 992px) and (max-width: 1500px) {
  .seu-site-header .navbar-nav .nav-item > .nav-link { padding: var(--spacing-md) var(--spacing-md) !important; }
  .seu-site-header .sideItem:not(.login) .textIcon > .label { display: none; }
}
@media (max-width: 991.98px) {
  .seu-site-header .nav-item:not(.sideItem),
  .seu-site-header .navbar { height: unset !important; }
  .seu-site-header .nav-item { position: relative; }
  .seu-site-header .navbar .container-fluid { transition: .2s; background-color: #fff; }
  .seu-site-header .nav .nav-item > .nav-link { position: relative; display: flex; height: 100%; align-items: center; gap: var(--spacing-xs); border-radius: var(--radius-sm); padding: var(--spacing-md) var(--spacing-xl) !important; }
  .seu-site-header .nav .nav-link:hover { background-color: var(--button-background-neutral-hovered); }
  .seu-site-header .nav .nav-item.active > .nav-link { background-color: #1b8354; }
  .seu-site-header .nav .nav-item:not(.sideItem) > .nav-link::before { width: 6px; height: calc(100% - var(--spacing-md) * 2); z-index: 2; border-radius: 9999px; bottom: unset; right: 0; }
  .seu-site-header .sideItems { position: absolute; bottom: 0; right: 0; left: 0; background-color: var(--background-neutral-100); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity .2s; gap: 0 !important; }
  .seu-site-header .navbar-collapse.show .sideItems { opacity: 1; }
  .seu-site-header .navbar .container-fluid.nav-expanded { padding-bottom: 80px; }
  .seu-site-header .sideItems .nav-item.sideItem .nav-link { height: 85px; }
  .seu-site-header .nav-item.sideItem.login .label { display: none; }
}

/* Bootstrap 5.0.x (the version loaded here) does not draw the toggler icon without .navbar-light — define it explicitly as it appears on the site */
.seu-site-header .navbar-toggler-icon {
  display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: center; background-size: 100%;
}
.seu-site-header .navbar-toggler { font-size: 1.25rem; line-height: 1; background: transparent; }

/* Conflict: Tailwind defines .collapse { visibility: collapse }, hiding the content of an open Bootstrap collapse */
.seu-site-header .navbar-collapse.collapse { visibility: visible; }


/* Full header (topbar + nav): extra neutralizations for this environment */
.seu-site-header .topbar { font-family: var(--font-family-frutiger-arabic); }
.seu-site-header .dropdown-toggle::after { display: none; } /* The site uses an SVG chevron inside the link, not the Bootstrap caret */
.seu-site-header .dropdown-fullwidth h6 { font-family: var(--font-family-frutiger-arabic); }
.seu-site-header .sideItems .nav-link img { display: inline-block; }
.seu-site-header .form-control { font-size: 1rem; }

/* Tailwind preflight makes img/svg block-level — the site (Bootstrap reboot) renders them inline with middle alignment */
.seu-site-header .topbar img,
.seu-site-header .topbar svg,
.seu-site-header .sideItems img { display: inline; vertical-align: middle; }
.seu-site-header .dropdown-toggle svg { display: inline; vertical-align: middle; }
.seu-site-header .trial-version { font-family: var(--font-family-frutiger-arabic); }

/* Mega-dropdowns: Tailwind defines .grid { display:grid }, stacking the columns vertically — the site uses column-count on a block element */
.seu-site-header .dropdown-columns.grid { display: block !important; }
.seu-site-header .dropdown-fullwidth .container { max-width: 1320px; margin-inline: auto; }

/* Open item state (.focus) as on the site: gray background + dark bottom indicator */
.seu-site-header .nav-item.focus > .nav-link::before,
.seu-site-header .nav-item > .nav-link.focus::before { display: block; background-color: rgb(31, 42, 55); }
@media (min-width: 992px) {
  .seu-site-header .nav-item.focus { background-color: #E5E7EB; }
}
@media (max-width: 991.98px) {
  .seu-site-header .nav .nav-item.focus > .nav-link,
  .seu-site-header .nav .nav-link.focus { background-color: #E5E7EB; }
}

/* Dropdown chevron: the site gives it a 4px start-side margin (right in RTL) */
.seu-site-header .navbar-nav .dropdown-toggle > svg { margin-inline-start: 4px; }

/* bootstrap-icons: the icon font applies to ::before only (as in bootstrap-icons.css); the <i> element itself keeps the text font
   (IBM Plex) as on the site — applying the icon font to <i> changes its line metrics and lifts the glyph above the adjacent text */
.seu-site-header .bi, .seu-site-footer .bi { font-family: var(--font-family-frutiger-arabic) !important; }
.seu-site-header .bi::before, .seu-site-footer .bi::before { font-family: "bootstrap-icons" !important; }