/* GENERAL */
/* === Sitewide link colors (green) === */
:root {
  --bs-link-color: #2e7d57;
  --bs-link-hover-color: #225c41;
  --bs-code-color: #ffffff; 

}
.btn-success {
  color: #fff !important;
  text-decoration: none;
}
.btn-success:hover {
  color: #fff !important;
}

/* Fallback for components that don't use the variables */
a { color: var(--bs-link-color); }
a:hover, a:focus { color: var(--bs-link-hover-color); }
a:visited { color: var(--bs-link-color); }
a:active  { color: var(--bs-link-hover-color); }

section {
  margin-block: 40px;  /* top & bottom only */
  margin-inline: 0;    /* left & right = 0 */
}
 

/*Section specifications*/
    .section-heading {
        text-align: center;
        font-weight: bold;
    }
  
/* Pulls navbar under header */
    section.header-section,
    nav.custom-navbar {
        margin: 0 !important;
    }
    /* Center-align content in intro section */
.intro-section {
    text-align: center;
}

    body {
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        /*background*/
        background-image: url('Images/WebBG.png');
        background-repeat: repeat;
        background-size: contain;
        background-attachment: fixed;     

    }

    video {
        width: 100%;
        height: auto;
    }

/* Home Page header only*/
    .animatedbannerplaceholder {
        margin-bottom: 0;
        text-align: center;
        position: relative;
    }

    .custom-navbar {
    background-color: #7fbd8a; /* Pale Green */    
}


/* BOOTSTRAP FOR SM,MD,LG */
/* -------------------------------
   Base (applies to all screen sizes)
--------------------------------*/

.header-section {  
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 250px;
  padding: 2rem 0;
}

.header-title-area {
  text-align: center;
}

/* Fluid header typography */
:root {
  /* 1.5rem on tiny screens → 4.5rem on very large, grows with viewport */
  --header-scale: clamp(1.5rem, 3vw + 0.5rem, 4.5rem);
}

