/*
 * "Azhar" public-site chrome.
 *
 * The three-row header specified in requirements §2-§4: a sticky utility
 * strip (phone + email), a brand row carrying the logo, a full-site search
 * field and the three priority buttons, and a nav row below it. Modelled on
 * the reference screenshots - deep green bar, gold hairline accents, and a
 * header that condenses rather than disappears as the page scrolls.
 *
 * Colours come entirely from the palette tokens in theme.css, so the same
 * chrome renders correctly for an institution using any palette.
 */

/* ---- Header shell --------------------------------------------------- */

.azhar-header {
  position: sticky;
  top: 0;
  z-index: 1035;
  background: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border);
  transition: box-shadow 0.3s ease;
}

/* Sticky state, toggled by js/motion.js once the page scrolls past the
   utility strip. The brand row tightens so the nav stays reachable without
   the header eating the viewport. */
.azhar-header.is-stuck {
  box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.35);
}

/* ---- Row 1: utility strip ------------------------------------------- */

/* No overflow/max-height clipping here: this strip used to collapse on
   scroll, and the box that clipped the collapse also clipped the language
   dropdown, which opens well past the strip's own height. The strip now
   simply scrolls away with the page (it sits outside the sticky <header>),
   so the menu has nothing to escape from. */
.azhar-utility {
  background: var(--color-primary-800);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
}

.azhar-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  padding: 0.5rem 0;
}

.azhar-contact-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
}

.azhar-contact-list a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s ease;
}

.azhar-contact-list a:hover,
.azhar-contact-list a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.azhar-contact-list i {
  color: var(--color-accent-400);
}

.azhar-utility .btn {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.65rem;
  --bs-btn-font-size: 0.8125rem;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: var(--radius-pill);
}

.azhar-utility .btn:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.azhar-utility .dropdown-menu {
  --bs-dropdown-font-size: 0.875rem;
  /* The sticky header is the next sibling and carries z-index 1035, so
     without this the open menu would render behind it. */
  z-index: 1040;
}

/* ---- Row 2: logo / search / priority buttons ------------------------- */

.azhar-brandrow {
  padding: 0.9rem 0;
  background: var(--color-surface);
  transition: padding 0.3s ease;
}

.azhar-header.is-stuck .azhar-brandrow {
  padding: 0.45rem 0;
}

.azhar-brandrow-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.azhar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}

.azhar-brand img {
  height: 68px;
  width: auto;
  object-fit: contain;
  transition: height 0.3s ease;
}

.azhar-header.is-stuck .azhar-brand img {
  height: 44px;
}

.azhar-brand-text {
  min-width: 0;
}

.azhar-brand-name {
  display: block;
  font-weight: 700;
  font-size: clamp(1.3rem, 0.85rem + 1.1vw, 1.9rem);
  line-height: 1.25;
  color: var(--color-primary-800);
  transition: font-size 0.3s ease;
}

.azhar-brand-sub {
  display: block;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  line-height: 1.4;
}

.azhar-header.is-stuck .azhar-brand-name { font-size: 1.45rem; }
.azhar-header.is-stuck .azhar-brand-sub { display: none; }

/* Search: centre column (§3), but a compact field rather than one that
   stretches across the row - the school's name is what should carry the
   width here. Still centred in whatever space the logo and buttons leave. */
.azhar-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 22rem;
  margin-inline: auto;
}

.azhar-search .input-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-muted);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.azhar-search .input-group:focus-within {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 0.2rem var(--color-primary-50);
}

.azhar-search .form-control {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-inline-start: 1.1rem;
  font-size: 0.925rem;
}

.azhar-search .form-control:focus {
  box-shadow: none;
  background: transparent;
}

.azhar-search .btn {
  border: 0;
  border-radius: 0;
  background: var(--color-primary-700);
  color: #fff;
  padding-inline: 1.1rem;
  transition: background-color 0.2s ease;
}

.azhar-search .btn:hover {
  background: var(--color-primary-800);
  color: #fff;
}

