/*
Theme Name: CAAE Ebenezer
Theme URI: https://example.com
Author: Casa de Adoración y Avivamiento Ebenezer
Description: Tema de una sola página para Casa de Adoración y Avivamiento Ebenezer, Isabela, Puerto Rico. Incluye horarios de servicio, ubicación con mapa y datos de contacto editables desde el Personalizador.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: caae-ebenezer
*/

:root{
  /* ---- brand palette (source of truth) ---- */
  --night: #14112a;
  --night-deep: #0c0a1c;
  --panel: #1f1b3d;
  --panel-2: #241f47;
  --ember: #f2762e;
  --ember-dim: #c15e25; /* lightened from #b95a24: the original failed WCAG AA (4.23:1) as button text sits on this gradient stop; this hits 4.55:1 */
  --gold: #d9a544;
  --cream: #f6efe3;
  --muted: #a79bc4;
  --line: rgba(246,239,227,0.12);
  --radius: 2px;

  /* ---- semantic aliases (for readability at call sites / future theming) ---- */
  --color-background: var(--night);
  --color-background-deep: var(--night-deep);
  --color-surface: var(--panel);
  --color-surface-alt: var(--panel-2);
  --color-primary: var(--ember);
  --color-secondary: var(--gold);
  --color-text: var(--cream);
  --color-text-muted: var(--muted);
  --color-border: var(--line);

  /* ---- spacing scale (derived from the values already in use) ---- */
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 108px;

  /* ---- fluid type scale ---- */
  --text-display: clamp(2.625rem, 1.4rem + 5.2vw, 4.75rem); /* hero H1: 42px -> 76px */
  --text-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);              /* page/post/404 titles: 32px -> 48px */
  --text-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem);      /* section headings: 30px -> 42px */

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* entering/exiting UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen morphing (hamburger, icon swaps) */
}

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

html{ scroll-behavior:smooth; }

body{
  background: var(--night);
  color: var(--cream);
  font-family: 'Work Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* subtle grain to break the flat digital surface */
body::after{
  content:'';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{ color: inherit; }
img{ max-width:100%; display:block; }

.wrap{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

h1,h2,h3{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p{ text-wrap: pretty; }

/* ---------- SKIP LINK ---------- */
.skip-link{
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--gold);
  color: var(--night-deep);
  font-family:'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus{ top: 16px; }

/* ---------- NAV ---------- */
header.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12,10,28,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav.wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 76px;
}
.nav-toggle{
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--cream);
  transition: transform .2s var(--ease-in-out), opacity .2s var(--ease-in-out), background .2s var(--ease-in-out);
}
.nav-toggle span{ top: 19px; }
.nav-toggle span::before{ top: -8px; }
.nav-toggle span::after{ top: 8px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-8px) rotate(-45deg); }
.nav-toggle:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size: 18px;
  text-decoration:none;
  color: var(--cream);
}
.brand img{ max-height: 34px; width:auto; }
.brand-mark{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--ember) 70%);
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(242,118,46,0.55);
}
nav ul.nav-links{
  list-style:none;
  display:flex;
  gap: 34px;
}
nav ul.nav-links li a{
  font-family:'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration:none;
  color: var(--muted);
  transition: color .2s ease;
  padding: 4px 2px;
}
nav ul.nav-links li a:hover, nav ul.nav-links li a:focus-visible{ color: var(--cream); }
nav ul.nav-links li a.is-current{ color: var(--gold); }
@media (max-width: 720px){
  .nav-toggle{ display:block; }
  nav ul.nav-links{
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--night-deep);
    border-bottom: 1px solid var(--line);
    padding: 12px 32px 22px;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear .2s;
  }
  nav ul.nav-links.is-open{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear 0s;
  }
  nav ul.nav-links li a{ display:block; padding: 12px 0; font-size: 13.5px; }
}

