:root {
    /* Colors */
    
    /* Main palette */
    --blue: #2abad5;
    --off-white: #f2f2f2;
    --gray: #bdbdbd;
    --dark-gray: #313235;
    --teal: #002e34;
    --dark-teal: #0e2326;
    --off-black: #00090b;

    /* Variations */
    --dark-gray200: #31323538;
    --gray-disabled: #dfdfdf;

    
    /* Lengths */
    --max-site-width: 75rem;
}

/* Border box init */

html {
    box-sizing: border-box;
    background-color: var(--off-white);
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
}

/* -> Fonts */

h1, h2, h3, h4 {
    font-family: 'Play', sans-serif;
    color: var(--off-black);
}

p, li, a {
    font-family: 'Encode Sans', sans-serif;
    color: var(--off-black);
}


/* -> Main */

main {
    width: 100%;
}

/* -> Titles */

h1.title-big {
    font-size: 4rem;
    text-align: center;
    margin: 1rem 0;
}

hr {
    color: var(--off-black);
    margin: 0 0 2rem;
    border-width: 0.125rem;
}

h2 {
    text-decoration: underline 0.125rem;
}

/* -> Paragraphs */

p {
    line-height: 1.6;
}

/* -> Sections */

.section-content {
    max-width: var(--max-site-width);
    width: 80%;
    margin: 0 auto;
}

.section-content.wide {
    width: 100%;
}

.section-wrapper {
    width: 100%;
    padding: 2rem 0;
}

.section-wrapper.title {
    padding: 0;
}

.section-wrapper.dark {
    background-color: var(--dark-gray);
}

.section-wrapper.dark p,
.section-wrapper.dark h1,
.section-wrapper.dark h2,
.section-wrapper.dark h3 {
    color: var(--off-white);
}

/* -> Cards */

.card-wrapper {
    box-shadow:
        0px 1.6px 6.3px rgba(0, 0, 0, 0.027),
        0px 4.2px 14.2px rgba(0, 0, 0, 0.049),
        0px 8.4px 24.6px rgba(0, 0, 0, 0.07),
        0px 14.6px 39.5px rgba(0, 0, 0, 0.097),
        0px 24px 65px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
}

.card-wrapper.big {
    block-size: calc(80vw*9/16);
    max-block-size: 50vh;
    min-block-size: 16rem;
    margin-block-end: 2rem;
}

.card-wrapper.medium {
    inline-size: calc(100% / 3 - 2rem / 3);
    min-inline-size: 16rem;
}

.card-container {
    padding: 0.5rem;
    background-color: var(--dark-gray200);
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.card-text {
    text-align: end;
    margin: 2rem;
}

@media (min-width: 37.5rem) {
    .card-text {
        font-size: 2em;
    }
}

.card-container h2,
.card-container h3,
.card-container p {
    margin: 0;
    text-decoration: none;
    color: var(--off-white);
    text-shadow: 0 0 6px black;
}

.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* --> Card pictures */

.card-wrapper {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* ---> Inicio */
#card-home {
    background-image: url("../assets/img/dam.jpg");
}

/* ---> Styleguide */
#card-category-home {
    background-image: url("../assets/img/category-home.jpg");
}
#card-category-industrial {
    background-image: url("../assets/img/category-industrial.jpg");
}
#card-category-agriculture {
    background-image: url("../assets/img/category-agriculture.jpg");
}

/* --> Buttons */

a.button-link {
    text-decoration: none;
    color: var(--off-white);
}

div.button-container {
    padding: 0.75rem 1.25rem;
    background-color: var(--blue);
    font-weight: bold;
    border-radius: 2rem;
    width: fit-content;
    transition: all 100ms ease;
}