/* The three priority buttons. */
.azhar-priority {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.azhar-priority .btn {
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  white-space: nowrap;
  border: 1px solid var(--color-primary-600);
  background: var(--color-primary-600);
  color: #fff;
}

.azhar-priority .btn:hover,
.azhar-priority .btn:focus-visible {
  background: var(--color-primary-800);
  border-color: var(--color-primary-800);
  color: #fff;
}

/* The third button (Masala) reads as the "other" kind of destination -
   religious rulings rather than an application form - so it takes the gold
   accent instead of a third identical green pill. */
.azhar-priority .btn.azhar-priority-accent {
  background: transparent;
  border-color: var(--color-accent-500);
  color: var(--color-accent-600);
}

.azhar-priority .btn.azhar-priority-accent:hover,
.azhar-priority .btn.azhar-priority-accent:focus-visible {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: #fff;
}

/* ---- Row 3: main navigation ----------------------------------------- */

.azhar-nav {
  background: var(--color-primary-700);
  border-top: 2px solid var(--color-accent-500);
  padding: 0;
}

.azhar-nav .navbar-nav {
  width: 100%;
  align-items: stretch;
}

.azhar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
  font-size: 0.925rem;
  padding: 0.8rem 0.95rem !important;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.azhar-nav .nav-link:hover,
.azhar-nav .nav-link:focus-visible {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

/* An underline that grows from the centre rather than a filled pill -
   quieter, and it reads the same in both text directions. */
.azhar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0.35rem;
  height: 2px;
  background: var(--color-accent-400);
  transition: left 0.25s ease, right 0.25s ease;
}

.azhar-nav .nav-link:hover::after,
.azhar-nav .nav-link.active::after {
  left: 0.95rem;
  right: 0.95rem;
}

/* Bootstrap's own caret is an ::after too, so dropdown toggles opt out of
   the underline and keep the caret. */
.azhar-nav .dropdown-toggle::after {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
  background: none;
  transition: transform 0.2s ease;
}

.azhar-nav .nav-item.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

.azhar-nav .nav-link.active {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.15);
}

/* Requirements §4: Contact is the right-hand menu item, sitting after
   Notice. margin-inline-start keeps that true under RTL, where "right-hand"
   becomes the left edge of an Arabic page. */
.azhar-nav .nav-item-end {
  margin-inline-start: auto;
}

.azhar-nav .dropdown-menu {
  border: 0;
  border-top: 2px solid var(--color-accent-500);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-raised);
  margin-top: 0;
  padding: 0.4rem 0;
  min-width: 15rem;
}

.azhar-nav .dropdown-item {
  padding: 0.55rem 1.1rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  transition: background-color 0.15s ease, color 0.15s ease, padding-inline-start 0.15s ease;
}

.azhar-nav .dropdown-item:hover,
.azhar-nav .dropdown-item:focus {
  background: var(--color-primary-50);
  color: var(--color-primary-800);
  padding-inline-start: 1.35rem;
}

.azhar-nav .dropdown-item.active {
  background: var(--color-primary-600);
  color: #fff;
}

.azhar-nav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  margin: 0.4rem 0;
  padding: 0.4rem 0.7rem;
}

.azhar-nav .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.azhar-nav .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Hovering a top-level item opens its menu on pointer devices; on touch and
   keyboard Bootstrap's click/Enter behaviour is untouched. */
@media (min-width: 992px) and (hover: hover) {
  .azhar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 1199.98px) {
  .azhar-search { max-width: 18rem; }
  .azhar-priority .btn span { display: none; }
  .azhar-priority .btn i { margin: 0 !important; }
  .azhar-nav .nav-link { padding-inline: 0.7rem !important; font-size: 0.875rem; }
}

@media (max-width: 991.98px) {
  /* The brand row loses its centre column - search drops into the nav
     collapse so the logo and the three buttons keep a full row each. */
  .azhar-brandrow-inner { flex-wrap: wrap; }
  .azhar-search { display: none; }
  .azhar-brand { flex: 1 1 auto; }
  .azhar-brand img { height: 52px; }
  .azhar-brand-name { font-size: 1.5rem; }
  .azhar-priority .btn span { display: inline; }

  .azhar-nav .navbar-collapse {
    padding-bottom: 0.75rem;
  }

  .azhar-nav .nav-link::after { display: none; }

  .azhar-nav .dropdown-menu {
    background: rgba(255, 255, 255, 0.08);
    border-top: 0;
    box-shadow: none;
    margin-inline-start: 1rem;
  }

  .azhar-nav .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
  }

  .azhar-nav .dropdown-item:hover,
  .azhar-nav .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  /* The mobile search sits inside the collapse, above the links. */
  .azhar-search-mobile { display: block; padding: 0.75rem 0 0.25rem; }
}

@media (min-width: 992px) {
  .azhar-search-mobile { display: none; }
}

@media (max-width: 575.98px) {
  .azhar-brand img { height: 44px; }
  .azhar-brand-name { font-size: 1.15rem; }
  .azhar-brand-sub { display: none; }
  .azhar-priority { width: 100%; justify-content: stretch; }
  .azhar-priority .btn { flex: 1; justify-content: center; font-size: 0.78rem; padding-inline: 0.5rem; }
  .azhar-utility-inner { justify-content: center; font-size: 0.8rem; }
}

/* The school's own name in Arabic keeps the display face wherever the
   chrome renders it. */
.azhar-brand-name[lang='ar'],
html[lang='ar'] .azhar-brand-name {
  font-family: var(--font-ar-display);
}

@media (prefers-reduced-motion: reduce) {
  .azhar-header,
  .azhar-brandrow,
  .azhar-brand img,
  .azhar-brand-name,
  .azhar-nav .nav-link,
  .azhar-nav .nav-link::after,
  .azhar-nav .dropdown-item {
    transition: none !important;
  }
}