/* Estilos base - estética limpia y responsive */
:root{
  --bg:#F7E5E1;
  --text:#111417;
  --muted:#6b7280;
  --accent:#2b6cb0; /* azul suave */
  --card:#f8fafc;
  --radius:10px;
  --max-width:1100px;
  --container-padding:1rem;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);} 

/* Layout to keep footer at the bottom */
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem;}
.site-header{
  border-bottom:1px solid #e6edf3;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.92),
    rgba(255,255,255,0.85)
    );
  backdrop-filter: blur(4px);position:sticky;top:0;z-index:50
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0;position:relative}

/* Home-specific header: center brand and nav stacked, remove border line */
.home .site-header{border-bottom:1px solid rgba(255,255,255,1)}
/* Make header overlay the hero on home: transparent and positioned above the background */
.home .site-header{position:absolute;top:0;left:0;right:0;background:transparent;z-index:60;border-bottom:1px solid rgba(255,255,255,0.12)}
.home .header-inner{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;position:relative}
.home .brand{display:block;margin:0;font-size:1.25rem}
.home .site-nav ul{justify-content:center;display:flex;gap:1rem;margin-top:0.5rem}
.home .site-nav a{display:inline-block}
.header-right{display:flex;align-items:center;gap:1rem}

.home .header-right{
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.home .social-links{
  display:flex;
  gap:0.6rem;
  align-items:center;
}

.home .social-links a{
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  border-radius:6px;
  transition:all 0.2s ease;
  width:32px;
  height:32px;
}

.home .social-links a:hover{
  background:rgba(255,255,255,0.15);
}

.home .social-links svg{
  display:block;
  width:20px;
  height:20px;
}

.home .site-nav a{color:#fff}
.home .site-nav a:hover{color:rgba(255,255,255,0.9)}
.home .nav-toggle{color:#fff}
.social-links{display:flex;gap:0.6rem;align-items:center}
.social-links a{color:var(--muted);display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:6px;transition:all 0.2s ease}
.social-links a:hover{color:var(--accent);background:rgba(43,108,176,0.06)}
.social-links svg{display:block}
.brand{font-weight:600;color:var(--text);text-decoration:none;font-size:1.1rem}
.brand-img{height:110px;display:inline-block;width:auto;max-width:360px;border-radius:14px;object-fit:cover}

/* Reduce logo size on small screens to keep header compact */
@media (max-width:900px){
  .brand-img{height:78px}
}
@media (max-width:600px){
  .brand-img{height:64px}
}
.site-nav{position:absolute;left:50%;transform:translateX(-50%)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.site-nav a{color:var(--muted);text-decoration:none;padding:0.25rem 0;display:inline-flex;align-items:center;gap:6px}
.site-nav a svg{display:inline-block;vertical-align:middle}
.site-nav > ul > li > a > svg{display:none !important;}
.site-nav a:hover{color:var(--accent)}

/* Underline animation from center outwards (desktop & tablet) */
.site-nav a{position:relative}
.site-nav a::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--accent);bottom:-6px;border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.site-nav a:hover::after,.site-nav a:focus::after{transform:scaleX(1)}
@media (max-width:900px){
  /* disable underline animation in the collapsed mobile panel to avoid visual clutter */
  .site-nav a::after{display:none}
}

/* Dropdown styles */
.site-nav .has-dropdown{position:relative}
.site-nav .has-dropdown > a{display:inline-flex;align-items:center;gap:6px;position:relative;z-index:100}
/* Priorizar visualmente el trigger cuando el dropdown está abierto */
.site-nav .has-dropdown.dropdown-open > a,
.site-nav .has-dropdown > a[aria-expanded="true"]{z-index:130}
/* Posicionar y separar ligeramente el dropdown para evitar solapamientos */
.site-nav .dropdown{top:calc(100% + 8px);z-index:110;position:absolute}
/* Mostrar el dropdown cuando el padre tiene la clase .dropdown-open (útil para modo click) */
.site-nav .has-dropdown.dropdown-open > .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.site-nav .dropdown{
  /* hidden by default using opacity/visibility so we can animate */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility .01s linear .18s;
  position:absolute;top:100%;left:0;background:#fff;border-radius:8px;padding:0.5rem 0;min-width:220px;box-shadow:0 6px 20px rgba(16,24,40,0.12);z-index:80;
  /* Ensure dropdown lists stack vertically (override global .site-nav ul display:flex) */
  display:flex;
  flex-direction:column;
  gap:0;
}
.site-nav .dropdown li{list-style:none}
.site-nav .dropdown a{display:block;padding:0.5rem 1rem;color:var(--text);text-decoration:none}
.site-nav .dropdown a:hover{background:#f1f5f9;color:var(--accent)}
.site-nav .has-dropdown:hover > .dropdown,
.site-nav .has-dropdown:focus-within > .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}

/* Mobile: dropdown becomes part of the vertical menu and can be toggled via class */
@media (max-width:900px){
  .site-nav .dropdown{position:relative;top:0;left:0;background:transparent;box-shadow:none;padding:0;display:none}
  .site-nav .dropdown a{padding-left:1rem;color:var(--text)}
  .site-nav .dropdown{display:none}
  .site-nav .dropdown.dropdown-open{display:block}
}
.nav-toggle{display:none}
/* style hamburger button */
.nav-toggle{background:none;border:none;font-size:18px;padding:8px;cursor:pointer}
.nav-toggle::before{content:"\2630";display:inline-block}
.site-header.open .nav-toggle::before{content:"\2715"}

.hero{padding:3rem 0}
.hero-inner{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:center}
.hero h1{font-size:2rem;margin:0 0 0.5rem}
.hero p{color:var(--muted);margin:0 0 1rem}
.cta{display:inline-block;background:var(--accent);color:white;padding:0.6rem 1rem;border-radius:8px;text-decoration:none}
.hero-image img{width:100%;height:auto;border-radius:12px;object-fit:cover}

/* Home hero full-screen background (not fixed) */
.home .hero{
  /* Use the reception photo placed in /images/recepcion.jpg */
  background-image: url('/images/Elements/FondoConsulta.jpeg');
  background-size: cover;
  background-position: center center;
  background-attachment: scroll; /* ensure it scrolls away with page */
  min-height: 100vh; /* occupy full viewport height */
  display:flex;align-items:center;padding:0;
  color: #fff;
  position:relative;overflow:hidden;
}

/* Subtle dark overlay for readability */
.home .hero::before{
  content: "";
  position:absolute;inset:0;
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.15));
  pointer-events:none;
}

/* Hide the inline hero image on home since we use full bg */
.home .hero .hero-image{display:none}

/* Make hero inner content stand above overlay */
.home .hero .hero-inner{position:relative;color:#fff;padding:3rem}
.home .hero h1{color:#fff}
.home .hero p{color:rgba(255,255,255,0.9)}

/* Page template for individual services */
.service-hero{padding:2.5rem 0;background:var(--bg);background-size:cover;background-position:center;border-bottom:1px solid #eef2f6}
.service-hero .container{display:flex;flex-direction:column;gap:0.5rem}
.service-hero h1{margin:0;font-size:1.6rem}
.service-hero p.muted{margin:0;color:var(--muted)}
.service-hero.with-image{color:#fff;position:relative}
.service-hero.with-image::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.15));pointer-events:none}
.service-hero.with-image .container{position:relative;z-index:1}

.service-section{padding-top:2rem;padding-bottom:3rem}
.service-content{max-width:70ch}

/* Make sure service content adapts on small screens */
@media (max-width:900px){
  .service-hero h1{font-size:1.3rem}
}


.section{padding:2rem 0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;justify-items:stretch;align-items:stretch;grid-auto-rows:1fr;max-width:1200px;margin:0 auto}  

  /* Make each card fill its grid cell and layout with flex so content can be pinned to the bottom */
  .service-card{display:flex;flex-direction:column;height:100%}  
  .service-card .card-link{display:flex;flex-direction:column;align-items:stretch;flex:1}  
  .service-card .card-footer{margin-top:auto}  

/* Service card (thumbnail above text) — restored to original layout */
.service-card{background:var(--card);padding:1.25rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(16,24,40,0.06);transition:transform .18s ease, box-shadow .18s ease;overflow:hidden;max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;height:100%}
.service-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(16,24,40,0.12)}

/* Card image/thumbnail for services (portada) */
.service-card .card-image{width:100%;height:300px;overflow:hidden;border-radius:8px;margin:0 auto 1rem auto;background:#fff;display:block}
.service-card .card-image img{width:100%;height:100%;object-fit:cover;display:block}

/* Make the entire card act as a link */
.service-card .card-link{display:block;color:inherit;text-decoration:none}
.service-card h3{margin:0 0 0.35rem}
.service-card p{margin:0;color:var(--muted)}
.service-card .card-footer{margin-top:0.9rem}
.service-card .read-more{display:inline-block;color:var(--accent);text-decoration:none;font-weight:600}

/* Responsive: reduce height on small screens */
@media (max-width:900px){
  .services-grid{grid-template-columns:1fr}
  .service-card .card-image{height:220px}
}

/* Small screens: make grid 2 columns on medium screens */
@media (min-width:900px) and (max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
}

/* Individual service pages — image as background on desktop with overlay for readability */
@media (min-width:900px){
  /* Full-bleed service image (extends edge-to-edge) - higher specificity to override later rules */
  .service-section .service-content.stack{
    position:relative;
    color:#fff;
    padding:3rem 1.25rem;
    overflow:hidden;
    width:100vw;
    max-width:none; /* allow full-bleed, override later caps */
    box-sizing:border-box; /* include padding inside 100vw */
    margin-left:calc(50% - 50vw); /* center the full-bleed block */
    margin-right:calc(50% - 50vw);
  }
  .service-section .service-content.stack > .service-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;border-radius:0;overflow:hidden}
  .service-section .service-content.stack > .service-image img{width:100%;height:100%;object-fit:cover;filter:brightness(0.8) blur(0.6px);transform:scale(1.02);transition:transform .5s ease;display:block}
  .service-section .service-content.stack::before{
    content:"";
    position:absolute;
    inset:0;
    /* ligera capa oscura + blur para mejorar legibilidad del texto sobre la imagen */
    background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.6));
    z-index:1;
    pointer-events:none;
    /* blur del contenido que queda detrás del overlay (soporta navegadores modernos) */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: backdrop-filter .25s ease, background .25s ease;
  }
  .service-section .service-content.stack > *:not(.service-image){position:relative;z-index:2;max-width:72ch;margin:0 auto}
  .service-section .service-content.stack p, .service-section .service-content.stack ul{color:rgba(255,255,255,0.95)}
}

