/* ================= Saint Matthias · Glass Nav + Image on HOME only ================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&family=Inter:wght@400;600;700;800&display=swap');
/* ===== Admission Button (hero call-to-action) ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');


:root{
  --brand:#3DA5FF; --brand-2:#7CC6FF; --brand-3:#E6F4FF;
  --bg:#F7FBFF; --panel:#ffffff; --card:#ffffff;
  --ink:#0f1a2a; --muted:#5b708f; --line:rgba(61,165,255,.25);
  --radius:16px; --shadow:0 12px 30px rgba(14,36,66,.08);
  --container:1120px; --header-h:72px;
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--ink);
  background: var(--bg);   /* site background for non-hero sections */
  line-height:1.55;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}
main{ scroll-snap-type:y proximity }

/* ===== Glass Navbar (transparent & blurry) ===== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;

  /* More transparent gradient — lighter veil */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12));



  /* Softer blur and slightly reduced saturation for a subtler glass effect */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);

  /* Keep shadow minimal for depth but not heavy */
  box-shadow: 0 1px 12px rgba(14, 36, 66, 0.05);
}

.nav-wrap{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px }

/* Brand */
.logo{ display:flex; align-items:center; gap:15px }

/* ——— Logo wrapper sets the size; image always fills and is zoomed ——— */
.logo-wrap{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.logo-img{
  width: 65%;
  height: 65%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.8);        /* zoom to hide outer white border */
  background: transparent;
  transition: transform .25s ease;
}

/* (optional) tiny hover lift on large screens */
@media (hover:hover){
  .logo-img:hover{ transform: scale(1.9); }
}



.logo-text {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;
  /* Bright gradient for dark backgrounds */
  background: linear-gradient(90deg, #e8f4ff, #b5dcff 45%, #6bbcff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.15);
}

/* Nav */
/* ===== Navbar Links (Montserrat, refined — blue hover only) ===== */
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  font-family: "Montserrat", Inter, system-ui, sans-serif; /* clean modern font */
  font-weight: 400; /* plain, not bold */
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-transform: none;
  position: relative;
  transition: 
    color 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* Blue underline effect only */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Hover — no background, just blue underline + slight lift */
.nav-links a:hover {
  color: #aee1ff; /* soft bluish glow on hover */
  transform: translateY(-2px);
}

.nav-links a:hover::after {
  opacity: 1;
  transform: translateY(0);
}



/* Mobile nav */
.nav-toggle{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden
}

/* Burger button */
.nav-burger{
  display:none; position:relative; width:44px; height:44px;
  cursor:pointer; border-radius:12px; border:1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
@media (hover:hover){
  .nav-burger:hover{ border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06) }
}

/* Burger lines */
.nav-burger span{
  position:absolute; left:10px; right:10px; height:2px; border-radius:2px;
  background:#ffffff; /* visible on dark hero */
  transition: transform .35s cubic-bezier(.22,.61,.36,1), top .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}
.nav-burger span:nth-child(1){ top:14px }
.nav-burger span:nth-child(2){ top:21px }
.nav-burger span:nth-child(3){ top:28px }

.nav{ display:block }

@media (max-width:768px){
  .nav-burger{ display:inline-flex; justify-content:center; align-items:center; margin-left:auto }

  .nav{
    position:absolute; top:calc(var(--header-h)); right:0; left:0;
    /* Transparent like header (light glass) */
    background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
    border-bottom: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    max-height:0; overflow:hidden; transition:max-height .32s ease;
  }

  .nav-links{
    flex-direction:column; align-items:stretch; gap:0; padding:8px 12px;
  }
  .nav-links a{
    padding:12px 14px; border-radius:10px; margin:4px 0;
    opacity:0; transform: translateY(6px);
    transition: opacity .28s ease, transform .28s ease;
  }

  /* Open state */
  .nav-toggle:checked ~ .nav{ max-height: 70vh }

  /* Staggered fade-in for links */
  .nav-toggle:checked ~ .nav .nav-links a{ opacity:1; transform: translateY(0) }
  .nav-toggle:checked ~ .nav .nav-links li:nth-child(1) a{ transition-delay:.04s }
  .nav-toggle:checked ~ .nav .nav-links li:nth-child(2) a{ transition-delay:.08s }
  .nav-toggle:checked ~ .nav .nav-links li:nth-child(3) a{ transition-delay:.12s }
  .nav-toggle:checked ~ .nav .nav-links li:nth-child(4) a{ transition-delay:.16s }

  /* Burger → X animation */
  .nav-toggle:checked + .nav-burger span:nth-child(1){
    top:21px; transform: rotate(45deg);
  }
  .nav-toggle:checked + .nav-burger span:nth-child(2){
    opacity:0; transform: scaleX(0.2);
  }
  .nav-toggle:checked + .nav-burger span:nth-child(3){
    top:21px; transform: rotate(-45deg);
  }
}

@media (min-width:769px){
  .nav{ position:static; max-height:none !important; background: transparent; backdrop-filter:none; border:0 }
}

/* ===== Sections ===== */
section{ scroll-margin-top: calc(var(--header-h) + 12px) }
.page{ min-height: calc(100svh - var(--header-h)) }
.reveal{ opacity:0; transform: translateY(10px); animation: fadeUp .6s ease forwards }
@keyframes fadeUp{ to{ opacity:1; transform: translateY(0) } }
.hilite:target{ outline:2px solid rgba(61,165,255,.35); outline-offset:6px; box-shadow:0 0 0 10px rgba(124,198,255,.18); transition: box-shadow .5s, outline-color .5s }
section, .page{ border-radius:0 !important }

/* ===== HOME ONLY: full-bleed background image (separate section) ===== */
#home.hero {
  min-height: 100vh; /* full viewport height */
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  isolation: isolate;

  /* 👇 Add a subtle bluish-dark overlay + background image */
  background:
    linear-gradient(rgba(10, 25, 50, 0.6), rgba(15, 30, 60, 0.6)), /* bluish-dark tint */
    url("../asset/about-bg.jpg") center center / cover no-repeat fixed;

  /* 👇 Let the image extend behind the sticky header */
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}



