/* ============================================================
   MAIN.CSS — shared design tokens, reset, header/top-bar/navbar,
   footer and scroll-reveal styles for all main site pages.
   Extracted from the per-page inline styles (source: home.php).
   Page-specific styles remain inline in each page.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --navy:       #2F4A7A;
  --dark-blue:  #00468b;
  --cyan:       #00a8ea;
  --gold:       #ffffff;
  --text-dark:  #0f172a;
  --text-body:  #000;
  --text-muted: #888;
  --bg-light:   #f7fbff;
  --bg-news:    #f8f9fc;
  --white:      #fff;
  --border:     #fbfbfb;
  --shadow-sm:  0 5px 15px rgba(0,0,0,.08);
  --shadow-md:  0 10px 25px rgba(0,0,0,.08);
  --shadow-lg:  0 14px 35px rgba(0,0,0,.13);
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill:30px;
  /* Fluid navbar height: scales smoothly from phones (~62px) up to
     large desktops (~92px) with no per-breakpoint overrides. */
  --nav-h:      clamp(62px, 4vw + 40px, 92px);
  /* --header-h is the TOTAL fixed header height (top-bar + navbar).
     It is set dynamically by JS on load/resize so it always matches
     real rendered content at every breakpoint (no hardcoded guessing
     needed across mobile / tablet / desktop / ultra-wide). The value
     below is only a safe fallback before JS runs. */
  --header-h:   137px;
  --transition: 0.3s ease;
}
/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Poppins', sans-serif;
  background: var(--white);
  /* Top spacing now equals the real combined header height, kept in
     sync by JS so content is never hidden behind the fixed header. */
  padding-top: var(--header-h);
  overflow-x: hidden;
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a { color: inherit; }
/* Form controls do not inherit fonts by default — make them follow
   the page font so pages don't need universal-selector font hacks
   (which used to leak into the fixed header and change the navbar). */
