/*
Theme Name: Hola Dani Escalona
Theme URI: https://holadaniescalona.com
Author: felivibes
Description: Tema a medida para el blog "hola dani escalona": estetica scrapbook / papeleria, bandas de color pastel, tipografia Allura + Poppins. Reconstruido desde el mockup de Canva.
Version: 2.0.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: holadaniescalona
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* --- Paleta de marca HDE ------------------------------------------------ */
  --hde-cream:    #FFF3C6;   /* amarillo pálido */
  --hde-lavender: #CDB7F6;   /* lavanda */
  --hde-sky:      #81C8F6;   /* azul cielo */
  --hde-sky-soft: #CADFED;   /* azul cielo suave (avisos / disclaimers) */
  --hde-mint:     #E3F3D8;   /* menta */
  --hde-pink:     #FFE0EA;   /* rosa pálido */

  --hde-yellow:   #F4CB40;   /* amarillo dorado */
  --hde-purple:   #9065BF;   /* morado */
  --hde-cyan:     #00B2CE;   /* turquesa */
  --hde-green:    #48BC87;   /* verde */
  --hde-rose:     #FD668E;   /* rosa fuerte */

  --hde-white:    #FFFFFF;
  --hde-plum:     #5A455C;   /* texto */
  --hde-lime:     #EFFD6C;   /* acento */

  /* --- Roles ------------------------------------------------------------- */
  --ink: var(--hde-plum);
  --ink-soft: #5f4d62;
  --muted: #8a7c8c;

  --band-cream: var(--hde-cream);
  --band-pink: var(--hde-pink);
  --band-mint: var(--hde-mint);
  --band-lavender: var(--hde-lavender);
  --band-blue: var(--hde-sky);
  --band-sky-soft: #CADFED;      /* casa y cocina — celeste claro */
  --band-lavender-soft: #D7CBEF; /* viajes — morado claro */

  --paper: #fdfbf8;

  --c-coral: var(--hde-rose);
  --c-blue: var(--hde-sky);
  --c-butter: var(--hde-yellow);
  --c-lavender: #a98fe0;
  --c-green: var(--hde-green);
  --c-cyan: var(--hde-cyan);

  --tint-blue: #c9e6fb;
  --tint-lavender: #ddd0f5;
  --tint-green: #d8f0c8;

  --title-blue: #1f8fa6;
  --title-lavender: var(--hde-purple);
  --title-green: #2f9d6c;

  --shadow-soft: 0 16px 34px rgba(90, 69, 92, 0.16);
  --shadow-card: 0 12px 26px rgba(90, 69, 92, 0.13);
  --wrap: 1180px;

  --sky: #a9d4f0 url('assets/img/sky.png') center / cover no-repeat;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* contain decorative sparkles/stickers that poke past the edge */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 700; line-height: 1.2; }
strong, b { font-weight: 700; }

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

.section { padding: 76px 0; }
.section--tight { padding: 52px 0; }

