/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
/* ===== HERO ===== */
.single-post .apf-hero{
  position: relative;
  min-height: 52vh;
  display: grid;
  place-items: end center;
  padding: 12rem 1rem 3rem;
  background:
    linear-gradient(0deg, rgba(0,0,0,.48), rgba(0,0,0,.48)),
    var(--bg) center/cover no-repeat;
}
.single-post .apf-hero__inner{ width:100%; max-width:1100px; }
.single-post .apf-hero__title{
  color:#fff; text-align:center; margin:0 0 .5rem;
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(28px,5vw,56px);
}
.single-post .apf-hero__meta{
  color:#fff; opacity:.95; text-align:center; font-size:.95rem;
}

/* ===== CONTENIDO ===== */
.single-post .entry-content{
  max-width:760px; margin:2.5rem auto 4rem; padding:0 16px;
  font-size:1.1rem; line-height:1.75;
}
.single-post .entry-content h2{
  margin:2.2rem 0 1rem;
  font-size:clamp(22px,3vw,34px); letter-spacing:-.01em;
}
.single-post .entry-content p{ margin:1rem 0; }
.single-post figure{ margin:2rem 0; }
.single-post figcaption{ color:#6b7280; font-size:.9rem; text-align:center; }
.single-post blockquote{
  border-left:3px solid #e5b1c9; background:#fff7fb;
  padding:.75rem 1rem; border-radius:6px; margin:1.5rem 0;
}

/* Banda rosa para resumen */
.single-post .highlight-box{
  background:#F9E3EF; padding:1.25rem 1.5rem;
  border-radius:10px; margin:1.5rem 0 2rem;
}

/* ===== Header encima del HERO (overlay) ===== */
.single-post .ast-primary-header-bar,
.single-post .ast-above-header,
.single-post .ast-below-header {
  background: transparent !important;
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 1000;
}

/* Ajuste de color del menú sobre imagen (cámbialo si usas logo oscuro) */
.single-post .ast-primary-header-bar .main-header-menu > .menu-item > a,
.single-post .ast-primary-header-bar .ast-masthead-custom-menu-items a,
.single-post .ast-primary-header-bar .ast-site-header-cart a {
  color: #ffffff !important;
}
.single-post .ast-mobile-header-wrap .ast-button-wrap .menu-toggle {
  color: #ffffff !important;
}

/* Empuje del contenido para que no quede oculto tras el header */
.single-post .apf-hero{
  /* suma ~80px del header a tu padding superior */
  padding-top: calc(6rem + 80px);
}

/* ===== Ocultar posibles bloques de “Featured Image” insertados en plantilla ===== */
.single-post .ast-single-post-featured-section,
.single-post .post-thumb,
.single-post .wp-block-post-featured-image {
  display: none !important;
}

/* ===== HERO (si no lo tenías ya) ===== */
.single-post .apf-hero{
  position: relative;
  min-height: 52vh;
  display: grid;
  place-items: end center;
  padding: 6rem 1rem 3rem; /* el top se sobreescribe arriba con +80px */
  background:
    linear-gradient(0deg, rgba(0,0,0,.48), rgba(0,0,0,.48)),
    var(--bg) center/cover no-repeat;
}
.single-post .apf-hero__inner{ width:100%; max-width:1100px; }
.single-post .apf-hero__title{
  color:#fff; text-align:center; margin:0 0 .5rem;
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(28px,5vw,56px);
}
.single-post .apf-hero__meta{
  color:#fff; opacity:.95; text-align:center; font-size:.95rem;
}

/* ===== Cuerpo ===== */
.single-post .entry-content{
  max-width:760px; margin:2.5rem auto 4rem; padding:0 16px;
  font-size:1.1rem; line-height:1.75;
}
.single-post .entry-content h2{
  margin:2.2rem 0 1rem;
  font-size:clamp(22px,3vw,34px); letter-spacing:-.01em;
}
.single-post figure{ margin:2rem 0; }
.single-post figcaption{ color:#6b7280; font-size:.9rem; text-align:center; }
.single-post blockquote{
  border-left:3px solid #e5b1c9; background:#fff7fb;
  padding:.75rem 1rem; border-radius:6px; margin:1.5rem 0;
}

/* Banda rosa para entradilla (si usas la clase en el editor) */
.single-post .highlight-box{
  background:#F9E3EF; padding:1.25rem 1.5rem;
  border-radius:10px; margin:1.5rem 0 2rem;
}

/* Responsive */
@media (max-width: 768px){
  .single-post .apf-hero{ padding: 4rem 1rem 2rem; }
}

/* 1) Romper el contenedor: que el hero ocupe todo el viewport de ancho */
.single-post .apf-hero{
  width: 100vw;               /* ancho total de la ventana */
  margin-left: 50%;           /* truco para “salirse” del contenedor */
  transform: translateX(-50%);
  max-width: 100vw;
  border-radius: 0;
  box-shadow: none;
}

/* 2) Quitar límites internos y centrar contenido del hero */
.single-post .apf-hero__inner{
  max-width: 1200px;          /* o 1100px si prefieres */
  margin-inline: auto;
  padding-inline: 16px;
}

/* 3) Evitar que el contenedor rosa añada padding arriba del hero */
.single-post .ast-article-single,
.single-post .entry-header {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 4) Si el color rosa es un fondo del contenedor principal, no afectará al hero
      pero por si el rosa “se asoma” a los lados en el hero, forzamos z-index */
.single-post .apf-hero{
  position: relative;
  z-index: 2;
}

/* (Por si tu hero quedara solapado por el header transparente) */
.single-post .ast-primary-header-bar,
.single-post .ast-above-header,
.single-post .ast-below-header { z-index: 1000; }

/* Remove top margin on desktop */
@media (min-width: 993px) {
    .ast-separate-container #primary,
    .ast-separate-container.ast-left-sidebar #primary,
    .ast-separate-container.ast-right-sidebar #primary {
        margin-top: 0 !important;
    }
}

/* Remove top margin on tablets */
@media (min-width: 769px) and (max-width: 992px) {
    .ast-separate-container #primary,
    .ast-separate-container.ast-left-sidebar #primary,
    .ast-separate-container.ast-right-sidebar #primary {
        margin-top: 0 !important;
    }
}