button, input, select, textarea { font-family: inherit; }
/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-right {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-left.active, .reveal-right.active {
  opacity: 1;
  transform: translate(0);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   SITE HEADER (Top Bar + Navbar combined, single fixed block)
   ============================================================
   The top bar and navbar are now wrapped in one parent element
   (.site-header) that is the ONLY thing fixed to the viewport.
   The two children stack normally inside it (no gap, no overlap,
   no independent fixed positioning), so they always move and
   render together as one solid unit. No opacity/transform fade
   is applied on scroll — the header is permanently visible.
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* no transition on opacity/transform here on purpose — header
     must never fade, hide, or shrink while scrolling */
}
/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
    background:#457b9d;
    color:#fff;
    font-family:'Inter',sans-serif;
    /* Fluid size: ~12.5px on phones up to 14px on desktop. The old
       17px/weight-200 combo made the bar tall and hard to read. */
    font-size:clamp(12.5px, 0.4vw + 9px, 14px);
    font-weight:400;
    width: 100%;
    /* Hairline separator so the top-bar always reads as its own
       distinct row, clearly separate from the navbar above it and
       from the hamburger dropdown that opens below the navbar. */
    border-top: 1px solid rgba(255,255,255,0.18);
}
.top-bar-container {
    max-width:1320px;
    margin:auto;
    padding:clamp(8px, 1.2vw, 15px) clamp(12px, 3vw, 20px);
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items:center;
    gap: 10px 20px;
}
.top-left, .top-right {
    display:flex;
    align-items:center;
    flex-wrap: wrap;
    gap: 8px clamp(10px, 1.8vw, 18px);
}
.top-item {
    display:flex;
    align-items:center;
    gap:8px;
    white-space: nowrap;
}
.top-email { min-width: 0; }
.email-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
}
.email-links a { color: inherit; text-decoration: none; }
.email-links a:hover, .email-links a:focus-visible { text-decoration: underline; }
.separator {
    width:1px;
    height:22px;
    background:rgba(255,255,255,.35);
}
@media(max-width:991px) {
.top-bar-container {
    justify-content:center;
    text-align: center;
}
.top-left, .top-right {
    justify-content:center;
}
.separator { display:none; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  min-height: var(--nav-h);
  background: var(--white);
  display: flex;
  flex-wrap: nowrap;          /* pin: Bootstrap .navbar sets flex-wrap: wrap */
  position: static;           /* pin: Bootstrap positioning defaults */
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 56px);
  width: 100%;

}
.brand {  
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.usi-logo {
  /* Fluid logo: ~42px on phones to 72px on large desktops. Must stay
     smaller than --nav-h so it never overflows the navbar (the old
     110px logo was taller than the 95px bar). */
  height: clamp(42px, 3vw + 20px, 72px);
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
/* ---- Hamburger ---- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: #f2f6fb;
  border: none;
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 8px;
  z-index: 1100;
  transition: background var(--transition);
}
.hamburger:hover { background: #e6eefa; }
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark-blue);
  border-radius: 3px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---- Menu ---- */
.menu {
  display: flex;
  gap: clamp(2px, 1vw, 10px);
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0;                  /* pin: Bootstrap reboot gives ul margin-bottom: 1rem */
  padding: 0;                 /* pin: Bootstrap reboot gives ul padding-left: 2rem */
}
.menu > li {
  position: relative;
}
.menu-link {
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  color: #1b2b45;
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0.2px;
  line-height: 1;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition);
}
.menu-link::after {
  content: "";
  position: absolute;
  border: 0;                  /* pin: Bootstrap .dropdown-toggle::after draws a border caret */
  margin: 0;                  /* pin: Bootstrap .dropdown-toggle::after adds margin-left */
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  background: var(--cyan);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.menu-link:hover, .menu-link:focus-visible {
  color: var(--dark-blue);
}
.menu-link:hover::after, .menu-link:focus-visible::after {
  transform: scaleX(1);
}
.menu-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.menu-link.active {
  color: var(--cyan);
  font-weight: 600;
}
.menu-link.active::after {
  transform: scaleX(1);
}
.dropdown-caret {
  font-size: 10px;
  transition: transform var(--transition);
}
.has-dropdown.open .dropdown-caret, .has-dropdown:hover .dropdown-caret {
  transform: rotate(180deg);
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: 8px;
  margin: 0;
  border: 0;                  /* pin: Bootstrap .dropdown-menu adds a 1px border */
  display: block;             /* pin: Bootstrap .dropdown-menu sets display: none */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 20;
}
.has-dropdown.open .dropdown-menu, .has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: #1b2b45;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.dropdown-menu a:hover, .dropdown-menu a:focus-visible {
  background: #f2f7fc;
  color: var(--dark-blue);
}
/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #000;
  color: var(--white);
  padding: clamp(40px, 5vw, 60px) 8% 20px;
}
.footer-container {
  display: flex;
  /* centered na may bounded gap — ang dating space-between ay
     naghihiwalay ng columns hanggang dulo sa malalapad na screen */
  justify-content: center;
  gap: clamp(48px, 9vw, 120px);
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 28px;
}
.footer h3, .footer h4 {
  color: var(--cyan);
  margin-bottom: 14px;
  font-size: clamp(14px, 1.2vw, 17px);
}
.footer p, .footer a {
  color: #ccc;
  font-size: clamp(12px, 1vw, 14px);
  text-decoration: none;
  display: block;
  margin-bottom: 7px;
  line-height: 1.5;
}
.footer a:hover { color: var(--cyan); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
}
.footer-bottom a { color: #ccc; }
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-logo {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
  object-fit: contain;
}
.contact-info p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 7px 0;
}
.contact-info i {
  color: var(--white);
  width: 20px;
  padding-top: 2px;
  flex-shrink: 0;
}
@media (max-width: 992px) {
/* ============================================================
   TABLET & BELOW — hamburger + slide-in panel.
   Sizing (logo, nav height, fonts) is fluid via clamp() above,
   so this block only switches the menu's layout mode. 992px
   (not 768px) because 7 horizontal items are too cramped on
   tablet widths.
   ============================================================ */

.hamburger { display: flex; }
.menu {
    flex-direction: column;
    position: fixed;
    /* Anchored to the real combined header height (top-bar + navbar),
       kept current by JS, so the panel always starts exactly below
       the fixed header — never overlapping it, never containing it. */
    top: var(--header-h);
    right: 0;
    left: auto;
    /* Small slide-in panel on the right, not a full-width dropdown —
       only takes up as much space as it needs. */
    width: min(78vw, 280px);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--white);
    padding: 10px;
    gap: 2px;
    border-radius: 0 0 0 var(--radius-md);
    box-shadow: -6px 8px 24px rgba(0,0,0,0.15);
    transform: translateX(110%);
    transition: transform 0.3s ease;
    z-index: 999;
    align-items: stretch;
  }
.menu.open { transform: translateX(0); }
.menu > li { width: 100%; }
.menu-link {
    font-size: 15px;
    padding: 13px 14px;
    width: 100%;
    border-radius: var(--radius-sm);
  }
.menu-link.active::after {
    bottom: 8px;
    left: 14px;
    right: 14px;
  }
.dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: #f7fbff;
    display: none;
    margin: 2px 0 6px;
  }
.has-dropdown.open .dropdown-menu { display: block; }
.has-dropdown:hover .dropdown-menu { display: none; }
 /* disable hover-open on touch widths */
  .has-dropdown.open:hover .dropdown-menu { display: block; }
}

@media (max-width: 768px) {
/* ============================================================
   iPAD PORTRAIT & BELOW — stack the footer columns
   ============================================================ */

.footer-container { flex-direction: column; gap: 25px; }
.footer-bottom { flex-direction: column; gap: 5px; }

/* On narrow screens the horizontal reveal offsets (±70px) push
   not-yet-revealed elements past the viewport edge and create
   phantom horizontal scroll width — fall back to a fade-up. */
.reveal-left, .reveal-right { transform: translateY(40px); }
}

@media (max-width: 600px) {
/* ============================================================
   MOBILE — let long top-bar lines (email pair) wrap instead of
   overflowing past the viewport edge on narrow phones.
   ============================================================ */

.top-item { white-space: normal; justify-content: center; text-align: center; }
/* Keep the two email addresses together on one compact, tappable line. */
.top-email { gap: 4px; }
.top-email .email-links { gap: 2px; }
}