/* JUPACH live graphic system: editorial spacing, flat controls, official palette.
   Inspiration: design galleries Godly / Minimal Gallery, not sector templates. */
:root {
  --jp-blue: #0F52BA;
  --jp-green: #008000;
  --jp-yellow: #FFEE41;
  --jp-red: #ED2100;
  --jp-orange: #F67239;
  --jp-ink: #231F20;
  --jp-cream: #FFF7E6;
  --jp-blue-wash: #F0F4FC;
  --jp-green-wash: #F2F8EE;
  --jp-line: #DDE5EF;
}

html body {
  background: #F5F7FB;
  color: var(--jp-ink);
  font-family: JupachMontserrat, Montserrat, Arial, sans-serif;
}

/* Remove the old extruded-button treatment in every state, including controls
   generated later by React, Leaflet, the calendar, and the language switcher. */
html body button,
html body [role="button"],
html body input[type="submit"],
html body input[type="button"],
html body input[type="reset"],
html body .button,
html body .header-cta,
html body .jp-header-cta,
html body .jp-hero-cta,
html body .je-news-all,
html body .je-story-more,
html body .card-link,
html body .cm-selection-actions a,
html body .cm-popup a,
html body .leaflet-control-zoom,
html body .leaflet-control-zoom a,
html body .social-button {
  --press-rest: 0px;
  --press-hover: 0px;
  --press-active: 0px;
  --press-edge: transparent;
  --press-shadow: transparent;
  --press-inset: none;
  box-shadow: none !important;
  text-shadow: none !important;
  translate: none !important;
  filter: none;
}

