/* =========================================================
   RESQ ROMANIA — GLOBAL DESIGN SYSTEM
   VERSION 2026.09

   IMPORTANT:
   - HEADERUL NU ESTE MODIFICAT
   - MENIUL NU ESTE MODIFICAT
   - FOOTERUL NU ESTE MODIFICAT

   FONT:
   Montserrat

   DESKTOP
   H1    73px
   H2    51.1px = 70% din H1
   H3    33px
   BODY  25px
   SMALL 19px
   BTN   23px

   TABLET
   H1    61px
   H2    42.7px = 70%
   H3    30px
   BODY  24px
   SMALL 18px
   BTN   22px

   MOBILE
   H1    49px
   H2    34.3px = 70%
   H3    28px
   BODY  23px
   SMALL 17px
   BTN   21px

   BUTOANE
   Border radius = 9px
========================================================= */


/* =========================================================
   01. VARIABILE
========================================================= */

:root {
  --resq-red: #E41515;
  --resq-black: #000000;
  --resq-white: #ffffff;

  /* STATISTICI GLOBALE RESQ */
  --resq-stat-participanti: 11;
  --resq-stat-absolventi: 6;
  --resq-stat-voluntari: 2;
  --resq-stat-familii: 5;

  --resq-h1: 73px;
  --resq-h2: 51.1px;
  --resq-h3: 33px;
  --resq-body: 25px;
  --resq-small: 19px;
  --resq-button: 23px;

  --resq-button-radius: 9px;

  --resq-grid-width: 1160px;
  --resq-grid-gap: 40px;

  --resq-section-space: 90px;
}


/* =========================================================
   02. FONT PRINCIPAL
   Doar continutul paginii
========================================================= */

#allrecords .resq-section,
#allrecords .resq-container,
#allrecords .resq-grid {
  font-family: 'Montserrat', Arial, sans-serif;
}


/* =========================================================
   03. BOX SIZING
   Doar pentru sistemul RESQ custom
========================================================= */

#allrecords .resq-section,
#allrecords .resq-section *,
#allrecords .resq-container,
#allrecords .resq-container *,
#allrecords .resq-grid,
#allrecords .resq-grid * {
  box-sizing: border-box;
}


/* =========================================================
   04. H1
========================================================= */

#allrecords h1:not(#t-header h1):not(#t-footer h1):not(#resq-footer2 h1):not(header h1):not(footer h1),

#allrecords .t-cover .t-title:not(#t-header .t-title):not(#t-footer .t-title):not(#resq-footer2 .t-title):not(header .t-title):not(footer .t-title),

#allrecords .t-cover__wrapper .t-title:not(#t-header .t-title):not(#t-footer .t-title):not(#resq-footer2 .t-title):not(header .t-title):not(footer .t-title),

#allrecords .resq-h1 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: var(--resq-h1) !important;
  line-height: 1.04 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}


/* Elemente interne H1 */

#allrecords h1:not(#t-header h1):not(#t-footer h1):not(#resq-footer2 h1):not(header h1):not(footer h1) *,

#allrecords .t-cover .t-title:not(#t-header .t-title):not(#t-footer .t-title):not(#resq-footer2 .t-title):not(header .t-title):not(footer .t-title) *,

#allrecords .t-cover__wrapper .t-title:not(#t-header .t-title):not(#t-footer .t-title):not(#resq-footer2 .t-title):not(header .t-title):not(footer .t-title) *,

#allrecords .resq-h1 * {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}


/* =========================================================
   05. H2
   70% DIN H1
========================================================= */

#allrecords h2:not(#t-header h2):not(#t-footer h2):not(#resq-footer2 h2):not(header h2):not(footer h2),

#allrecords .resq-h2 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: var(--resq-h2) !important;
  line-height: 1.10 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}


/* Elemente interne H2 */

#allrecords h2:not(#t-header h2):not(#t-footer h2):not(#resq-footer2 h2):not(header h2):not(footer h2) *,