div.button-container:hover {
    background-color: var(--off-black);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

div.button-container:active {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.dark div.button-container {
    background-color: var(--dark-gray);
}

.dark div.button-container:hover {
    background-color: var(--blue);
}

.disabled div.button-container {
    background-color: var(--gray);
    color: var(--gray-disabled)
}

.disabled div.button-container:hover {
    background-color: var(--gray);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transform: translateY(0);
    cursor: not-allowed;
}

/* -> Common components */

header,
.nav-container.show {
    background-color: var(--off-white);
    padding: 1rem 0;
}

.nav-container a,
header p {
    color: var(--off-black);
    text-decoration: none;
}

.nav-container ul,
footer ul {
    list-style: none;
    padding: 0;
}


/* -> Header */

/* --> Sticky header */
header {
    position: sticky;
    top: 0;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    block-size: 4.5rem;
}

/* --> Flex header */
.header-container {
    display: flex;
    align-items: center;
}

/* --> Logo */

.logo-container {
    block-size: 1.75rem;
    
}

.logo-container img {
    display: block;
    max-block-size: 100%;
}

/* -> Navigation */

/* --> Menu button */

#button-menu {
    padding: 0;
    margin: 0;
    border-radius: 4px;
    border: none;
    padding: 4px;
    margin-inline-start: auto;
    background-color: var(--off-white);
    transition: all 80ms ease;
}

#button-menu:hover {
    background-color: var(--gray);
    transform: translateY(-1px);
}

#button-menu:active {
    background-color: var(--gray);
    box-shadow: inset 0 0 4px var(--dark-gray200);
    transform: translateY(0);
}

#button-menu.on {
    background-color: var(--gray);
}

/* --> Menu button icon [uses iconoir library] */

i.iconoir-menu::before {
    font-size: 1.5rem;
    color: var(--off-black);
}

.nav-container {
    display: none;
}

/* --> Mobile size list | Activated by menu.js */

.nav-container.show {
    display: block;
    position: sticky;
    top: 4.5rem;
}

/* --> Desktop size list | Hides menu button
       Hides mobile "open nav container" */

@media (min-width: 40rem) {
    .nav-container {
        display: block;
        margin-inline-start: auto;
    }
    
    nav {
        margin-inline-start: auto;
    }

    header button,
    .nav-container.show,
    .nav-container.hide {
        display: none;
    }
}

/* --> Navigation list style | Some parts common for desktop and mobile */

.nav-container ul {
    gap: 0.5rem;
    margin: 0;
    font-weight: bold;
    display: flex;
}

/* ---> Desktop only style */

.nav-container ul a:last-child {
    padding-inline-end: 0;
}

.nav-container ul a:first-child {
    padding-inline-start: 0;
}

/* ---> Mobile only style */

.nav-container.show ul {
    flex-direction: column;
    gap: 0;
}

.nav-container.show li {
    font-size: 1.25rem;
}

.nav-container.show a {
    padding: 1.25rem;
}

.nav-container.show li {
    padding: 1.25rem 0;
}

.nav-container.show li {
    border-block-end: 2px solid var(--dark-gray200);
    text-align: end;
}

.nav-container.show a {
    margin-inline-end: calc(10vw);
}

.nav-container.show {
    padding: 0;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

/* --> Nav links style */

.nav-container li a {
    padding: 0.5rem 0.75rem;
}

.nav-container li a:hover {
    color: var(--gray);
}


/* -> Footer */

.footer-container {
    border-top: 2px solid var(--dark-gray);
    padding: 1rem 0;
    background-color: var(--dark-gray);
    color: var(--off-white);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-site-width) / 4),1fr));
}

footer h2 {
    font-size: 1.2rem;
}

footer a,
footer p,
footer h2 {
    color: var(--off-white);
    text-decoration: none;
}

footer a:hover {
    color: var(--gray);
    text-decoration: underline;
}

footer ul {
    margin: 0;
}

.footer-container p:last-child {
    margin-bottom: 0;
}


/* -> Page layout */

/* Make sticky footer for short content pages */
body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}