/* ====================================
  COMPLETE style.css
  FULL-BRIGHT HERO IMAGES + ALL PREVIOUS FIXES
  ==================================== */
:root {
  --red: #e41b23;
  --white: #ffffff;
  --nav-height: 68px;
  --transition: 0.3s ease;
  --radius: 4px;
  --st-anne-blue: #1e3a8a;
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: var(--white);
  color: #333;
  font-family: system-ui, -apple-system, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0; bottom: 0;
  background: var(--white);
  z-index: -1;
}
/* ============== RED NAVIGATION ============== */
.nav { background: var(--red); color: var(--white); position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: var(--nav-height); }
.nav__container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; height: 100%; }
.nav__logo { font-weight: 700; font-size: 1.4rem; text-decoration: none; color: var(--white); text-transform: uppercase !important; letter-spacing: 1px; }
.nav__menu { list-style: none; display: flex; margin: 0; padding: 0; }
.nav__submenu, .nav__submenu ul, .nav__submenu li { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.nav__item { position: relative; }
.nav__link { color: var(--white); text-decoration: none; padding: 0 1rem; display: block; height: var(--nav-height); line-height: var(--nav-height); transition: background var(--transition); text-transform: uppercase !important; font-weight: 600; letter-spacing: 0.8px; font-size: 0.95rem; }
.nav__link:hover { background: rgba(0,0,0,0.15); }
.nav__submenu { position: absolute; top: 100%; left: 0; background: var(--red); min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--transition); border-radius: var(--radius); box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 1000; padding: 0; }
.nav__item--has-submenu:hover > .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__submenu a { display: block; padding: 0.9rem 1.2rem; color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.15); text-transform: none !important; font-weight: 500; font-size: 0.95rem; }
.nav__submenu a:hover { background: rgba(0,0,0,0.15); }
.nav__submenu a:last-child { border-bottom: none; }
/* Hamburger & mobile */
.nav__toggle { display: none; background: none; border: none; width: 30px; height: 22px; position: relative; cursor: pointer; }
.nav__toggle span { background: var(--white); height: 3px; width: 100%; position: absolute; left: 0; transition: all var(--transition); border-radius: 2px; }
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 9px; }
.nav__toggle span:nth-child(3) { top: 18px; }
.nav__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px,6px); }
.nav__toggle.active span:nth-child(2) { opacity: 0; transform: scale(0); }
.nav__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px,-7px); }
@media (max-width: 768px) {
  .nav__toggle { display: block !important; } /* ← THIS WAS MISSING – NOW FIXED */
  .nav__menu { position: fixed; top: var(--nav-height); left: -100%; width: 100%; height: calc(100vh - var(--nav-height)); background: var(--red); flex-direction: column; transition: left var(--transition); overflow-y: auto; padding-top: 1rem; z-index: 998; }
  .nav__menu.open { left: 0; }
  .nav__menu.open::before { content: ""; position: fixed; inset: 0; background: var(--red); opacity: 0.98; pointer-events: none; z-index: -1; }
  body.menu-open { overflow: hidden; position: fixed; width: 100%; height: 100%; }
  .nav__link { padding: 1.3rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .nav__submenu { position: static !important; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: rgba(228,27,35,0.95); padding: 0 !important; }
  .nav__item--has-submenu.active > .nav__submenu { max-height: 600px; }
  .nav__submenu a { padding-left: 2.5rem; text-transform: none !important; }
}
/* ============== 3×2 GRID ============== */
.features-grid { padding: 6rem 1rem 4rem; background: var(--white); margin-top: var(--nav-height); }
.features-grid .container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: all var(--transition); }
.feature-card:hover { transform: translateY(-10px); }
.feature-card img { width: 100%; height: 480px; object-fit: cover; }
.feature-card h3 { padding: 1.4rem; margin: 0; text-align: center; color: var(--red); font-weight: 600; }
@media (max-width: 640px) { .features-grid .container { grid-template-columns: 1fr; } }
/* TWO-COLUMN LAYOUT */
.two-columns {
  display: flex;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
}
.two-columns > div { flex: 1; }
@media (max-width: 768px) {
  .two-columns {
    flex-direction: column;
    gap: 3rem;
    padding: 5rem 1.5rem;
  }
}
.two-columns h1 { color: var(--red); text-align: center; margin-bottom: 2.5rem; font-size: 2.5rem; }
.two-columns h2, .two-columns h3 { color: var(--red); margin: 1.8rem 0 0.8rem; font-size: 1.6rem; }
.two-columns p { margin-bottom: 1.2rem; font-size: 1.05rem; line-height: 1.7; }
.two-columns ul { padding-left: 1.5rem; margin: 1.2rem 0; list-style: disc; }
.two-columns strong { color: var(--red); }
.two-columns .cta-section {
  align-self: flex-start;
  text-align: center;
  margin-top: 2rem;
  padding: 1.8rem;
  background: rgba(228, 27, 35, 0.05);
  border-radius: 12px;
}
/*============= SINGLE-COLUMN LAYOUT – SAME STYLE AS TWO-COLUMNS BUT ONE COLUMN ONLY============== */
.single-column {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
  display: block; /* no flex needed */
}
/* ==============Same text styling as before – red headings, perfect spacing============= */
.single-column h1 {
  color: var(--red);
  text-align: left;
  margin-bottom: 2.5rem;
  font-size: 2.5rem;
}
.single-column h2,
.single-column h3 {
  color: var(--red);
  margin: 1.8rem 0 0.8rem;
  font-size: 1.6rem;
}
.single-column p {
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.single-column ul {
  padding-left: 1.5rem;
  margin: 1.2rem 0;
  list-style: disc;
}
.single-column strong {
  color: var(--red);
}
/* Optional: keep the nice box if you ever use .cta-section */
.single-column .cta-section {
  background: rgba(228, 27, 35, 0.05);
  padding: 2rem;
  border-radius: 12px;
  margin: 2rem 0;
  text-align: center;
}
/* Mobile – same as before */
@media (max-width: 768px) {
  .single-column {
    padding: 5rem 1.5rem;
  }
  .single-column h1 {
    font-size: 2.2rem;
  }
}
/*==============Align these all left=====================*/
.two-columns p,
.two-columns li,
.two-columns h1,
.two-columns h2,
.two-columns h3 {
  text-align: left !important;
}
/*============== FULL-WIDTH IMAGE AT BOTTOM OF CONTENT (New Section)============= */
/* FULL-WIDTH IMAGE AT BOTTOM – ALIGNED WITH TESTIMONIAL (900px max) */
.full-width-image {
  max-width: 500px; /* ← matches your .testimonial-center width */
  margin: 4rem auto 0; /* ← centered, same spacing as testimonial */
  padding: 0 1rem; /* ← safe edge padding */
  text-align: center;
}
.full-width-image img {
  display: block;
  width: 100%; /* ← now fills the 900px container */
  max-height: 520px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  margin: 0 auto; /* ← ensures perfect centering */
}
/* Mobile – stays aligned */
@media (max-width: 768px) {
  .full-width-image {
    margin: 3rem auto 0;
    padding: 0 1rem;
  }
  .full-width-image img {
    max-height: 340px;
  }
}
/*============ RED SPACER (Updated Selector)============= */
/* RED SPACER – ALWAYS FULL-WIDTH, WORKS EVERYWHERE, FOREVER */
.blue-spacer {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  height: 5rem !important;
  background: var(--red) !important;
  display: block !important;
}
/*========== WHITE FOOTER================ */
.footer { background: var(--white); color: #333; margin-top: 0 !important; width: 100vw; margin-left: calc(-50vw + 50%); position: relative; }
.footer__main { max-width: 1200px; margin: 0 auto; padding: 3rem 1rem 2rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.footer__column h3 { font-size: 1.3rem; margin-bottom: 1rem; font-weight: 600; color: var(--red); }
.footer__column p { line-height: 1.6; font-size: 0.95rem; margin-bottom: 1rem; opacity: 0.95; }
.footer__column ul { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.footer__column a { color: #333; text-decoration: none; display: block; margin-bottom: 0.5rem; }
.footer__column a:hover { color: var(--red); }
.footer__donate-btn {
  display: inline-block !important;
  margin-top: 0.8rem !important;
  padding: 0.35rem 0.7rem !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.footer__donate-btn:hover { background: #c4161f !important; }
.footer ul, .footer__column ul, .footer li, .footer__column li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/*=========== COPYRIGHT BAR========= */
.footer__bottom {
  background: var(--red);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 1.5rem 1rem;
  text-align: center;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
}
.footer__social { margin-bottom: 0.8rem; display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.footer__social a { display: inline-block; transition: transform 0.3s ease; }
.footer__social a:hover { transform: translateY(-5px) scale(1.2); }
.footer__social img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.footer__bottom p { margin: 0; font-size: 0.9rem; color: var(--white) !important; opacity: 1 !important; }
@media (max-width: 768px) {
  .footer__main { grid-template-columns: 1fr; padding: 2rem 1rem; gap: 2rem; }
  .footer__social img { height: 28px; }
}
/*============= RED CONTENT LINKS – SAFE VERSION =============*/
a:not(.nav a):not(.footer a):not(.footer__donate-btn) {
  color: var(--red) !important;
}
a:not(.nav a):not(.footer a):not(.footer__donate-btn):hover {
  color: #c4161f !important;
}
/*============== FULL-BRIGHT HERO IMAGE – NO OVERLAY, NO DIMMING============ */
.page-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 485px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: var(--nav-height);
  display: block;
}
/* Mobile – perfect scaling */
@media (max-width: 768px) {
  .page-hero { height: 60vh; }
}
@media (max-width: 480px) {
  .page-hero { height: 50vh; }
}
/*=========Spacing in List==================== */
ul.spaced,
.spaced-list {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* ← change this number for more/less space */
  padding-left: 1.5rem; /* keeps the bullets */
  list-style: disc;
}
/*==========Optional: extra space on mobile========== */
@media (max-width: 768px) {
  ul.spaced { gap: 0.8rem; }
}
/*=============CENTERED TESTIMONIAL=========== */
.testimonial-center {
  max-width: 900px;
  margin: 4rem auto;
  text-align: center;
  font-style: italic;
  color: #444;
  font-size: 1.15rem;
  line-height: 1.8;
  padding: 2rem 1rem;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  background: #fdfdfd;
}
.testimonial-center footer {
  margin-top: 1.8rem;
  font-weight: 700;
  font-style: normal;
  color: var(--red);
  font-size: 1.1rem;
}
/* ==================ECE Billing Section – ALL TEXT LEFT-ALIGNED ====================*/
.ece-billing-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.ece-billing-section h2 {
  color: var(--red);
  text-align: left;
  font-size: 2.2rem;
  margin-bottom: 3rem;
  margin-top: -2rem !important;
  padding-top: 2rem !important;
}
.billing-table-wrapper {
  margin-bottom: 3rem;
}
.billing-table-wrapper h3 {
  color: var(--red);
  font-size: 1.6rem;
  margin-bottom: 1rem;
  text-align: left;
}
.tuition-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
}
/*========== ALL TEXT LEFT-ALIGNED – Headers and Cells============ */
.tuition-table th,
.tuition-table td {
  padding: 1rem 1.2rem;
  text-align: left !important; /* ← Forces left alignment */
  border-bottom: 1px solid #eee;
}
/* Headers – red background, white text */
.tuition-table th {
  background: var(--red);
  color: white;
  font-weight: 600;
}
/* First column text (Days) – slightly bolder */
.tuition-table td:first-child {
  font-weight: 500;
}
/* Price column – left-aligned and red (no right-align) */
.tuition-table td:last-child {
  color: var(--red);
  font-weight: 600;
  text-align: left !important; /* ← This was the missing fix */
}
/* Remove bottom border on last row */
.tuition-table tr:last-child td {
  border-bottom: none;
}
/*============= Extended Care Note============== */
.extended-care-note {
  text-align: center;
  background: rgba(228, 27, 35, 0.05);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 2rem;
}
.extended-care-note p {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--red);
  margin: 0;
}
/* Mobile */
@media (max-width: 768px) {
  .ece-billing-section {
    padding: 3rem 1.5rem;
  }
  .billing-table-wrapper h3 {
    font-size: 1.4rem;
  }
  .tuition-table th,
  .tuition-table td {
    padding: 0.8rem;
    font-size: 0.95rem;
  }
  .extended-care-note {
    padding: 1rem;
  }
}
/*=============Center Text across Screen============== */
.text-centered {
  text-align: center;
  background: rgba(228, 27, 35, 0.05);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 2rem;
}
.text-centered p {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--red);
  margin: 0;
}
/* ============INQUIRY FORM BOX – Matches tuitionrates page =======================*/
.inquiry-box {
  max-width: 900px;
  margin: 4rem auto;
  padding: 2.5rem;
  background: #f8f8f8;
  border: 3px solid var(--red);
  border-radius: 12px;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.inquiry-box p {
  margin: 0 0 2rem 0;
  font-style: italic;
  color: #333;
}
/* FINAL BUTTON – TEXT IS BRIGHT WHITE FOREVER */
.inquiry-box {
  max-width: 900px;
  margin: 4rem auto;
  padding: 2.5rem;
  background: #f8f8f8;
  border: 1px solid var(--red);
  border-radius: 8px;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.inquiry-box p {
  margin: 0 0 2rem 0;
  font-style: italic;
  color: #333;
}
@media (max-width: 768px) {
  .inquiry-box { margin: 3rem 1.5rem; padding: 2rem; }
}
/*=================Commitment FEE BOX=============== */
.fee-box {
  background: #f8f8f8;
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem auto;
  text-align: center;
  max-width: 600px;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(228, 27, 35, 0.1);
}
.fee-box h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  text-align: center !important;
  width: 100%;
  margin: 0 auto 0.8rem;
}
.fee-box .amount {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--red);
  margin: 0.5rem 0;
  line-height: 1;
}
.fee-box .per-unit {
  font-size: 1.1rem;
  color: #666;
  margin: 0 0 1rem 0;
  font-weight: 500;
}
.fee-box p {
  margin: 0;
  color: #555;
  line-height: 1.5;
  font-size: 0.95rem;
}
/* Mobile – full-width on small screens */
@media (max-width: 768px) {
  .fee-box {
    margin: 1.5rem 1rem;
    padding: 1.5rem;
  }
  .fee-box .amount {
    font-size: 2rem;
  }
}
/*============SPACED LIST – beautiful spacing between staff rows================ */
ul.spaced,
.spaced-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-left: 1.5rem;
  list-style: disc;
}
@media (max-width: 768px) {
  ul.spaced { gap: 1rem; }
}
/*============= GOOGLE FORM – NO SCROLLBARS + ALIGNED WITH MAIN CONTENT================== */
.google-form-wrapper {
  max-width: 640px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.google-form-wrapper iframe {
  width: 100%;
  height: 950px;
  display: block;
  border: none;
}
/* Mobile – adjust height to avoid scrollbar on small screens */
@media (max-width: 768px) {
  .google-form-wrapper {
    padding: 0 1rem;
    margin: 1.5rem auto;
  }
  .google-form-wrapper iframe {
    height: 821px;
  }
}
@media (max-width: 480px) {
  .google-form-wrapper iframe {
    height: 640px;
  }
}

/* ==================================== */
/* FINAL FIX – HAMBURGER MENU NOW SHOWS ON MOBILE */
/* ==================================== */
@media (max-width: 768px) {
  .nav__toggle { 
    display: block !important; 
  }
}



/*========= FIX HORIZONTAL SCROLL ON CONTACT PAGE – RESPONSIVE IFRAMES============== */
.two-columns iframe {
  width: 100% !important;         /* Makes both iframes full-width of container */
  max-width: 100%;                /* Prevents overflow */
  height: auto;                   /* Keeps aspect ratio */
  min-height: 450px;              /* Minimum height for maps/form */
}

.cta-section iframe {
  height: 400px;                  /* Adjust map height for mobile */
}

/* Hide horizontal scroll globally */
body {
  overflow-x: hidden;             /* No horizontal scroll anywhere */
}

/* Mobile – reduce padding to fit narrow screens */
@media (max-width: 768px) {
  .two-columns {
    padding: 5rem 1rem;           /* Less side padding on mobile */
  }
  .two-columns iframe {
    min-height: 350px;            /* Shorter on mobile */
  }
}



/* GOOGLE FORM – NO VERTICAL SCROLLBAR + PERFECT HEIGHT */
.google-form-wrapper {
  position: relative;
  width: 100%;
  height: 980px;
  padding-bottom: 145%;           /* This gives perfect ratio for your form (adjust if needed) */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.google-form-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/* Mobile – slightly shorter ratio */
@media (max-width: 768px) {
  .google-form-wrapper {
    padding-bottom: 160%;         /* A bit taller on mobile so nothing is cut off */
  }
}