/* Mobile: keep original stacked layout (image above text) */
@media (max-width:900px){
  .service-content.stack{padding:0}
  .service-content.stack > .service-image{position:static;height:auto;margin:0 0 1rem 0}
  .service-content.stack > .service-image img{width:100%;height:auto;object-fit:contain;filter:none;transform:none}
  .service-content.stack > *{position:static;color:var(--text)}
}

/* Markdown "prose" container for consistent typographic styles across pages */
.prose{font-family:inherit;color:var(--text);line-height:1.65}
.prose h2, .prose h3, .prose h4{margin:0 0 .5rem}
.prose h2{font-size:1.15rem}
.prose p{margin:0 0 .9rem;color:var(--text)}
.prose ul{margin:0 0 1rem 1.25rem;padding:0}
.prose li{margin:0.25rem 0}
.prose a{color:var(--accent);text-decoration:underline}
.prose img{max-width:100%;height:auto;border-radius:8px;margin:0.5rem 0}

/* Imagen lateral en servicios: imagen a la izquierda, texto a la derecha (escritorio) */
.service-content{max-width:72ch;margin:0 auto;text-align:left}
.service-content .service-image{float:left;width:260px;height:260px;margin:0 1.5rem 0.75rem 0;border-radius:10px;overflow:hidden;display:block}
.service-content .service-image img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.service-content::after{content:"";display:block;clear:both}