.band--cream { background: var(--band-cream); }
.band--pink { background: var(--band-pink); }
.band--mint { background: var(--band-mint); }
.band--lavender { background: var(--band-lavender); }
.band--lavender-soft { background: var(--band-lavender-soft); }
.band--blue { background: var(--band-blue); }
.band--sky-soft { background: var(--band-sky-soft); }
.band--white { background: #fff; }

.rich p { max-width: 60ch; }
.text-center { text-align: center; }
.text-center .rich p,
.lead { margin-left: auto; margin-right: auto; }
.lead {
  max-width: 66ch;
  font-size: 1.12rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   3. Site header
   ========================================================================== */
/* Sky panels share one image so header + hero + footer read as one sky.
   `fixed` anchors it to the viewport (kills the seam under the menu) but is
   buggy on mobile Safari, so it's desktop-only; mobile just uses `cover`. */
.site-header,
.hero,
.site-footer,
.band--sky {
  background: var(--sky);
}
@media (min-width: 900px) {
  .site-header,
  .hero,
  .site-footer,
  .band--sky {
    background-attachment: fixed;
  }
}

.site-header { position: relative; z-index: 20; }

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
}

/* Desktop: no hamburger, so float the search icon out of flow and let the
   nav stay perfectly centred across the full header width. */
.search-toggle {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle {
  border: 0;
  background: none;
  padding: 6px;
  cursor: pointer;
  display: none; /* only shown when the inline menu is collapsed (<=980px) */
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span {
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--ink);
  display: block;
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 52px);
}
.main-nav li { margin: 0; }
.main-nav a {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .82;
  transition: opacity .2s, color .2s;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a {
  opacity: 1;
  color: #fff;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .55);
}

.search-toggle {
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.search-toggle svg { width: 24px; height: 24px; display: block; }

.search-panel {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(2px);
}
body.search-open .search-panel { display: block; }
.search-panel form {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  gap: 12px;
}
.search-panel input[type="search"] {
  flex: 1;
  border: 2px solid rgba(90, 69, 92, .25);
  border-radius: 999px;
  padding: 10px 20px;
  font: inherit;
  background: rgba(255, 255, 255, .9);
}
.search-panel button {
  border: 0;
  border-radius: 999px;
  padding: 10px 24px;
  font: inherit;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .78rem;
  background: var(--c-coral);
  color: #fff;
  cursor: pointer;
}

/* ==========================================================================
   4. Double heading (Allura script + Poppins solid + sparkles)
   ========================================================================== */
.dh {
  display: inline-block;
  position: relative;
  margin: 0; /* also used as <h1>/<h2>; kill default heading margin */
  padding: .55em 1.4em .1em .6em;
  line-height: 1;
}
.dh__script {
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 3.7rem);
  line-height: .7;
  color: var(--c-coral);
  transform: rotate(-7deg);
  white-space: nowrap;
  z-index: 3;
}
.dh__solid {
  display: block;
  font-weight: 800;
  text-transform: lowercase;
  font-size: clamp(2.7rem, 7.5vw, 5.7rem);
  letter-spacing: .005em;
  color: var(--fill, #fff);
  position: relative;
  z-index: 2;
  text-shadow:
    -4px -3px 0 var(--e1, rgba(0, 178, 206, .55)),
    5px 6px 0 var(--e2, rgba(253, 102, 142, .5));
}
.dh__spark {
  position: absolute;
  right: .1em;
  bottom: .35em;
  width: 2.1em;
  height: 2.1em;
  z-index: 3;
  pointer-events: none;
}
.dh__spark svg { width: 100%; height: 100%; display: block; }

.dh--dark .dh__script { color: var(--ink); }
.dh--solo { padding: .2em 1.9em .1em 0; }
.dh--solo .dh__script { position: static; display: inline-block; transform: rotate(-6deg); }
.dh--solo .dh__spark { right: -.2em; bottom: auto; top: -.1em; width: 1.7em; height: 1.7em; }

.dh__badge {
  position: absolute;
  left: -1.9em;
  top: 50%;
  width: 5.2em;
  height: 5.2em;
  transform: translateY(-52%) rotate(-6deg);
  z-index: 4;
  pointer-events: none;
}
.dh__badge img { width: 100%; height: 100%; }
@media (max-width: 640px) {
  .dh__badge { position: static; transform: rotate(-6deg); width: 84px; height: 84px; margin: 0 auto 6px; display: block; }
}

/* Section heading wrapper */
.head { text-align: center; margin-bottom: 44px; position: relative; }
.head--left { text-align: left; }

/* Pre-rendered heading image (exact Canva type) */
.page-title-img {
  margin: 0;
  line-height: 0;
}
.page-title-img img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  max-height: 168px;
  height: auto;
}
.head--left .page-title-img img { margin-left: 0; }

/* Small decorative accent (washi-tape bits) beside a CSS heading */
.dh__accent {
  position: absolute;
  right: -1.6em;
  top: -.4em;
  width: 3.1em;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

/* "explora" flick — lands right where the tail of the final "a" ends,
   reading as a natural flick of the script. */
.explora-section .dh__accent {
  right: 0.86em;
  top: -.6em;
  width: 1.05em;
  transform: rotate(-6deg);
}

/* "posts" / "artículos": white fill + ONE hard sky-blue offset shadow
   (same treatment as "soy yo"), plus the flick at the bottom-right. */
.dh--posts .dh__solid {
  text-shadow: 3px 3px 0 #81c8f6;
}
.dh--posts .dh__spark { display: none; }
.dh--posts .dh__accent {
  right: .1em;
  top: auto;
  bottom: -.28em;
  width: 1.85em;
  transform: rotate(8deg);
}

/* ==========================================================================
   5. Washi tape button
   ========================================================================== */
.tape-btn {
  display: inline-block;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 16px 32px;
  position: relative;
  transform: rotate(-1.4deg);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 10px 20px rgba(90, 69, 92, .13);
  transition: transform .2s;
  clip-path: polygon(
    2% 14%, 9% 3%, 21% 10%, 34% 2%, 48% 9%, 62% 1%, 75% 10%, 88% 3%, 98% 12%,
    99% 34%, 97% 58%, 100% 80%, 95% 94%, 83% 98%, 69% 91%, 55% 99%, 41% 92%,
    27% 99%, 14% 91%, 3% 97%, 1% 76%, 3% 52%, 0% 30%
  );
}
.tape-btn:hover { transform: rotate(-1.4deg) translateY(-3px); }
.tape-btn--mint { background: rgba(72, 188, 135, .3); }
.tape-btn--lavender { background: rgba(144, 101, 191, .28); }
.tape-btn--kraft { background: rgba(212, 188, 150, .66); }
.tape-btn--pink { background: rgba(253, 102, 142, .26); }
.tape-btn--blue { background: rgba(0, 178, 206, .22); }

.btn-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.head .tape-btn { margin-top: 34px; }

/* ==========================================================================
   6. Hero (front page)
   ========================================================================== */
.hero {
  text-align: center;
  padding: 56px 0 108px;
}
.hero__title-img {
  margin: 0;
  line-height: 0;
  display: flex;
  justify-content: center;
}
.hero__title-img img {
  display: block;
  width: min(100%, 640px);
  height: auto;
}
.hero .dh { padding: 1em 1.6em .1em .6em; }
.hero .dh__script {
  color: #fff;
  font-size: clamp(2.8rem, 6vw, 5.1rem);
  top: -.15em;
}
.hero .dh__solid {
  color: var(--fill, var(--hde-cream));
  text-shadow:
    -3px -2px 0 rgba(255, 255, 255, .6),
    4px 6px 0 rgba(238, 170, 190, .5);
}
.hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--ink-soft);
  margin: 6px 0 0;
  font-weight: 500;
}

/* ==========================================================================
   7. "asi soy yo" — home about block
   ========================================================================== */
.about-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-home .dh { padding-left: 1.4em; }
.about-home__text .rich { font-size: 1.12rem; color: var(--ink-soft); }

/* "así soy yo": pale-pink fill + ONE hard sky-blue offset shadow, no sparkle
   burst (matches the Canva mockup). Scoped to .about-home so it holds no
   matter which params front-page.php passes to the heading component. */
.about-home .dh__solid {
  color: #ffe0ea;
  text-shadow: 3px 3px 0 #81c8f6;
}
.about-home .dh__spark { display: none; }

.polaroid {
  position: relative;
  width: min(360px, 78%);
  margin: 0 auto;
  background: #fff;
  padding: 16px 16px 60px;
  box-shadow: var(--shadow-soft);
  transform: rotate(-4deg);
}
.polaroid__photo { width: 100%; height: 340px; object-fit: cover; }
.polaroid::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 120px;
  height: 34px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 4px 10px rgba(90, 69, 92, .12);
}
.sticker {
  position: absolute;
  width: 82px;
  height: auto;
  z-index: 4;
  filter: drop-shadow(0 8px 14px rgba(90, 69, 92, .2));
}
.sticker--tl { top: -38px; right: -16px; transform: rotate(12deg); }
.sticker--bl { bottom: -22px; left: -30px; width: 92px; transform: rotate(-8deg); }

