/*
Theme Name: Galilea
Theme URI: https://esglesiagalilea.org/
Author: Església Galilea
Author URI: https://esglesiagalilea.org/
Description: Tema para Galilea, església evangèlica de tradició menonita en Barcelona. Una comunidad progresista, ecuménica, de comunión abierta, sin discriminación, en busca del mundo nuevo de Dios. La portada muestra el logotipo real de la comunidad sobre un fondo azul suave, seguido de una frase de bienvenida explícita. El resto del sitio mantiene formas redondeadas y una frontera festoneada entre secciones.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: galilea
Tags: blog, custom-logo, custom-menu, translation-ready, threaded-comments, footer-widgets
*/

/* =========================================================
   0. TOKENS — paleta de mosaico
   La diversidad de tonos convive en una misma familia cálida,
   en vez de un único acento dominante. Ningún color manda.
   ========================================================= */
:root{
  --paper: #FFFFFF;
  --paper-deep: #F4F4F1;
  --paper-line: #E3E2DA;

  --ink: #2E2A22;
  --ink-soft: #6B6656;
  --ink-faint: #9C9584;

  --sage: #65849A;
  --sage-deep: #4C6E82;
  --sage-pale: #DCE5E9;

  --terracotta: #C1732F;
  --terracotta-deep: #965A22;
  --terracotta-pale: #F6E7DA;

  --ochre: #C79A2E;
  --ochre-deep: #93752B;
  --ochre-pale: #EFE2C4;

  --sky: #65849A;
  --sky-deep: #4C6E82;
  --sky-pale: #DCE5E9;

  --rose: #C97B72;
  --rose-pale: #F2DDD8;

  --mint-pale: #DCEEE0;
  --violet-pale: #E8E1EF;

  --deep: #3F5D72;
  --deep-soft: #4C6E82;
  --deep-pale: #B9CDD6;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-w: 1120px;
  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 20px;
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--terracotta-deep); text-decoration: none; }
a:hover{ color: var(--sage-deep); }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 500; }
h2{ font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
h3{ font-size: 1.2rem; }

p{ margin: 0 0 1.3em; }

::selection{ background: var(--sage-pale); color: var(--sage-deep); }

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.screen-reader-text:focus{
  position: static !important;
  width: auto; height: auto;
  background: var(--ink); color: var(--paper);
  padding: .6em 1em; z-index: 999;
  border-radius: var(--radius-sm);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* =========================================================
   2. FRONTERA FESTONEADA — signature divider
   Una sucesión de arcos, como puertas abiertas, en vez de una
   línea recta que separa. Marca el paso de una sección a otra
   sin cerrar el camino.
   ========================================================= */
.frontera{
  display: block;
  width: 100%;
  height: 15px;
}
.frontera path{ fill: none; stroke: var(--paper-line); stroke-width: 2px; stroke-linecap: round; }
.frontera.--dark path{ stroke: #2E4A5C; }

/* =========================================================
   3. HEADER — barra superior sencilla
   ========================================================= */
.site-header{
  background: var(--paper);
}
.site-header__inner{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 22px 28px;
}
.site-title{
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: .01em;
}
.site-title a{ color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.site-title img.custom-logo{ height: 40px; width: auto; }

.main-navigation{ display: flex; align-items: center; }
.main-navigation ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 0; padding: 0;
}
.main-navigation a{
  display: block;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.main-navigation a:hover{ border-color: var(--terracotta); }
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a{
  border-color: var(--sage);
  color: var(--sage-deep);
}

/* Selector de idioma (Polylang), integrado con el resto del menú */
.main-navigation .lang-item{ margin-left: 4px; }
.main-navigation .lang-item img{
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 16px;
  height: auto;
  border-radius: 2px;
}
.main-navigation .current-lang-item > a{
  border-color: var(--sage);
  color: var(--sage-deep);
}
.menu-toggle{ display: none; }

@media (max-width: 640px){
  .menu-toggle{
    display: block;
    margin-left: auto;
    background: var(--paper-deep);
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--ink);
  }
  .main-navigation{ width: 100%; }
  .main-navigation ul{ display: none; flex-direction: column; gap: 4px; padding-top: 12px; }
  .main-navigation ul.is-open{ display: flex; }
}

/* =========================================================
   3b. CABECERA DE PORTADA — la frase grande sobre la cinta
   Una declaración directa en mayúsculas, con una franja suave
   cruzando detrás, en vez de un gesto decorativo o una foto sola.
   ========================================================= */
.site-hero{
  position: relative;
  background: #547B97;
  padding: 84px 0 70px;
  overflow: hidden;
  text-align: left;
}
.site-hero.--photo{
  background-size: cover;
  background-position: center;
  padding: 96px 0 82px;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(84,123,151,.62), rgba(46,70,88,.8));
}
.ribbon{
  position: absolute;
  left: -10%;
  top: 84%;
  width: 120%;
  height: 46px;
  background: var(--paper);
  opacity: .5;
  transform: rotate(-3deg);
  z-index: 0;
}
.site-hero__inner{ position: relative; z-index: 1; }
.hero-kicker{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D9E6EA;
  margin: 0 0 20px;
}
.hero-frase-grande{
  font-family: "Archivo Black", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 5.6vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
  max-width: 18ch;
}
.announcement-bar{
  background: var(--paper-deep);
  padding: 20px 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--sky-deep);
}

/* =========================================================
   4. LAYOUT
   ========================================================= */
.site-main-wrap{ padding: 40px 0 64px; }
.layout{
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px){ .layout{ grid-template-columns: 1fr; } }

/* =========================================================
   5. ETIQUETAS DE CATEGORÍA — paleta cíclica
   Cada categoría toma un color distinto de la misma familia
   cálida. La variedad es, aquí, el mensaje.
   ========================================================= */
.tag-pill{
  display: inline-block;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}
.tag-a{ background: var(--sage-pale); color: var(--sage-deep); }
.tag-b{ background: var(--terracotta-pale); color: var(--terracotta-deep); }
.tag-c{ background: var(--ochre-pale); color: var(--ochre-deep); }
.tag-d{ background: var(--rose-pale); color: var(--terracotta-deep); }
.tag-e{ background: var(--rose-pale); color: var(--terracotta-deep); }

.post-eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-body);
}
.post-eyebrow .post-date{ font-size: .78rem; color: var(--ink-faint); }

