/* MODULES */
@import "./modules/skip-link.css";
@import "./modules/layout.css";
@import "./modules/section.css";
@import "./modules/grid.css";
@import "./modules/nav.css";
@import "./modules/gallery.css";
@import "./modules/color-mode-btn.css";
@import "./modules/socials.css";

/* FONTS */

/* nunito-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/nunito-sans-v15-latin-regular.woff2") format("woff2");
}

/* PARAMS */

/* Light mode */
:root, [data-gui-theme="light"] {
  /* Site variables */
  --font-family: "Nunito Sans", system-ui, sans-serif;
  --font-size-desktop: 20px;
  --gui-font-weight-bold: 400;
  --bg-color:	hsl(0, 0%, 100%);
  --text-color: hsl(0, 0%, 15%);
  --text-color-invert: hsl(0, 0%, 99%);
  --brand-color: var(--text-color);
  --brand-interaction-color: hsl(0, 0%, 25%);
  --separator-color: hsl(0, 0%, 30%);
  /* Gentle UI library variables */
  --gui-font-family: var(--font-family);
  --gui-bg-color: var(--bg-color);
  --gui-text-color: var(--text-color);
  --gui-text-color-invert: var(--text-color-invert);
  --gui-primary-color: var(--brand-color);
  --gui-accent-color: var(--brand-color);
  --gui-primary-interaction-color: var(--brand-interaction-color);
  --gui-accent-interaction-color: var(--brand-interaction-color);
  --gui-separator-color: var(--separator-color);

  /* --gui-font-family: system-ui, sans-serif;
  --gui-font-weight: 400;
  --gui-line-height: 1.5;
  --gui-error-color-light: #f7bebe;
  --gui-error-color-dark: #d32f2f;
  --gui-success-color-light: #c5eac8;
  --gui-success-color-dark: #388e3c;
  --gui-warning-color-light: #ffe0af;
  --gui-warning-color-dark: #b45a00;
  --gui-info-color-light: #cecece;
  --gui-info-color-dark: #323232;
  --gui-base-box-shadow: 0 0 12px -4px rgba(0, 0, 0, 0.4);
  --gui-manifest-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.7); */
}

/* Dark mode */
[data-gui-theme="dark"] {
  /* Site variables */
  --bg-color:	hsl(0, 0%, 7%);
  --text-color: hsl(0, 0%, 93%);
  --text-color-invert: hsl(0, 0%, 10%);
  --brand-color: var(--text-color);
  --brand-interaction-color: hsl(0, 0%, 100%);
  --separator-color: hsl(0, 0%, 70%);
  /* Gentle UI library variables */
  --gui-bg-color: var(--bg-color);
  --gui-text-color: var(--text-color);
  --gui-text-color-invert: var(--text-color-invert);
  --gui-primary-color: var(--brand-color);
  --gui-accent-color: var(--brand-color);
  --gui-primary-interaction-color: var(--brand-interaction-color);
  --gui-accent-interaction-color: var(--brand-interaction-color);
  --gui-separator-color: var(--separator-color);

  /* --gui-font-family: system-ui, sans-serif;
  --gui-font-weight: 400;
  --gui-line-height: 1.5;
  --gui-error-color-light: #f7bebe;
  --gui-error-color-dark: #d32f2f;
  --gui-success-color-light: #c5eac8;
  --gui-success-color-dark: #388e3c;
  --gui-warning-color-light: #ffe0af;
  --gui-warning-color-dark: #b45a00;
  --gui-info-color-light: #cecece;
  --gui-info-color-dark: #323232;
  --gui-base-box-shadow: 0 0 12px -4px rgba(0, 0, 0, 0.4);
  --gui-manifest-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.7); */
}

/* External components customization */
.gui-button {
  --gui-button-border-radius: 1rem;
  --gui-button-text-transform: uppercase;
}

.gui-button--fab {
  --gui-button-fab-size: 70px;
}

.gui-nav-trigger__SVG {
  --gui-nav-trigger-size: 100%;
}

:is(.gui-h2,.gui-h3,.gui-h4,.gui-h5,h2,h3,h4,h5) {
  --heading-font-weight: 400;
  --heading-text-transform: revert;
  font-weight: var(--heading-font-weight);
}