.about-home__media { position: relative; text-align: center; }
.about-figure {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 16px 26px rgba(90, 69, 92, .16));
}
.about-home--sobre .about-home__media { padding-bottom: 34px; }
.collab-tape {
  position: absolute;
  left: 2%;
  bottom: 0;
  z-index: 4;
}
/* "¿Quieres colaborar?" — color sólido, sin transparencia */
.collab-tape.tape-btn--lavender { background: var(--hde-lavender); }
.cat-intro { margin-bottom: 44px; }

/* ==========================================================================
   8. Explora — category strip (gingham buttons)
   ========================================================================== */
.explora {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 4vw, 60px);
  flex-wrap: wrap;
  margin-top: 8px;
}
.explora__item {
  width: 150px;
  text-align: center;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
.explora__shape {
  width: 122px;
  height: 108px;
  margin: 0 auto 16px;
  object-fit: contain;
  transition: transform .25s ease;
}
.explora__item:hover .explora__shape { transform: translateY(-7px) rotate(-4deg); }

/* ==========================================================================
   9. Note card (post card = torn notebook paper)
   ========================================================================== */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  max-width: 1040px;
  margin: 0 auto;
}
.posts-grid--home { max-width: 1040px; }

.note-card {
  position: relative;
  background: #fff;
  border-radius: 6px 6px 8px 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.note-card__scene {
  aspect-ratio: 16 / 12;
  background: #bfe3f6 url('assets/img/scene.svg') center bottom / cover no-repeat;
  position: relative;
}
.note-card__scene img {
  width: 100%; height: 100%; object-fit: cover;
}
.note-card__tab {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  padding: 6px 16px 8px;
  transform: rotate(-1.5deg);
  clip-path: polygon(3% 18%, 12% 4%, 30% 12%, 52% 3%, 74% 12%, 92% 4%, 98% 22%, 96% 62%, 99% 92%, 78% 96%, 52% 90%, 26% 97%, 6% 90%, 1% 58%);
}
.note-card__paper {
  position: relative;
  flex: 1;
  min-height: 168px;
  padding: 26px 26px 28px 48px;
  background-color: var(--tint-blue);
  background-image:
    repeating-linear-gradient(transparent 0 27px, rgba(90, 120, 150, .28) 27px 28px),
    linear-gradient(90deg, transparent 0 33px, rgba(253, 102, 142, .5) 33px 35px, transparent 35px);
  background-position: 0 8px, 0 0;
}
.note-card__paper::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  bottom: 16px;
  width: 12px;
  border-radius: 8px;
  background-image: repeating-linear-gradient(transparent 0 8px, rgba(120, 110, 130, .4) 8px 15px, transparent 15px 18px);
}
.note-card--blue .note-card__paper { background-color: var(--tint-blue); }
.note-card--lavender .note-card__paper { background-color: var(--tint-lavender); }
.note-card--green .note-card__paper { background-color: var(--tint-green); }

