/* ============================================================
   CARMEL CONVENT — THEME PALETTE (single source of truth)
   Change these 7 values to recolor the whole website.
   ============================================================ */


/* ============================================================
   COMPONENTS (moved out of inline PHP <style> — web only)
   ============================================================ */

/* Top-bar action buttons (was inline in script_header.php) */
.second-header a.circular-link,
a.tc-new,
a.news-new,
a.spandan-new{
  display:inline-block;
  background:var(--primary);
  color:var(--white);
  font-size:15px;
  font-weight:600;
  line-height:1;
  padding:11px 24px;
  border-radius:30px;
  box-shadow:0 0 0 0 rgba(var(--primary-rgb),.55);
  animation:circularPulse 2.4s infinite;
  transition:background .2s ease, transform .2s ease;
}
.second-header a.circular-link i{ margin-right:7px; color:var(--gold); }
.second-header a.circular-link:hover,
a.tc-new:hover,
a.news-new:hover{
  background:var(--secondary);
  color:var(--white);
  transform:translateY(-2px);
  animation:none;
}
a.spandan-new{ background:var(--brand-red); }
a.spandan-new:hover{ background:var(--secondary); transform:translateY(-2px); animation:none; }
@keyframes circularPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.55)}
  70%{box-shadow:0 0 0 12px rgba(var(--primary-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0)}
}
.icon-youtube{ color:var(--c-ff0000); }  /* YouTube brand red */

/* Page / blog banners (dynamic bg-image stays inline) */
.page-banner{ padding:5%; background-repeat:no-repeat; background-size:cover; }
.page-banner--blog{ height:400px; background-color:var(--c-594639); }
.page-banner--page{ height:300px; background-color:var(--secondary); }
.page-banner-title{ color:var(--c-4e565a); font-size:28pt; }

/* Circular / news / events header tile */
.tile-175{ padding:20px; height:175px; text-align:center; background:var(--c-f5f5f5); }

/* Floating chat widget (script_homechat.php) */
.chat-fab{ background:var(--primary); color:var(--white); padding:12px 16px; border:none; border-radius:50%; font-size:20px; }
.chat-head{ background:var(--primary); color:var(--white); padding:10px; border-radius:10px 10px 0 0; display:flex; justify-content:space-between; align-items:center; }
.chat-body{ height:290px; overflow-y:auto; padding:10px; background:var(--c-f9f9f9); }
.chat-send{ background:var(--primary); color:var(--white); border:none; padding:8px; }

/* Misc web components */
.section-soft{ background:var(--bg); }
.slider-dark{ background:var(--primary); }
.tc-box{ max-width:350px; background:var(--c-efefef); text-align:center; }
.notif-float{ width:40px; height:40px; position:fixed; bottom:90px; right:33px; border-radius:50%; z-index:999; background:var(--white); }

/* ============================================================
   NEWS / EVENTS — horizontal cards + vertical (bottom-to-top) ticker
   ============================================================ */
.news-ticker{
  margin-bottom:40px;
  position:relative;
}
.news-ticker-track{
  display:flex;
  flex-direction:column;
}
.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(6, 72, 39, 0.08);
  padding: 6px 16px;
  border-radius: 20px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  margin-bottom: 5px;
}
.view-all-link:hover {
  background: var(--primary);
  color: var(--white) !important;
  transform: translateX(3px);
}

.news-row-card{
  display:flex;
  align-items:center;
  gap:22px;
  background:var(--white);
  border:1px solid var(--c-eaeaea);
  box-shadow:0 3px 12px rgba(var(--black-rgb),.05);
  border-radius:12px;
  padding:16px 20px;
  margin-bottom:16px;
}
.news-row-card .date-box{
  flex:0 0 auto;
  width:92px;
  min-height:92px;
  background: linear-gradient(180deg, #ffc527 0%, #ff9e00 100%);
  color:var(--white);
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow: 0 4px 12px rgba(255, 158, 0, 0.25);
}
.news-row-card .date-box strong{ font-size:28px; line-height:1; font-weight:800; color:var(--white); }
.news-row-card .date-box span{ font-size:12px; margin-top:6px; letter-spacing:.3px; font-weight:600; color:var(--white); }
.news-row-card .nr-content{ flex:1 1 auto; min-width:0; }
.news-row-card .nr-content h4{ margin:0 0 6px; font-size:19px; line-height:1.3; }
.news-row-card .nr-content h4 a{ color:var(--text); }
.news-row-card .nr-content h4 a:hover{ color:var(--secondary); }
.news-row-card .nr-more{ color:var(--text); font-weight:600; }
.news-row-card .nr-more i{ margin-left:6px; }

/* Sticky nav bar — shows/fixes on scroll down */
.menu-area.menu-fixed{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:999;
  background-color:var(--c-024926);
  box-shadow:0 6px 18px rgba(var(--black-rgb),.15);
  animation:fadeInDown .45s ease;
}

/* ============================================================
   MOBILE HEADER FIX (<=991px)
   remove the skewed green diagonal that cut off the logo;
   clean white top bar, dark title, centered action buttons
   ============================================================ */
@media (max-width: 991px){
  .second-header::before,
  .header-three .second-header::before{ display:none !important; }

  .header-three .second-header{
    background:var(--white) !important;
    padding:14px 0 !important;
  }
  .second-header .col-lg-6,
  .second-header .col-md-6{ text-align:center; }
  .second-header .d-flex{ justify-content:center; }
  .second-header h3{ color:var(--heading) !important; font-size:22px; }
  .second-header p.text-dark{ color:var(--heading) !important; }

  .header-cta ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding-left:0;
    margin:12px 0 0;
  }
  .header-cta ul li{
    margin:0 !important;
    padding:0 !important;
    border:none !important;
  }
}

