/*
Theme Name: El Corazón del Hogar Católico — Editable V4
Theme URI: https://elcorazondelhogarcatolico.com/
Author: El Corazón del Hogar Católico
Description: Versión editable desde el Personalizador de WordPress, conservando el diseño aprobado.
Version: 1.3.0
Text Domain: corazon-hogar
*/
:root{
  --linen:#FDFBF7;
  --green:#4A6B53;
  --lilac:#8E759F;
  --lilac-light:#A288B7;
  --charcoal:#2F2F2F;
  --soft:#EEF2ED;
  --border:#e7dccf;
  --frame:1086px;
  --content:960px;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Montserrat", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--linen);color:var(--charcoal);font-family:var(--sans);font-size:16px;line-height:1.5}
a{color:var(--lilac);text-decoration:none}
a:hover{color:var(--lilac-light)}
img{display:block;max-width:100%;height:auto}
.container{width:min(var(--content),90vw);margin-inline:auto}
.site-frame{width:min(var(--frame),100%);margin-inline:auto}

/* TOP BAR */
.topbar{
  background:var(--green);color:var(--linen);text-align:center;
  padding:6px 12px;font-family:var(--serif);font-size:15px;letter-spacing:.01em
}
.topbar a{color:var(--linen)}
.topbar .twig{display:inline-block;margin-right:6px;color:var(--linen)}

/* HEADER */
.site-header{background:var(--linen);border-bottom:1px solid #eee7dd}
.header-row{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{display:flex;align-items:center}
.brand img{width:292px;max-width:40vw}
.nav-wrap{display:flex;align-items:center;gap:26px}
.main-nav ul{display:flex;list-style:none;gap:34px;margin:0;padding:0;align-items:center}
.main-nav a{font-family:var(--serif);font-size:18px;color:var(--green)}
.main-nav a:hover{color:var(--lilac)}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lilac);color:#fff!important;border:1px solid var(--lilac);
  border-radius:4px;padding:10px 20px;font-family:var(--serif);font-size:16px;transition:.2s
}
.cta:hover{background:var(--lilac-light);border-color:var(--lilac-light)}
.cta.secondary{background:transparent;color:var(--lilac)!important}
.mobile-toggle{display:none;background:none;border:0;color:var(--green);font-size:28px}

/* HERO */
.hero{
  width:min(var(--frame),100%);margin-inline:auto;
  display:grid;grid-template-columns:39% 61%;
  min-height:340px;background:var(--linen);overflow:hidden
}
.hero-copy{
  padding:38px 18px 34px max(calc((100vw - var(--content))/2),72px);
  display:flex;flex-direction:column;justify-content:center;z-index:2
}
.hero h1{
  font:500 clamp(42px,4.5vw,62px)/.98 var(--serif);
  color:var(--green);margin:0 0 18px;letter-spacing:-.02em
}
.ornament{
  height:1px;background:var(--lilac-light);width:155px;margin:2px 0 18px;position:relative
}
.ornament:after{
  content:"❦";position:absolute;right:-4px;top:-12px;background:var(--linen);
  padding-left:7px;color:var(--lilac-light)
}
.hero p{font-family:var(--serif);font-size:18px;line-height:1.35;margin:0 0 20px;max-width:430px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-media{position:relative;min-width:0;margin-left:-42px}
.hero-media img{width:calc(100% + 42px);height:100%;object-fit:cover;object-position:center}
.hero-media:before{
  content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:150px;
  background:linear-gradient(90deg,var(--linen) 0%,rgba(253,251,247,.94) 18%,rgba(253,251,247,.55) 52%,rgba(253,251,247,0) 100%);
  pointer-events:none
}

/* PILLARS */
.pillars{padding:12px 0 20px}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pillar-card{
  border:1px solid var(--border);border-radius:5px;padding:13px 18px 15px;text-align:center;
  background:var(--linen);min-height:190px;display:flex;flex-direction:column;align-items:center
}
.pillar-card .icon-wrap{
  height:78px;width:100%;display:flex;align-items:center;justify-content:center;overflow:visible;margin-bottom:2px
}
.pillar-card img{max-height:76px;max-width:145px;width:auto;height:auto;object-fit:contain;overflow:visible}
.pillar-card h3{font:500 23px/1.05 var(--serif);color:var(--green);margin:2px 0 5px}
.pillar-card p{font:14px/1.3 var(--sans);margin:0 0 8px}
.pillar-card a{margin-top:auto;font-family:var(--serif);font-size:16px}

/* LETTERS */
.letters{padding:0 0 20px}
.letters-grid{display:grid;grid-template-columns:160px repeat(3,1fr);gap:16px;align-items:stretch}
.letters-intro{padding:6px 4px 0 8px}
.letters-intro h2{font:500 38px/1 var(--serif);color:var(--green);margin:0 0 8px}
.letters-intro p{font-family:var(--serif);font-size:16px;line-height:1.25}
.article-card{border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--linen)}
.article-card img{width:100%;height:108px;object-fit:cover}
.article-body{padding:9px 13px 12px}
.article-card h3{font:500 20px/1.05 var(--serif);color:var(--green);margin:0 0 5px}
.article-card p{font-size:13px;line-height:1.35;margin:0 0 6px}
.article-card a{font-family:var(--serif);font-size:15px}

/* ABOUT */
.about{
  width:min(var(--frame),100%);margin-inline:auto;
  display:grid;grid-template-columns:38% 62%;background:var(--linen);
  border-top:1px solid #eee7dd;border-bottom:1px solid #eee7dd
}
.about-media{overflow:hidden}
.about-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.about-copy{padding:24px 48px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font:600 11px var(--sans);letter-spacing:.09em;color:var(--lilac);text-transform:uppercase}
.about h2{font:500 31px/1.1 var(--serif);color:var(--green);margin:7px 0}
.about p{font-family:var(--serif);font-size:15px;line-height:1.35;max-width:650px}
.about .cta{align-self:flex-start;margin-top:4px}

/* NEWSLETTER */
.newsletter{background:var(--soft);padding:12px 0;border-bottom:1px solid #e2e8e1}
.newsletter-row{display:grid;grid-template-columns:135px 1.25fr 1.15fr;gap:22px;align-items:center}
.newsletter-art{
  width:145px;height:66px;display:flex;align-items:center;justify-content:center;overflow:visible
}
.newsletter-art img{width:145px;height:auto;max-height:none;object-fit:contain;overflow:visible}
.newsletter h2{font:500 28px/1.05 var(--serif);color:var(--green);margin:0 0 4px}
.newsletter p{font:13px var(--serif);margin:0}
.subscribe-form{display:flex;gap:10px;align-items:center}
.subscribe-form input{flex:1;border:1px solid #ddd;padding:11px 13px;background:#fff;border-radius:4px}
.subscribe-form button{border:0}
.privacy{font-size:10px;color:#707070;margin-top:4px}

/* RESOURCES */
.resources{padding:11px 0 14px}
.resources-row{display:grid;grid-template-columns:178px repeat(4,1fr) auto;gap:12px;align-items:center}
.resources h2{font:500 29px/1.05 var(--serif);color:var(--green);margin:0}
.resource-item{border-left:1px solid #e6ddd1;padding-left:16px;font-size:11px;line-height:1.3}
.resource-item strong{display:block;font-family:var(--serif);font-size:14px;color:var(--charcoal)}

/* FOOTER */
.site-footer{background:var(--green);color:var(--linen);padding:22px 0 9px}
.footer-grid{display:grid;grid-template-columns:1.35fr .9fr 1.1fr 1fr 1.1fr;gap:28px}
.footer-brand img{
  width:188px;height:auto;margin:0 0 8px 0;filter:none!important;opacity:1!important;
  object-fit:contain
}
.footer-brand p{font-family:var(--serif);font-size:14px;line-height:1.35;max-width:190px}
.footer-col h3{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--linen);margin:0 0 9px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:2px 0}
.footer-col a{font:13px var(--serif);color:var(--linen)}
.footer-col a:hover{color:#e5d4ef}
.footer-bottom{text-align:center;font:9px var(--sans);letter-spacing:.08em;margin-top:18px}
.socials{display:flex;gap:9px;margin:9px 0}
.socials a{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(255,255,255,.78);border-radius:50%;font-family:var(--sans);font-size:11px}
.section-anchor{scroll-margin-top:120px}

/* RESPONSIVE */
@media(max-width:900px){
  .mobile-toggle{display:block}
  .main-nav{display:none;position:absolute;top:100%;right:4vw;background:var(--linen);border:1px solid var(--border);padding:18px;z-index:20}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:12px}
  .site-header{position:relative}
  .brand img{max-width:58vw}
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:38px 6vw 30px}
  .hero-media{height:330px;margin-left:0}
  .hero-media img{width:100%}
  .hero-media:before{width:100%;height:90px;bottom:auto;right:0;background:linear-gradient(180deg,var(--linen) 0%,rgba(253,251,247,.65) 48%,rgba(253,251,247,0) 100%)}
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
  .letters-grid{grid-template-columns:1fr 1fr}
  .letters-intro{grid-column:1/-1}
  .about{grid-template-columns:1fr}
  .about-media{height:320px}
  .newsletter-row{grid-template-columns:120px 1fr}
  .subscribe-wrap{grid-column:1/-1}
  .resources-row{grid-template-columns:1fr 1fr}
  .resources h2{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .header-row>.cta{display:none}
}
@media(max-width:600px){
  .topbar{font-size:13px}
  .header-row{min-height:72px}
  .hero h1{font-size:46px}
  .hero p{font-size:17px}
  .hero-media{height:280px}
  .pillar-grid,.letters-grid,.footer-grid{grid-template-columns:1fr}
  .about-copy{padding:26px 6vw}
  .newsletter-row{grid-template-columns:1fr}
  .newsletter-art{justify-content:flex-start}
  .subscribe-form{flex-direction:column;align-items:stretch}
  .resources-row{grid-template-columns:1fr}
  .resource-item{border-left:0;border-top:1px solid #e6ddd1;padding:9px 0 0}
  .footer-brand{grid-column:auto}
}


/* === V3 CORRECTIONS === */

/* Crisp logo rendering */
.brand img{
  width:292px;
  max-width:40vw;
  height:auto;
  image-rendering:auto;
}
.custom-logo-link img{
  max-height:84px;
  width:auto;
}
.footer-brand img{
  width:190px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  image-rendering:auto;
}

/* About decorative eucalyptus branch from the approved mockup */
.about-copy{
  position:relative;
  overflow:visible;
  padding-right:150px;
}
.about-branch{
  position:absolute;
  right:18px;
  bottom:0;
  width:118px;
  height:auto;
  max-height:185px;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
}
.about-copy > *:not(.about-branch){
  position:relative;
  z-index:2;
}

/* Newsletter illustration: no clipping, transparent PNG, full lavender visible */
.newsletter-row{
  overflow:visible;
}
.newsletter-art{
  width:145px;
  height:78px;
  overflow:visible;
}
.newsletter-art img{
  width:158px;
  max-width:none;
  height:auto;
  object-fit:contain;
  overflow:visible;
  transform:translateX(-4px);
}

/* Resource icon row */
.resource-item{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.resource-item img{
  flex:0 0 34px;
  width:34px;
  max-height:40px;
  object-fit:contain;
}
.resource-item div{
  min-width:0;
}

/* Make post links unmistakably interactive/clickable */
.article-card{
  position:relative;
}
.article-card .read-letter{
  position:relative;
  z-index:10;
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:2px 2px;
  pointer-events:auto !important;
  cursor:pointer;
}
.article-card .read-letter:hover{
  text-decoration:underline;
}

/* Maintain the approved spacing when the decorative branch is present */
@media(max-width:900px){
  .about-copy{padding-right:6vw}
  .about-branch{right:8px;width:92px;opacity:.85}
}
@media(max-width:600px){
  .about-branch{width:70px;opacity:.65}
  .newsletter-art{width:165px;height:82px}
  .newsletter-art img{width:165px;transform:none}
}

/* V4 editable refinements */
.resource-item{color:var(--charcoal)}
.resource-item:hover{color:var(--charcoal)}
.article-image-link{display:block}
.article-image-link img{transition:opacity .2s ease}
.article-image-link:hover img{opacity:.92}