html body .button,
html body .header-cta,
html body .jp-header-cta,
html body .jp-hero-cta {
  transform: none !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
html body button { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }

html body .button { min-height: 44px; align-items: center; border-radius: 999px; font-weight: 600; }
html body .button.blue { background: var(--jp-blue); color: #fff; }
html body .button.green { background: var(--jp-green); color: #fff; }
html body .button.yellow { background: var(--jp-yellow); color: var(--jp-blue); }
html body .button.light { border: 1px solid var(--jp-line); background: #fff; color: var(--jp-blue); }
html body .button.blue:hover { background: #0B439B; }
html body .button.green:hover { background: #006B00; }
html body .button.yellow:hover { background: #F5E332; }
html body .button.light:hover { border-color: var(--jp-blue); background: var(--jp-blue-wash); }

/* Cream navigation, blue hierarchy, and the requested red/yellow languages. */
html body #jupach-header-root {
  border-bottom: 1px solid #E7DFCF;
  background: var(--jp-cream);
  box-shadow: none;
}
html body #jupach-header-root::before { background-image: none; }
html body #jupach-header-root .jp-header-nav a { color: #40536B; font-weight: 600; }
html body #jupach-header-root .jp-header-nav a:is(:hover, [aria-current="page"]) { color: var(--jp-blue); }
html body #jupach-header-root .jp-header-cta { border-color: var(--jp-yellow); background: var(--jp-yellow); color: var(--jp-blue); }
html body #jupach-header-root .jp-header-cta:hover { border-color: var(--jp-blue); background: #fff; }
html body #jupach-header-root .jp-language-switcher { background: var(--jp-red); border-color: var(--jp-red); }
html body #jupach-header-root .jp-language-switcher button { background: var(--jp-yellow); color: var(--jp-ink); }

html body #jupach-home-hero .hero-copy { color: #0F52BA; }
html body #jupach-home-hero .hero-eyebrow { color: #008000; }
html body #jupach-home-hero .hero-heading span { color: #008000; }
html body #jupach-home-hero .jp-hero-cta--secondary { border-color: #DDE5EF; color: #0F52BA; }

/* Large surfaces stay calm: no coloured strips or saturated yellow panels. */
html body main > .section,
html body main > .section.container,
html body main > .detail,
html body main > .community-finder,
html body main > .jupach-calendar,
html body main > #jupach-news-section {
  border: 0 !important;
  background: #FFFEFA !important;
  box-shadow: none;
}
html body main > #encuentra-tu-comunidad { background: var(--jp-green-wash) !important; }
html body main > #coordinaciones { background: var(--jp-blue-wash) !important; }
html body main > #jupach-gallery-section { background: var(--jp-cream) !important; }
html body main > #jupach-news-section { background: #fff !important; }
html body main .section .container.detail { border: 0 !important; background: transparent !important; box-shadow: none; }

html body main .section-title h2,
html body main .intro h2,
html body main .cm-heading h2,
html body main .detail > h1,
html body main .detail > h2 { color: var(--jp-blue); font-weight: 600; line-height: 1.16; letter-spacing: -.04em; }
html body main #jupach-news-section .section-title h2 { color: var(--jp-blue); font-weight: 600; }
html body main .section-title .eyebrow,
html body main .intro .eyebrow,
html body main .detail > .eyebrow { color: var(--jp-green); }
html body main .history-note { background: var(--jp-blue-wash); border: 0; }
html body main .detail .facts div { background: var(--jp-blue-wash); }

/* One card language: white surfaces, fine neutral borders, restrained colour
   in the graphic areas. Text uses ink/blue rather than low-contrast orange. */
html body .jf-card { --jf-accent: #0F52BA; --jf-tint: #EAF0FB; background: #fff; border-color: var(--jp-line); }
html body .jf-card[data-tone="1"] { --jf-accent: #008000; --jf-tint: #EAF3E4; }
html body .jf-card[data-tone="2"] { --jf-accent: #F67239; --jf-tint: #FFF0E6; }
html body .jf-card[data-tone="3"] { --jf-accent: #ED2100; --jf-tint: #FDECE7; }
html body .jf-card[data-expanded="true"] { border-color: var(--jp-blue); }
html body .jf-card[data-expanded="true"]:hover { border-color: var(--jp-blue); }
html body .jf-card .jf-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--jf-tint); color: var(--jp-ink); font-size: 11px; font-weight: 600; letter-spacing: 0; }
html body .jf-card .jf-badge::before { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--jf-accent); content: ''; }
html body .jf-card .jf-toggle { border: 0; background: var(--jp-blue-wash); color: var(--jp-blue); }
html body .jf-card .jf-toggle:hover { background: var(--jp-blue); color: #fff; }
html body .jf-card[data-expanded="true"] .jf-toggle { background: var(--jp-blue); color: #fff; }
html body .jf-card .jf-copy h3 { color: var(--jp-ink); }
html body .jf-card .jf-original > strong { color: var(--jp-ink); }
html body .jf-card .jf-original .button,
html body .jf-card .jf-original .card-link { min-height: 44px; border: 0; background: transparent !important; color: var(--jp-blue) !important; }
html body .jf-card .jf-art::after { background: linear-gradient(180deg, #fff, #ffffff00 26%); }
html body .jf-row > .jf-card:only-child .jf-art::after { background: linear-gradient(90deg, #fff, #ffffff00 32%); }
html body .value-grid .jf-card[data-expanded="true"] .jf-art::after { background: linear-gradient(180deg, #fff, #ffffff00 26%); }

#jupach-news-root .je-story-more { color: #0F52BA; }
#jupach-news-root .je-story-share { border-color: #DDE5EF; background: #F0F4FC; color: #0F52BA; }
#jupach-news-root .je-story-share:hover { background: #FFEE41; }
html body #jupach-news-root .je-news-all { border-color: #0F52BA; background: #0F52BA; color: #fff; font-weight: 600; }
html body #jupach-news-root .je-news-all:hover { background: #0B439B; color: #fff; }
html body .jp-group-card .jp-group-region { background: #FFF7E6F2; color: #231F20; border: 0; }

/* Community, forms and calendar use the same blue/green control hierarchy. */
html body main .form { border-color: var(--jp-line); background: #fff; }
html body main .form :is(input,textarea,select) { border-color: #C8D5E5; color: var(--jp-ink); }
html body main .community-finder { --cm-blue: #0F52BA; --cm-green: #008000; --cm-red: #ED2100; }
html body main .cm-filter { border-color: var(--jp-line); background: #fff; color: var(--jp-blue); }
html body main .cm-filter[aria-pressed="true"] { border-color: var(--jp-blue); background: var(--jp-blue); color: #fff; }
html body main .cm-group button:hover { background: var(--jp-blue-wash); }
html body main .cm-group button[aria-pressed="true"] { border-color: #C2D2EC; background: var(--jp-blue-wash); }
html body main .cm-selection { background: #fff; }
html body main #calendario-noticias { --jc-green: #008000; --jc-ink: #231F20; --jc-line: #DDE5EF; }
html body main #calendario-noticias .jupach-calendar__main,
html body main #calendario-noticias .jupach-calendar__sidebar { border: 1px solid #DDE5EF !important; background: #fff; box-shadow: none; }
html body main #calendario-noticias::before { display: none; }
html body main #calendario-noticias .jupach-calendar__title { color: #0F52BA; font-weight: 600; }
html body main #calendario-noticias .jupach-calendar__table th { background: #F2F8EE; }
html body main #calendario-noticias .jupach-calendar__nav:hover { background: #F0F4FC; translate: none; }
html body main #calendario-noticias .jupach-calendar__options { background: #F0F4FC; }
html body main #calendario-noticias .jupach-calendar__quote { background: #F2F8EE; }

/* Flat social buttons retain platform artwork; remove the shaded edge layers. */
html body .footer { border-top: 0; background: #0F52BA; }
html body .footer .social-button::before,
html body .footer .social-button__bg { display: none !important; }
html body .footer .social-button .social-button__icon { transform: none !important; box-shadow: none !important; filter: none !important; transition: opacity 180ms ease; }
html body .footer .social-button:hover .social-button__icon { opacity: .85; }
html body .footer h4 { color: #FFEE41; font-weight: 600; }

/* Preserve visible keyboard focus without recreating a shadow. */
html body button:focus-visible,
html body a[href]:focus-visible,
html body .button:focus-visible,
html body .social-button:focus-visible { outline: 3px solid #0F52BA; outline-offset: 4px; }
html body .footer .social-button:focus-visible { outline-color: #FFEE41; }
html body .footer a[href]:focus-visible { outline-color: #FFEE41; }

@media (min-width: 1200px) {
  html body #jupach-home-hero .hero-copy { color: #fff; }
  html body #jupach-home-hero .hero-eyebrow { color: #FFEE41; }
  html body #jupach-home-hero .hero-heading span { color: #FFEE41; }
}

@media (min-width: 901px) {
  html body .jf-card[data-expanded="true"] .jf-art::after { background: linear-gradient(90deg, #fff, #ffffff00 32%); }
  html body .value-grid .jf-card[data-expanded="true"] .jf-art::after { background: linear-gradient(180deg, #fff, #ffffff00 26%); }
}
@media (max-width: 900px) {
  html body .jf-row > .jf-card:only-child .jf-art::after { background: linear-gradient(180deg, #fff, #ffffff00 26%); }
}
@media (prefers-reduced-motion: reduce) {
  html body button, html body .button, html body .social-button__icon { transition: none !important; }
}