/* ============================================================
   MOBILE MENU AS SLIDE-IN DRAWER (<=991px)
   meanmenu adds .meanclose to the reveal when open -> slide the
   nav in from the right; the X floats above the drawer to close.
   ============================================================ */
@media (max-width: 991px){
  .mean-container .mean-nav{
    position:fixed;
    top:0; right:0;
    width:290px;
    max-width:84%;
    height:100vh;
    margin:0;
    float:none;
    overflow-y:auto;
    background:var(--white);
    box-shadow:-6px 0 24px rgba(var(--black-rgb),.28);
    transform:translateX(100%);
    transition:transform .32s ease;
    z-index:9999;
    padding-top:58px;
  }
  /* keep the top-level list rendered; the drawer transform shows/hides it */
  .mean-container .mean-nav > ul{ display:block !important; }
  /* open state (reveal has .meanclose) -> slide drawer in */
  body.mnav-open .mean-container .mean-nav{
    transform:translateX(0);
  }
  /* hide meanmenu's own reveal — we use our own hamburger/close */
  .mean-container a.meanmenu-reveal{ display:none !important; }

  /* our hamburger (opens drawer) — sits in the green nav bar */
  .mnav-hamburger{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    position:absolute;
    top:50%; right:16px;
    transform:translateY(-50%);
    width:44px; height:38px;
    padding:8px;
    background:transparent;
    border:none;
    cursor:pointer;
    z-index:20;
  }
  .mnav-hamburger span{ display:block; height:3px; width:100%; background:var(--white); border-radius:2px; }

  /* close (x) inside the drawer */
  .mnav-close{
    position:absolute;
    top:8px; right:16px;
    font-size:34px; line-height:1;
    color:var(--text);
    cursor:pointer;
    z-index:5;
  }
}

/* Mobile drawer — cleanup guards (<=991px) */
@media (max-width: 991px){
  .mean-container .mean-nav{ background:var(--white) !important; }
  /* if any duplicate mean-bar exists, keep only the first */
  .mean-container .mean-bar ~ .mean-bar{ display:none !important; }
  /* hide the unused off-canvas close/overlay (stray X) */
  .offcanvas-menu, .offcanvas-overly{ display:none !important; }
  /* let long menu labels wrap instead of being cut */
  .mean-container .mean-nav ul li a{ width:auto; float:none; white-space:normal; }
  .mean-container .mean-nav ul li{ float:none; width:100%; }
}

/* Mobile drawer — dim backdrop + full height */
.mnav-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(var(--black-rgb),.5);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease;
  z-index:99990;
}
body.mnav-open .mnav-overlay{ opacity:1; visibility:visible; }
@media (max-width: 991px){
  .mean-container .mean-nav{
    top:0 !important;
    height:100vh !important;
    height:100dvh !important;   /* full height incl. mobile browser bars */
  }
}

/* lift the menu (and its drawer) above the dim overlay when open */
body.mnav-open .menu-area{ z-index:99999 !important; }

/* hamburger only on mobile */
.mnav-hamburger{ display:none; }
@media (max-width:991px){ .menu-area .mnav-hamburger{ display:inline-flex; } }

/* gap between stacked News / Events sections on mobile */
@media (max-width: 991px){
  .courses .col-lg-6{ margin-bottom:30px; }
  .courses .section-title{ margin-bottom:24px !important; }
}

/* ============================================================
   DESKTOP DROPDOWN MENU — scroll long lists + clear hover
   ============================================================ */
@media (min-width: 992px){
  .main-menu .sub-menu{
    max-height:78vh;
    overflow-y:auto;
    overflow-x:hidden;
  }
  /* clearer submenu hover: green background, white text */
  .header-three .main-menu .sub-menu li a:hover,
  .header-three .menu .children li a:hover{
    color:var(--white) !important;
    background:var(--secondary);
  }
  /* top-level nav hover on the green bar */
  .header-three .main-menu > nav > ul > li > a:hover{
    color:var(--highlight);
  }
}

/* Header top bar: golden gradient (overrides CMS WebCSS) */
#header-sticky .header-top.second-header,
.header.header-three .header-top.second-header{
  background: linear-gradient(90deg, #FFD54A 0%, #F2A600 100%) !important;
}

/* Highlighted middle programme card: dark green with white text */
.services-box07.active{
  background: var(--primary) !important;
}
.services-box07.active .sr-contner .text h5,
.services-box07.active .sr-contner .text h5 a,
.services-box07.active .sr-contner .text p,
.services-box07.active .sr-contner .text a{
  color: var(--white) !important;
}