/* -------------------------------------------------
   Global base styles
-------------------------------------------------- */
body {
    background-color: #263a45;            /* unified pale background */
    font-family: "Herald", Georgia, serif;
    line-height: 1.5;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Utility link reset */
a {
    color: #5d4037;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}



/* -------- Hero Section (Welcome page) -------- */
/* --- HERO IMAGE --------------------------------------------------------- */
.hero-image{
  position:relative;
  width:100%;
  height:clamp(320px, 80vh, 580px);   /* never taller than 480 px */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:8px;
  overflow:hidden;

  /* centre the overlay block */
  display:flex;
  align-items:center;                 /* vertical centering   */
  justify-content:center;             /* horizontal centering */

  box-shadow:0 6px 14px rgba(0,0,0,.15);
}

/* --- OVERLAY ------------------------------------------------------------ */
.hero-text{
  background:rgb(62 40 18 / .19);
  backdrop-filter:blur(1px);          /* “frosted-glass” effect          */
  color:rgb(249,247,241);

  padding:2rem 2.5rem;
  max-width:600px;                    /* narrows line length             */
  margin:0 auto;
  text-align:center;
  border-radius:12px;
}

/* --- TYPOGRAPHY --------------------------------------------------------- */
.hero-text h1{
  font-size:clamp(1.2rem, 3vw, 1.8rem);  /* smaller headline              */
  line-height:1.25;
  margin:0 0 .8rem;
}

.hero-text p{
  font-size:1.2rem;
  line-height:1.6;
  margin:0 0 1.3rem;
}

.content--home{
  padding:0 !important;          /* wipe any left/right insets           */
  margin:0 !important;
}

/* --- Make the hero bleed edge-to-edge --------------------------------- */
.hero-image{
  width:100%;
  border-radius:0;               /* no rounded corners → no white arcs   */
}


.hero-image{
  border-radius:8px;
  background-clip:padding-box;   /* keeps bg inside radius               */
}



/* -------------------------------------------------
   2‑column layout wrapper (sidebar + page content)
-------------------------------------------------- */
.layout {
    display: flex;
    flex-direction: row;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .layout {
        flex-direction: column;           /* stack on phones */
    }
}


/* -------------------------------------------------
   Main content area
-------------------------------------------------- */
.content {
    flex: 1;                              /* fill remaining space */
    padding: 30px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.05);
    border-radius: 10px;
}

@media (max-width: 768px) {
    .content {
        padding: 20px;
    }
}

/* -------------------------------------------------
   Headings
-------------------------------------------------- */
h1 {
    text-align: center;
}

h2 {
    color: #2c3e50;
    margin-top: 25px;
    border-bottom: 2px solid #f0e6d2;
    padding-bottom: 8px;
}

h3 {
    color: #2c3e50;
    margin-top: 20px;
}

/* -------------------------------------------------
   Photo Gallery
-------------------------------------------------- */
.gallery {
    margin: 2rem 0;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .photos-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
}

@media (min-width: 1200px) {
    .photos-grid {
        gap: 1.5rem;
    }
}

.photo-item {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.photo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -------------------------------------------------
   Existing bespoke page‑specific rules
   (kept as‑is, aside from margin tweaks for new sidebar width)
-------------------------------------------------- */

.welcome_image {
    width: 45%;
    display: block;
    margin: 0 auto;
    padding-top: 20px;
}

.home_image {
    width: 65%;
    display: block;
    margin: 0 auto;
    margin-left: 270px;                    /* Account for sidebar width */
    padding-top: 20px;
    transform: translateX(-50px);
}

.text {
    margin-left: 90px;                    /* width + border of sidebar */
    padding: 20px 25px 0 50px;
    font-size: 18px;
    text-align: center;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

.religious_text {
    font-size: 15px;
}

.welcome {
    position: relative;
    text-align: center;
    color: black;
    font-size: 22px;
    margin-left: 140px; /* Account for sidebar */
}

    .welcome img {
        display: block;
        margin: 0 auto;
        z-index: 0;
    }

.welcome-header {
    position: relative;
    text-align: center;
    color: black;
    font-size: 30px;
}

.welcome-text {
    position: absolute;
    top: 5%;
    left: 25%;
    right: 25%;
    z-index: 1;
}

/* Mobile responsive styles */
@media screen and (max-width: 768px) {
    .welcome {
        margin-left: 100px;
    }

    .welcome-text {
        left: 15%;
        right: 15%;
        font-size: 18px;
    }

    .welcome-header {
        font-size: 24px;
    }

    .sidebar {
        width: 100px;
        padding: 15px 10px;
        font-size: 14px;
    }

    .text {
        margin-left: 70px;
        padding: 15px 15px 0 25px;
        font-size: 16px;
    }

    .home_image {
        width: 80%;
        margin-left: 100px;
        transform: translateX(-30px);
        position: relative;
        z-index: 1;
    }
}

@media screen and (max-width: 480px) {
    .welcome {
        margin-left: 80px;
    }

    .welcome-text {
        left: 10%;
        right: 10%;
        font-size: 16px;
        top: 8%;
    }

    .welcome-header {
        font-size: 20px;
    }

    .sidebar {
        width: 80px;
        padding: 10px 5px;
        font-size: 12px;
    }

    .text {
        margin-left: 50px;
        padding: 10px 10px 0 15px;
        font-size: 14px;
    }

    .home_image {
        width: 90%;
        margin-left: 80px;
        transform: translateX(-20px);
        position: relative;
        z-index: 1;
        
    }
}

/* ---------- Contact page layout ---------- */
.contact-page h2{ margin-bottom:1.2rem; }

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr;   /* text | map */
  gap:2rem;
}

.contact-card h3{
  color:rgb(38,58,69);
  margin-top:1.5rem;
  margin-bottom:.4rem;
}

.contact-card a{ color:rgb(38,58,69); text-decoration:underline; }

.map-card iframe{
  width:100%;
  height:100%;
  min-height:320px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* ----- stack on small screens ----- */
@media (max-width:700px){
  .contact-grid{
    grid-template-columns:1fr;
  }
  .map-card iframe{ min-height:280px; }
}


/*-----Lodging-----*/
.lodging-list{
  display:grid;
  gap:1.5rem;
}
@media(min-width:700px){
  .lodging-list{ grid-template-columns:1fr 1fr; }
}

.hotel-card{
  background:#fff;
  border:1px solid #e0d6c2;
  border-radius:8px;
  padding:1rem 1.3rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

.hotel-card h4{
  margin:0 0 .4rem;
  color:rgb(38,58,69);
  font-size:1.1rem;
}

.hotel-card .perks{
  margin:.2rem 0 .6rem;
  font-size:.9rem;
  color:#555;
}

.hotel-link{
  font-weight:600;
  color:rgb(38,58,69);
  text-decoration:none;
}
.hotel-link:hover{ text-decoration:underline; }


/* ---------- About page grid ---------- */
.card{
  background:#fff;
  border:1px solid #e0d6c2;
  border-radius:8px;
  padding:1.4rem 1.6rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  margin-bottom:2rem;
}

.large-emoji {
  font-size: 2em; /* Adjust this value (e.g., 1.5em, 2em, 3em) to make it bigger */
  vertical-align: middle; /* Keeps it aligned with the text */
}

/* ————————————————————————————————
   GALLERY WRAPPER
———————————————————————————————— */
.gallery{
  width:100%;
  max-width:1400px;
  margin:2rem auto;
  padding:0;
}

/* ————————————————————————————————
   PHOTOS GRID
———————————————————————————————— */
.photos-grid{
  display:grid;
  gap:0.25rem;
  grid-template-columns:repeat(2,1fr);   /* desktop 2×2 */
  grid-template-rows:repeat(2,1fr);
}

/* ————————————————————————————————
   PHOTO CARD
———————————————————————————————— */
.photo-item{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:transform .3s ease, box-shadow .3s ease;
  cursor:pointer;                       /* indicates enlarging */
}
.photo-item:hover{
  transform:translateY(-8px);
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.photo-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.photo-item:hover img{
  transform:scale(1.08);
}

/* caption always on */
.photo-item figcaption{
  position:absolute;
  inset:auto 0 0 0;                     /* stick to bottom */
  background:linear-gradient(to top,
              rgba(240,230,210,0.9),
              rgba(240,230,210,0.7));
  color:#2c3e50;
  padding:.75rem;
  text-align:center;
  font-size:.95rem;
  font-style:italic;
  font-family:"Herald", Georgia, serif;
  line-height:1.4;
  transition:background .3s ease;
}
.photo-item:hover figcaption{
  background:linear-gradient(to top,
              rgba(240,230,210,.95),
              rgba(240,230,210,.85));
}

/* ————————————————————————————————
   MOBILE  ≤768 px
   → single column, bigger pics
———————————————————————————————— */
@media(max-width:768px){
  .photos-grid{ grid-template-columns:1fr; }
  .photo-item figcaption{
    font-size:.85rem;
    padding:.5rem;
  }
}

/* ————————————————————————————————
   XL  ≥1200 px
———————————————————————————————— */
@media(min-width:1200px){
  .photos-grid{ gap:.5rem; }
  .photo-item figcaption{
    font-size:1rem;
    padding:1rem;
  }
}

/* ————————————————————————————————
   LIGHTBOX OVERLAY
———————————————————————————————— */
.lightbox{
  display:none;                  /* toggled via .show */
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  align-items:center;
  justify-content:center;
  z-index:2000;
  cursor:pointer;
}
.lightbox.show{ display:flex; }

.lightbox img{
  max-width:90vw;
  max-height:90vh;
  border-radius:8px;
  box-shadow:0 0 12px rgba(0,0,0,.4);
}



/* letter-style message */
.letter p{
  font-style:italic;          /* gives handwritten feel           */
  margin-bottom:1rem;
}
.letter p:last-of-type{
  margin-bottom:0;            /* tidy closing signature           */
}

/* ---------- Schedule page ---------- */
.schedule-page h2{ margin-bottom:0.6rem; }

.schedule-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:1fr 1fr;   /* two equal cards */
}
@media(max-width:800px){
  .schedule-grid{ grid-template-columns:1fr; }
}

/* weekly list formatting */
.service-list{
  list-style:none;
  margin:0 0 1rem; padding:0;
}
.service-list li{ margin-bottom:1rem; }
.service-day{
  display:block; font-weight:700; color:rgb(38,58,69);
}
.service-detail{
  display:block; margin-top:0.1rem;
}
.service-list small{
  display:block; font-size:.85rem; color:#555;
}

/* dotted rule for feast list */
.feast-list ul{ margin:0; padding-left:1.2rem; }
.feast-list li{ margin:0 0 1rem; }

/* fast note badge */
.fast-note{
  font-weight:600; font-size:.95rem;
  background:rgba(38,58,69,.08);
  padding:.4rem .6rem; border-radius:4px;
  display:inline-block;
}


/* ---------- Donate page layout ---------- */

/* Donate Page Layout */
.donate-page {
  padding: 20px;
  background: #f9f7f2;
  color: #333;
}

.card .note{
  margin-top:auto;        
}

.donate-page h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 2rem;
  font-size: 2rem;
  border-bottom: 3px solid #e0d6c2;
  padding-bottom: 0.5rem;
}

/* Donate Grid */
.donate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 750px) {
  .donate-grid {
    grid-template-columns: 1fr;
  }
}

/* Card Styling */
.card {
  background: #fff;
  border: 2px solid #e0d6c2;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display:flex;           /* turn section into a flex-box */
  flex-direction:column;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 600;
}

.card p {
  margin: 0.75rem 0;
  line-height: 1.6;
  font-size: 1.1rem;
  width: fit-content;
}

.card strong {
  color: #2c3e50;
  font-weight: 700;
}

/* Numbers Styling */
.numbers {
  font-size: 1.15rem;
  margin: 1rem 0;
  color: #555;
}

.numbers strong {
  color: #2c3e50;
  font-size: 1.2rem;
  background: #f0e6d2;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Note Styling */
.note {
  font-size: 0.95rem;
  color: #666;
  background: #f0e6d2;
  padding: 0.75rem;
  border-radius: 8px;
  margin-top: 1rem;
  text-align: center;
}

/* Bank Links Styling */
.bank-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.cta-btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border: 2px solid #2c3e50;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  color: #2c3e50;
  background: #fff;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.cta-btn:hover {
  background: #2c3e50;
  color: #fff;
  text-decoration: none;
}

/* Gratitude Message */
.gratitude-message {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #f0e6d2;
  border-radius: 12px;
  font-size: 1.1rem;
  color: #2c3e50;
  font-style: italic;
  line-height: 1.6;
}

.gratitude-message strong {
  font-weight: 700;
  color: #5d4037;
}

/* Additional Info */
.additional-info {
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
  border: 2px solid #e0d6c2;
  border-radius: 12px;
  font-size: 1rem;
  color: #555;
}

.additional-info p {
  margin: 0.75rem 0;
}

.additional-info strong {
  color: #2c3e50;
  font-weight: 600;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .donate-page h2 {
    font-size: 1.5rem;
  }

  .card {
    padding: 1rem;
    
  }

  .card h3 {
    font-size: 1.2rem;
  }

  .card p {
    font-size: 1rem;
  }

  .cta-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  .gratitude-message {
    font-size: 1rem;
    padding: 1rem;
  }

  .additional-info {
    font-size: 0.95rem;
    padding: 1rem;
  }
}