#home .hero-content {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-top: calc(var(--header-h) - 544px); /* lifted upward slightly */
  transform: translateY(-30px); /* visually move the block up */
  color: #ffffff; /* makes all text white by default */
}


/* Main heading */
#home h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 5vw, 54px);
  color: #ffffff; /* white font */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); /* soft shadow for readability */
}

/* Paragraph text */
#home p {
  margin: 0 0 26px;
  color: #f0f0f0; /* light white for contrast */
  font-size: clamp(16px, 2.2vw, 18px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* ===== OTHER SECTIONS: clean panels (separate from the hero) ===== */
.section{ 
  padding: 0;
  background: linear-gradient(0deg, rgba(255,255,255,.95), rgba(255,255,255,.95)); /* solid panel feel */
  border-top: 1px solid var(--line);
}
.section .container{ padding-block: clamp(32px, 6vw, 64px) }
.section h2{ margin:0 0 8px; font-size: clamp(22px, 3.5vw, 32px); color:#0d2746 }
.section p{ color: var(--muted) }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:14px; font-weight:800; letter-spacing:.3px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#05223d; border:0; box-shadow:0 10px 24px rgba(61,165,255,.25);
  transition: transform .15s ease, filter .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform: translateY(-1px); filter:saturate(110%) }
.btn-xl{ padding:16px 28px; font-size:18px; border-radius:16px }
.btn-ghost{
  padding:12px 18px; border-radius:12px; font-weight:800; border:1px solid var(--line);
  background:#fff; color:#0f2542;
}
.btn-ghost:hover{ background: var(--brand-3) }

/* ===== Modals / Forms (unchanged structure) ===== */
.overlay{
  position: fixed; inset:0; display:none; justify-content:center; align-items:center;
  min-height:100svh; background:rgba(5,16,36,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index:9999;
}
.overlay:target{ display:flex }

#login-modal .login-plain{
  width:min(480px,92vw); max-width:480px; max-height:calc(100svh - 64px); overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  padding:36px 32px 40px; margin:0; animation:modalSlideUp .45s ease forwards;
}
@keyframes modalSlideUp{ from{ transform:translateY(60px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

.modal-card{
  width:min(820px,92vw); max-height:86vh; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px 18px 22px;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line) }
.modal-title{ font-size:18px; font-weight:800; color:#0e2a4a }
.modal-close{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; color:#0f2542; transition:.2s; border:1px solid transparent; background:#F3F8FF }
.modal-close:hover{ background:var(--brand-3); border-color:var(--line) }

/* Forms */
.form-section{
  background:#F9FCFF; border:1px solid var(--line);
  border-radius:12px; padding:16px; margin:14px 0 18px;
}
.section-title{ font-weight:800; margin-bottom:10px; color:#0f2542 }
.form-grid{ display:grid; gap:14px; grid-template-columns:repeat(12,1fr) }
.form-group{ grid-column: span 6 }
.form-group.wide{ grid-column: span 12 }
@media (max-width:720px){ .form-group{ grid-column:span 12 } }

label{ display:block; font-size:13px; color:#36577a; margin:0 0 6px }
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="file"], select{
  width:100%; padding:12px 12px; color:#0f2542;
  background:#fff; border:1px solid var(--line); border-radius:10px; outline:0;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::file-selector-button{
  margin-right:10px; padding:8px 12px; border-radius:8px;
  border:1px solid var(--line); background:#F3F8FF; color:#0f2542; cursor:pointer;
}
input:focus, select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(61,165,255,.20) }

.btn-row{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px }

/* ===== Footer ===== */
footer{ color:#5b708f; text-align:center; padding:6px 5px; background:#ffffffb8; backdrop-filter: blur(6px) }

/* ===== Responsive ===== */
@media (max-width:1024px){
  :root{ --container:960px }
  .hero-content{ max-width:720px }
  .modal-card{ width:min(760px,94vw) }
}

@media (max-width:920px){
  .nav-links a{ padding:9px 12px }
  #home h1{ font-size: clamp(28px, 5.4vw, 46px) }
  #home p{ font-size: clamp(15px, 2.4vw, 17px) }
}

@media (max-width:768px){
  :root{ --container:720px }
  .nav-wrap{ padding-block:10px }
  .nav-links{ flex-wrap:wrap; justify-content:center; gap:4px }
  .nav-links a{ padding:8px 12px }
  .modal-card{ width:min(640px,96vw); max-height:90svh }
  .btn-row{ justify-content:center; flex-wrap:wrap }
}

@media (max-width:640px){
  :root{ --header-h:64px; --container:560px }

  /* ⬇️ size the wrapper, not the image */
  .logo-wrap{ width:36px; height:36px }
  .logo-text{ font-size:16px }

  #home h1{ font-size: clamp(26px, 7vw, 36px) }
  .eyebrow{ padding:5px 10px; font-size:12px }
  .btn, .btn-ghost, .btn-xl{ width:100%; max-width:380px }
  .section h2{ font-size: clamp(20px, 5.2vw, 28px) }
  .modal-card{ padding:16px 14px 18px }
  .form-section{ padding:12px }
  .btn-row{ gap:10px }
}

@media (max-width:420px){
  :root{ --header-h:56px; --container:360px }
  .nav-wrap{ gap:10px }

  /* ⬇️ smallest logo wrapper */
  .logo-wrap{ width:32px; height:32px }

  .nav-links a{ padding:7px 10px; font-size:14px }
  .modal-card{ width:96vw }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="file"], select{ height:46px }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Overlay fallback */
.overlay{ display:none } .overlay:target{ display:grid }




/* Base reveal state */
[data-animate]{
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}

/* When visible (page load or scrolled in) */
.in-view{
  animation: fadeUp 1.5s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes fadeUp{
  to{ opacity:1; transform: translateY(0) }
}

/* Optional: subtle hero container entrance */
#home .hero-content{
  animation: heroRise 1.7s cubic-bezier(.2,.7,.2,1) .05s both;
}
@keyframes heroRise{
  from{ transform: translateY(8px); filter: saturate(.98) blur(.3px); opacity:.96 }
  to{ transform: translateY(0); filter: none; opacity:1 }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-animate], .in-view, #home .hero-content{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}