/* Layout alternativo: apilar imagen encima del texto (útil para pruebas/versión simple) */
.service-content.stack{max-width:72ch;margin:0 auto;text-align:left}
.service-content.stack .service-image{float:none;width:100%;height:auto;margin:0 0 1rem 0;border-radius:10px;overflow:hidden;display:block}
.service-content.stack .service-image img{width:100%;height:auto;object-fit:cover}

/* Reducir la sangría de las listas para que los puntos queden más cerca del texto */
.prose ul{margin:0 0 1rem;padding-left:1rem}
.prose li{margin:0.35rem 0}

/* En pantallas pequeñas la imagen se apila arriba y el texto se centra */
@media (max-width:900px){
  .service-content .service-image{float:none;width:100%;height:auto;margin:0 0 1rem 0}
  .service-content{text-align:center}
  .service-content .service-image img{height:auto;object-fit:contain}
  .prose ul{padding-left:1.25rem}
}

.prose pre{background:#0f1724;color:#e6edf3;padding:0.75rem;border-radius:8px;overflow:auto;font-family:monospace;margin:0.75rem 0}
.prose code{background:#f1f5f9;padding:0.15rem 0.4rem;border-radius:6px;font-family:monospace}

.about-inner{max-width:70ch}

.posts-list{display:grid;gap:1rem}
.post-card{padding:0.9rem;border-radius:10px;background:#fff;border:1px solid #edf2f7}
.post-card h3{margin:0 0 0.25rem}
.post-card p{margin:0;color:var(--muted)}
.link-button{background:none;border:none;color:var(--accent);cursor:pointer;padding:0}
.post-view{margin-top:1rem}

.contact .phone a{font-weight:600;color:var(--accent);text-decoration:none}

/* Contact form styles */
.contact-form{max-width:var(--max-width)}
.contact-form .form-row{margin:0 0 0.75rem}
.contact-form label{display:block;margin:0 0 0.25rem;font-weight:600}
.contact-form input,.contact-form textarea{
  width:100%;
  padding:0.5rem 1rem;
  font-size:1rem;
  min-height:44px;
  border:1px solid #e6edf3;
  border-radius:8px;
}
.contact-form textarea{
  resize:none;
  min-height:160px;
  padding:0.75rem 1rem;
}
.contact-form button{background:var(--accent);color:#fff;padding:0.6rem 1rem;border-radius:8px;border:none;cursor:pointer}
.contact-form button:hover{opacity:0.95}

/* Center contact container and make form centered */
.section.contact .container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:left;padding:2rem 1rem}
.contact-form{max-width:var(--max-width);width:75%;margin:0 auto}

/* Ensure the inner contact wrapper centers the form and doesn't allow side elements to shrink it */
.section.contact .contact{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1rem;
}

.section.contact .reserve{
  width:100%;
  max-width:var(--max-width);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
}

/* Ensure inline contact texts are centered when the layout stacks */
.section.contact .contact p{ text-align:center; }

/* Screen-reader-only (keep labels for accessibility) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Placeholders slightly shaded */
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(16,24,40,0.45)}
/* Use a different font and style for the textarea placeholder */
.contact-form textarea::placeholder{font-family: Georgia, 'Times New Roman', serif; font-style:italic; opacity:0.9}

/* On small screens keep layout full width */
@media (max-width:600px){
  .contact .container{padding:1rem}
  .contact-form{max-width:100%}
}

.site-footer{border-top:1px solid #e6edf3;padding:1rem 0;text-align:center;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .site-nav{display:flex;max-height:0;overflow:hidden;flex-direction:column;opacity:0;transition:max-height .32s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
  .nav-toggle{display:block}

  /* Ensure list items stack vertically and occupy full width on mobile */
  .site-nav ul{flex-direction:column;width:100%;}
  .site-nav ul li{width:100%}
  .site-nav ul li a{display:block;width:100%}
  /* Specific override for the home page where a more specific selector exists earlier */
  .home .site-nav ul{flex-direction:column !important;width:100%}
  .home .site-nav ul li{width:100%}
  .home .site-nav ul li a{display:block;width:100%}

  /* Separator line between items for mobile panel */
  .site-header.open .site-nav ul li + li a{border-top:1px solid #f1f5f9}

  /* mobile menu: when header has .open expand the vertical menu (animated) */
  .site-header.open .site-nav{
    /* Use fixed so the panel sits above any page content or overlays */
    position:fixed;
    top:0;left:0;right:0;transform:none;width:100%;
    background:rgba(255,255,255,0.98); /* Fondo blanco semi-opaco */
    gap:0;
    padding:0 1rem 1rem 1rem; /* sin padding superior para acercar el menú al tope */
    box-shadow:0 6px 30px rgba(16,24,40,0.14);
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    z-index:10000;
    max-height:100vh; /* full height but scrollable */
    opacity:1;
    overflow:auto;
  }
  .site-header.open .site-nav ul{flex-direction:column;gap:0;margin-top:0}
  .site-header.open .site-nav a{
    padding:0.9rem 0;
    border-top:1px solid #f1f5f9;
    color:var(--text) !important; /* Forzar texto oscuro por defecto cuando el panel móvil está abierto */
  }
  .site-header.open .site-nav a:first-child{border-top:none}
  
  /* Fix específico para home: forzar texto oscuro y botón toggle oscuro cuando el menú está abierto */
  .home .site-header.open .site-nav a{
    color:var(--text) !important;
  }
  .home .site-header.open .nav-toggle{
    color:var(--text);
  }
}

@media (max-width:900px){
  .site-nav .dropdown{position:relative;top:0;left:0;background:transparent;box-shadow:none;padding:0;opacity:0;visibility:hidden;max-height:0;overflow:hidden;transition:opacity .18s ease, max-height .28s cubic-bezier(.2,.8,.2,1)}
  .site-nav .dropdown a{padding-left:1rem;color:var(--text)}
  .site-nav .dropdown.dropdown-open{opacity:1;visibility:visible;max-height:400px}
}


/* Base */
.service-image {
  position: relative;
}

/* Pie de foto */
.service-content .service-image {
  float: left;
  width: 260px;
  height: 260px;
  margin-right: 1.5rem;
  margin-bottom: 2.5rem; /* <--- nuevo, suficiente para figcaption */
  position: relative; /* asegura el stacking context para figcaption */
}

@media (min-width:900px){
  .service-content.stack .service-image{
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .section .service-content.stack .service-image figcaption{
    position: absolute;
    bottom: 12px;
    right: 12px;
    max-width: 70%;
    z-index: 3;
    pointer-events: none;
  }
  .service-content.stack > *:not(.service-image){
    padding-bottom: 3rem;
  }
}

/* ==========================
   About Page: imagen con figcaption
========================== */
.about-content {
  max-width: 72ch;
  margin: 0 auto;
  text-align: left;
}

.about-image {
  float: left;
  width: 400px;
  height: 400px;
  margin: 0 1.5rem 1.5rem 0;
  position: relative;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-image figcaption {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 6px;
  text-align: center;
  z-index: 2;
}

/* Responsive: móvil */
@media (max-width:900px){
  .about-image {
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 0.5rem 0;
  }
  .about-image figcaption {
    position: static;
    background: transparent;
    color: var(--muted);
    font-style: italic;
    text-align: center;
  }
}

/* ===== Mobile: pie debajo de la imagen ===== */
@media (max-width:900px){
  .service-image figcaption{
    position: static;
    margin-top: 0.4rem;
    background: transparent;
    color: var(--muted);
    font-style: italic;
    text-align: center;
  }
}

/* Botón de Doctoralia - Versión destacada */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #2563eb 100%);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  text-decoration: none;
}

.btn-primary:active {
  transform: translateY(-1px);
}
/* Mobile header/menu visibility fix: ensure menu has dark text and header sits above hero */
@media (max-width:900px){
  /* Ensure header is above any hero overlays */
  .site-header{z-index:9999 !important}

  /* Make the mobile panel fixed so it cannot be covered by sibling overlays */
  .site-header.open .site-nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:10000;
    background:rgba(255,255,255,0.98);
    padding:calc(1rem + 3.5rem) 1rem 1rem 1rem; /* push content below header area */
    box-shadow:0 6px 30px rgba(16,24,40,0.14);
    max-height:100vh;overflow:auto;
  }

  /* Force dark text and icon color for the opened mobile menu and all its descendants */
  .site-header.open .site-nav,
  .site-header.open .site-nav *{
    color: var(--text) !important;
    fill: var(--text) !important;
    stroke: var(--text) !important;
  }

  /* Ensure links and SVGs explicitly use currentColor so they match */
  .site-header.open .site-nav a{color:var(--text) !important}
  .site-header.open .site-nav a svg{fill:currentColor !important; stroke:currentColor !important}

  /* When menu is open, avoid hero consuming pointer-events above it */
  .site-header.open ~ main, .site-header.open ~ .hero, .site-header.open ~ main *{pointer-events:none}
}