/*
 * GLRCF shared UI layer — one typeface and consistent basics across all six sites.
 * Loaded on every page by shared/glrcf_asset_extract.php (before </head>).
 * Deliberately low-risk: typography, focus, forms, media and phone safeguards only —
 * each site keeps its own colours and layouts.
 * Inter (SIL Open Font License, see /assets/fonts/LICENSE-Inter.txt) is self-hosted.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/GLRCF_Mission/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/GLRCF_Mission/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Arabic, Urdu, Tamil etc. fall back to the device's native fonts */
  --glrcf-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Naskh Arabic', 'Helvetica Neue', Arial, sans-serif;
  --glrcf-focus: #2563eb;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--glrcf-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

/* Headings and controls follow the same family unless a component sets its own */
h1, h2, h3, h4, h5, h6, button, input, select, textarea, optgroup {
  font-family: inherit;
}
h1, h2, h3 { letter-spacing: -0.015em; }

/* Media never wider than its container */
img, video, canvas, iframe, svg { max-width: 100%; }

/* Clear, consistent keyboard focus (mouse clicks unaffected) */
:focus-visible {
  outline: 3px solid var(--glrcf-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Long words / URLs / emails never push the page sideways */
p, li, td, dd, blockquote, .policy-section, .contact-box { overflow-wrap: anywhere; }

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Phones & small tablets ---------- */
@media (max-width: 768px) {
  /* 16px inputs stop iOS from zooming in when a field is tapped */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
  /* Safety net: nothing can make the page scroll sideways */
  html, body { overflow-x: clip; max-width: 100%; }
  /* Tables scroll inside themselves instead of stretching the page */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* header-main.css sizes EVERY <header> to 80px / z-index 10000 (meant for the site header only).
   Section headers inside page content must size to their content, or they spill over what follows. */
main header, .content-area header, .main-content header, article header, section header,
.gallery-container header, .policy-container header, header.ilf-hero, header.gallery-header {
  height: auto !important;
  max-height: none !important;
  z-index: auto !important;
}

@media (max-width: 768px) {
  /* Logo stays tappable: the header rows that overlap it let taps through their empty space
     (their buttons, links and menus still receive taps normally). */
  html body #mainHeader #headerMiddlePanel #headerSecondRow,
  html body #mainHeader #headerMiddlePanel .mobile-header-row1 { pointer-events: none !important; }
  html body #mainHeader #headerMiddlePanel #headerSecondRow > *,
  html body #mainHeader #headerMiddlePanel .mobile-header-row1 > * { pointer-events: auto !important; }
  /* Deen-ul-Islam's nav row starts at the left edge, under the logo: leave room for the logo */
  /* (its items carry inline !important styles, so a pseudo-element spacer is used) */
  html body #mainHeader #headerMiddlePanel #navigator-container:has(> .prayer-nav-item)::before { content: ''; flex: 0 0 48px; height: 1px; }
  html body #mainHeader #headerMiddlePanel #headerSecondRow .header-center,
  html body #mainHeader #headerMiddlePanel #navigator-container { pointer-events: none !important; }
  html body #mainHeader #headerMiddlePanel #navigator-container > * { pointer-events: auto !important; }
  /* The header search form can be stretched vertically by page CSS (e.g. help centre), covering the nav row */
  html body #mainHeader #searchWrapper, html body #mainHeader #searchForm { max-height: 48px !important; align-self: center !important; }
  /* One-line donation ticker (it scrolls; extra lines were hidden under content) */
  #scrollingBanner .scroll-content { white-space: nowrap; }
}
@media (max-width: 480px) {
  /* Top bar: icons only for "Sidebar" and "Resources" so nothing slides under the language button */
  html body #mainHeader .header-top-bar .top-bar-left .top-bar-link-label,
  html body .header-top-bar .top-bar-left .top-bar-link-label { display: none !important; }
  .top-bar-left { min-width: 0; }
}

/* Theme button docked in the top bar on phones (see glrcf_ui.js) */
html body #navigator-container > .glrcf-display-nav-item { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 8px; }
html body .glrcf-display-nav-item #glrcf-appearance-open-text.glrcf-display-in-bar { margin: 0 !important; }
html body #glrcf-appearance-open-text.glrcf-display-in-bar {
  position: static !important;
  width: 28px !important; height: 28px !important; min-width: 28px; max-height: 28px !important; flex: 0 0 28px !important; align-self: center;
  padding: 0 !important; margin: 0 0 0 8px !important;
  border-radius: 50% !important;
  font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: transparent !important; border: 1px solid currentColor !important;
}
html body #glrcf-appearance-open-text.glrcf-display-in-bar::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(90deg, #111827 50%, #ffffff 50%);
  border: 1.5px solid #111827;
}

/* Policy / information pages: comfortable reading on every screen */
.policy-container { max-width: min(1000px, 100% - 24px) !important; }
@media (max-width: 640px) {
  .policy-container { padding: 20px 16px !important; margin: 16px auto !important; }
  .policy-header h1 { font-size: 1.6rem !important; }
}

/* Search filter icon stays clickable: the language menu's invisible hover area no longer sits on top of it */
html body #mainHeader #filterLink { position: relative !important; z-index: 2147483647 !important; }

/* Gallery carousels: arrows stay above the neighbouring row of video cards */
[id^="carousel-"]:has(> .nav-arrow) { position: relative; z-index: 3; }
/* (the language menu's hover "bridge" pseudo-elements reach over the filter icon — let clicks pass through) */
html body #mainHeader .aeris-lang-top-wrap::before,
html body #mainHeader .aeris-lang-top-wrap::after { pointer-events: none !important; }