.note-card__title {
  font-weight: 700;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 20px;
  color: var(--title-blue);
}
.note-card--lavender .note-card__title { color: var(--title-lavender); }
.note-card--green .note-card__title { color: var(--title-green); }

.note-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
}
.note-card__dek { font-weight: 500; font-style: italic; opacity: .85; }
.note-card__more {
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-end;
  font-family: 'Allura', cursive;
  font-size: 1.5rem;
  color: var(--ink);
}
.note-card:hover { transform: translateY(-4px); }
.note-card { transition: transform .2s ease; }

.load-more-wrap { text-align: center; margin-top: 48px; }

/* ==========================================================================
   10. Resource list (Recursos page)
   ========================================================================== */
.res-callout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
}
.res-callout__mark { width: 76px; flex-shrink: 0; }
.res-callout p { margin: 0; color: var(--ink-soft); }

.res-disclaimer { background: var(--hde-sky-soft); }

.res-group { padding: 54px 0; }
.res-group__title {
  position: relative;
  display: inline-block;
  font-family: 'Allura', cursive;
  font-size: clamp(2.7rem, 5vw, 3.7rem);
  font-weight: 400;
  line-height: .9;
  margin: 0 0 28px 1.5rem; /* pequeño desplazamiento a la derecha (~dos espacios) */
}
/* Hand-drawn flick sitting over the first letter, like an accent / tilde. */
.res-group__flick {
  position: absolute;
  left: -0.56em;
  top: -.58em;
  width: .78em;
  height: auto;
  transform: rotate(-8deg);
  pointer-events: none;
}
.res-group--leer .res-group__title { color: var(--c-blue); }
.res-group--crear .res-group__title { color: var(--c-butter); }
.res-group--remoto .res-group__title { color: var(--c-lavender); }
.res-group--favs .res-group__title { color: var(--c-green); }

.res-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 48px;
  max-width: 960px;
}
.res-item { display: flex; gap: 16px; }
.res-item__thumb {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #cfe6f6 url('assets/img/scene.svg') center / cover;
}
.res-item__name { font-weight: 700; margin: 0 0 2px; }
.res-item__links { margin: 0; font-size: .9rem; color: var(--muted); }
.res-item__links a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   11. Category / archive header
   ========================================================================== */
.cat-head {
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}
.cat-head__badge {
  width: 96px;
  height: 96px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-190px, -60%) rotate(-6deg);
  pointer-events: none;
}
@media (max-width: 620px) {
  .cat-head__badge { position: static; transform: rotate(-6deg); margin: 0 auto 8px; display: block; }
}

/* ==========================================================================
   12. Single post
   ========================================================================== */
