/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
   /* Color palette */
   --color-primary-dark-blue: #272D4F;
   --color-secondary-blue:    #3C4884;
   --color-light-blue:        #4E66DC;
   --color-coral-red:         #FF6F61;
   --color-dark-red:          #8B3425;
   --color-light-beige:       #E8D3D0;
   --color-off-white:         #FEFBF8;
   --color-dark-navy:         #222744;
   --color-full-white:        #FFFFFF;
   --color-text-dark:         #202125;
   --color-text-white:        #FEFBF8;
   --color-grey:              #ECECF0;

   --color-nav-hover:         #d8dae6;

   /* Typography scale */
   --font-size-title:       3.75rem;  /* 60px — Main Page Title   */
   --font-size-section:     2.25rem;  /* 36px — Section Title     */
   --font-size-subsection:  1.5rem;   /* 24px — Subsection Title  */
   --font-size-large:       1.125rem; /* 18px — Large Body/Intro  */
   --font-size-body:        1rem;     /* 16px — Regular Body      */
   --font-size-small:       0.875rem; /* 14px — Captions/Labels   */

   /* Line heights */
   --line-height-title:      1.2;
   --line-height-section:    1.3;
   --line-height-subsection: 1.4;
   --line-height-body:       1.75;
   --line-height-small:      1.5;
}


/* ============================================================
   BASE
   ============================================================ */

@font-face {
   font-family: 'DM Sans';
   src: url('../fonts/DMSans-Variable.ttf') format('truetype');
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
}

body {
   font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
   font-size: var(--font-size-body);
   line-height: var(--line-height-body);
   font-weight: 400;
   color: var(--color-text-dark);
   background-color: var(--color-off-white);
   overflow-x: clip;
}


/* ============================================================
   TYPOGRAPHY CLASSES
   (semantic size classes, independent of heading level)
   ============================================================ */

.qv-title {
   font-size: var(--font-size-title);
   line-height: var(--line-height-title);
   font-weight: 500;
}

.qv-section-title {
   font-size: var(--font-size-section);
   line-height: var(--line-height-section);
   font-weight: 500;
}

.qv-subsection-title {
   font-size: var(--font-size-subsection);
   line-height: var(--line-height-subsection);
   font-weight: 400;
}

.qv-text-large {
   font-size: var(--font-size-large);
   line-height: var(--line-height-body);
   font-weight: 400;
}

.qv-text-body {
   font-size: var(--font-size-body);
   line-height: var(--line-height-body);
   font-weight: 400;
}

.qv-text-small {
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
   font-weight: 400;
}


/* ============================================================
   LINKS (global default)
   Placed in @layer base so Tailwind utility classes can override
   per-element via no-underline, font-normal, [background:none] etc.
   ============================================================ */

@layer base {
  :focus-visible {
      outline: 2px solid var(--color-off-white);
      outline-offset: 4px;
      box-shadow: 0 0 0 4px var(--color-primary-dark-blue);
   }

   a {
      color: var(--color-primary-dark-blue);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      background-image: linear-gradient(var(--color-primary-dark-blue), var(--color-primary-dark-blue));
      background-size: 0% 1px;
      background-repeat: no-repeat;
      background-position: left bottom;
      transition: color 0.2s ease, background-size 0.25s ease;
   }

   a:hover {
      text-decoration: none;
      background-size: 100% 1px;
   }

   a:active {
      text-decoration: underline;
      text-underline-offset: 3px;
      background-size: 0% 1px;
   }
}


/* ============================================================
   ACCORDION FOCUS STYLES
   Suppress the global :focus-visible ring on the button itself
   (the box-shadow bleeds through overflow-hidden as a dark line).
   Instead, show an outline on the entry wrapper via :has().
   ============================================================ */

[data-qv-accordion-button]:focus-visible {
    outline: none;
    box-shadow: none;
}

[data-qv-accordion-item]:has([data-qv-accordion-button]:focus-visible) {
    outline: 2px solid var(--color-secondary-blue);
    outline-offset: 2px;
}