#allrecords .resq-h2 * {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}


/* =========================================================
   06. H3
========================================================= */

#allrecords h3:not(#t-header h3):not(#t-footer h3):not(#resq-footer2 h3):not(header h3):not(footer h3),

#allrecords .t-heading:not(#t-header .t-heading):not(#t-footer .t-heading):not(#resq-footer2 .t-heading):not(header .t-heading):not(footer .t-heading),

#allrecords .resq-h3 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: var(--resq-h3) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}


/* Elemente interne H3 */

#allrecords h3:not(#t-header h3):not(#t-footer h3):not(#resq-footer2 h3):not(header h3):not(footer h3) *,

#allrecords .resq-h3 * {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}


/* =========================================================
   07. BODY TEXT
========================================================= */

#allrecords p:not(#t-header p):not(#t-footer p):not(#resq-footer2 p):not(header p):not(footer p),

#allrecords .t-text:not(#t-header .t-text):not(#t-footer .t-text):not(#resq-footer2 .t-text):not(header .t-text):not(footer .t-text),

#allrecords .t-descr:not(#t-header .t-descr):not(#t-footer .t-descr):not(#resq-footer2 .t-descr):not(header .t-descr):not(footer .t-descr),

#allrecords .resq-body {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: var(--resq-body) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}


/* Continut intern paragraf */

#allrecords p:not(#t-header p):not(#t-footer p):not(#resq-footer2 p):not(header p):not(footer p) span,

#allrecords p:not(#t-header p):not(#t-footer p):not(#resq-footer2 p):not(header p):not(footer p) strong,

#allrecords p:not(#t-header p):not(#t-footer p):not(#resq-footer2 p):not(header p):not(footer p) b,

#allrecords p:not(#t-header p):not(#t-footer p):not(#resq-footer2 p):not(header p):not(footer p) em {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}


/* =========================================================
   08. TEXT MIC / META
========================================================= */

#allrecords .resq-small {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: var(--resq-small) !important;
  line-height: 1.55 !important;
}


/* =========================================================
   09. ELIMINARE EYEBROWS
   Doar din continut
========================================================= */

#allrecords .eyebrow:not(#t-header .eyebrow):not(#t-footer .eyebrow):not(#resq-footer2 .eyebrow):not(header .eyebrow):not(footer .eyebrow),

#allrecords .t-uptitle:not(#t-header .t-uptitle):not(#t-footer .t-uptitle):not(#resq-footer2 .t-uptitle):not(header .t-uptitle):not(footer .t-uptitle),

#allrecords .resq-eyebrow {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}


/* =========================================================
   10. BUTOANE — GLOBAL CONTENT

   - radius 9px
   - font bold
   - tranzitie hover
   - header/footer excluse
========================================================= */

#allrecords .t-btn:not(#t-header .t-btn):not(#t-footer .t-btn):not(#resq-footer2 .t-btn):not(header .t-btn):not(footer .t-btn),

#allrecords .t-btnflex:not(#t-header .t-btnflex):not(#t-footer .t-btnflex):not(#resq-footer2 .t-btnflex):not(header .t-btnflex):not(footer .t-btnflex),

#allrecords .action:not(#t-header .action):not(#t-footer .action):not(#resq-footer2 .action):not(header .action):not(footer .action),

#allrecords .btn:not(#t-header .btn):not(#t-footer .btn):not(#resq-footer2 .btn):not(header .btn):not(footer .btn),

#allrecords .resq-button {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: var(--resq-button) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  border-radius: var(--resq-button-radius) !important;

  transition:
    filter 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease !important;
}


/* Continut intern buton */

#allrecords .t-btn:not(#t-header .t-btn):not(#t-footer .t-btn):not(#resq-footer2 .t-btn):not(header .t-btn):not(footer .t-btn) *,

#allrecords .t-btnflex:not(#t-header .t-btnflex):not(#t-footer .t-btnflex):not(#resq-footer2 .t-btnflex):not(header .t-btnflex):not(footer .t-btnflex) *,