.entry {
  max-width: 760px;
  margin: 0 auto;
}
.entry__scene {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 8;
  background: #bfe3f6 url('assets/img/scene.svg') center / cover no-repeat;
  margin-bottom: 30px;
  position: relative;
}
.entry__scene img { width: 100%; height: 100%; object-fit: cover; }
.entry__tab {
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .85);
  padding: 6px 16px 8px;
  transform: rotate(-1.5deg);
}
.entry__title {
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.12;
  margin: 0 0 10px;
}
.entry__meta {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 30px;
}
.entry__body { font-size: 1.08rem; color: var(--ink-soft); }
.entry__body h2 { font-size: 1.5rem; color: var(--ink); margin-top: 1.6em; }
.entry__body h3 { font-size: 1.2rem; color: var(--ink); margin-top: 1.4em; }
.entry__body img { border-radius: 10px; margin: 1.6em 0; box-shadow: var(--shadow-card); }
.entry__body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--c-coral);
  font-style: italic;
  color: var(--ink);
}
.entry__body a { text-decoration: underline; text-underline-offset: 2px; }
.entry__body ul, .entry__body ol { padding-left: 1.3em; }
.entry__body li { margin: .4em 0; }

.post-nav {
  max-width: 760px;
  margin: 46px auto 40px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.post-nav a { color: var(--ink); opacity: .8; }
.post-nav a:hover { opacity: 1; }

/* Comments */
.comments-area {
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(90, 69, 92, .15);
}
.comments-title { font-size: 1.3rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 30px; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body { padding: 16px 0; border-bottom: 1px solid rgba(90, 69, 92, .1); }
.comment-author .fn { font-weight: 700; font-style: normal; }
.comment-meta { font-size: .78rem; color: var(--muted); }
.comment-form { display: grid; gap: 14px; }
.comment-form label { font-size: .82rem; font-weight: 600; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 2px solid rgba(90, 69, 92, .2);
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  background: #fff;
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .form-submit input {
  border: 0;
  cursor: pointer;
}

/* ==========================================================================
   13. Contact page
   ========================================================================== */
.contact-block {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  max-width: 940px;
  margin: 0 auto;
}
.contact-block--rev { flex-direction: row-reverse; }
.contact-block__sticker { width: 120px; flex-shrink: 0; }
.contact-block p { margin: 0; font-size: 1.08rem; color: var(--ink-soft); }

.socials-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 34px;
}
.socials-row a {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  display: grid;
  place-items: center;
  color: var(--c-coral);
  box-shadow: 0 10px 18px rgba(90, 69, 92, .12);
  transition: transform .2s;
}
.socials-row a:hover { transform: translateY(-4px); }
.socials-row svg { width: 26px; height: 26px; }

/* ==========================================================================
   14. Site footer
   ========================================================================== */
.site-footer { color: #fff; }
.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.footer-brand { line-height: .78; text-align: left; }
.footer-brand small {
  display: block;
  font-family: 'Allura', cursive;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(90, 69, 92, .25);
}
.footer-brand strong {
  display: block;
  font-weight: 800;
  text-transform: lowercase;
  font-size: 2.1rem;
  color: var(--hde-cream);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.footer-sep { width: 2px; height: 54px; background: rgba(255, 255, 255, .55); }
.footer-socials { display: flex; gap: 14px; }
.footer-socials a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  display: grid;
  place-items: center;
  color: var(--c-coral);
}
.footer-socials svg { width: 20px; height: 20px; }
.footer-follow { line-height: 1.3; }
.footer-follow b {
  display: block;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
}
.footer-follow span { font-size: .82rem; opacity: .92; }

/* ==========================================================================
   15. Utilities / WP core
   ========================================================================== */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.aligncenter { margin-left: auto; margin-right: auto; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: .85rem; color: var(--muted); text-align: center; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.pagination .page-numbers {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-weight: 600;
  font-size: .85rem;
}
.pagination .current { background: var(--c-coral); color: #fff; }

/* ==========================================================================
   16. Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .search-toggle { position: static; transform: none; margin-left: auto; }
  .main-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    padding: 14px 24px 22px;
    background: rgba(169, 212, 240, .97);
    box-shadow: var(--shadow-soft);
  }
  body.nav-open .main-nav { display: flex; }
  .main-nav ul { flex-direction: column; gap: 4px; align-items: flex-start; }
  .main-nav a { padding: 8px 0; }

  .about-home { grid-template-columns: 1fr; gap: 40px; }
  .posts-grid { grid-template-columns: 1fr 1fr; }
  .res-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .posts-grid { grid-template-columns: 1fr; max-width: 420px; }
  .explora__item { width: 40%; }
  .contact-block, .contact-block--rev { flex-direction: column; align-items: center; text-align: center; }
  .res-callout { flex-direction: column; }
  .site-footer__inner { gap: 20px; }
  .footer-sep { display: none; }
}