/* Remove top margin on mobile */
@media (max-width: 768px) {
    .ast-separate-container #primary,
    .ast-separate-container.ast-left-sidebar #primary,
    .ast-separate-container.ast-right-sidebar #primary {
        margin-top: 0 !important;
    }
}

/**************
 * SINGLE POST – ESTILO LIMPIO EN BLANCO
 **************/
:root{
  --post-max: 780px;           /* ancho de lectura */
  --post-leading: 1.75;        /* interlineado */
  --post-h1: clamp(28px, 5vw, 56px);
  --post-h2: clamp(22px, 3.2vw, 34px);
  --post-h3: clamp(18px, 2.4vw, 24px);
  --post-radius: 12px;
  --post-muted: #6b7280;       /* gris subtítulos */
  --post-link: #5a67d8;        /* enlaces */
  --post-link-hover: #3743c7;
  --post-hr: #e5e7eb;
}

/* 0) Todo blanco (quitamos el “rosa” y tarjetas) */
.single-post .site,
.single-post .site-content,
.single-post .ast-separate-container,
.single-post .ast-separate-container .site-content .ast-container,
.single-post .ast-article-single{
  background: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 1) Contenido centrado y legible */
.single-post .entry-content{
  max-width: var(--post-max);
  margin: 2.5rem auto 4rem;
  padding: 0 16px;
  font-size: 1.125rem;     /* ~18px */
  line-height: var(--post-leading);
  color: #111827;
}

/* 2) Títulos dentro del post */
.single-post .entry-content h1{ font-size: var(--post-h1); }
.single-post .entry-content h2{ font-size: var(--post-h2); }
.single-post .entry-content h3{ font-size: var(--post-h3); }
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4{
  margin: 2rem 0 1rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* 3) Párrafos, enfatizados y enlaces */