#allrecords .action:not(#t-header .action):not(#t-footer .action):not(#resq-footer2 .action):not(header .action):not(footer .action) *,

#allrecords .resq-button * {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
}


/* =========================================================
   11. BUTTON HOVER

   Nu fortam o singura culoare pentru toate butoanele.
   Inchidem nuanta actuala, astfel incat:
   - rosu ramane rosu, dar mai inchis
   - alb devine usor gri
   - alte culori isi pastreaza identitatea
========================================================= */

#allrecords .t-btn:not(#t-header .t-btn):not(#t-footer .t-btn):not(#resq-footer2 .t-btn):not(header .t-btn):not(footer .t-btn):hover,

#allrecords .t-btnflex:not(#t-header .t-btnflex):not(#t-footer .t-btnflex):not(#resq-footer2 .t-btnflex):not(header .t-btnflex):not(footer .t-btnflex):hover,

#allrecords .action:not(#t-header .action):not(#t-footer .action):not(#resq-footer2 .action):not(header .action):not(footer .action):hover,

#allrecords .btn:not(#t-header .btn):not(#t-footer .btn):not(#resq-footer2 .btn):not(header .btn):not(footer .btn):hover,

#allrecords .resq-button:hover {
  filter: brightness(0.82);
}


/* =========================================================
   12. ACCESSIBILITY — KEYBOARD FOCUS
========================================================= */

#allrecords .t-btn:not(#t-header .t-btn):not(#t-footer .t-btn):not(#resq-footer2 .t-btn):not(header .t-btn):not(footer .t-btn):focus-visible,

#allrecords .t-btnflex:not(#t-header .t-btnflex):not(#t-footer .t-btnflex):not(#resq-footer2 .t-btnflex):not(header .t-btnflex):not(footer .t-btnflex):focus-visible,

#allrecords .action:not(#t-header .action):not(#t-footer .action):not(#resq-footer2 .action):not(header .action):not(footer .action):focus-visible,

#allrecords .btn:not(#t-header .btn):not(#t-footer .btn):not(#resq-footer2 .btn):not(header .btn):not(footer .btn):focus-visible,

#allrecords .resq-button:focus-visible {
  outline: 2px solid var(--resq-red);
  outline-offset: 3px;
}


/* =========================================================
   13. TEXT LINKS
   Hover underline pe toata fraza
========================================================= */

#allrecords p:not(#t-header p):not(#t-footer p):not(#resq-footer2 p):not(header p):not(footer p) a:not(.t-btn):not(.t-btnflex):not(.action):not(.btn),

#allrecords .t-text:not(#t-header .t-text):not(#t-footer .t-text):not(#resq-footer2 .t-text):not(header .t-text):not(footer .t-text) a:not(.t-btn):not(.t-btnflex):not(.action):not(.btn),

#allrecords .t-descr:not(#t-header .t-descr):not(#t-footer .t-descr):not(#resq-footer2 .t-descr):not(header .t-descr):not(footer .t-descr) a:not(.t-btn):not(.t-btnflex):not(.action):not(.btn),

#allrecords .resq-text-link {
  text-decoration: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;

  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}


#allrecords p:not(#t-header p):not(#t-footer p):not(#resq-footer2 p):not(header p):not(footer p) a:not(.t-btn):not(.t-btnflex):not(.action):not(.btn):hover,

#allrecords .t-text:not(#t-header .t-text):not(#t-footer .t-text):not(#resq-footer2 .t-text):not(header .t-text):not(footer .t-text) a:not(.t-btn):not(.t-btnflex):not(.action):not(.btn):hover,

#allrecords .t-descr:not(#t-header .t-descr):not(#t-footer .t-descr):not(#resq-footer2 .t-descr):not(header .t-descr):not(footer .t-descr) a:not(.t-btn):not(.t-btnflex):not(.action):not(.btn):hover,

#allrecords .resq-text-link:hover {
  text-decoration-line: underline;
}


