/* ========================================
   EPRS JATS (Shadow DOM) CSS
   Styles XSLT-generated publication content
   rendered inside `reference.jsp` Shadow DOM
   Important:
   - All selectors are scoped with 'host'  to
     avoid affecting the outer page if this
     stylesheet is ever loaded in light DOM.
======================================== */


/* ========================================
   1. HOST RESET & BASE
======================================== */
{
  all: initial;
  display: block;
}

.xml-xslt-container {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  font-family: "EuropeaVar", Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #1e1e1e;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}


/* ========================================
   2. TYPOGRAPHY — HEADINGS
======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "EuropeaVar", Helvetica, sans-serif;
  font-weight: 700;
  color: #1e1e1e;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 1rem;
}

h4,
h5,
h6 {
  padding-bottom: 16px;
}

h1 {
  font-size: clamp(1.556rem, 1.3rem + 1vw, 1.889rem);
  color: #1e1e1e;
}

.front h1 {
  padding-bottom: 0;
}

h1 .subtitle {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400;
  color: #555555;
}

h2 {
  font-size: 1.333rem;
  margin-top: 1.5rem;
  padding-bottom: 0.2rem;
}

h3 {
  font-size: 1.167rem;
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.889rem;
}

h6
 {
  font-size: 0.778rem;
}


/* ========================================
   3. BODY TEXT
======================================== */
p {
  font-family: "EuropeaVar", Helvetica, sans-serif;
  font-size: 1rem;
  color: #1e1e1e;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 1rem;
}

.body,
.back,
.front {
  font-family: "EuropeaVar", Helvetica, sans-serif;
}


/* ========================================
   4. LINKS
======================================== */
a {
  color: #0c4da2;
  text-decoration: underline;
}

a:hover {
  color: #0c4da2;
  text-decoration: underline;
}

a:visited {
  color: #0c4da2;
}

/* Footnote cross-references */
a[href^="#"] {
  text-decoration: none;
}

a[href^="#"] .generated {
  color: #0c4da2;
  vertical-align: super;
  font-size: 0.75em;
  text-decoration: none;
}

/* Bold text — remove old blue color */
b {
  color: inherit;
}


/* ========================================
   5. LAYOUT — OVERRIDE XSLT MARGINS
======================================== */
.front,
.body,
.back {
  /*margin-left: 20em;
  margin-right: 20em;*/
  margin-left: 0;
  margin-right: 0; 
}

div.section,
div.back-section {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}


/* ========================================
   6. COVER IMAGE
======================================== */
.coverimage {
  max-width: 30%;
  padding: 0;
  float: right;
  clear: right;
  margin: 1rem;
}

.coverimage img {
  width: 100%;
  height: auto;
  max-height: none;
  border: none;
  border-radius: 4px;
  margin-bottom: 0.2rem;
}

.coverimage .copyright {
  font-size: 0.678rem;
  color: #7a868e;
}


/* ========================================
   7. AUTHORS & METADATA
======================================== */
.authors {
  margin: 0.75rem 0 1.5rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #555555;
}

.authors p {
  margin: 0;
  /* font-style: italic;  */
}

div.series-date {
  font-size: 1rem;
  color: #1e1e1e;
  padding: 8px 0;
  margin: 0 0 32px 0;
  border-top: 1px solid #c8c8c8;
  border-bottom: 1px solid #c8c8c8;
}

div.series-date::before,
div.series-date::after {
  display: none;
}

div.series-date .pub-date {
  padding-right: 8px;
  padding-left: 8px;
  border-right: 1px solid #c8c8c8;
}

div.series-date .document-category {
  padding-right: 8px;
  border-right: 1px solid #c8c8c8;
}

div.series-date .document-type {
  padding-left: 8px;
  padding-right: 8px;
  border-right: 1px solid #c8c8c8;
}

div.series-date .series {
  padding-left: 8px;
  padding-right: 8px;
  border-right: 1px solid #c8c8c8;
}

div.series-date .plenary_session {
  padding-left: 8px;
  padding-right: 8px;
  border-right: 1px solid #c8c8c8;
}

div.series-date .reading-text {
  padding-left: 8px;
  padding-right: 8px;  
}

div.series-date .reading-time  {
  padding-left: 8px;
  padding-right: 8px;  
}



div.policyarea {
    margin-bottom: 20px;
}

div.policyarea .policyarea a:not(:last-child) {
    margin-right: 0.3em;
}

div.policyarea .policyarea a:not(:last-child)::after {
    content: "|";
    text-decoration: none;
    display: inline-block;
    margin-left: 0.3em;
}

/*div.policyarea .policyarea a {
    background-color: var(--eprs_primary-light-blue);
    color: var(--ui_light);
    padding: 0.4em 0.4em;
    margin: -0.2em 0 0.75em;
    border-radius: 0.2em;
    box-decoration-break: clone;
    vertical-align: baseline;
    display: inline-block;
    cursor: pointer;
}

div.policyarea .policyarea a:hover {
    background-color: #cce0ff;      
    color: #001f4d;
    border-color: #80b3ff;
}

div.policyarea .policyarea a:active {
    background-color: #99c2ff;
}
*/

div.metadata-group {
  font-size: 0.778rem;
  color: #7a868e;
}

div.metadata-group p {
  font-family: "EuropeaVar", Helvetica, sans-serif;
  font-size: 0.889rem;
}

.labelpublished {
  font-family: "EuropeaVar", Helvetica, sans-serif;
  color: #7a868e;
}

div.branding p {
  font-family: "EuropeaVar", Helvetica, sans-serif;
}


/* ========================================
   8. IMAGES — global
======================================== */
img {
  border: none;
  border-radius: 4px;
  max-width: 100%;
}


/* ========================================
   9. TABLES -- this section has been copied to the main site
======================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  min-width: 700px;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 1rem;
  font-family: "EuropeaVar", Helvetica, sans-serif;
  line-height: 1.4;
}

table th,
table td,
table th *,
table td * {
  font: inherit;
}

table sup,
table sub {
  font-size: 0.75em;
  line-height: 0;
}

table sup {
  vertical-align: super;
}

table sub {
  vertical-align: sub;
}

/*  even if there is p inside table they should render similar to no p and breaks */
td p,
th p {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
}

td p + p,
th p + p {
  /*margin-top: 0.2em;*/
}

td,
th {
  padding: 0.75rem 1rem;
  border: 1px solid #c8c8c8;
  color: #1e1e1e;
  /* font-size: 0.889rem; */
}

/* Force everything inside thead to be font color white */

thead {
  background: #0c4da2;
}

thead th,
thead td {
  font-weight: 700;
  text-align: left;
  color: #ffffff;
  background-color: #0c4da2;
}

/* Ensure further th in tbody also get the white background but only if all cells in the row are th and not if only first cell is a th */

tbody tr:has(> th):not(:has(> td)) > th {
  font-weight: 700;
  text-align: left;
  color: #ffffff;
  background-color: #0c4da2;
}

tbody tr:has(> th) > th *,
tbody tr:has(> th) > td * {
  color: inherit;
}

/*  govern bolds inside th */
th b,
th strong {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}

thead th *,
thead td * {
  color: inherit;
}

thead th li::marker,
thead td li::marker {
  color: #ffffff;
}

thead th a,
thead td a,
thead th a:visited,
thead td a:visited {
  color: #ffffff;
}

/*table tr:first-child:not(:has(th)) td {
  font-weight: 700;
  color: #ffffff;
  background-color: #0c4da2;  
}*/

tbody th
{
  text-align: left;
}

/* Zebra striping */
tbody tr:nth-child(even) {
  background-color: #f1f6ff;
}

.table-wrap.panel {
  font-size: 1rem;
  padding: 0;
  margin: 1rem 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Table captions */
.table-wrap.panel .label {
  font-size: 0.778rem;
  font-weight: 700;
  color: #1e1e1e;
}

.table-wrap.panel table caption {
  text-align:left;
  font-size: 0.778rem;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 1rem;
}


/* ========================================
   10. FIGURES & CAPTIONS
======================================== */
figure.fig.panel {
  font-size: 1rem;
  padding: 0;
  margin: 1rem 0;
}

figure.fig.panel figcaption.caption {
  text-align: left;
  font-size: 0.778rem;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 1rem;
  line-height: 1.4;
}

div.fig .graphic img {
  border: none;
  border-radius: 4px;
  max-width: 100%;
}

.permissions .copyright {
  font-size: 0.778rem;
  color: #7a868e;
}

.table-wrap-foot p {
  font-size: 0.778rem;
  color: #7a868e;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}


/* ========================================
   11. BOXED TEXT (call-out boxes)
======================================== */
div.boxed-text {
  border: none;
  border-radius: 0;
  background-color: #f1f6ff;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

.boxed-title {
  font-size: 1.111rem;
  font-weight: 700;
  color: #0c4da2;
}

div.boxed-text h3 {
  color: #0c4da2;
  font-size: 1rem;
}

div.boxed-text h4 {
  color: #0c4da2;
  font-size: 1rem;
}


/* ========================================
   12. BLOCKQUOTES
======================================== */
blockquote {
  font-style: italic;
  font-weight: 500;
  color: #0c4da2;
  font-size: clamp(0.75rem, 0.4vw + 0.6rem, 1rem);
  border-left: 4px solid #1e6cff;
  background-color: #f1f6ff;
  padding: 32px;
  margin: 1.5rem 0;
}

blockquote p {
  display: contents;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  font-family: inherit;
}


/* ========================================
   13. HORIZONTAL RULES
======================================== */
hr {
  border: none;
  border-top: 1px solid #c8c8c8;
  margin: 2rem 0;
}

hr.part-rule {
  border: none;
  border-top: 1px solid #c8c8c8;
  width: 100%;
}

hr.section-rule {
  border: none;
  border-top: 1px solid #c8c8c8;
  width: 100%;
}


/* ========================================
   14. LISTS
======================================== */
ul,
ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  gap: 0.25rem;
}

li {
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
  line-height: 1.5;
}

li > p {
  margin-top: 0.2em;
  margin-bottom: 0;
}

/* Marker colors by depth */
ul > li::marker {
  color: #1e1e1e;
}

ul ul > li::marker {
  color: #555555;
}

ul ul ul > li::marker {
  color: #7a868e;
}

ol[list-type="order"],
ol.list-type-order {
  list-style-type: decimal;
}

ol[list-type="arabic"],
ol.list-type-arabic {
  list-style-type: decimal;
}

ol[list-type="alpha-lower"],
ol.list-type-alpha-lower {
  list-style-type: lower-alpha;
}

ol[list-type="alpha-upper"],
ol.list-type-alpha-upper {
  list-style-type: upper-alpha;
}

ol[list-type="roman-lower"],
ol.list-type-roman-lower {
  list-style-type: lower-roman;
}

ol[list-type="roman-upper"],
ol.list-type-roman-upper {
  list-style-type: upper-roman;
}

ul[list-type="bullet"],
ul.list-type-bullet {
  list-style-type: disc;
}

ul[list-type="dash"],
ul.list-type-dash,
ul[list-type="hyphen"],
ul.list-type-hyphen {
  list-style-type: none;
}

ul[list-type="dash"] > li::before,
ul.list-type-dash > li::before,
ul[list-type="hyphen"] > li::before,
ul.list-type-hyphen > li::before {
  content: "– ";
}

ul[list-type="simple"],
ul.list-type-simple,
ul[list-type="none"],
ul.list-type-none {
  list-style-type: none;
  padding-left: 0;
}

ul[list-type="simple"] > li,
ul.list-type-simple > li,
ul[list-type="none"] > li,
ul.list-type-none > li {
  padding-left: 0;
}


/* ========================================
   15. FOOTNOTES & REFERENCES
======================================== */

.ref-list h2 {
  margin-bottom: 0;          /* keep consistent */
  padding-bottom: 0.75rem;      /* restore default */
}

.ref-list-items {
  margin-top: 0;             /* remove extra gap */
  margin-bottom: 1rem;
  padding-left: 0;
  list-style: none;
}

div.footnote {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;          /* space between number and text */
  font-size: 0.778rem;
  color: #7a868e;
  margin: 0.5rem 0;
  line-height: 1.5;
}

/* number column */
div.footnote .fnlabel {
  flex: 0 0 1.5em;      /* controls hanging indent width */
  text-align: right;
    font-size: 0.6rem;
 }

/* text column */
div.footnote .fntext {
  flex: 1 1 auto;
  min-width: 0;
}

/* prevent paragraph breaks inside footnotes */
div.footnote .fntext p {
  display: inline;
  margin: 0;
}

/* inline citation styling stays the same */
p.citation {
  font-size: 0.889rem;
  color: #555555;
  line-height: 1.5;
}

.ref-list-items {
  list-style: none;
  padding-left: 0;
}

.ref-list-items li {
  position: relative;
  padding-left: 1.5em;
}

.ref-list-items li::before {
  content: "–";
  position: absolute;
  left: 0;
}

/* ========================================
   16. LABELS & MISC
======================================== */
.label {
  font-family: "EuropeaVar", Helvetica, sans-serif;
  font-size: 0.778rem;
  font-weight: 700;
  color: #1e1e1e;
}

.warning {
  font-family: "EuropeaVar", Helvetica, sans-serif;
  color: hsl(6, 78%, 57%);
}

.xref {
  color: #0c4da2;
}

.generated {
  color: #1e1e1e;
}

div.note {
  font-size: 0.889rem;
  color: #555555;
  margin-left: 1em;
}

div.caption {
  font-size: 0.778rem;
  color: #7a868e;
  text-align: right;
}

.document-title {
  text-align: center;
}

p.nav,
p.nav a {
  font-family: "EuropeaVar", Helvetica, sans-serif;
  color: #1e1e1e;
  font-weight: 700;
  font-size: 0.889rem;
  text-transform: uppercase;
}


/* ========================================
   17. IFRAMES (videos, SVGs)
======================================== */
iframe.video {
  width: 100%;
  max-width: 560px;
  height: 315px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  }

iframe.svg {
  width: 100%;
  min-height: 45em;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  }

iframe {
  display: block;
}


/* ========================================
   18. TOC (Table of Contents)
   Currently hidden — kept hidden.
======================================== */
#toc,
#toc * {
  display: none !important; 
}


/* ========================================
   19. SUMMARY SECTION
======================================== */
.summary h2 {
  font-size: 1.333rem;
  color: #1e1e1e;
  margin-bottom: 0;
}

.summary p {
  line-height: 1.5;
}

/* ========================================
   19. EXPLANATORY STATEMENT SPACING ABOVE AND BELOW
======================================== */

.explanatory-statement {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.explanatory-statement section {
  margin-top: 0;
  margin-bottom: 0;
}

.explanatory-statement h2 {
  display: none;
  margin-top: 0;
  padding-bottom: 0.25rem;
}

.explanatory-statement p {
  margin-bottom: 0.5rem;
}

.explanatory-statement hr,
.explanatory-statement + hr {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ========================================
   20. FOCUS STYLES (Accessibility)
======================================== */
:focus-visible {
  outline: 3px solid #1e6cff;
  outline-offset: 2px;
}

a:focus-visible {
  outline: 3px solid #1e6cff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ========================================
   20. Back matter smaller font and grey except for Annexes
======================================== */

/* some spacing after appendix and before back-matter starts */
.back .appendix + * {
  margin-top: 2rem;
}

.back :not(.appendix):not(.appendix *):not(.ref-list):not(.ref-list *) p {
  margin-bottom: 0.35rem;
}

.back :not(.appendix):not(.appendix *):not(.ref-list):not(.ref-list *) p:last-child {
  margin-bottom: 0;
}

.back :not(.appendix):not(.appendix *):not(.ref-list):not(.ref-list *) p,
.back :not(.appendix):not(.appendix *):not(.ref-list):not(.ref-list *) li,
.back :not(.appendix):not(.appendix *):not(.ref-list):not(.ref-list *) td {
  font-size: 0.778rem;
  color: #7a868e;
  line-height: 1.2;
}

.back :not(.appendix):not(.appendix *):not(.ref-list):not(.ref-list *) h2,
.back :not(.appendix):not(.appendix *):not(.ref-list):not(.ref-list *) h3,
.back :not(.appendix):not(.appendix *):not(.ref-list):not(.ref-list *) h4 {
  color: #1e1e1e;
}

.back h2.toc-title {
  margin: 0 0 0.4rem 0 !important;
  padding-bottom: 0 !important;
}

.back h2.toc-title + p {
  margin: 0 0 0.35rem 0 !important;
  padding-top: 0 !important;
}

.back .appendix > h2.toc-title + p {
  margin-top: 0.5rem !important;
}

.back > div:not(.appendix),
.back > section:not(.appendix) {
  margin-top: 0.75rem;
}

.back > div:not(.appendix):not(.back-section),
.back > section:not(.appendix) {
  margin-bottom: 0.75rem;
}

.back hr {
  margin: 2rem 0 0.75rem;
}

.back hr + h2 {
  margin-top: 0.25rem;
}

.back .back-section {
  margin-top: 0.75rem;
  margin-bottom: 2rem;
}

/* ========================================
   21. PRINT-FRIENDLY ADJUSTMENTS
======================================== */
@media print {

  @page {
    margin-top: 2.5cm;
    margin-bottom: 2.5cm;
    margin-left: 2cm;
    margin-right: 2cm;
  }

  .xml-xslt-container {
    max-width: none;
    padding: 0;
    page-break-before: avoid;
  }

  img {
    max-width: 100%;
  }

/* do not show the toc in print format */
  #toc,
  #toc *,
  .toc,
  .toc *,
  .table-of-contents,
  .table-of-contents *,
  .floating-toc,
  .floating-toc *,
  .side-toc,
  .side-toc *,
  aside,
  nav,
  [class*="toc"],
  [class*="Toc"],
  [class*="table-of-contents"] {
    display: none !important;
    visibility: hidden !important;
}
}