/* ============================================================
   UNDERLINE ANIMATION UTILITY
   Pseudo-element underline that grows from left on hover.
   Set --qv-ul-bottom on the element to control offset.
   ============================================================ */

.qv-underline-anim {
   position: relative;
}

.qv-underline-anim::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: var(--qv-ul-bottom, -16px);
   width: 0;
   height: 2px;
   background-color: var(--color-primary-dark-blue);
   transition: width 0.25s ease;
}

.qv-underline-anim:hover::after,
.qv-underline-anim[aria-current="page"]::after {
   width: 100%;
}


/* ============================================================
   TEXT COLOR UTILITIES
   ============================================================ */

.qv-text-white { color: var(--color-off-white); }
.qv-text-dark  { color: var(--color-text-dark); }


/* ============================================================
   FILTER PILL
   Used by the news list filter bar (year / language buttons).
   Active state is driven by aria-pressed so it works without JS.
   ============================================================ */

.qv-filter-pill {
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.875rem;
   border-radius: 9999px;
   border: 1px solid var(--color-grey);
   background-color: #fff;
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
   color: var(--color-text-dark);
   cursor: pointer;
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qv-filter-pill:hover {
   background-color: var(--color-nav-hover);
}

.qv-filter-pill[aria-pressed="true"] {
   background-color: var(--color-primary-dark-blue);
   border-color: var(--color-primary-dark-blue);
   color: var(--color-off-white);
}


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

/* Let flex-based icon rows follow column text alignment */
.text-center .qv-icon-links { justify-content: center; }
.text-right  .qv-icon-links { justify-content: flex-end; }


/* ============================================================
   LAYOUT COLUMN PADDING UTILITIES
   Explicit definitions ensure these classes survive Tailwind's
   scan regardless of how they are assembled in PHP templates.
   ============================================================ */

.px-12 { padding-inline: 3rem; }
.px-16 { padding-inline: 4rem; }
.px-18 { padding-inline: 4.5rem; }
.px-24 { padding-inline: 6rem; }
.px-28 { padding-inline: 7rem; }
.px-32 { padding-inline: 8rem; }


/* ============================================================
   BRAND BACKGROUND COLOR UTILITIES
   --qv-bg-opacity accepts 20, 40, 60, 80, or 100 (set inline as a CSS custom property)
   ============================================================ */

.bg-qivalis-off-white {
   background-color: var(--color-off-white);
}

/* Blending against --color-off-white matches Figma's canvas color exactly */
.bg-qivalis-primary-dark-blue {
   background-color: color-mix(in srgb, var(--color-primary-dark-blue) calc(var(--qv-bg-opacity, 100) * 1%), var(--color-off-white));
}

.bg-qivalis-secondary-blue {
   background-color: color-mix(in srgb, var(--color-secondary-blue) calc(var(--qv-bg-opacity, 100) * 1%), var(--color-off-white));
}

.bg-qivalis-light-blue {
   background-color: color-mix(in srgb, var(--color-light-blue) calc(var(--qv-bg-opacity, 100) * 1%), var(--color-off-white));
}

.bg-qivalis-coral-red {
   background-color: color-mix(in srgb, var(--color-coral-red) calc(var(--qv-bg-opacity, 100) * 1%), var(--color-off-white));
}


/* ============================================================
   GRADIENT UTILITIES
   ============================================================ */

.bg-qivalis-gradient-1 {
   background-image: linear-gradient(270deg, var(--color-secondary-blue) 0%, var(--color-coral-red) 50%, var(--color-light-beige) 100%);
}

.bg-qivalis-gradient-2 {
   background-image: linear-gradient(270deg, var(--color-dark-red) 0%, var(--color-primary-dark-blue) 50%, var(--color-dark-navy) 100%);
}

.bg-qivalis-gradient-3 {
   background-image: linear-gradient(270deg, var(--color-light-beige) 0%, var(--color-light-blue) 50%, var(--color-secondary-blue) 75%, var(--color-primary-dark-blue) 100%);
}

.bg-qivalis-gradient-4 {
   background-image: linear-gradient(270deg, var(--color-light-beige) 0%, var(--color-dark-red) 50%, var(--color-primary-dark-blue) 100%);
}