.header-title-area h1 {
  font-size: var(--header-scale);
  margin: 0;
  color: #ffffff;
  font-weight: bold;
  font-family: 'Dancing Script', cursive !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.header-title-area p {
  /* Keeps ~45% of h1, but never smaller than your XS (0.8rem) and never bigger than your XL (2rem) */
  font-size: clamp(0.8rem, calc(var(--header-scale) * 0.45), 2rem);
  margin: 0;
  color: #ffffff;
  font-weight: bold;
  font-family: 'Dancing Script', cursive !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}


/* -------------------------------
   Extra Small devices (phones <576px)
--------------------------------*/
@media (max-width: 575.98px) {
  .header-logo {
    position: relative;
    left: 0;        /* center it better */
    top: 15px;
    max-width: 120px; /* shrink logo */
    margin: 0 auto;   /* center horizontally if block element */
    display: block;
  }

  .header-title-area {
    position: relative;
    top: 20px;
    text-align: center; /* center text on small phones */
    left: 0;
    padding: 0 10px; /* add some breathing room */
  }

  .header-title-area h1 {
    
    margin-bottom: 0.25rem;
  }

  
}

/* -------------------------------
   Small to Medium devices 
--------------------------------*/
@media (min-width: 576px) and (max-width: 768px){

  /* kill the inline-image baseline gap + control the spacing explicitly */
  .header-logo {
    position: relative;
    left: -10px;
    top: 8px;                 /* was 25px — tighter */
    max-width: 165px;
    display: block;           /* removes inline baseline gap */
    line-height: 0;           /* extra safety */
    margin-bottom: 4px;       /* tiny, consistent gap under the logo */
  }

  /* bring the text up a bit; keep your left/text-align */
  .header-title-area {
    position: relative;
    top: 12px;                /* was 40px — much tighter */
    left: -15px;
    text-align: left;
  }

  /* slightly reduce the space between h1 and p */
  .header-title-area h1 {
    margin-bottom: 0.15rem;   /* was 0.25rem */
  }

  .header-title-area p {
    line-height: 1.05;        /* tighter copy under the heading */
    margin-top: 0.1rem;       /* tiny nudge closer to h1 */
  }
}




/* -------------------------------
   Medium to Large devices 
--------------------------------*/
@media (min-width: 769px) and (max-width: 992px) {
  .header-logo {
    position: relative;
    left: 0px;
    top: 30px; /* slightly lower than MD */
    max-width: 190px; /* same as MD full size */
  }

  .header-title-area {
    position: relative;
    top: 45px; /* slightly lower than MD */
    left: -20px; /* move further left for balance */
    text-align: left;
  }
  .header-title-area h1 {
    
    margin-bottom: 0.25rem;
  }

  
}

/* -------------------------------
  Large devices to Extra Large
--------------------------------*/
@media (min-width: 993px) and (max-width: 1190px) {
  .header-logo {
    position: relative;
    left: 0px;
    top: 30px; /* slightly lower than MD */
    max-width: 220px; /* same as MD full size */
  }

  .header-title-area {
    position: relative;
    top: 45px; /* slightly lower than MD */
    left: -30px; /* move further left for balance */
    text-align: left;
  }

  
}
/* -------------------------------
  Extra Large devices and up
--------------------------------*/
@media (min-width: 1190px) {
  .header-logo {
    position: relative;
    left: 0px;
    top: 30px; /* slightly lower than MD */
    max-width: 220px; /* same as MD full size */
  }

  .header-title-area {
    position: relative;
    top: 60px; /* slightly lower than MD */
    left: -70px; /* move further left for balance */
    text-align: left;
  }

  
.header-title-area h1 {
  font-size: 4.5rem;
  color: #ffffff;
  font-family: 'Dancing Script', cursive;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  margin: 0;
}

.header-title-area p {
  font-size: 2rem;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  margin: 0;
}

}


/* -------------------------------
   All Navbar- homepage specfiications above
--------------------------------*/
.custom-navbar .nav-link {
    color: #e0e0e0;
    font-weight: 500;
    letter-spacing: 0.8px;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link:focus {
    color: #ffc107; /* warm golden highlight */
    border-bottom: 2px solid #ffc107;
}

.custom-navbar .dropdown-menu {
    background-color: #5fc371b3;
    border: none;
}

.custom-navbar .dropdown-item {
    color: #e0e0e0;
    transition: background-color 0.3s, color 0.3s;
}

.custom-navbar .dropdown-item:hover {
    background-color: #ffc107;
    color: #1f1f1f;
}
/* General TextBox All pages */
.text-box {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #f7ecd1;
  border: 1px solid #d8c9a3;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}


/*Carousel*/
.object-fit-contain {
    object-fit: contain;
}


/* -------------------------------
   All hyperlink badges
--------------------------------*/

.badge-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 120px;
    height: auto;
    transition: transform 1s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 50%;
}

.badge-icon:hover {
    transform: rotateY(360deg);
}


.badge-link {
    display: inline-block;
    text-decoration: none;
}
.badge-icon-small {
  width: 80px;
  height: auto;
  border-radius: 50%;
  transition: transform 1s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.badge-icon-small:hover {
  transform: rotateY(360deg);
}
/*About Us Carousel Cards*/

.music-card {
  min-width: 300px;
  max-width: 300px;
  height: 530px;
  background-image: url('Images/CardBG2.png'); /* adjust path as needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075);
  text-align: center;
}



/* -------------------------------
   FullCalendar Base Styling
--------------------------------*/
.fc {
  background-color: #7fbd8a; /* Overall calendar background */
  font-family: 'Lucida Sans', sans-serif !important;
  color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* -------------------------------
   Header Toolbar (top bar with title + buttons)
--------------------------------*/
.fc-header-toolbar {
  background-color: #b5de12b0; /* Green-yellow banner */
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Month Title */
.fc-toolbar-title {
  font-weight: bold;
  color: #ffffff;
  font-size: 1.5rem;
}

/* Navigation Buttons (Today, Prev, Next) */
.fc-button {
  background-color: #ffffff !important; /* Matches background */
  border: 1px solid #b5de12b0 !important;
  color: #b5de12b0 !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* -------------------------------
   Weekday Header (Mon, Tue, etc.)
--------------------------------*/
.fc-col-header-cell {
  background-color: #b5de12b0; /* Weekday row background */
}

.fc-col-header-cell-cushion {
  color: #ffffff !important;
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
}

/* -------------------------------
   Day Cell Numbers
--------------------------------*/
.fc-daygrid-day-number {
  color: #ffffff;
  font-weight: bold;
}
/* current day settings*/

.fc-day-today .fc-daygrid-day-number {
  color: #ffc107 !important; /* bright yellow text */
  font-weight: bold;
}

/* -------------------------------
   Events
--------------------------------*/
/* Only affects the calendar */
.ev-private-block {
  opacity: 0.25;           /* subtle tint */
}
/* Make the text still visible if FullCalendar shows it in month view */
.fc .fc-daygrid-bg-harness .ev-private-block {
  opacity: 0.18;
}

.fc-event {
  background-color: #d8e8dc; /* Match navbar green */
  color: #000;
  border: 1px solid #a5c9b0;
  font-weight: 500;
}

.fc-event:hover {
  background-color: #ffc107; /* Hover effect */
  border-color: #ffc107;
  color: #000;
  cursor: pointer;
}

/* Green accordion theme */
#choirEventFAQ {
  --bs-accordion-border-color: #1a4b35;
  --bs-accordion-bg: #b1ddb4;
  --bs-accordion-btn-color: #1f5b40;
  --bs-accordion-active-color: #1a4b35;
  --bs-accordion-active-bg: #ffc107;
  --bs-accordion-btn-focus-border-color: #7ccfa6;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(46,125,87,.25);
}
/* -------------------------------
   Sponsor
--------------------------------*/
.wishlist-card {
  background-image: url('Images/wishlistBG.png'); /* adjust path as needed */  
  padding: 1.5rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.wishlist-item {
  margin-top: 1rem;
}

.wishlist-item img {
  max-width: 100%;
  height: 300px;       /* keeps image consistent */
  object-fit: contain; /* makes sure it’s never stretched */
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.wishlist-item img:hover {
  transform: scale(1.05); /* cute hover zoom */
}

.wishlist-link a {
  color: #8000ff;
  text-decoration: none;
}
.wishlist-link a:hover {
  text-decoration: underline;
}


/* Footer layout */
.custom-footer {
  text-align: center;
  padding: 1.5rem;
  margin-top: 2rem;
  border-top: 1px solid #ddd;
  font-size: 1.2rem;
  color: #ffffff;  
  background-color: #7fbd8a; /* your pale green */
  
}

.footer-inner {
  display: flex;
  align-items: stretch;     /* side items match middle block height */
  justify-content: center;
  gap: 12px;                /* space between icons and rows */
}

/* middle block with two lines */
.footer-content {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertically center the two rows */
  gap: 6px;                 /* space between the two lines */
  text-align: center;
}

/* icon wrappers stretch to same height as .footer-content */
.footer-icon {
  display: flex;
  align-items: center;      /* center the image inside the tall column */
}

/* icons fill the full height of the two rows, capped so they don't get huge */
:root { --footer-icon-max: clamp(48px, 8vw, 80px); }

.footer-icon img {
  height: 100%;
  width: auto;
  max-height: var(--footer-icon-max);
}


/* Optional: shrink a bit on very small screens */
@media (max-width: 575.98px) {
  :root { --footer-icon-max: clamp(40px, 10vw, 72px); }
}



/* === Reusable dashboard tile (members + admin) === */
.tile {
  /* size + shape */
  width: clamp(140px, 30vw, 220px);
  aspect-ratio: 1 / 1;                    /* perfect square */
  border-radius: 12px;
  overflow: hidden;

  /* visuals */
  background: #f1f3f5 center / cover no-repeat;  /* used if you set background-image on .tile */
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;

  /* layout */
  display: block;                          /* works on <a>, <button>, <div> */
  position: relative;
}

/* PNG placed as <img> inside the tile */
.tile > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* fill square without distortion */
}

/* Interaction */
.tile:hover { 
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.tile:active { 
  transform: translateY(0); 
}
.tile:focus-visible {
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 8px 18px rgba(0,0,0,.18);
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}

/* Dashboard grid layout */
.tile-grid{
  display: grid;
  grid-template-columns: 1fr;       /* 1 column by default */
  gap: 20px;
  justify-items: center;
  margin-inline: auto;
}

/* Small (≥576px): 2 columns */
@media (min-width: 576px){
  .tile-grid{
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

/* Large (≥992px): 3 columns (2 rows of 3) */
@media (min-width: 992px){
  .tile-grid{
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    max-width: 900px;
  }
}


/* (Optional) modals & FullCalendar popover scroll globally */
.modal-content { max-height: 90vh; }
.modal-body    { overflow-y: auto; max-height: calc(90vh - 120px); }
.fc-popover,
.fc-popover .fc-popover-body { max-height: 70vh; overflow-y: auto; }


/* --- Members: same layout, member colours --- */
.member-header-section {
  background-image: url('Images/MemberHeader.png');
  background-position: center 25%;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.member-header-section .header-title-area {
  text-align: center;
  margin-top: 1rem;
}

/* member colour overrides */
#memberbody .header-title-area h1 {
  color: #000000; 
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
#memberbody .header-title-area p {
  color: #00000094;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}



/* Member Profile area */
#memberbody .profile-card,
#memberbody .card-soft{
  background: linear-gradient(180deg, rgba(253, 228, 2, 0.253), rgba(127,189,138,.15));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
#memberbody .card-soft .card-body{ padding:1.25rem; }

/* Key/value rows like your Personal details */
#memberbody .key{
  width:170px; color:rgba(0,0,0,.6);
  flex: 0 0 170px; /* keep columns aligned */
}
#memberbody .d-flex > .key + div{ flex:1; } /* value grows to fill */
@media (max-width: 991.98px){ #memberbody .key{ width:130px; flex-basis:130px; } }

#memberbody .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono","Courier New", monospace;
}

/* Avatar + placeholder (override your fixed placeholder sizes only on member pages) */
#memberbody .photo-placeholder-box{
  width:100% !important; height:auto !important;
  padding:0 !important; margin:0 !important;
  background:transparent !important; border:0 !important;
}
#memberbody .photo-placeholder-box img,
#memberbody .avatar-img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:.75rem; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
/* Constrain avatar size on member profile */
#memberbody .avatar-img,
#memberbody .photo-placeholder-box img {
  width: 100%;
  max-width: 260px;     /* cap the size */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  display: block;
  margin: 0 auto;       /* center in the column */
}

/* optional: on very small screens make it a touch smaller */
@media (max-width: 575.98px){
  #memberbody .avatar-img,
  #memberbody .photo-placeholder-box img {
    max-width: 200px;
  }
}



/* ADMIN BODY */
#adminbody { 
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
  /*background*/
  background-image: url('Images/CardBG2.png');
  background-repeat: repeat;
  background-size: contain;
  background-attachment: fixed;     
}


/* Header (use on admin pages: <section class="container-fluid header-section admin-header-section">) */
.admin-header-section {
  background-image: url('Images/AdminHeader.png'); /* swap to your header image */
  background-position: center 30%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
/* Admin header text */
#adminbody .header-title-area h1,
#adminbody .admin-hero-title {
  color: #1f2a44;
  text-shadow: 1px 1px 2px rgba(0,0,0,.35);
}
#adminbody .header-title-area p {
  color: rgba(31,42,68,.75);
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

.cms-placeholder-box {
  width: 200px;
  height: 500px;
  border: 1px black;
  background-color: white;
  padding: 20px;
  margin: 20px;
}

/*Admin Profile Styling*/
/* Admin cards: subtle pink/yellow glass instead of plain white */
#adminbody .profile-card,
#adminbody .card-soft {
  background: linear-gradient(
    180deg,
    rgba(244, 216, 3, 0.353),
    rgba(233, 8, 124, 0.209)
  );
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
#adminbody .card-soft .card-body { padding: 1.25rem; }

/* Key/value alignment (same rhythm as member) */
#adminbody .key {
  width: 170px;
  flex: 0 0 170px;
  color: rgba(0,0,0,.6);
}
#adminbody .d-flex > .key + div { flex: 1; }
@media (max-width: 991.98px){
  #adminbody .key { width:130px; flex-basis:130px; }
}

/* Admin avatar: smaller than member + same polish */
#adminbody .photo-placeholder-box{
  width:100% !important; height:auto !important;
  padding:0 !important; margin:0 !important;
  background:transparent !important; border:0 !important;
}
#adminbody .avatar-img,
#adminbody .photo-placeholder-box img {
  width: 100%;
  max-width: 180px;       /* smaller cap than member’s 260px */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .65rem;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  display: block;
  margin: 0 auto;
}
@media (max-width: 575.98px){
  #adminbody .avatar-img,
  #adminbody .photo-placeholder-box img { max-width: 160px; }
}

/* === PATCH: edge-to-edge nav/footer + compact admin/member headers + member 2×2 grid === */

/* Fix the “stopping short” gap (UA default body margin) */
html, body { margin: 0; }

/* Remove side padding inside the navbar so content sits flush */
.custom-navbar .container-fluid { padding-left: 0; padding-right: 0; }

#adminbody .header-section,
#memberbody .header-section {
  max-width: none;
  margin-inline: 0;
  border-radius: 0;
}

/* Notifications/comms page uses inline styling, will be updated in the future */
/* Member dashboard: keep to 2 columns (stacks on tiny screens) */
#memberbody .tile-grid {
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 480px) {
  #memberbody .tile-grid { grid-template-columns: 1fr; }
}


/* PHP Styling */
.notes-cell .truncate{
  /* Current cross-browser way */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  /* Standard syntax (CSS Overflow-4) — ignored where unsupported */
  line-clamp: 2; 
}