/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for AgoraTheme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.373 0.031 259.733);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Noto Sans", "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

html[data-dmt-mode="dark"] {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Noto Sans", "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/* ==========================================================================
   Rich-text typography fidelity — Figma design system parity.
   These rules guarantee that H1-H4 and P inside editorial rich-text
   containers honour the Agora design tokens regardless of the surrounding
   component, overriding the Tailwind preflight base-element styles which
   would otherwise scale headings responsively to 48–60px / weight 600.
   Loaded after build/main.min.css so they win in the cascade.
   Figma reference: node 2564:42194 (H2 32/48 #002469, body 16/28 #2b363c).
   ========================================================================== */

/* Description container inside card-highlight (campaign summary / news lead). */
.inner-highlight-card .description-container h2,
.inner-highlight-card .description-container h3,
.inner-highlight-card .description-container h4 {
  font-family: var(--typo-font-family);
  margin-block-start: 0;
  margin-block-end: var(--space-4);
  letter-spacing: var(--typo-tracking);
}

.inner-highlight-card .description-container h2 {
  font-size: var(--typo-size-2xl);
  /* 32px */
  line-height: var(--typo-lh-2xl);
  /* 48px */
  font-weight: var(--typo-weight-bold);
  /* 700 */
  color: var(--color-primary-600);
  /* #002469 */
}

.inner-highlight-card .description-container h3 {
  font-size: var(--typo-size-xl);
  /* 24px */
  line-height: var(--typo-lh-xl);
  /* 36px */
  font-weight: var(--typo-weight-bold);
  /* 700 */
  color: var(--color-text-dark);
  /* #2b363c */
}

.inner-highlight-card .description-container h4 {
  font-size: var(--typo-size-l);
  /* 20px */
  line-height: var(--typo-lh-l);
  /* 32px */
  font-weight: var(--typo-weight-bold);
  color: var(--color-text-dark);
}

.inner-highlight-card .description-container p {
  font-family: var(--typo-font-family);
  font-size: var(--typo-size-m);
  /* 16px */
  line-height: var(--typo-lh-m);
  /* 28px */
  font-weight: var(--typo-weight-regular);
  /* 400 */
  margin-block-start: 0;
  margin-block-end: var(--space-4);
}

.inner-highlight-card .description-container>*:last-child {
  margin-block-end: 0;
}

/* Image-description section heading — enforce Figma colour (#002469)
   and the correct 48px line-height across breakpoints. The twig inline
   classes (text-2xl/leading-9 + md:text-[2rem]/md:leading-12) produced
   an incorrect computed lh:96px on some viewports. */
.image-description h2,
.image-description h3,
.image-description h4 {
  font-family: var(--typo-font-family) !important;
  color: var(--color-text-primary-main) !important;
  /* #002469 */
  font-weight: var(--typo-weight-bold) !important;
  letter-spacing: var(--typo-tracking);
}

.image-description h2 {
  font-size: var(--typo-size-xl);
  /* 24px mobile */
  line-height: var(--typo-lh-xl);
  /* 36px mobile */
}

@media (min-width: 768px) {
  .image-description h2 {
    font-size: var(--typo-size-2xl) !important;
    /* 32px desktop */
    line-height: var(--typo-lh-2xl) !important;
    /* 48px desktop */
  }
}

[data-dmt-mode="dark"] .image-description h2,
[data-dmt-mode="dark"] .image-description h3,
[data-dmt-mode="dark"] .image-description h4 {
  color: var(--color-high-contrast-white) !important;
}

/* ------------------------------------------------------------------ */
/* Canvas editor — fix dropdown picker appearing on the wrong side.    */
/* Canvas uses `appearance: base-select` + CSS `::picker(select)` with */
/* `top:-40px; left:-10px` which places the popup off-viewport, and    */
/* the browser's position-fallback repositions it to the wrong side.   */
/* Reset all inset overrides and explicitly anchor below the field.    */
/* ------------------------------------------------------------------ */
select::picker(select) {
  top: unset !important;
  left: unset !important;
  right: unset !important;
  bottom: unset !important;
  position-area: block-end !important;
}

/* ------------------------------------------------------------------ */
/* Page-specific overrides                                             */
/* ------------------------------------------------------------------ */

/*
 * "Segurança rodoviária" Canvas page — constrain the section heading
 * "Outros conteúdos de segurança rodoviária" to 592px (6 of 12 grid
 * columns) on desktop, per Figma. Scoped to this page's body class and to
 * the single heading inside a full-width (100%) section grid, so no other
 * heading — on this or any other page — is affected. Below the desktop
 * breakpoint (1280px) the heading keeps its full width.
 */
@media (min-width: 1280px) {
  .canvas-page--seguranca-rodoviaria .section-grid--100>h2.heading-responsive-4xl {
    max-width: 592px;
  }
}

/*
 * "Sobre a ANSR" Canvas page (/quem-somos)
 * -----------------------------------------
 * (1) "Quem somos" section: the section-grid--67-33 variant currently gives
 *     the text column 2fr and the image 1fr (~67/33). Figma 3040:146154 pairs
 *     a 592px text column with a 484px image column and a 136px gap. Constrain
 *     both cells with matching maxima and increase the desktop gap. Below
 *     1280px keep the current behaviour so the tablet layout is untouched.
 *
 * (2) "Missão, visão e valores" section (section-grid--25-25-25-25): the
 *     rich-text lead paragraph inside the section header currently spans the
 *     full row. Figma 3040:146894 caps it to a single ~592px column above the
 *     card grid. Scope the rule with :has(.section-grid--25-25-25-25) so it
 *     never leaks to "Atribuições" (the other section on this page whose
 *     header also carries a lead paragraph).
 *
 * Both rules are scoped to the .canvas-page--quem-somos body class so nothing
 * else in the theme is affected.
 */
@media (min-width: 1280px) {
  .canvas-page--quem-somos .section-grid--67-33 {
    grid-template-columns: minmax(0, 592px) minmax(0, 484px);
    gap: 136px;
  }

  .canvas-page--quem-somos section:has(.section-grid--25-25-25-25) header>div {
    max-width: 592px;
  }
}

.table-scroll-wrapper.table-scroll-wrapper--breakout {
  width: 100%;
  max-width: 100%;
}

.table-scroll-wrapper {
  margin-top: 16px;
  margin-bottom: var(--space-6, 3rem);
}


.accordion--content .table-scroll-wrapper table th,
.accordion--content .table-scroll-wrapper table td,
.accordion--content .table-scroll-wrapper table th *,
.accordion--content .table-scroll-wrapper table td * {
  text-align: left !important;
}

.table-scroll-caption,
.table-scroll-caption>span {
  text-align: left !important;
}

/*
 * Perguntas frequentes (accordion): forçar alinhamento à esquerda
 * mesmo quando o conteúdo editorial tem parágrafos centrados.
 */
.accordion--content .text-align-center {
  text-align: left !important;
}