:root {
  --jc-radius: 18px;
  --jc-transition: 180ms ease;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.wp-site-blocks { padding-left: 0; padding-right: 0; }
.wp-site-blocks > * { margin-block-start: 0; }

.jc-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(24, 32, 51, 0.08);
  border-bottom: 4px solid var(--wp--preset--color--luque-gold);
}
.admin-bar .jc-site-header { top: 32px; }

.jc-card {
  height: 100%;
  overflow: hidden;
  transition: transform var(--jc-transition), box-shadow var(--jc-transition);
}
.jc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--lift);
}
.jc-card img,
.jc-branch-thumb img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.jc-branch-thumb {
  margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--30);
  overflow: hidden;
}
.jc-branch-thumb img { border-radius: 0 !important; }
.jc-branch-badge {
  display: inline-block;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
}
.jc-card--manada { border-top: 6px solid var(--wp--preset--color--manada); }
.jc-card--scouts { border-top: 6px solid var(--wp--preset--color--scouts); }
.jc-card--caminantes { border-top: 6px solid var(--wp--preset--color--caminantes); }
.jc-card--rovers { border-top: 6px solid var(--wp--preset--color--rovers); }
.jc-card--dirigentes { border-top: 6px solid var(--wp--preset--color--dirigentes); }
.jc-card--padres { border-top: 6px solid var(--wp--preset--color--luque-gold); }

.jc-hero { min-height: min(78vh, 760px); }
.jc-hero .wp-block-cover__inner-container { width: 100%; }
.jc-kicker { letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.jc-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.jc-section-tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.jc-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }

.jc-query-card .wp-block-post-featured-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.jc-query-card { height: 100%; }

.jc-footer a,
.jc-footer .wp-block-navigation a {
  color: inherit;
  text-decoration: none;
}
.jc-footer a:hover,
.jc-footer .wp-block-navigation a:hover { text-decoration: underline; }

.wp-block-navigation__responsive-container.is-menu-open {
  padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 3rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
  border-width: 2px;
}

.jc-whatsapp .wp-block-button__link::before {
  content: "↗";
  margin-right: .45rem;
}

@media (max-width: 782px) {
  .admin-bar .jc-site-header { top: 46px; }
  .jc-hero { min-height: 70vh; }
}

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

/* Visible rhythm between homepage sections. */
.jc-section,
.jc-section-tight {
  position: relative;
  isolation: isolate;
}
.jc-section::before,
.jc-section-tight::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--wp--preset--color--luque-gold);
  z-index: 2;
}
.jc-section > *,
.jc-section-tight > * {
  position: relative;
  z-index: 1;
}

/* Stronger visual grouping in both frontend and Site Editor. */
.jc-section.has-white-background-color,
.jc-section:not(.has-background) {
  background: #ffffff;
}
.jc-section.has-paper-background-color {
  background: var(--wp--preset--color--paper);
}
.jc-section.has-sky-background-color {
  background: var(--wp--preset--color--sky);
}

.editor-styles-wrapper .jc-section,
.editor-styles-wrapper .jc-section-tight {
  margin-block: 0 !important;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.editor-styles-wrapper .jc-card {
  min-height: 100%;
  box-shadow: 0 10px 28px rgba(23, 23, 140, 0.10);
}
.editor-styles-wrapper .jc-branch-thumb {
  min-height: 150px;
  background: #eef2ff;
}

@media (max-width: 782px) {
  .jc-section::before,
  .jc-section-tight::before { height: 6px; }
}


/* Explicit color fallbacks.
 * These keep section colors visible even when Gutenberg does not emit
 * preset utility classes inside the Site Editor iframe.
 */
.has-luque-blue-background-color,
.editor-styles-wrapper .has-luque-blue-background-color {
  background-color: #17178c !important;
}
.has-luque-blue-soft-background-color,
.editor-styles-wrapper .has-luque-blue-soft-background-color {
  background-color: #2c4999 !important;
}
.has-luque-gold-background-color,
.editor-styles-wrapper .has-luque-gold-background-color {
  background-color: #fdc70b !important;
}
.has-paper-background-color,
.editor-styles-wrapper .has-paper-background-color {
  background-color: #fff8e2 !important;
}
.has-sky-background-color,
.editor-styles-wrapper .has-sky-background-color {
  background-color: #eef2ff !important;
}
.has-dirigentes-background-color,
.editor-styles-wrapper .has-dirigentes-background-color {
  background-color: #51277d !important;
}
.has-white-background-color,
.editor-styles-wrapper .has-white-background-color {
  background-color: #fff !important;
}

.has-white-color,
.editor-styles-wrapper .has-white-color {
  color: #fff !important;
}
.has-luque-blue-color,
.editor-styles-wrapper .has-luque-blue-color {
  color: #17178c !important;
}
.has-luque-gold-color,
.editor-styles-wrapper .has-luque-gold-color {
  color: #fdc70b !important;
}
.has-ink-color,
.editor-styles-wrapper .has-ink-color {
  color: #182033 !important;
}

/* Contact section: explicit identity and contrast. */
.jc-contact-section,
.editor-styles-wrapper .jc-contact-section {
  background: #2c4999 !important;
  color: #fff !important;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.jc-contact-section h2,
.jc-contact-section p,
.editor-styles-wrapper .jc-contact-section h2,
.editor-styles-wrapper .jc-contact-section p {
  color: #fff !important;
}
.jc-contact-section > .wp-block-group,
.editor-styles-wrapper .jc-contact-section > .wp-block-group {
  width: 100%;
}

/* Make every homepage section visually distinct without relying on presets. */
.jc-section.has-paper-background-color { background: #fff8e2 !important; }
.jc-section.has-sky-background-color { background: #eef2ff !important; }
.jc-section.has-luque-blue-background-color { background: #17178c !important; }
.jc-section-tight.has-luque-gold-background-color { background: #fdc70b !important; }