/* ---------- HERO ---------- */
.hero{
  position: relative;
  padding: 120px 0 140px;
  overflow: hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 1100px 600px at 50% 0%, rgba(217,165,68,0.22), transparent 62%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
}
.flame-glow{
  position:absolute;
  left: 50%;
  top: -140px;
  width: 760px;
  height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(242,118,46,0.46) 0%, rgba(242,118,46,0.12) 45%, transparent 70%);
  filter: blur(10px);
  pointer-events:none;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:0.85; transform: translateX(-50%) scale(1); }
  50%{ opacity:1; transform: translateX(-50%) scale(1.1); }
}
.hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
  max-width: 760px;
  margin: 0 auto;
}
.hero .eyebrow{ display:block; margin-bottom: 22px; }
.hero h1{
  font-size: var(--text-display);
  color: var(--cream);
}
.hero h1 em{
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(100deg, var(--gold), var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead{
  margin: 26px auto 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 18px;
}
.hero-actions{
  margin-top: var(--space-xl);
  display:flex;
  gap: var(--space-sm);
  justify-content:center;
  flex-wrap: wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 14px 26px;
  font-family:'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration:none;
  border-radius: var(--radius);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{
  background: linear-gradient(100deg, var(--ember), var(--ember-dim));
  color: var(--night-deep);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(242,118,46,0.25);
}
/* the hero's CTA is the page's opening peak — same glow the button already
   owns everywhere, turned up here so this moment reads louder than a footer
   or card button making the same offer */
.hero .btn-primary{ box-shadow: 0 10px 34px rgba(242,118,46,0.4); }
.btn-ghost{
  border: 1px solid var(--line);
  color: var(--cream);
}
/* hover-only lift/glow — gated so a tap on touch doesn't leave it stuck "hovered" */
@media (hover: hover) and (pointer: fine){
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(242,118,46,0.38); }
  .hero .btn-primary:hover{ box-shadow: 0 14px 42px rgba(242,118,46,0.52); }
  .btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
}
.btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:active{ transform: scale(0.97); }
.nav-toggle:active{ transform: scale(0.92); }
.info-card a.value:active{ opacity: 0.7; }

/* ---------- SECTION SHARED ---------- */
section{ position: relative; z-index: 0; padding: var(--space-4xl) 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.section-head{ max-width: 620px; margin-bottom: 56px; }
.section-head h2{ font-size: var(--text-h2); margin-top: 14px; color: var(--cream); }
.section-head p{ color: var(--muted); margin-top: var(--space-sm); font-size: 16.5px; }

/* faint ambient light to keep otherwise-flat sections from feeling sterile */
#nosotros::before,
#horarios::before,
#visitanos::before{
  content:'';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#nosotros::before{ background: radial-gradient(ellipse 700px 380px at 12% -10%, rgba(217,165,68,0.07), transparent 60%); }
#horarios::before{ background: radial-gradient(ellipse 700px 380px at 88% 110%, rgba(242,118,46,0.07), transparent 60%); }
#visitanos::before{ background: radial-gradient(ellipse 600px 400px at 50% -20%, rgba(217,165,68,0.05), transparent 60%); }

/* ---------- QUIENES SOMOS ---------- */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: start;
}
.about-grid p{ color: var(--cream); opacity: 0.88; font-size: 17.5px; max-width: 60ch; }
.about-grid p + p{ margin-top: 18px; }
.verse{
  background: var(--panel);
  border-left: 3px solid var(--ember);
  padding: 28px 30px;
  font-family:'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--gold);
}
.verse span{
  display:block;
  margin-top: 14px;
  font-family:'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 820px){
  .about-grid{ grid-template-columns: 1fr; }
}

/* ---------- HORARIOS ---------- */
.day-list{ list-style: none; }
.day-row{
  display:grid;
  grid-template-columns: 90px 1fr auto;
  align-items:center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.day-row .day-num{
  font-family:'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
}
.day-row .day-name{
  font-family:'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
}
.day-row .time{
  font-family:'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-align: right;
}
.day-row.active{ color: var(--cream); }
.day-row.active .day-name{ color: var(--gold); }
.day-row.active .time{
  color: var(--night-deep);
  background: linear-gradient(100deg, var(--gold), var(--ember));
  padding: 8px 14px;
  border-radius: var(--radius);
  font-weight: 600;
}
.day-row:not(.active){ opacity: 0.42; }
.day-row:not(.active) .time{ color: var(--muted); }

/* ---------- VISITANOS ---------- */
.visit-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.info-card{
  background: var(--panel);
  padding: var(--space-lg);
  border-radius: var(--radius);
}
.info-card + .info-card{ margin-top: 20px; }
.info-card .label{
  font-family:'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.info-icon{ width: 16px; height: 16px; flex-shrink: 0; }
.info-card .value{
  font-family:'Fraunces', serif;
  font-size: 21px;
  line-height: 1.4;
}
.info-card a.value{ text-decoration:none; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine){
  .info-card a.value:hover{ color: var(--gold); }
}
.map-frame{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  height: 100%;
  min-height: 360px;
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
@media (max-width: 820px){
  .visit-grid{ grid-template-columns: 1fr; }
  .map-frame{ min-height: 280px; }
}

/* ---------- CARD GRID (eventos / sermones) ---------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.section-cta{ margin-top: var(--space-xl); text-align:center; }
@media (max-width: 820px){
  .card-grid{ grid-template-columns: 1fr; }
}

.event-card{
  display:flex;
  align-items:flex-start;
  gap: var(--space-md);
  background: var(--panel);
  padding: var(--space-lg);
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration:none;
  color: var(--cream);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) and (pointer: fine){
  .event-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.3); border-color: rgba(217,165,68,0.35); }
}
.event-card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.event-date{
  flex-shrink:0;
  width: 56px;
  text-align:center;
  background: linear-gradient(100deg, var(--gold), var(--ember));
  color: var(--night-deep);
  border-radius: var(--radius);
  padding: 8px 0;
}
.event-date .event-day{ display:block; font-family:'Fraunces', serif; font-size: 22px; font-weight: 700; line-height:1; }
.event-date .event-month{ display:block; font-family:'JetBrains Mono', monospace; font-size: 10px; text-transform:uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.event-info{ display:flex; flex-direction:column; gap: 6px; }
.event-title{ font-family:'Fraunces', serif; font-weight:600; font-size: 19px; }
.event-meta{ font-family:'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }

.sermon-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
  background: var(--panel);
  padding: var(--space-lg);
  border-radius: var(--radius);
  text-decoration:none;
  color: var(--cream);
  border-left: 3px solid var(--ember);
  transition: transform .18s ease, box-shadow .18s ease, border-left-color .18s ease;
}
@media (hover: hover) and (pointer: fine){
  .sermon-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.3); border-left-color: var(--gold); }
}
.sermon-card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.sermon-card .sermon-title{ font-family:'Fraunces', serif; font-weight:600; font-size: 20px; }
.sermon-card .sermon-passage{ font-family:'JetBrains Mono', monospace; font-size: 12px; color: var(--gold); }

/* ---------- CONECTA (oración / registro) ---------- */
.connect-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.connect-card{
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--space-xl);
}
.connect-icon{
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--ember));
  color: var(--night-deep);
  margin-bottom: var(--space-md);
}
.connect-icon svg{ width: 22px; height: 22px; }
.connect-card h3{ font-size: 24px; color: var(--cream); margin-bottom: 12px; }
.connect-card p{ color: var(--muted); margin-bottom: var(--space-md); }
@media (max-width: 820px){
  .connect-grid{ grid-template-columns: 1fr; }
}

/* ---------- ARCHIVE / SINGLE evento & sermon ---------- */
.archive-page{ max-width: 1080px; margin: 0 auto; padding: 100px var(--space-lg); }
/* .entry-content sets max-width:720px (sized for plain blog text); event/sermon
   pages carry meta cards, thumbnails and video embeds that feel cramped at that
   width, so these widen to match the rest of the site's 1080px .wrap. Title and
   body copy stay capped at reading width via .entry-header/.entry-body so text
   doesn't stretch uncomfortably wide just because the page grew.
   Doubled-up class selector so it wins regardless of stylesheet order. */
.entry-content.single-evento,
.entry-content.single-sermon{ max-width: 1080px; }
.single-evento .entry-header,
.single-sermon .entry-header,
.single-evento .entry-body,
.single-sermon .entry-body{ max-width: 720px; }
.event-detail-meta{ display:flex; flex-wrap:wrap; gap: var(--space-md); margin: var(--space-lg) 0; }
.event-detail-meta .info-card{ flex: 1 1 200px; }
.sermon-passage-line{ font-family:'JetBrains Mono', monospace; color: var(--gold); font-size: 14px; margin-top: 8px; }
.entry-thumbnail{ margin: var(--space-lg) 0; border-radius: var(--radius); overflow:hidden; }
.entry-thumbnail img{ width:100%; }
.video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: var(--space-lg) 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- FLUENT FORMS — re-skin to match theme ---------- */
.fluentform{ margin-top: var(--space-lg); }
.fluentform .ff-el-input--label label,
.fluentform label{
  font-family:'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform select,
.fluentform textarea{
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--cream);
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  padding: 13px 16px;
  transition: border-color .18s ease;
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus{
  outline: none;
  border-color: var(--gold);
}
.fluentform .ff-el-form-control::placeholder{ color: var(--muted); opacity: 1; }
.fluentform .ff-el-group{ margin-bottom: var(--space-md); }
.fluentform button[type="submit"]{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 14px 26px;
  font-family:'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--ember), var(--ember-dim)) !important;
  color: var(--night-deep) !important;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fluentform button[type="submit"]:hover{ transform: translateY(-2px); }
.fluentform .error, .fluentform .text-danger{ color: #ff8a8a; font-size: 13px; margin-top: 4px; }
.fluentform .ff-message-success{ color: var(--gold); font-family:'Fraunces', serif; font-size: 18px; }

/* ---------- FOOTER / CTA ---------- */
footer.site-footer{
  padding: 90px 0 60px;
  text-align:center;
  background: var(--night-deep);
}
footer.site-footer h2{ font-size: var(--text-h2); }
footer.site-footer p{ color: var(--muted); margin-top: 14px; }
footer.site-footer .hero-actions{ margin-top: 36px; }
.foot-meta{
  margin-top: 80px;
  display:flex;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family:'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

/* Generic content fallback (blog posts / pages using page.php, index.php) */
.entry-content{
  max-width: 720px;
  margin: 0 auto;
  padding: 100px 32px;
  color: var(--cream);
}
.entry-content h1{ font-size: var(--text-h1); margin-bottom: var(--space-md); }
.entry-content p{ margin-bottom: 18px; opacity:0.9; }

/* ---------- 404 ---------- */
.not-found-inner{
  max-width: 640px;
  margin: 0 auto;
  padding: 140px 32px;
  text-align: center;
}
.not-found-inner h1{ font-size: var(--text-h1); margin: 18px 0 20px; color: var(--cream); }
.not-found-inner p{ color: var(--muted); }
.not-found-inner .hero-actions{ margin-top: 32px; }

@media (prefers-reduced-motion: reduce){
  .flame-glow{ animation: none; }
  html{ scroll-behavior:auto; }
  /* keep the fades (they aid comprehension: menu open, button/card feedback) —
     drop only the position/scale movement */
  nav ul.nav-links,
  nav ul.nav-links.is-open{ transform: none; }
  .btn-primary:hover,
  .event-card:hover,
  .sermon-card:hover{ transform: none; }
}