/* =========================================================
   14. GRID RESQ — 12 COLOANE

   1160px total
   12 coloane
   40px gutter

   12 x 60px
   +
   11 x 40px
   =
   1160px
========================================================= */

#allrecords .resq-container {
  width: calc(100% - 80px);
  max-width: var(--resq-grid-width);
  min-width: 0;

  margin-left: auto;
  margin-right: auto;
}


#allrecords .resq-grid {
  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  column-gap:
    var(--resq-grid-gap);
}


/* =========================================================
   15. GRID — 2 COLOANE
========================================================= */

#allrecords .resq-col-left {
  grid-column: 1 / span 6;
}

#allrecords .resq-col-right {
  grid-column: 7 / span 6;
}


/* =========================================================
   16. GRID — 3 COLOANE
========================================================= */

#allrecords .resq-third-1 {
  grid-column: 1 / span 4;
}

#allrecords .resq-third-2 {
  grid-column: 5 / span 4;
}

#allrecords .resq-third-3 {
  grid-column: 9 / span 4;
}


/* =========================================================
   17. GRID — 4 COLOANE
========================================================= */

#allrecords .resq-quarter-1 {
  grid-column: 1 / span 3;
}

#allrecords .resq-quarter-2 {
  grid-column: 4 / span 3;
}

#allrecords .resq-quarter-3 {
  grid-column: 7 / span 3;
}

#allrecords .resq-quarter-4 {
  grid-column: 10 / span 3;
}


/* =========================================================
   18. GRID — FULL WIDTH
========================================================= */

#allrecords .resq-full {
  grid-column: 1 / -1;
}


/* =========================================================
   19. SECTIUNE STANDARD
========================================================= */

#allrecords .resq-section {
  width: 100%;
  min-width: 0;

  padding-top:
    var(--resq-section-space);

  padding-bottom:
    var(--resq-section-space);
}


/* =========================================================
   20. IMAGINI
========================================================= */

#allrecords .resq-image {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;
}


/* =========================================================
   21. LISTE
========================================================= */

#allrecords .resq-list {
  margin: 0;

  padding-left: 1.15em;

  font-family:
    'Montserrat',
    Arial,
    sans-serif;

  font-size:
    var(--resq-body);

  line-height:
    1.65;
}


/* =========================================================
   22. TABLET
========================================================= */

@media screen and (max-width: 980px) {

  :root {
    --resq-h1: 61px;
    --resq-h2: 42.7px;
    --resq-h3: 30px;
    --resq-body: 24px;
    --resq-small: 18px;
    --resq-button: 22px;

    --resq-grid-gap: 24px;
    --resq-section-space: 72px;
  }


  #allrecords .resq-container {
    width: calc(100% - 56px);
  }

}


/* =========================================================
   23. MOBILE
========================================================= */

@media screen and (max-width: 640px) {

  :root {
    --resq-h1: 49px;
    --resq-h2: 34.3px;
    --resq-h3: 28px;
    --resq-body: 23px;
    --resq-small: 17px;
    --resq-button: 21px;

    --resq-grid-gap: 14px;
    --resq-section-space: 56px;
  }


  #allrecords .resq-container {
    width: calc(100% - 40px);
  }


  /* Pe mobil coloanele devin full width */

  #allrecords .resq-col-left,
  #allrecords .resq-col-right,

  #allrecords .resq-third-1,
  #allrecords .resq-third-2,
  #allrecords .resq-third-3,

  #allrecords .resq-quarter-1,
  #allrecords .resq-quarter-2,
  #allrecords .resq-quarter-3,
  #allrecords .resq-quarter-4 {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   24. REDUCED MOTION
   Pentru utilizatorii care au animatiile dezactivate
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #allrecords .t-btn,
  #allrecords .t-btnflex,
  #allrecords .action,
  #allrecords .btn,
  #allrecords .resq-button,
  #allrecords .resq-text-link {
    transition: none !important;
  }

}