/* =========================================================
   6. POST CARDS / FEED
   ========================================================= */
.post-feed{ display: flex; flex-direction: column; gap: 18px; }
.post-card{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  background: var(--paper-deep);
  border-radius: var(--radius-lg);
  padding: 18px;
}
@media (max-width: 560px){ .post-card{ grid-template-columns: 1fr; } }
.post-card__thumb{
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sky-pale);
  aspect-ratio: 1/1;
}
.post-card__thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__thumb img{ transform: scale(1.05); }

.post-card h2{ margin-bottom: .25em; font-size: 1.15rem; }
.post-card h2 a{ color: var(--ink); text-decoration: none; }
.post-card h2 a:hover{ color: var(--sage-deep); }
.post-excerpt{ color: var(--ink-soft); margin-bottom: 0; font-size: .93rem; }

.read-more-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--terracotta-deep);
  background: var(--terracotta-pale);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  margin-top: 12px;
  text-decoration: none;
}
.read-more-pill:hover{ background: var(--sage-pale); color: var(--sage-deep); }

/* todas las tarjetas de la portada usan el formato grande */
.post-card.--featured{
  grid-template-columns: 1fr;
  padding: 26px 28px;
}
.post-card.--featured .post-card__thumb{
  aspect-ratio: 16/7;
  margin-bottom: 4px;
}
.post-card.--featured h2{ font-size: clamp(1.5rem,3vw,2rem); }

/* =========================================================
   7. SINGLE POST / PAGE
   ========================================================= */
.entry-header{ margin-bottom: 26px; }
.entry-thumb{
  margin: 0 0 30px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.entry-content{ font-size: 1.08rem; }
.entry-content h2{ margin-top: 1.5em; }
.entry-content h3{ margin-top: 1.3em; }
.entry-content blockquote{
  margin: 1.8em 0;
  padding: 18px 24px;
  border-radius: var(--radius);
  background: var(--sage-pale);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sage-deep);
  font-size: 1.12rem;
}
.entry-content a{ text-decoration: underline; }
.entry-content ul, .entry-content ol{ padding-left: 1.3em; }
.entry-content figcaption{
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: 8px;
}
.entry-content .wp-block-embed,
.entry-content .wp-embed-responsive .wp-embed-aspect-16-9,
.entry-content iframe{
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 1.6em 0;
}
.entry-content .wp-block-embed iframe,
.entry-content iframe{
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  display: block;
}
.entry-content .wp-block-embed__wrapper{ position: relative; }
.entry-footer{
  margin-top: 36px;
  padding-top: 20px;
  border-top: 2px dotted var(--paper-line);
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--ink-faint);
}

.page-title{ margin-bottom: 30px; }
.page-content-plain{ font-size: 1.08rem; }

/* =========================================================
   7b. FORMULARIO DE CONTACTO
   ========================================================= */
.contact-notice{
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 26px;
  font-family: var(--font-body);
  font-size: .92rem;
}
.contact-notice.--success{ background: var(--sage-pale); color: var(--sage-deep); }
.contact-notice.--error{ background: var(--rose-pale); color: var(--terracotta-deep); }

