/*
Theme Name: Kleball Kadence
Theme URI: https://kleball.com/
Author: Kleball
Description: Tema hijo mínimo de Kadence para la identidad visual y el directorio de Kleball.
Version: 0.2.5
Requires at least: 7.0
Requires PHP: 8.3
Template: kadence
Text Domain: kleball
License: Proprietary
*/

@layer base, components, utilities;

@layer base {
  :root {
    --kb-ink: #101820;
    --kb-brand: #b83c0b;
    --kb-brand-dark: #8f2e08;
    --kb-canvas: #faf9f6;
    --kb-surface: #fff;
    --kb-muted: #52606d;
    --kb-border: #d8ddd9;
    --kb-focus: #075985;
    --kb-radius: 1rem;
    --kb-shadow: 0 1rem 3rem rgb(15 23 42 / 8%);
    --kb-content: 72rem;
    --kb-reading: 48rem;
    --global-palette1: var(--kb-brand);
    --global-palette2: var(--kb-brand-dark);
    --global-palette3: var(--kb-ink);
    --global-palette4: #27323a;
    --global-palette5: var(--kb-muted);
    --global-palette6: #718096;
    --global-palette7: #edf0ed;
    --global-palette8: #f4f4f1;
    --global-palette9: var(--kb-surface);
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--kb-canvas);
    color: var(--kb-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    text-wrap: pretty;
  }
  :where(h1, h2, h3) { text-wrap: balance; }
  :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--kb-focus);
    outline-offset: 3px;
  }
  .site-branding .custom-logo { width: auto; max-height: 3.15rem; }
  .site-title { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: -.025em; }
  .site-main :where(h1, h2, h3) { line-height: 1.16; }
  .content-area { margin-block: clamp(2rem, 5vw, 4.5rem); }
  .entry-content :where(p, li) { max-width: 72ch; }
  .entry-content li + li { margin-block-start: .35rem; }
  .entry-content :where(h2, h3) { scroll-margin-top: 6rem; }
  .entry-content h2 { margin-block: clamp(2.5rem, 6vw, 4.5rem) 1rem; font-size: clamp(1.75rem, 4vw, 2.6rem); }
  .entry-content h3 { margin-block: 2rem .75rem; font-size: clamp(1.35rem, 3vw, 1.8rem); }
  .entry-content img { height: auto; }
}