.gui-accordion {
  --gui-accordion-trigger-size: 24px;
  --gui-accordion-panel-padding-block: 1rem;
  --gui-accordion-panel-padding-inline: 1rem;
  --gui-accordion-panel-border: 1px solid currentColor;
  --gui-accordion-bg-color: transparent;
  --gui-accordion-text-color: var(--text-color);
  --gui-accordion-gap: 1.5rem;
  --gui-accordion-trigger-icon-color: var(--text-color);
  --gui-accordion-trigger-bg-color: transparent;
  --gui-accordion-trigger-active-icon-color: var(--text-color);
  --gui-accordion-trigger-active-bg-color: transparent;
}

@container content (inline-size > 750px) {
  .gui-accordion {
    --gui-accordion-trigger-size: 50px;
    --gui-accordion-panel-padding-inline: 2rem;
  }
}

[data-gui-theme="dark"] .gui-accordion {
  --gui-accordion-bg-color: transparent;
  --gui-accordion-text-color: var(--text-color);
}

.gui-textarea {
  --gui-textarea-background-color: transparent;
  --gui-textarea-padding-inline: 1rem;
  --gui-textarea-margin-block-end: 1.5rem;
  --gui-textarea-border-radius: 1rem;
  --gui-textarea-number-of-lines: 6;
}

.gui-input {
  --gui-input-background-color: transparent;
  --gui-input-padding-inline: 1rem;
  --gui-input-margin-block-end: 1.5rem;
  --gui-input-border-radius: 1rem;
}

.gui-modal {
  --gui-modal-background-color: transparent;
  --gui-modal-big-max-width: 90%;
  --gui-modal-padding-block: 0;
  --gui-modal-padding-inline: 0;
  --gui-modal-border-radius: 0;
  --gui-modal-body-margin-block: 0;
  --gui-modal-close-offset: 1rem;
  --gui-modal-box-shadow: none;
  --gui-modal-max-height: 100%;
}

.gui-modal__Close {
  --gui-modal-close-position: fixed;
  --gui-modal-close-zindex: 1;
  --gui-modal-close-border-radius: 50%;
}

/* UTILITIES */
.u-margin-block-start-0 {
  margin-block-start: 0;
}

.u-margin-block-end-0 {
  margin-block-end: 0;
}

@media screen and (width > 1024px) {
  .u-desktop-hidden {
    display: none;
  }
}

.u-sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/* GENERAL STYLES */
@media screen and (width > 1024px) {
  html {
    font-size: var(--font-size-desktop);
  }
}

@media screen and (width > 1024px) {
  html:has(dialog[open]) {
    padding-inline-end: 15px;
  }
}

body:has(.nav.is-visible) {
  overflow: hidden;
}

body:has(.nav.is-visible) main,
body:has(.nav.is-visible) .skip-link {
  visibility: hidden;
}

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

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

.top-scroll {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 10;
    padding: 6px 16px;
    border-radius: 50%;
    background: radial-gradient(189.49% 141.42% at 100% 100%, rgb(192, 192, 192) 5.615352839231491%, rgb(128, 128, 128) 37.739819288253784%, rgb(64, 64, 64) 84.9206030368805%);
    cursor: pointer;
    &.active {
        display: block;
        animation: showElement .3s linear forwards;
    }
    span {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 20px;
        font-weight: 700;
        color: #ffffff;
    }
}
@keyframes showElement {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@font-face {
    font-family: 'IcoMoon';
    src: url('/fonts/IcoMoon.eot');
    src: url('/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
        url('/fonts/IcoMoon.woff') format('woff'),
        url('/fonts/IcoMoon.ttf') format('truetype'),
        url('/fonts/IcoMoon.svg#IcoMoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-eye-open:before,
.icon-eye:before {
    content: "\3c";
}

.icon-mail:before {
    content: "\3b";
}

.date {
    float:right;
    color:grey;
    font-size: 1rem;
}
.hits {
    color:grey;
    font-size: 1rem;
}
.date .hits {
    text-align: right;
}
.donate {
    font-size: 0.7rem;
}