/*
 Theme Name: GeneratePress Child - Prayer Warrior
 Template: generatepress
*/

/* RESET */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Playfair Display', serif;
   color: #333;
   line-height: 1.6;
}

a {
   text-decoration: none;
}

/* CONTAINER */
.container {
   max-width: 1200px;
   margin: auto;
   padding: 0 20px;
}

/* ================= BUTTONS ================= */

.btn {
   font-family: 'Poppins', sans-serif;
   padding: 14px 30px;
   margin-right: 12px;
   border-radius: 3px;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.3px;
   display: inline-block;
   transition: all 0.3s ease;
}

/* 🔶 PRIMARY */
.btn-primary {
   background: linear-gradient(to bottom, #bf834c 0%, #7b471a 100%);
   color: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 🔷 SECONDARY */
.btn-secondary {
   background: linear-gradient(to bottom, #33405d 0%, #17243e 100%);
   color: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* HOVER */
.btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
   color: #fff;
}

/* ACTIVE */
.btn:active {
   transform: translateY(0px);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ================= HEADER ================= */

.site-header {
   background: #fff;
   padding: 15px 0;
   position: relative;
   z-index: 999;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

/* LOGO */
.site-logo {
   display: none;
}

.site-logo img {
   max-height: 40px;
}

/* MENU */
.menu {
   display: flex;
   gap: 35px;
   list-style: none;
   margin: 0px !important;
}

.menu li {
   position: relative;
}

.menu li a {
   color: #000;
   font-size: 15px;
   padding: 5px 0px;
   letter-spacing: 0.3px;
   display: inline-block;
   font-family: 'poppins';
}

.menu li a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0%;
   height: 2px;
   background: currentColor;
   transition: 0.3s ease;
}

/* Hover */
.menu li a:hover::after {
   width: 100%;
}

.menu li.current-menu-item a::after,
.menu li.current_page_item a::after {
   width: 100%;
}

/* HOMEPAGE HEADER */
.home-header {
   position: fixed;
   top: 0;
   width: 100%;
   background: transparent;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.home-header .menu li a {
   color: #fff;
}

.home-header .menu li a::after {
   background: #ffffffc7;
}

/* SCROLL STATE */
.home-header.scrolled {
   background: rgba(0, 0, 0, 0.65);
   backdrop-filter: blur(6px);
   transition: 0.3s ease;
}

.home-header.scrolled {
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.home-header.scrolled .menu li a {
   color: #fff;
}

/* TOGGLE */
.menu-toggle {
   display: none;
   font-size: 24px;
   cursor: pointer;
}

/* ================= HERO FINAL ================= */

.hero {
   background: url('/wp-content/uploads/2026/03/banner.png') center/cover no-repeat;
   padding: 150px 0 120px;
   color: #fff;
}

/* HEADING (SERIF + BIG) */
.hero h1 {
   font-family: 'Playfair Display', serif;
   font-size: 54px;
   line-height: 1.2;
   margin-bottom: 15px;
   text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* SUBTEXT */
.hero h5 {
   font-size: 30px;
   margin-bottom: 35px;
   margin-left: 60px;
   opacity: 0.95;
   text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* BUTTON WRAPPER */
.hero .btn-group {
   margin-left: 30px;
}

.hero .btn {
   padding: 14px 36px;
   font-size: 18px;
   font-weight: 500;
}

/* ================= QUOTE ================= */
.hero .quote {
   margin-top: 35px;
   margin-left: 30px;
   padding: 15px 20px;
   max-width: 700px;
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   font-style: italic;
   line-height: 1.6;
   background: rgba(0, 0, 0, 0.08);
   border-top: 2px solid rgba(255, 255, 255, 0.6);
   border-left: none;
   backdrop-filter: blur(2px);
}

/* ================= WELCOME ================= */

.welcome {
   background: url('/wp-content/uploads/2026/03/Generated-Image-March-19-2026-11_12PM.png') center/cover no-repeat;
   padding: 25px 0;
}

.welcome .container .inner-wrapper {
   max-width: 70%;
}

.welcome h2 {
   font-size: 48px;
   font-weight: 600;
   margin-bottom: 50px;
   color: #010f39;
}

.welcome p {
   margin-bottom: 40px;
   font-family: 'Poppins', sans-serif;
   font-size: 18px;
}

.welcome p>span {
   color: #010f39;
   font-weight: 500;
}

.welcome .btn-signature {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
}

.signature {
   display: flex;
   margin-top: -20px;
   margin-right: 50px;
}

.signature span {
   border-top: 1px solid #010f39;
   width: 25px;
   margin-top: 25px;
}

.signature p {
   font-family: 'EB Garamond', serif;
   font-style: italic;
   font-size: 28px;
   color: #010f39;
   padding-bottom: 5px;
   border-bottom: 1px solid #010f39;
   margin-bottom: 0px;
   margin-left: 10px;
}

/* ================= CATEGORY ================= */
.section {
   padding: 40px 0;
   background: url('/wp-content/uploads/2026/03/Generated-Image-March-25-2026-10_52AM.png') center/cover no-repeat;
}

.category-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
}

.category-card {
   position: relative;
   border-radius: 10px;
   overflow: hidden;
   text-align: center;
   min-height: 220px;
   background-size: cover;
   background-position: center;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
   transition: transform 0.3s ease;
   display: block;
   text-decoration: none;
   color: inherit;
}

.category-card:hover {
   transform: translateY(-5px);
}

.category-card .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgba(43, 27, 16, 0.02) 0%, rgba(43, 27, 16, 0.6) 100%);
   color: #fff;
   padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   text-align: center;
   transition: background 0.3s ease;
}

.category-card:hover .overlay {
   background: linear-gradient(to bottom, rgba(16, 24, 39, 0.05) 0%, rgba(16, 24, 39, 0.85) 100%);
}

.category-card .overlay h3 {
   margin: 0 0 10px 0;
   font-size: 1.5rem;
   border-bottom: 2px solid rgba(255, 255, 255, 0.7);
   display: inline-block;
   padding-bottom: 5px;
}

.category-card .overlay p {
   margin: 0;
   font-size: 1rem;
   font-family: 'poppins';
}

/* ================= TODAY PRAYER ================= */

.todays-prayer {
   background: url('/wp-content/uploads/2026/03/Generated-Image-March-19-2026-11_08PM.png') center/cover no-repeat;
   padding: 32px 0px;
   color: #fff;
}

.todays-prayer h2 {
   font-size: 48px;
   text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.todays-prayer .inner-wrapper {
   max-width: 650px;
   margin: 0 auto;
   text-align: center;
}

.todays-prayer p {
   font-family: 'poppins';
   font-size: 20px;
   margin: 20px 0px;
   line-height: 30px;
}

/* ================= SIGNUP ================= */

/* .signup {
   background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
      url('https://images.unsplash.com/photo-1529070538774-1843cb3265df') center/cover no-repeat;
   color: #fff;
   padding: 80px 0;
}

.signup form {
   margin-top: 20px;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.signup input {
   padding: 10px;
   flex: 1;
   border: none;
} */
/* Banner Section Container */
.prayer-banner {
   background: url('/wp-content/uploads/2026/03/Generated-Image-March-19-2026-11_16PM.png') center/cover no-repeat;
   padding: 32px 0px;
   position: relative;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   border-top: 1px solid #e0d5ba;
   border-bottom: 1px solid #e0d5ba;
}

/* Constraint Container */
.banner-container {
   width: 100%;
   max-width: 1100px;
   position: relative;
   z-index: 2;
   /* Keeps text above the image */
}

/* Left Content Area */
.content-left {
   max-width: 65%;
   /* Leaves room for the image on the right */
}

/* Headline and Decorative Line */
.headline-group {
   display: flex;
   align-items: center;
   margin-bottom: 15px;
}

.headline-group h2 {
   color: #010f39;
   font-size: 32px;
   font-weight: 700;
   white-space: nowrap;
   margin-right: 20px;
}

.decorative-line {
   flex-grow: 1;
   height: 0;
   /* Creates the etched double-line look */
   border-top: 1px solid #bbaea0;
   border-bottom: 1px solid #bbaea0;
   max-width: 300px;
   padding: 3px;
}

/* Subheadline */
.subheadline {
   font-family: 'poppins';
   font-size: 18px;
   color: #111;
   margin-bottom: 25px;
}

/* Form Layout */
.prayer-form {
   display: flex;
   gap: 12px;
}

/* Form Inputs */
.prayer-form input {
   flex: 1;
   padding: 12px 15px;
   border: 1px solid #d4c7b2;
   border-radius: 4px;
   font-size: 14px;
   background-color: #faf7f0;
   color: #333;
   outline: none;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
   /* Slight inner shadow */
}

.prayer-form input::placeholder {
   color: #777;
}

.prayer-form input:focus {
   border-color: #a3723a;
}


/* Image Positioning */
.person-image {
   position: absolute;
   bottom: 0;
   right: 5%;
   height: 100%;
   z-index: 1;
   pointer-events: none;
}

/* Article And Request Box */
.articles-section {
   background: url('/wp-content/uploads/2026/03/Generated-Image-March-25-2026-10_49AM.png') center/cover no-repeat;
   padding: 30px 0px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.articles-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 25px;
}

/* Both boxes share this parchment background style */
.card-style {
   background: linear-gradient(135deg, #faebd7 0%, #e8d5b5 100%);
   border: 1px solid #d4c4a8;
   border-radius: 4px;
   padding: 30px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.4);
   position: relative;
   overflow: hidden;
   /* Keeps the Bible image from spilling out */
}

/* ================= HEADERS & LINES ================= */

.header-group {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
}

.header-group h3 {
   font-family: 'Georgia', serif;
   color: #162c52;
   /* Dark navy blue */
   font-size: 20px;
   margin: 0;
   margin-right: 15px;
   white-space: nowrap;
}

/* ================= ARTICLES LIST (BOX 1) ================= */

.article-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

/* Styling the PHP generated links to look like the buttons in the image */
.article-list a {
   display: flex;
   align-items: center;
   background: linear-gradient(to bottom, #fcfaf6, #f2efe6);
   color: #162c52;
   text-decoration: none;
   font-family: 'Segoe UI', sans-serif;
   /* Or 'Georgia' if you prefer serif here */
   font-size: 13px;
   font-weight: 600;
   padding: 12px 15px;
   border: 1px solid #dcd1be;
   border-radius: 4px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
   transition: all 0.2s ease;
}

.article-list a:hover {
   background: #fff;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* ================= REQUEST BOX (BOX 2) ================= */
.request-box {
   background: url('/wp-content/uploads/2026/03/Generated-Image-March-19-2026-11_28PM.png') center/cover no-repeat;
}

.request-content {
   position: relative;
   z-index: 2;
   /* Keeps text above the Bible image */
}

.request-box p {
   color: #222;
   font-size: 14px;
   line-height: 1.5;
   margin-top: 0;
   margin-bottom: 20px;
   max-width: 60%;
   /* Prevents text from overlapping the Bible */
}


/* ================= FINAL CTA ================= */

.cta {
   /* background:
      radial-gradient(circle at 80% 20%, rgba(210, 145, 75, 0.4) 0%, transparent 60%),
      linear-gradient(to right, #1f2331 0%, #3b3a43 25%, #685040 60%, #95693c 85%, #38312e 100%); */
   background: url('/wp-content/uploads/2026/03/footer.png') center/cover no-repeat;
   padding: 45px 20px;
   text-align: center;
   border-top: 1px solid #1a1a1a;
   border-bottom: 1px solid #1a1a1a;
}

.cta .container {
   max-width: 800px;
   margin: 0 auto;
}

/* --- Typography --- */

.cta h2 {
   color: #ffffff;
   font-size: 26px;
   font-weight: normal;
   margin: 0 0 10px 0;
   text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.6);
}

.cta p {
   font-family: 'poppins';
   color: #f4f4f4;
   font-size: 15px;
   margin: 0 0 25px 0;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* ================= MOBILE ================= */

@media(max-width:768px) {

   .menu {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 70px;
      left: 0;
      width: 100%;
      background: #000;
      padding: 20px;
   }

   .menu.active {
      display: flex;
   }

   .menu li a {
      color: #fff;
   }

   .menu-toggle {
      display: block;
   }

   .category-grid {
      grid-template-columns: 1fr 1fr;
   }

   .articles-grid {
      grid-template-columns: 1fr;
   }

   .article-list {
      grid-template-columns: 1fr;
   }

   .hero {
      padding: 150px 0 80px;
   }

   .hero h1 {
      font-size: 32px;
   }
}