@layer components {
  .site-header-row-container-inner {
    border-block-end: 1px solid color-mix(in srgb, var(--kb-border) 82%, transparent);
    box-shadow: 0 .35rem 1.5rem rgb(15 23 42 / 4%);
  }
  .primary-menu-container > ul > li.menu-item > a { font-weight: 700; }
  .primary-menu-container > ul > li.current-menu-item > a,
  .primary-menu-container > ul > li.current-menu-ancestor > a { color: var(--kb-brand); }
  .entry-hero-container-inner {
    background: linear-gradient(135deg, #f3f6f3 0%, #e9eff1 100%);
    border-block-end: 1px solid var(--kb-border);
  }
  .entry-hero-container-inner .entry-header {
    min-height: clamp(8rem, 15vw, 11.5rem);
    padding-block: clamp(2rem, 5vw, 3.5rem);
  }
  .entry-hero .entry-title {
    max-width: 22ch;
    margin-inline: auto;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -.045em;
  }
  .content-bg,
  .loop-entry {
    border: 1px solid color-mix(in srgb, var(--kb-border) 82%, transparent);
    border-radius: var(--kb-radius);
    box-shadow: 0 .75rem 2.5rem rgb(15 23 42 / 5%);
  }
  .entry-content > :first-child { margin-block-start: 0; }
  .entry-content > :last-child { margin-block-end: 0; }
  .entry-content a { text-underline-offset: .16em; text-decoration-thickness: .075em; }
  .entry-content :where(.wp-block-button__link, a:has(> p)) {
    min-height: 2.85rem;
    padding: .72rem 1.15rem;
    border-radius: .65rem;
    background: var(--kb-brand);
    color: #fff;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
  }
  .entry-content :where(.wp-block-button__link, a:has(> p)):hover { background: var(--kb-brand-dark); color: #fff; }
  .wp-block-button.is-style-kleball-outline .wp-block-button__link {
    border: 2px solid var(--kb-brand);
    background: transparent;
    color: var(--kb-brand-dark);
  }
  .wp-block-group.is-style-kleball-panel,
  .kb-pattern-panel {
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-surface);
    box-shadow: var(--kb-shadow);
  }
  .wp-block-image.is-style-kleball-rounded img { border-radius: var(--kb-radius); }
  .kb-pattern-hero { overflow: hidden; border-radius: calc(var(--kb-radius) * 1.25); background: #edf0ed; }
  .kb-pattern-feature-grid { gap: 1rem; }
  .kb-eyebrow {
    color: var(--kb-brand-dark);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .home .entry-hero .entry-title { max-width: 18ch; }
  .home .site-main > article { border: 0; background: transparent; box-shadow: none; }
  .home .entry-content { max-width: var(--kb-content); margin-inline: auto; }
  .home .entry-content > :empty { display: none; }
  .home .entry-content > h2:first-of-type {
    margin-block: 0 .65rem;
    color: var(--kb-brand-dark);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .home .entry-content > h2:nth-of-type(2) { display: none; }
  .home .entry-content > p:first-of-type { max-width: 62ch; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--kb-muted); }
  .home .entry-content > a:has(> p) { display: inline-flex; align-items: center; margin: .4rem .65rem .4rem 0; }
  .home .entry-content > a[href*="donde-jugar"] { border: 2px solid var(--kb-brand); background: transparent; color: var(--kb-brand-dark); }
  .home .entry-content > h2:not(:first-of-type) { padding-block-start: clamp(1.5rem, 4vw, 2.5rem); border-block-start: 1px solid var(--kb-border); }
  .home .entry-content > p > img[width="1024"] { width: 100%; border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); }
  .home .entry-content > h4:has(img) {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-block: 1.25rem 0;
    padding: 1.15rem 1.15rem .45rem;
    border: 1px solid var(--kb-border);
    border-block-end: 0;
    border-radius: var(--kb-radius) var(--kb-radius) 0 0;
    background: var(--kb-surface);
  }
  .home .entry-content > h4:has(img) + p {
    margin-block-start: 0;
    padding: .45rem 1.15rem 1.15rem;
    border: 1px solid var(--kb-border);
    border-block-start: 0;
    border-radius: 0 0 var(--kb-radius) var(--kb-radius);
    background: var(--kb-surface);
  }
  .home .entry-content > h4 img { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; object-fit: contain; }

  .blog .loop-entry,
  .archive .loop-entry { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
  .blog .loop-entry:hover,
  .archive .loop-entry:hover { transform: translateY(-.2rem); box-shadow: var(--kb-shadow); }
  .loop-entry .post-thumbnail { aspect-ratio: 4 / 3; }
  .loop-entry .post-thumbnail-inner,
  .loop-entry .post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
  .loop-entry .entry-title { line-height: 1.12; letter-spacing: -.025em; }
  .loop-entry .entry-meta { color: var(--kb-muted); font-size: .86rem; }
  .loop-entry .entry-summary { color: var(--kb-muted); }
  .post-more-link { font-weight: 750; }

  .single-post .content-container { max-width: 76rem; }
  .single-post .article-post-thumbnail { overflow: hidden; border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); }
  .single-post .article-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
  .single-post .entry-content { max-width: var(--kb-reading); margin-inline: auto; }
  .single-post .entry-meta { color: var(--kb-muted); font-size: .88rem; }
  .single-post .entry-taxonomies { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

  .kb-footer-navigation-wrap { border-block-start: 1px solid var(--kb-border); background: #edf0ed; }
  .kb-footer-navigation { padding-block: 1rem; }
  .kb-footer-navigation ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
  .kb-footer-navigation a { color: var(--kb-ink); font-size: .92rem; font-weight: 650; }
  .site-footer { color: var(--kb-muted); }

  .kb-directory,
  .kb-facility-single { min-width: 0; }
  .kb-directory-intro { max-width: 52rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
  .kb-directory-intro h1,
  .kb-facility-header h1 {
    margin-block: 0 .75rem;
    font-size: clamp(2.3rem, 7vw, 4.6rem);
    line-height: 1.04;
  }
  .kb-directory-intro p,
  .kb-facility-location { color: var(--kb-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }
  .kb-directory-filters {
    margin-block: 2rem 1rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-surface);
  }
  .kb-directory-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
  }
  .kb-directory-filter-grid p { margin: 0; }
  .kb-directory-filter-grid label { display: block; margin-block-end: .35rem; font-weight: 700; }
  .kb-directory-filter-grid :is(input, select) {
    width: 100%;
    min-height: 2.8rem;
    padding: .65rem .75rem;
    border: 1px solid #8a949c;
    border-radius: .45rem;
    background: var(--kb-surface);
    color: var(--kb-ink);
    font: inherit;
    font-weight: 400;
  }
  .kb-directory-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 1rem; }
  .kb-directory-filter-actions button,
  .kb-directory-cta button {
    min-height: 2.8rem;
    padding: .72rem 1.1rem;
    border: 0;
    border-radius: .6rem;
    background: var(--kb-brand);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .kb-directory-filter-actions button:hover,
  .kb-directory-cta button:hover { background: var(--kb-brand-dark); }
  .kb-directory-result-count { margin-block: 1rem 1.5rem; color: var(--kb-muted); }
  .kb-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
  }
  .kb-facility-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-surface);
  }
  .kb-facility-card:hover { box-shadow: var(--kb-shadow); }
  .kb-facility-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #edf0ed; }
  .kb-facility-card-media img { width: 100%; height: 100%; object-fit: cover; }
  .kb-facility-card-placeholder { width: 100%; height: 100%; background: linear-gradient(145deg, #edf0ed, #d8ddd9); }
  .kb-facility-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
  .kb-facility-card h2 { margin: 0 0 .75rem; font-size: clamp(1.35rem, 3vw, 1.65rem); }
  .kb-facility-card h2 a { color: var(--kb-ink); text-decoration-thickness: .08em; text-underline-offset: .15em; }
  .kb-facility-card-body > :last-child { margin-block-start: auto; }
  .kb-facility-card-meta { color: var(--kb-muted); font-size: .925rem; }
  .kb-card-link { font-weight: 700; }
  .kb-directory-empty { padding: 1.5rem; border-radius: var(--kb-radius); background: var(--kb-surface); }
  .kb-directory-cta {
    margin-block-start: clamp(2.5rem, 7vw, 5rem);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border-radius: var(--kb-radius);
    background: #edf0ed;
  }
  .kb-facility-request { display: grid; gap: 1rem; max-width: 52rem; }
  .kb-facility-request fieldset {
    display: grid;
    gap: .875rem;
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-surface);
  }
  .kb-facility-request p { margin: 0; }
  .kb-facility-request label:not(:has(input[type="checkbox"])) { display: block; font-weight: 700; }
  .kb-facility-request :is(input:not([type="checkbox"]), select, textarea) {
    width: 100%;
    margin-block-start: .35rem;
    padding: .75rem;
    border: 1px solid #8a949c;
    border-radius: .45rem;
    font: inherit;
    font-weight: 400;
  }
  .kb-facility-request > br,
  .kb-facility-request > p:empty { display: none; }
  .kb-back-link { margin-block-end: 1.25rem; }
  .kb-facility-header { max-width: 58rem; margin-block-end: 1.5rem; }
  .kb-facility-hero { margin-block: 1.5rem 2rem; overflow: hidden; border-radius: var(--kb-radius); }
  .kb-facility-hero img { display: block; width: 100%; max-height: 42rem; aspect-ratio: 16 / 9; object-fit: cover; }
  .kb-facility-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1px;
    overflow: hidden;
    margin-block: 2rem;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-border);
  }
  .kb-facility-facts > div { min-width: 0; padding: 1rem; background: var(--kb-surface); }
  .kb-facility-facts dt { font-size: .9rem; font-weight: 700; }
  .kb-facility-facts dd { margin: .35rem 0 0; overflow-wrap: anywhere; }
  .kb-facility-content { max-width: 52rem; }
  .kb-facility-section { margin-block: 2rem; }
  .kb-facility-section li + li { margin-block-start: .5rem; }
  .kb-correction-link { margin-block-start: 2.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--kb-border); }
  .kb-honeypot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .kb-form-notice { padding: 1rem; border-inline-start: .3rem solid currentColor; }
  .kb-form-notice--success { color: #166534; background: #f0fdf4; }
  .kb-form-notice--error { color: #991b1b; background: #fef2f2; }
}

@layer utilities {
  .screen-reader-text:focus { inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 100000; }
}

@media (max-width: 719px) {
  .entry-hero-container-inner .entry-header { min-height: 7rem; }
  .entry-hero .entry-title { text-align: left; }
  .home .entry-content > a:has(> p) { display: flex; width: 100%; justify-content: center; margin-inline-end: 0; }
  .kb-footer-navigation ul { flex-direction: column; gap: .55rem; }
  .kb-directory-grid { grid-template-columns: 1fr; }
  .kb-facility-card { max-width: 34rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/*
 * Kadence publica parte de sus estilos sin cascade layers. Estas reglas
 * deliberadamente no pertenecen a una capa para que el acabado del tema hijo
 * prevalezca sin recurrir a !important ni aumentar innecesariamente la
 * especificidad.
 */
.content-bg,
.loop-entry {
  border: 1px solid color-mix(in srgb, var(--kb-border) 82%, transparent);
  border-radius: var(--kb-radius);
  box-shadow: 0 .75rem 2.5rem rgb(15 23 42 / 5%);
}

.blog .loop-entry,
.archive .loop-entry,
.single-post .article-post-thumbnail {
  overflow: hidden;
  border-radius: var(--kb-radius);
}

/* Portada normalizada con bloques nativos. */
.home .kb-pattern-hero {
  margin-block-end: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  border: 1px solid var(--kb-border);
  border-radius: calc(var(--kb-radius) * 1.25);
  background: linear-gradient(135deg, #f3f6f3 0%, #e9eff1 100%);
}
.home .kb-pattern-hero .kb-eyebrow { margin-block: 0 .65rem; }
.home .kb-home-legacy-title,
.home .kb-home-legacy-label { display: none; }
.home .kb-home-lead { max-width: 62ch; color: var(--kb-muted); font-size: clamp(1.1rem, 2vw, 1.3rem); }
.home .kb-pattern-hero .wp-block-buttons { gap: .65rem; margin-block-start: 1.25rem; }
.home .kb-home-section {
  margin-block: clamp(2rem, 6vw, 4.5rem);
  padding-block-start: clamp(1.5rem, 4vw, 2.5rem);
  border-block-start: 1px solid var(--kb-border);
}
.home .kb-home-section > .wp-block-heading:first-child { margin-block-start: 0; }
.home .kb-home-section > .wp-block-image { margin-block: 1.5rem 2rem; }
.home .kb-home-section > .wp-block-image img { width: 100%; }
.home .kb-home-section > h4:has(img) {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-block: 1.25rem 0;
  padding: 1.15rem 1.15rem .45rem;
  border: 1px solid var(--kb-border);
  border-block-end: 0;
  border-radius: var(--kb-radius) var(--kb-radius) 0 0;
  background: var(--kb-surface);
}
.home .kb-home-section > h4:has(img) + p {
  margin-block-start: 0;
  padding: .45rem 1.15rem 1.15rem;
  border: 1px solid var(--kb-border);
  border-block-start: 0;
  border-radius: 0 0 var(--kb-radius) var(--kb-radius);
  background: var(--kb-surface);
}
.home .kb-home-section > h4 img { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; object-fit: contain; }

.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
  min-height: 2.85rem;
  padding: .72rem 1.15rem;
  border-radius: .65rem;
  background: var(--kb-brand);
  color: #fff;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus-visible,
.entry-content .wp-element-button:hover,
.entry-content .wp-element-button:focus-visible {
  background: var(--kb-brand-dark);
  color: #fff;
}

/* Páginas pilar normalizadas con índice y secciones nativas. */
.kb-pillar-intro {
  margin-block-end: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--kb-border);
  border-radius: calc(var(--kb-radius) * 1.25);
  background: linear-gradient(135deg, #f3f6f3 0%, #e9eff1 100%);
}
.kb-pillar-intro > .wp-block-image:first-child { margin-block: 0 1.75rem; }
.kb-pillar-intro > .wp-block-image:first-child img { width: 100%; max-height: 34rem; aspect-ratio: 16 / 9; object-fit: cover; }
.kb-pillar-toc {
  columns: 2 18rem;
  gap: 2rem;
  margin-block: 1.5rem 0;
  padding: 1.25rem 1.25rem 1.25rem 2.5rem;
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  background: var(--kb-surface);
}
.kb-pillar-toc li { break-inside: avoid; margin-block-end: .45rem; }
.kb-pillar-toc a { font-weight: 650; }
.kb-pillar-section {
  margin-block: clamp(2rem, 6vw, 4.5rem);
  padding-block-start: clamp(1.5rem, 4vw, 2.5rem);
  border-block-start: 1px solid var(--kb-border);
}
.kb-pillar-section > .wp-block-heading:first-child { margin-block-start: 0; scroll-margin-top: 6rem; }
.kb-pillar-section .wp-block-table { overflow-x: auto; }
.kb-pillar-section .wp-block-table table { min-width: 38rem; border-collapse: collapse; }
.kb-pillar-section .wp-block-table :is(th, td) { padding: .75rem; border: 1px solid var(--kb-border); text-align: left; }
.kb-pillar-section .wp-block-table th { background: #edf0ed; }
.kb-pillar-cta {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--kb-brand) 28%, var(--kb-border));
  border-radius: var(--kb-radius);
  background: #fff7ed;
}

@media (max-width: 719px) {
  .kb-pillar-toc { columns: 1; }
}