/* @import url("../js/ol/ol.css"); */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}

@layer base {
  a {
    text-decoration: none;
  }
  @font-face {
    font-family: "Roboto";
    font-weight: 400;
    src: url("../fonts/Roboto-Regular-webfont.woff") format(woff);
  }
  @font-face {
    font-family: "Roboto";
    font-weight: 300;
    src: url("../fonts/Roboto-Light-webfont.woff") format(woff);
  }
  @font-face {
    font-family: "Roboto";
    font-weight: 500;
    src: url("../fonts/Roboto-Medium-webfont.woff") format(woff);
  }

  :root {
    /*variaciones de colores?*/
    --clr-black: black;
    --clr-white: #ffffff;
    --clr-blue: #005ca2;
    /* --clr-light-blue: #84cfed; */
    --clr-light-blue: #c8eaf7;
    --clr-yellow: #fec800;

    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.25rem;
    --fs-700: 1.5rem;
    --fs-800: 2rem;
    --fs-900: 3.75rem;
    --fs-1000: 3.75rem;

    @media (width > 760px) {
      --fs-500: 1.25rem;
      --fs-600: 1.5rem;
      --fs-700: 2rem;
      --fs-800: 3rem;
      --fs-900: 5rem;
      --fs-1000: 7.5rem;
    }
  }

  :root {
    --text-main: var(--clr-black);
    --text-high-contrast: var(--clr-white);
    --text-brand: var(--clr-blue);
    --text-brand-light: var(--clr-light-blue);

    /*cambiar bg clrs*/
    --background-extra-light: var(--clr-light-blue);
    --background-light: var(--clr-light-blue);
    --background-main: var(--clr-light-blue);
    --background-dark: var(--clr-blue);
    --background-extra-dark: var(--clr-blue);

    --ff-body: "Roboto", sans-serif;

    --font-size-heading-sm: var(--fs-700);
    --font-size-heading-regular: var(--fs-800);
    --font-size-heading-lg: var(--fs-900);
    --font-size-heading-xl: var(--fs-1000);

    --font-size-sm: var(--fs-300);
    --font-size-regular: var(--fs-400);
    --font-size-md: var(--fs-500);
    --font-size-lg: var(--fs-600);

    --border-radius-1: 0.25rem;
    --border-radius-2: 0.5rem;
    --border-radius-3: 0.75rem;
  }

  /**/
  html {
    font-family: var(--ff-body);
    line-height: 1.6;
    scroll-padding: 3rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    font-size: var(--font-size-regular);
    color: var(--text-main);
    background-color: var(--background-main);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--ff-heading);
    color: var(--text-brand);
  }

  h1 {
    font-size: var(--font-size-heading-lg);
  }

  a {
    color: var(--text-main);
  }

  a:hover,
  a:focus-visible {
    color: var(--text-brand);
  }

  img {
    border-radius: var(--border-radius-3);
  }
}

@layer layout {
  .equal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
  }
  .equal-columns-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-template-rows: auto;
    gap: 1rem;
  }
  .flow > * + * {
    margin-top: var(--flow-spacer, 1em);
  }
  .wrapper {
    --wrapper-max-width: 1130px;

    max-width: var(--wrapper-max-width);
    margin-inline: auto;
    padding-inline: 1rem;

    &[data-width="narrow"] {
      --wrapper-max-width: 720px;
    }

    &[data-width="wide"] {
      --wrapper-max-width: 1330px;
    }
  }

  .section {
    padding-block: 3.5rem;

    @media (min-width: 760px) {
      padding-block: 5rem;

      &[data-padding="compact"] {
        padding-block: 2.5rem;
      }
    }
  }
}