.single-post .entry-content p{ margin: 1rem 0; }
.single-post .entry-content strong{ font-weight: 700; }
.single-post .entry-content em{ font-style: italic; }
.single-post .entry-content a{
  color: var(--post-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-post .entry-content a:hover{ color: var(--post-link-hover); }

/* 4) Listas */
.single-post .entry-content ul,
.single-post .entry-content ol{ padding-left: 1.25rem; margin: 1rem 0; }
.single-post .entry-content li{ margin: .4rem 0; }

/* 5) Citas */
.single-post blockquote{
  margin: 1.5rem 0;
  padding: .9rem 1.1rem;
  background: #f7f8fb;
  border-left: 4px solid #c7d2fe;
  border-radius: 8px;
  color: #111827;
}
.single-post blockquote p:last-child{ margin-bottom: 0; }

/* 6) Imágenes y figuras */
.single-post figure{ margin: 2rem 0; }
.single-post img{
  height: auto;
  border-radius: var(--post-radius);
}
.single-post figure > img{
  width: 100%;
  display: block;
}
.single-post figcaption{
  text-align: center;
  color: var(--post-muted);
  font-size: .92rem;
  margin-top: .5rem;
}

/* 7) Tablas */
.single-post .entry-content table{
  width: 100%;
  border-collapse: collapse;
  font-size: .98rem;
}
.single-post .entry-content table th,
.single-post .entry-content table td{
  border: 1px solid #e5e7eb;
  padding: .6rem .7rem;
}
.single-post .entry-content table thead th{
  background: #f3f4f6;
  font-weight: 600;
}

/* 8) Separadores y botones */
.single-post .entry-content hr{
  border: 0; height: 1px; background: var(--post-hr);
  margin: 2rem 0;
}
.single-post .wp-block-button__link,
.single-post .ast-button{
  border-radius: 999px;
  padding: .75rem 1.25rem;
}

/* 9) Caja destacada (si usas la clase highlight-box en el editor) */
.single-post .highlight-box{
  background: #f7f8fb;
  border: 1px solid #eef0f4;
  border-radius: var(--post-radius);
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
}

/* 10) Responsive detalles */
@media (max-width: 768px){
  .single-post .entry-content{ font-size: 1.05rem; }
}

/* === Custom Dynamic Footer Styling (Child Theme) === */
.custom-footer{
  background:#6C3FA3; /* violet */
  color:#fff;
  padding: 48px 20px 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.custom-footer .footer-container{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.custom-footer .footer-section h3{
  font-size: 1rem;
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color:#fff;
}

.footer-about .footer-desc{
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  margin: 10px 0 0;
  font-size: .95rem;
}

/* Logo – maintain aspect ratio and force white version */
.footer-logo{
  display:block;
  max-width: 170px;
  height: auto;
  filter: brightness(0) invert(1); /* if logo is not white; remove if you upload white asset */
}
.footer-logo-link:hover .footer-logo { transform: scale(1.03); transition:.2s ease; }

/* Menu */
.footer-menu{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:.5rem;
}
.footer-menu a{
  color:#fff; text-decoration:none;
  font-weight:500; opacity:.95;
  transition: opacity .2s ease, text-decoration-color .2s ease;
}
.footer-menu a:hover{ opacity:.8; text-decoration: underline; text-underline-offset: 3px; }

/* Latest posts */
.footer-latest{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-latest a{ color:#fff; text-decoration:none; opacity:.95; }
.footer-latest a:hover{ opacity:.8; text-decoration: underline; text-underline-offset: 3px; }

/* Social */
.social-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  color:#fff; margin-right:10px;
  transition: background .2s ease, transform .2s ease, border-color .2s;
}
.social-icons a:hover{ background:rgba(255,255,255,.15); transform: translateY(-1px); border-color: rgba(255,255,255,.4); }
.social-icons i{ font-size:14px; }

/* Bottom bar */
.footer-bottom{
  max-width: 1200px; margin: 24px auto 0;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18);
  text-align:center; color: rgba(255,255,255,.85); font-size:.92rem;
}

/* Responsive */
@media (max-width: 1024px){
  .custom-footer .footer-container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}
@media (max-width: 640px){
  .custom-footer{ padding: 40px 16px 18px; }
  .custom-footer .footer-container{
    grid-template-columns: 1fr; gap: 22px;
  }
  .footer-logo{ max-width: 140px; }
}

/* === GENERAL FOOTER STYLING === */
.site-footer {
    background-color: #ffffff; /* Keep footer white */
    padding: 40px 20px;
    border-top: 2px solid #f0f0f0;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* === FOOTER WIDGET TITLES === */
.site-footer .widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* === FOOTER TEXT LINKS === */
.site-footer a {
    color: #555;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}
.site-footer a:hover {
    color: #0073e6; /* Highlight color on hover */
}

/* === FOOTER COPYRIGHT AREA === */
.site-footer .ast-small-footer {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #777;
}

/* === FOOTER MENU (IF ENABLED) === */
.site-footer .menu {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    gap: 25px;
}
.site-footer .menu li {
    display: inline-block;
}
.site-footer .menu a {
    font-weight: 600;
}

/* === SOCIAL ICONS STYLING === */
.site-footer .social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    background-color: #f5f5f5;
    color: #444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.site-footer .social-icons a:hover {
    background-color: #0073e6;
    color: #fff;
    transform: scale(1.1);
}