.contact-form{
  background: var(--paper-deep);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 8px 0 40px;
}
.contact-form .hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form label{
  display: block;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  background: #fff;
  margin-bottom: 18px;
}
.contact-form textarea{ min-height: 150px; resize: vertical; }
.contact-form button{
  background: var(--sage);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}
.contact-form button:hover{ background: var(--sage-deep); }

/* =========================================================
   8. SIDEBAR / WIDGETS
   ========================================================= */
/* =========================================================
   8b. CARRUSEL DE CARTELES — barra lateral
   Un widget de imagen por cartel, el tema los rota solo.
   ========================================================= */
.widget-carousel{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--paper-deep);
}
.widget-carousel__track{
  position: relative;
  aspect-ratio: 4/3;
}
.carrusel-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.carrusel-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}
.carrusel-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.widget-carousel__dots{
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.widget-carousel__dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.55);
  padding: 0;
  cursor: pointer;
}
.widget-carousel__dot.is-active{ background: #fff; }

.widget-logo{
  text-align: center;
  background: var(--paper-deep);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 22px;
}
.widget-logo img.custom-logo{ margin: 0 auto; max-height: 90px; width: auto; }

.widget{
  background: var(--paper-deep);
  border-radius: var(--radius-lg);
  padding: 22px 22px 4px;
  margin-bottom: 22px;
}
.widget-title{
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sage-deep);
  margin-bottom: 14px;
}
.widget ul{ list-style: none; margin: 0; padding: 0 0 18px; }
.widget li{ padding: 7px 0; border-bottom: 1px dotted var(--paper-line); font-size: .93rem; }
.widget li:last-child{ border-bottom: none; }
.widget a{ text-decoration: none; }

.widget.confesion{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  padding-bottom: 22px;
}

.search-form{ display: flex; gap: 8px; padding-bottom: 4px; }
.search-form input[type="search"]{
  flex: 1;
  padding: 11px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  background: var(--paper);
}
.search-form button{
  padding: 0 18px;
  border: none;
  background: var(--sage);
  color: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
}
.search-form button:hover{ background: var(--sage-deep); }

.widget address{ font-style: normal; font-size: .93rem; color: var(--ink-soft); padding-bottom: 22px; }

/* =========================================================
   9. PAGINATION / COMMENTS
   ========================================================= */
.pagination{
  display: flex;
  gap: 8px;
  margin-top: 40px;
  font-family: var(--font-body);
  font-size: .87rem;
}
.pagination a, .pagination span{
  padding: 8px 15px;
  background: var(--paper-deep);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-soft);
}
.pagination .current{ background: var(--sage); color: #fff; }
.pagination a:hover{ background: var(--sage-pale); color: var(--sage-deep); }

.comments-area{ margin-top: 50px; }
.comment-list{ list-style: none; margin: 0; padding: 0; }
.comment-body{
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--paper-deep);
  margin-bottom: 16px;
}
.comment-meta{ font-family: var(--font-body); font-size: .85rem; color: var(--ink-faint); margin-bottom: 6px; }
.comment-respond input, .comment-respond textarea{
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  margin-bottom: 14px;
  background: var(--paper-deep);
}
.comment-respond .form-submit input{
  width: auto;
  background: var(--sage);
  color: #fff;
  cursor: pointer;
  padding: 11px 26px;
  font-weight: 600;
}
.comment-respond .form-submit input:hover{ background: var(--sage-deep); }

/* =========================================================
   10. FOOTER
   ========================================================= */
.site-footer{
  background: var(--deep);
  color: var(--paper);
  padding: 6px 0 30px;
}
.site-footer a{ color: #fff; }
.site-footer a:hover{ color: var(--ochre-pale); }
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
  padding: 28px 0 30px;
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{
  font-family: var(--font-body);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #C9DCE3;
  margin-bottom: 12px;
}
.footer-confesion{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #F1EEE0;
  max-width: 42ch;
}
.footer-grid address{ font-style: normal; color: #C7D6DB; font-size: .93rem; line-height: 1.7; }
.footer-mosaic{ display: flex; gap: 8px; margin: 16px 0 4px; }
.footer-mosaic span{ width: 20px; height: 20px; border-radius: 50%; display: block; }
.footer-social{ display: flex; gap: 10px; margin-top: 16px; }
.footer-social a{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg{ width: 14px; height: 14px; fill: currentColor; }
.footer-bottom{
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-family: var(--font-body);
  font-size: .8rem;
  color: #A9BFC7;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================================================
   11. UTILITIES
   ========================================================= */
.alignleft{ float: left; margin: .3em 1.6em 1em 0; }
.alignright{ float: right; margin: .3em 0 1em 1.6em; }
.aligncenter{ display: block; margin: 1.6em auto; }
.wp-caption{ max-width: 100%; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}