/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors */
  --background-color: var(--neutral-white);
  --light-color: var(--color-surface-primary);
  --text-color: var(--color-neutral-dark);
  --link-color: var(--color-primary);
  --link-hover-color: var(--color-primary-hover);

  /* fonts */
  --body-font-family: "Gilroy", "Gilroy-fallback", sans-serif;
  --heading-font-family: "Gilroy", "Gilroy-fallback", sans-serif;

  /* body sizes */
  --body-font-size: 14px;
  --body-line-height: 22px;

  /* heading sizes */
  --heading-font-size-xxl: 55px;
  --heading-font-size-xl: 44px;
  --heading-font-size-l: 34px;
  --heading-font-size-m: 27px;
  --heading-font-size-s: 24px;
  --heading-font-size-xs: 22px;

  /* nav height */
  --nav-height: 56px;
}

@media (width >= 900px) {
  :root {
    /* body sizes */
    --body-font-size: 16px;
    --body-line-height: 24px;

    /* heading sizes */
    --heading-font-size-xxl: 45px;
    --heading-font-size-xl: 36px;
    --heading-font-size-l: 28px;
    --heading-font-size-m: 22px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
  }
}

@media (width >= 1200px) {
  :root {
    /* nav height */
    --nav-height: 107px;
  }
}

/* fallback font — CLS-tuned to Gilroy's metrics (x-height ratio vs Arial) */
@font-face {
  font-family: Gilroy-fallback;
  size-adjust: 96.42%;
  src: local('Arial');
}

/* body */
body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
}

body.appear {
  display: block;
}

/* header and footer */
header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

/* sections */
main > .section {
  /* Shared width tokens — consumed by both the default per-wrapper rule
   * below and by section-scoped layouts (e.g. `.section.section-card-noticia`).
   * Change these in one place and every section stays in sync. */
  --section-content-max-width: 1220px;
  --section-content-padding-inline: 24px;

  margin: 40px 0;
}

main > .section > div {
  max-width: var(--section-content-max-width);
  margin: auto;
  padding: 0 var(--section-content-padding-inline);
}

main > .section:first-of-type {
  margin-top: 0;
}

/* Section style — remueve el margin vertical por defecto (40px 0). */
main > .section.no-margin {
  margin: 0;
}

@media (width >= 900px) {
  main > .section {
    --section-content-padding-inline: 20px;
  }
}

/* Fuente de botones: the section owns the shared content width while each
 * Button wrapper becomes an intrinsic-size flex item. Wrapping keeps the row
 * usable on narrow screens without forcing individual buttons to full width. */
main > .section.buttons-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: var(--section-content-max-width);
  margin-inline: auto;
  padding-inline: var(--section-content-padding-inline);
  box-sizing: border-box;
}

main > .section.buttons-source > div {
  max-width: none;
  margin: 0;
  padding: 0;
}

main > .section.buttons-source > .button-wrapper {
  flex: 0 0 auto;
}

main > .section.buttons-source > :not(.button-wrapper) {
  flex: 1 0 100%;
}

/* section metadata */
main .section.light,
main .section.highlight {
  padding-block: 40px;
  background-color: var(--light-color);
}

/* Section Card Noticia — layout for a two-column section (main content +
 * right rail). Mobile-first: single column with a large gap; on desktop the
 * two blocks sit side-by-side inside the standard section content width.
 *
 * Selectors are POSITIONAL (first / second direct child) rather than tied
 * to specific block wrapper class names — so the pair can be swapped for
 * any other two blocks tomorrow without touching this CSS.
 *
 *  • Mobile (< 900 px): stacked column, 80 px gap, centered.
 *  • Desktop (≥ 900 px): row, 40 px gap. The two children share space with
 *    a 5:2 grow ratio (mirrors the Figma 800:320 proportion). The first
 *    child caps at 800 px; on narrower widths BOTH shrink proportionally
 *    so the second child never collapses to a slim strip.
 *
 * When one of the blocks is disabled (e.g. the sidebar toggle sets
 * `display: none` on its `.block`), its wrapper still exists as a flex
 * item; add `min-width: 0` on it so it collapses to zero when empty.
 */
main .section.section-card-noticia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;

  /* Inherit the same width cap + horizontal padding as any other section
   * via the shared vars declared on `main > .section` above. */
  max-width: var(--section-content-max-width);
  margin-inline: auto;
  padding: 0 var(--section-content-padding-inline);
  box-sizing: border-box;
}

/* Reset the default per-wrapper 1220 px cap + auto margins so the flex
 * layout drives the sizing. */
main .section.section-card-noticia > div {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

main .section.section-card-noticia > div:first-child {
  max-width: 800px;
}

@media (width >= 900px) {
  main .section.section-card-noticia {
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
  }

  /* First child: main content — grows to fill space up to 800 px. */
  main .section.section-card-noticia > div:first-child {
    flex: 5 1 0;
    max-width: 800px;
    min-width: 0;
    width: auto;
  }

  /* Second child: right rail — takes the remaining share (5:2 ratio). */
  main .section.section-card-noticia > div:nth-child(2) {
    flex: 2 1 0;
    min-width: 0;
    width: auto;
  }
}

/* titles and headings — only "clean" Adobe content headings.
 * Headings decorated with classes (blocks, design-system components) own their
 * own typography and must not be overridden by these global rules. */
h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 600;
  line-height: 1.25;
  scroll-margin: 40px;
}

h1:not([class]) { font-size: var(--heading-font-size-xxl); }
h2:not([class]) { font-size: var(--heading-font-size-xl); }
h3:not([class]) { font-size: var(--heading-font-size-l); }
h4:not([class]) { font-size: var(--heading-font-size-m); }
h5:not([class]) { font-size: var(--heading-font-size-s); }
h6:not([class]) { font-size: var(--heading-font-size-xs); }

/* paragraphs, lists, and blockquotes */
p,
dl,
ol,
ul,
pre,
blockquote {
  margin: 0;
}

code,
pre {
  font-size: var(--body-font-size);
}

pre {
  padding: 15px;
  border-radius: 5px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

/* form elements */
input,
textarea,
select,
button {
  font: inherit;
}

/* images */
main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* links — only "clean" Adobe content anchors.
 * Anchors decorated with classes (blocks, design-system components) own their
 * own styling and must not be overridden by these global rules. */
a:not([class]):any-link {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:not([class]):hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}