@layer components {
  /*inicio*/
  @layer inicio {
    .equal-columns-3 {
      > a {
        display: block;
        background-image: linear-gradient(#1095c1, #1095c1);
        background-size: 0 100%;
        background-repeat: no-repeat;
        transition: 0.5s;
        &:hover {
          background-size: 100% 100%;
          color: black;
          transform: scale(1.01);
        }
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        background-color: var(--clr-white);
        border-radius: var(--border-radius-3);
        border: 1px solid black;
        padding: 1rem;
        margin: 1rem;
        svg {
          fill: var(--clr-blue);
          height: 100px;
          width: 100px;
        }
        gap: 2rem;
        display: grid;
        justify-items: center;
        grid-template-rows: subgrid;
        grid-row: span 3;

        p {
          text-align: center;
        }
      }
    }
  }

  .pagina-inicio {
    background: linear-gradient(
        rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0.6)
      ),
      url("../images/alberdi.png");
    background-position: center;
    background-size: cover;
  }
  .footer {
    padding: 2rem;
    color: var(--clr-white);
    background-color: var(--clr-black);
    grid-area: footer;
  }
  @layer mapoteca {
    .breadcrumb ol {
      padding-left: 0;
    }

    .breadcrumb li {
      display: inline;
    }

    .breadcrumb li:not(:last-child)::after {
      content: "»";
    }

    .mapa-en-lista:not(:first-of-type) {
      margin-top: 5rem;
    }
    .mapa-en-lista {
      display: grid;
      grid-template-columns: 0.2fr 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      img {
        grid-column: 1/2;
        grid-row: 1/3;
      }
      h3,
      time {
        grid-column: 2/3;
      }
      h3 {
        grid-row: 1/2;
      }
    }
    div.equal-columns-3 {
      div.ultimo-mapa-subgrid {
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
        background-color: var(--clr-white);
        border: 1px solid black;
        border-radius: 5px;
        display: grid;
        padding: 1rem;
        grid-template-rows: subgrid;
        grid-row: span 3;
      }
    }
    .descarga {
      color: white;
      border-radius: 10px;
      background-color: green;
      text-decoration: none;
      padding: 0.5rem;
      display: inline-block;
      margin-block: 1rem;
      transition: all 1s ease;
      &&:hover {
        background-color: rgb(1, 71, 1);
      }
    }
    .mapoteca {
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url("../images/tucuman.jpg");
      background-position: center;
      background-size: cover;
      h2 {
        text-shadow: 1px 1px 2px white;
      }
    }
    .tags {
      display: flex;

      li {
        margin: 1rem;
      }
    }
    main:has(.mapoteca-main) {
      display: grid;
      grid-template-areas:
        "nav main"
        "nav main";
      grid-template-columns: 12rem 1fr;
    }
    .mapoteca-main {
      grid-area: main;
    }
    .mapoteca-nav {
      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
      grid-area: nav;
      background-color: var(--clr-white);
      position: sticky;
      height: inherit;
      top: 0;
      max-height: 100svh;
      padding-top: 1rem;
      padding-left: 1rem;
      color: var(--clr-black);
      /*el primer ul que tiene las secciones*/
      > ul {
        list-style-type: upper-roman;
        display: grid;
        gap: 1rem;
        margin-left: 1rem;
        > li {
          cursor: pointer;
          > ul {
            list-style-type: lower-roman;

            > li {
              > ul {
                list-style-type: lower-alpha;
                display: none;
                opacity: 0;
                font-size: 0.9rem;
                margin-left: 0.15rem;
                transition: opacity 0.5s ease, display 0.5s ease allow-discrete;
                &.shown {
                  opacity: 1;
                  display: block;
                  @starting-style {
                    opacity: 0;
                  }
                }
              }
            }
            display: none;
            opacity: 0;
            font-size: 0.95rem;
            margin-left: 0.1rem;
            transition: opacity 0.5s ease, display 0.5s ease allow-discrete;
            &.shown {
              opacity: 1;
              display: block;
              @starting-style {
                opacity: 0;
              }
            }
          }
        }
      }
    }
  }
  .site-header {
    overflow-x: clip;
    position: relative;
  }
  .logos {
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--clr-blue);
  }
  .primary-navigation {
    .active {
      border-bottom: var(--clr-white) 1px dashed;
      color: var(--clr-light-blue);
    }
    a {
      transition: all ease 1s;
      &:hover {
        color: var(--clr-light-blue);
      }
      color: var(--clr-white);
    }
    ul {
      padding-block: 0.5rem;
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      height: 100%;
    }

    a {
      text-decoration: none;
    }
  }
  /* geoservicios */
  .geoservicios {
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url("../images/geoservicios.png");
    background-position: left;
    background-size: cover;
  }
  .geoservicio {
    border-bottom: 1px dashed black;
  }
  .link-box {
    display: flex;
    justify-content: space-between;
    border: 1px solid black;
    padding: 1rem;
  }
}

@layer utilities {
  [hidden] {
    display: none;
  }

  .resizing * {
    transition: none;
    animation-play-state: paused;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

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

  .text-brand {
    color: var(--text-brand);
  }
  .text-high-contrast {
    color: var(--text-high-contrast);
  }

  .section-title {
    font-size: var(--font-size-heading-regular);
  }
  .background-white {
    background-color: var(--clr-white);
  }

  .background-base {
    background-color: var(--background-base);
  }
  .background-light {
    background-color: var(--background-light);
  }
  .background-extra-light {
    background-color: var(--background-extra-light);
  }
  .background-dark {
    background-color: var(--background-dark);
  }
  .background-extra-dark {
    background-color: var(--background-extra-dark);
  }

  .background-accent {
    background-color: var(--background-accent-dark);
  }

  .font-size-sm {
    font-size: var(--font-size-sm);
  }
  .font-size-regular {
    font-size: var(--font-size-regular);
  }
  .font-size-md {
    font-size: var(--font-size-md);
  }
  .font-size-lg {
    font-size: var(--font-size-lg);
  }
}