/* ============================================================
   CFC — INDEX.HTML PAGE STYLES
   ============================================================ */

/* ── Base ──────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
    html { scroll-behavior: smooth; }
    
    body {
      font-family: 'Lato', sans-serif;
      color: #f0e8d0;
      overflow-x: hidden;
      background-color: #0D1B3E;
      background-position: center top;
      position: relative;
    }
    /* Overlay to control fade intensity */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-color: rgba(8, 15, 36, 0.93);
      pointer-events: none;
      z-index: 0;
    }
    /* Ensure all direct children sit above the overlay */
    body > * { position: relative; z-index: 1; }

    /* ── CSS Variables ─────────────────────────────────────── */
    :root {
      --navy:   #0D1B3E;
      --royal:  #4B0082;
      --gold:   #C9A84C;
      --gold-l: #E2C06A;
      --white:  #f0e8d0;
    }

    /* ── Sticky Nav ────────────────────────────────────────── */
    #navbar {
      position: fixed; top:0; left:0; right:0; z-index:1000;
      transition: background .4s, box-shadow .4s;
    }
    #navbar.scrolled {
      background: rgba(5,10,26,1);
      box-shadow: 0 2px 24px rgba(201,168,76,.25);
    }

    /* ── Gold border utility ───────────────────────────────── */
    .gold-border { border:1px solid var(--gold); }
    .gold-text   { color: var(--gold); }
    .gold-bg     { background: var(--gold); }

    /* ── Gold divider ──────────────────────────────────────── */
    .gold-divider {
      width:80px; height:3px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      margin: 1rem auto;
    }

    /* ── Hero slideshow ────────────────────────────────────── */
    .slide { position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease; }
    .slide.active { opacity:1; }

    /* Real church photos as slide backgrounds */
    .slide-1 { background: url('assets/assets/images/slides/slide_1.jpg') center center/cover no-repeat; }
    .slide-2 { background: url('assets/assets/images/slides/slide_2.jpg') center center/cover no-repeat; }
    .slide-3 { background: url('assets/assets/images/slides/slide_3.jpg') center center/cover no-repeat; }
    .slide-4 { background: url('assets/assets/images/slides/slide_4.jpeg') center top/cover no-repeat; }

    /* ── Hero text animations ──────────────────────────────── */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(30px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .hero-tag   { animation: fadeUp .8s ease both; }
    .hero-title { animation: fadeUp .8s .2s ease both; }
    .hero-sub   { animation: fadeUp .8s .4s ease both; }
    .hero-btns  { animation: fadeUp .8s .6s ease both; }

    /* ── Slide dots ────────────────────────────────────────── */
    .dot { width:10px; height:10px; border-radius:50%; background:rgba(201,168,76,.35); cursor:pointer; transition:background .3s, transform .3s; }
    .dot.active { background:var(--gold); transform:scale(1.3); }

    /* ── Section base ──────────────────────────────────────── */
    section { padding: 5rem 1.5rem; }

    /* ── Card hover lift ───────────────────────────────────── */
    .card-lift { transition: transform .3s, box-shadow .3s; }
    .card-lift:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(201,168,76,.18); }

    /* ── Gold button ───────────────────────────────────────── */
    .btn-gold {
      display:inline-block; padding:.75rem 2rem;
      background: linear-gradient(135deg, var(--gold-l), var(--gold));
      color:#0D1B3E; font-family:'Cinzel',serif; font-weight:700;
      letter-spacing:.05em; border-radius:4px;
      transition: transform .2s, box-shadow .2s;
    }
    .btn-gold:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,.4); }

    /* ── Outline button ────────────────────────────────────── */
    .btn-outline {
      display:inline-block; padding:.75rem 2rem;
      border:2px solid var(--gold); color:var(--gold);
      font-family:'Cinzel',serif; font-weight:700; letter-spacing:.05em;
      border-radius:4px; transition: background .2s, color .2s, transform .2s;
    }
    .btn-outline:hover { background:var(--gold); color:#0D1B3E; transform:translateY(-2px); }

    /* ── Mobile nav ────────────────────────────────────────── */
    #mobile-menu { display:none; }
    #mobile-menu.open { display:block; }

    /* ── Welcome card pattern ──────────────────────────────── */
    .pattern-bg {
      background-image: radial-gradient(circle at 1px 1px, rgba(201,168,76,.08) 1px, transparent 0);
      background-size: 32px 32px;
    }

    /* ── Mission / Vision cards ────────────────────────────── */
    .mv-card {
      background: linear-gradient(145deg, rgba(75,0,130,.25), rgba(13,27,62,.8));
      border-left: 4px solid var(--gold);
      backdrop-filter: blur(6px);
    }

    /* ── Scripture ticker ──────────────────────────────────── */
    @keyframes tickerScroll {
      from { transform:translateX(100%); }
      to   { transform:translateX(-100%); }
    }
    .ticker-inner { animation: tickerScroll 30s linear infinite; white-space:nowrap; }
    .ticker-inner:hover { animation-play-state:paused; }

    /* ── Responsive nav links ──────────────────────────────── */
    .nav-link {
      font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.08em;
      color:#f0e8d0; transition:color .2s; padding:.25rem 0; position:relative;
    }
    .nav-link::after {
      content:''; position:absolute; bottom:-2px; left:0; right:0;
      height:2px; background:var(--gold); transform:scaleX(0);
      transition:transform .25s;
    }
    .nav-link:hover { color:var(--gold); }
    .nav-link:hover::after { transform:scaleX(1); }
    .nav-link.active { color:var(--gold); }
    .nav-link.active::after { transform:scaleX(1); }
  
    /* ══════════════════════════════════════════════════
       GLOBAL HORIZONTAL SCROLL FIX
       Prevents any element from causing left/right scroll
       on iPhone SE (375px) and all small screens
    ══════════════════════════════════════════════════ */
    html, body {
      overflow-x: hidden !important;
      max-width: 100vw !important;
    }
    *, *::before, *::after {
      box-sizing: border-box;
      max-width: 100%;
    }
    /* Ticker — clip instead of overflow */
    .ticker-wrap, .ticker-inner, [class*="ticker"] {
      max-width: 100vw !important;
      overflow: hidden !important;
    }
    /* Tables — scroll horizontally within container */
    table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
      max-width: 100%;
      -webkit-overflow-scrolling: touch;
    }
    /* Images — never wider than container */
    img { max-width: 100% !important; height: auto; }
    /* Nav — no overflow */
    nav, #navbar { max-width: 100vw !important; overflow: hidden; }
    /* Hero — clip content */
    .page-hero { overflow: hidden !important; }
    /* Floating elements — keep within screen */
    #float-donate, #float-wa, #back-to-top {
      max-width: calc(100vw - 20px);
    }
    /* Countdown boxes — wrap on tiny screens */
    @media (max-width: 375px) {
      .countdown-box-glass { width: 58px !important; height: 58px !important; }
      .countdown-num { font-size: 1.4rem !important; }
      #float-donate span { display: none; }
      #float-donate { padding: .6rem !important; border-radius: 50% !important; width: 46px; height: 46px; justify-content: center; }
    }
    /* Navbar church name — truncate on tiny screens */
    @media (max-width: 380px) {
      #navbar .font-display { font-size: .75rem !important; }
      #navbar img { width: 38px !important; height: 38px !important; }
    }