@view-transition { navigation: auto; }


/* general CSS */



*, *::before, *::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    
    background-color: var(--white);
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: var(--white);
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }


  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  

  /* *** */  

body {
    background-color: var(--white);
    font-family: var(--ff-sans2);

}


/* **** */  

#page {
    background-color: var(--white);
    overflow-x: hidden;    
}

#page #main-wrapper {
    background-color: var(--white);
}

h1.title {
    font-size: var(--fc-h1plus);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    margin-bottom: var(--margin-m);
    padding-top: var(--margin-m);
    color: var(--blue1);
}


.node a {
    color: var(--blue3);
    text-decoration: underline;
}

/* breadcrumbs */

.path-frontpage .block-system-breadcrumb-block {
    display: none;
}

@media all and (max-width: 768px) {
    .block-system-breadcrumb-block {
        display: none;
    }
}

.block-system-breadcrumb-block {
    color: var(--gray);
    font-size: var(--fc-small);
}

.block-system-breadcrumb-block a {
    color: var(--black);
    text-decoration: none;
    
}


.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
    margin-top: var(--margin-m);
    margin-bottom: var(--margin-m);
    list-style: none;
    border-bottom: 0px solid var(--azure5);
}





/* BOOTSTRAP BARRIO OVERWRITE: **** */



.item-list ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
}

.item-list ul li {
    margin: 0;
    padding: 0 0 0 0;
}


/* highlight region */

.user-logged-in .highlighted {
    padding-top: var(--margin-m);
    padding-bottom: var(--margin-s);
    background-color: var(--gray-light2);
}



/* ******* TYPOGRAPHY *********** */


.node h1 {
    font-size: var(--fc-h1plus);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    font-family: var(--ff-sans2);
    color: var(--blue-dark-2);

    margin-bottom: var(--margin-xl);
}

.node h2 {
    font-size: var(--fc-h1);
    font-weight: var(--fw-bold);
    color: var(--blue-dark-1);
    font-family: var(--ff-display1);
    text-wrap: balance;
    line-height: 1;
    
    width: 100%;
    

}

.node h3 {
    font-size: var(--fc-h3);
    font-weight: var(--fw-extrabold);
    font-family: var(--ff-sans2);
    color: var(--blue-dark-1);
    line-height: 1;
}


.node p {
    font-size: var(--fc-p2);
    font-weight: var(--fw-normal);
    color: var(--black);
    font-family: var(--ff-sans1);
    margin-bottom: 0;
}

.node a {
  color: var(--blue-light-1);
  text-decoration-line: underline;
  text-decoration-color: var(--blue-light-2);
  text-decoration-thickness: 2px;
  text-underline-offset: var(--margin-xxs);
  text-decoration-skip-ink: auto;
}

.node ul {
  padding-left: var(--margin-m);
  margin-bottom: 0;
  list-style: none;
}  

.node ol {
  list-style-type: decimal;

  margin-left: var(--margin-s);
  padding-left: var(--margin-l);

  & > li {
      list-style-type: decimal;
  }
  
}

.node ul > li::before {
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231c58de" class="size-6"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" /></svg>');
    background-position:  center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: var(--margin-s);
    position: relative;
    top: 0;
    transform: translateY(0.2rem);
    left: 0;
    color: var(--blue-base);

    width: var(--fs-h3);
    height: var(--fs-h3);
    display: inline-block;
    margin-left: var(--margin-s);
    
}

.node ul > li,
    .node ol > li {
    font-size: var(--fc-p2);
    font-weight: var(--fw-normal);
    color: var(--black);
    font-family: var(--ff-sans1);
    margin-bottom: var(--margin-s);
}

.node hr {
    margin: 0 0;
    color: var(--grey-dark-2);
    border: 0;
    border-top: 1px solid var(--grey-dark-2);
    background-color: var(--grey-dark-2);
    opacity: 0.8;
    height: 2px;
    width: 100%;
    border-radius: var(--br-m);
}

.node blockquote {
    background-color: var(--grey-light-1);
    padding: var(--margin-l) var(--margin-l);
    border-radius: var(--br-m);
}

.node blockquote p:last-of-type {
    margin-bottom: 0;
}

.node blockquote p {
    font-size: var(--fc-p2);
    color: var(--blue-dark-1);
    font-style: oblique;
}

.node  .button {
    border-radius: var(--br-m);
    background-color: var(--accent-2);
    color: var(--blue-dark-1);
    font-weight: var(--fw-bold);
    padding: var(--margin-s) var(--margin-l);
    text-decoration: none;
    text-wrap: balance;
    display: inline-block;
    margin-bottom: var(--margin-m);
    box-shadow: 0 2px 2px var(--c-black-transparent-4);

    &.primary {
        background-color: var(--accent-2);
        background: linear-gradient(90deg  , var(--accent-2) 0%, var(--accent-1) 100%);
        color: var(--blue-dark-1);
        border: 1px solid var(--accent-1);
    }

    &.secondary {
        background-color: var(--blue-dark);
        background: linear-gradient(90deg  , var(--blue-dark) 0%, var(--blue-base) 100%);
        color: var(--white);
        border: 1px solid var(--blue-dark);
    }

    &.outline {
        background-color: transparent;
        border: 2px solid var(--blue-light-1);
        color: var(--blue-base);
    }
}


/* tables */

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--margin-m);
}

.node table,
main table {
      display: table;
      border-spacing: 2px;
      border-collapse: collapse;
      box-sizing: border-box;
      text-indent: 0;
      table-layout: auto;
      width: max(50rem, 100%);

    th, td {
        border: 1px solid var(--grey-dark-1);
        padding: var(--margin-s);
        text-align: center;
    }

    th {
        background-color: var(--blue-base);
        color: var(--white);
        font-weight: var(--fw-semibold);

        p {
            color: var(--white);
            font-weight: var(--fw-semibold);
        }
    }

    tbody tr:nth-child(odd) {
        background-color: var(--white);
    }
    tbody tr:nth-child(even) {
        background-color: var(--grey-light-2);
    
    }

}

@media all and (width > 800px) {
    .node table,
    main table {
        width: 100%;
    }
}


/* PAGINATION */

.view ul.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    li a {
        color: var(--primary);
        font-weight: var(--fw-bold);
    }
}


/* override  */

.feed-icon {
    background: url(/themes/gemisrl2025/images/feed.svg) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    width: 16px;
    direction: ltr;
    height: 16px;
  }
/* Override Drupal messages alert wrapper z-index issues 
   The alert region typically appears and is blocked by sticky headers or position:relative blocks 
*/
.highlighted {
    position: relative;
    z-index: 99999 !important;
}

div[data-drupal-messages] {
    position: relative;
    z-index: 99999 !important;
}

.messages-list, .messages {
    position: relative;
    z-index: 99999 !important;
}

/* Override Drupal messages alert wrapper z-index issues 
   The alert region typically appears and is blocked by sticky headers or position:relative blocks 
*/
.highlighted {
    position: relative;
    z-index: 99999 !important;
}

div[data-drupal-messages] {
    position: relative;
    z-index: 99999 !important;
}

.messages-list, .messages {
    position: relative;
    z-index: 99999 !important;
}