/*
 *  lga
 *
 *  Site styles on top of Bootstrap: the "warm charcoal and pink" palette
 *  (design/prompt-palette-carbone-rosa.md), defined once as variables and
 *  mapped onto Bootstrap's. Contrasts checked there (WCAG 1.4.3, 1.4.11):
 *  the antique pink #B86E74 only for large titles, icons and decorations,
 *  the text pink #9C5058 for normal text, links and buttons.
 *
 *  Copyright (C) 2020-2026 Marco Mastroddi. All rights reserved.
 */

/*
 * Questrial (text and titles), Noto Serif italic (quotations, the sentences
 * that say it all, reviews; Dancing Script until 2026-10-13, Laura and Marco):
 * SIL Open Font License 1.1 (fonts/OFL-*.txt), self-hosted (WebMastro D29):
 * no request to Google, so the Content Security Policy stays 'self'.
 * Latin and Latin Extended.
 */

@font-face {
  font-family: "Noto Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-serif-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Noto Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-serif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --lga-bianco: #fff;
  --lga-avorio: #faf9f6;
  --lga-perla: #eae8e3;
  --lga-cipria: #f8efec;
  --lga-carbone: #44403e;
  --lga-carbone-hover: #2e2b2a;
  --lga-rosa: #b86e74;
  --lga-rosa-testo: #9c5058;
  --lga-rosa-hover: #7e3f46;
  --lga-testo: #33302f;
  --lga-testo-2: #645f5d;
  --lga-linea: #e6e1dc;
  --lga-gutter: clamp(1rem, 4vw, 3rem);
  /* the two fonts of the site: Questrial for the text and the titles (Bootstrap's sans-serif below), Noto Serif italic for the rest */
  --lga-font-serif: "Noto Serif", Georgia, serif;

  --bs-font-sans-serif: "Questrial", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 1.125rem;
  --bs-body-color: var(--lga-testo);
  --bs-body-color-rgb: 51, 48, 47;
  --bs-body-bg: var(--lga-bianco);
  --bs-secondary-color: var(--lga-testo-2);
  --bs-border-color: var(--lga-linea);
  --bs-link-color: var(--lga-rosa-testo);
  --bs-link-color-rgb: 156, 80, 88;
  --bs-link-hover-color: var(--lga-rosa-hover);
  --bs-link-hover-color-rgb: 126, 63, 70;
  /* primary: the charcoal (legacy custom color 1); secondary: the text pink (custom color 2) */
  --bs-primary: var(--lga-carbone);
  --bs-primary-rgb: 68, 64, 62;
  --bs-secondary: var(--lga-rosa-testo);
  --bs-secondary-rgb: 156, 80, 88;

  /* the framework widgets */
  --wm-consent-background: var(--lga-carbone);
  --wm-consent-button-color: var(--lga-carbone);
  --wm-map-background: var(--lga-perla);
  --wm-map-color: var(--lga-testo);
  --wm-map-button-background: var(--lga-carbone);
  /* the separators as legacy: short (half of the text column), thin, fading at the ends, well apart */
  --wm-separator-color: var(--lga-rosa);
  --wm-separator-width: min(24rem, 60%);
  --wm-separator-thickness: 1px;
  --wm-separator-space: 4rem;
  --wm-back-to-top-background: rgb(68 64 62 / 0.85);
  --wm-back-to-top-hover-background: var(--lga-carbone);
  /* WhatsApp in its own green (WhatsApp's "teal green" and "dark"): the white icon 4.1:1 and 7.7:1;
     its bright #25D366 would give the icon only 2:1 */
  --wm-floating-link-background: #128c7e;
  --wm-floating-link-hover-background: #075e54;
  /* larger than the back to top button (56 px against 48) and well above it (54 px), so that a
     finger does not hit the wrong one (Marco) */
  --wm-floating-link-size: 3.5rem;
  --wm-floating-link-gap: 3.375rem;
}

/* Bootstrap compiles its buttons with fixed colors: the palette's instead */
.btn-primary {
  --bs-btn-bg: var(--lga-carbone);
  --bs-btn-border-color: var(--lga-carbone);
  --bs-btn-hover-bg: var(--lga-carbone-hover);
  --bs-btn-hover-border-color: var(--lga-carbone-hover);
  --bs-btn-active-bg: var(--lga-carbone-hover);
  --bs-btn-active-border-color: var(--lga-carbone-hover);
}

.btn-secondary {
  --bs-btn-bg: var(--lga-rosa-testo);
  --bs-btn-border-color: var(--lga-rosa-testo);
  --bs-btn-hover-bg: var(--lga-rosa-hover);
  --bs-btn-hover-border-color: var(--lga-rosa-hover);
  --bs-btn-active-bg: var(--lga-rosa-hover);
  --bs-btn-active-border-color: var(--lga-rosa-hover);
}

.btn-outline-secondary {
  --bs-btn-color: var(--lga-rosa-testo);
  --bs-btn-border-color: var(--lga-rosa-testo);
  --bs-btn-hover-bg: var(--lga-rosa-testo);
  --bs-btn-hover-border-color: var(--lga-rosa-testo);
  --bs-btn-active-bg: var(--lga-rosa-hover);
  --bs-btn-active-border-color: var(--lga-rosa-hover);
}

/* bold words in the texts: the text pink (legacy); only in the content, never on dark backgrounds */
main strong,
main b {
  color: var(--lga-rosa-testo);
}

/* the bands of a page alternate pearl and powder pink, the page between them white */
.lga-band-perla {
  background-color: var(--lga-perla);
}

.lga-band-cipria {
  background-color: var(--lga-cipria);
}

/* the pages made of a grid of cards (projects): ivory, so the white cards stand out */
.lga-page-avorio {
  background-color: var(--lga-avorio);
}

/* the portfolio's cards: on ivory; above them the space of a separator (4rem), as the quotation's line has above the section; below, the air of the new design */
.lga-cards-section {
  padding-top: var(--wm-separator-space);
  padding-bottom: clamp(4.5rem, 10vw, 9rem);
  background-color: var(--lga-avorio);
}

.lga-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 2rem;

  a {
    color: var(--lga-carbone);
  }

  a:hover,
  a:focus-visible {
    color: var(--lga-rosa-testo);
  }
}

/* the thin line under the footer (legacy) */
.lga-accent-line {
  height: 4px;
  background-color: var(--lga-rosa);
}

/* the legacy text container: a column narrow enough for comfortable reading (48rem less its padding) */
.lga-readable {
  max-width: 46.125rem;
  margin-inline: auto;
}

/* large titles in the antique pink (3.8:1 on white, only for large text) */
.lga-title-rosa {
  color: var(--lga-rosa);
}

/* the titles of the pages in the new look that keep their old layout (a project); the color is the title's own */
.lga-title-large {
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/*
 * The colors of Laura's texts (legacy classes in her files): charcoal, and
 * pink in the text pink, the antique pink only for large titles.
 */
.text-custom-color-1 {
  color: var(--lga-carbone);
}

.text-custom-color-2 {
  color: var(--lga-rosa-testo);

  &:is(h1, h2, h3, .h1, .h2, .h3) {
    color: var(--lga-rosa);
  }
}

/* the site's own icons (images/icons/), sized like the Bootstrap icons around them */
.lga-icon {
  width: auto;
  height: 1em;
  vertical-align: -0.125em;
}

/* the icons of the services on the home page */
.lga-service-icon {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--lga-carbone);
}

/* "the best idea + accurate drawings = the right result" */
.lga-equation {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: center;
  color: var(--lga-carbone);
}

.lga-equation-term {
  flex: 1 1 0;
  max-width: 11rem;
}

.lga-equation-icon {
  font-size: 3rem;
  line-height: 1;
}

.lga-equation-operator {
  flex: none;
  margin-top: 0.9rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--lga-testo-2);
}

/* quotations and reviews in Noto Serif italic */
/* as wide as its words, up to its width, and centered: a short quotation stands in the middle (legacy) */
.lga-quotation.wm-quotation {
  width: fit-content;
  max-width: 54rem;
  --wm-quotation-marks-color: var(--lga-rosa);

  blockquote {
    padding-top: 1.2rem;
    font-family: var(--lga-font-serif);
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.6;
    text-align: start;
  }

  figcaption {
    text-align: end;
    color: var(--lga-testo-2);
  }
}

.lga-review.wm-quotation {
  margin-top: 0;

  blockquote {
    font-family: var(--lga-font-serif);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.8;
    text-align: start;
  }
}

.lga-stars {
  font-size: 1.4rem;
  color: var(--lga-rosa);
}

/* the service cards: their names on the photos, over the palette's shade */
.lga-service-card {
  max-width: 20rem;
  margin-inline: auto;

  /* the name in the middle of the photo (legacy) */
  .card-img-overlay {
    --bs-black-rgb: 51, 48, 47;
    --bs-bg-opacity: 0.55;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .card-title a {
    color: #fff;
    text-decoration: none;
  }

  /* under the pointer the shade darkens, no underline; the keyboard focus keeps it */
  .card-img-overlay {
    transition: background-color 0.2s;
  }

  &:hover .card-img-overlay {
    --bs-bg-opacity: 0.7;
  }

  .card-title a:focus-visible {
    text-decoration: underline;
  }

  @media (prefers-reduced-motion: reduce) {
    .card-img-overlay {
      transition: none;
    }
  }
}

/* the note on the services online: white on charcoal */
.lga-online {
  max-width: 48rem;
  margin-inline: auto;
  padding: 1.5rem;
  color: #fff;
  background-color: var(--lga-carbone);
  border-radius: var(--bs-border-radius);

  :last-child {
    margin-bottom: 0;
  }
}

/* the shade of the home slides: the palette's charcoal; a soft shadow keeps
   the white words readable on the lightest photos too */
.carousel {
  --wm-carousel-shade: rgb(51 48 47 / 0.42);
}

.carousel-caption {
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.7);
}

/* the photo at the top of a page (legacy jumbotron with an image), under the palette's shade */
.lga-top-image {
  position: relative;
  height: 40vh;
  height: 40svh;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(51 48 47 / 0.42);
  }
}

/* the project cards: white on the ivory page, the title in the text pink, every word capitalized (legacy) */
.lga-project-card {
  height: 100%;
  background-color: var(--lga-bianco);
  border-color: var(--lga-linea);

  .card-title {
    margin: 0.5rem 0 1.25rem;
    text-align: center;
    font-size: 1.25rem;
    text-transform: capitalize;
  }

  .card-title a {
    color: var(--lga-rosa-testo);
    text-decoration: none;
  }

  /* under the pointer only the hand cursor of the link (the whole card); the keyboard focus keeps the underline */
  .card-title a:focus-visible {
    text-decoration: underline;
  }

  /* the facts from edge to edge of the card, as the legacy list group */
  .lga-facts {
    margin: 0 calc( -1 * var(--bs-card-spacer-x) ) calc( -1 * var(--bs-card-spacer-y) );

    dt {
      padding-left: var(--bs-card-spacer-x);
    }

    dd {
      padding-right: var(--bs-card-spacer-x);
    }
  }
}

/* the cards of the portfolio: the legacy width, closer together */
.lga-cards.container {
  max-width: 1200px;
  --wm-masonry-gap: 1rem;
}

/*
 * The key facts of a project, one line each between thin lines (legacy list
 * group): the label in the secondary text color, the value in charcoal, the values in
 * one column at 5/12 of the width (legacy col-5 and col-7).
 */
.lga-facts {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin: 0;

  dt,
  dd {
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--lga-linea);
  }

  /* the label grey (legacy #555 text), so that the value in charcoal stands out */
  dt {
    padding-right: 1rem;
    font-weight: normal;
    color: var(--lga-testo-2);
  }

  /* the value in charcoal and bold (Marco): distinct from the grey label at a glance */
  dd {
    font-weight: 700;
    color: var(--lga-carbone);
  }
}

/* beside the preview of a project page: as high as the photo, a row each, no line above the first */
.lga-project-summary .lga-facts {
  height: 100%;
  grid-auto-rows: 1fr;

  dt,
  dd {
    display: flex;
    align-items: flex-start;
  }

  dt {
    padding-left: 1.25rem;
  }

  dd {
    padding-right: 1.25rem;
  }

  dt:first-of-type,
  dd:first-of-type {
    border-top: 0;
  }
}

.lga-project-summary {
  background-color: var(--lga-bianco);
  border: 1px solid var(--lga-linea);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

/* WhatsApp and the contacts, side by side, one under the other on phones */
.lga-contact-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.btn-outline-primary {
  --bs-btn-color: var(--lga-carbone);
  --bs-btn-border-color: var(--lga-carbone);
  --bs-btn-hover-bg: var(--lga-carbone);
  --bs-btn-hover-border-color: var(--lga-carbone);
  --bs-btn-active-bg: var(--lga-carbone-hover);
  --bs-btn-active-border-color: var(--lga-carbone-hover);
}

/* the contacts page: a lower photo (legacy small jumbotron), the icons of the cards */
.lga-top-image-small {
  height: 25vh;
  height: 25svh;
}

.lga-contact-icon {
  font-size: 4.5rem;
  line-height: 1;
  color: var(--lga-carbone);
}

/* the map of the studio, as wide as the page: flat on wide screens, higher on phones */
.lga-map {
  --wm-map-ratio: 2 / 1;
  padding-inline: 0.5rem;

  @media (max-width: 767.98px) {
    --wm-map-ratio: 4 / 5;
  }
}

/*
 * The home slides as legacy: 520 pixels high (420 on phones), the question
 * and its button 60 pixels above the bottom of the photo.
 */
.lga-slides {
  --wm-carousel-height: 520px;

  @media (max-width: 540px) {
    --wm-carousel-height: 420px;
  }

  .carousel-caption {
    justify-content: flex-end;
    bottom: 60px;
    padding-bottom: 0;
  }
}

/* "are you in one of these situations?": the questions apart (legacy), the chevrons bold */
.lga-situations .wm-icon-list > li {
  margin-bottom: 1rem;
}

.lga-situations .wm-icon-list .bi::before {
  -webkit-text-stroke: 1.5px currentcolor;
}

/*
 * The menu of the new design: white under a thin line, small capitals with wide letter
 * spacing, the page you are on in the text pink and underlined in charcoal (never only a
 * color; Laura, 2026-10-13); the services in a list of the same look, square.
 */
.lga-navbar {
  --bs-navbar-padding-y: 0.75rem;
  --bs-navbar-color: var(--lga-testo);
  --bs-navbar-hover-color: var(--lga-carbone);
  --bs-navbar-active-color: var(--lga-rosa-testo);
  border-bottom: 1px solid var(--lga-linea);

  /* the logo on one line: narrower on small phones, so that the menu button stays beside it */
  .navbar-brand img {
    max-width: calc(100vw - 2 * var(--lga-gutter) - 5rem);
    height: auto;
  }

  .nav-link,
  .dropdown-item {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .nav-link:hover,
  .nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.5em;
  }

  .nav-link.active {
    text-decoration-color: var(--lga-carbone);
  }

  .dropdown-menu {
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-border-color: var(--lga-linea);
    --bs-dropdown-link-color: var(--lga-testo);
    --bs-dropdown-link-hover-bg: var(--lga-avorio);
    --bs-dropdown-link-hover-color: var(--lga-carbone);
    --bs-dropdown-link-active-bg: var(--lga-perla);
    --bs-dropdown-link-active-color: var(--lga-carbone);
    min-width: 17rem;
    padding-block: 0.75rem;
  }

  .dropdown-item {
    padding: 0.5rem 1.25rem;
    white-space: normal;
  }

  @media (max-width: 1199.98px) {
    .nav-link {
      padding-block: 0.6rem;
    }
  }
}

/* the menu and the footer as wide as the page's column (82rem), with its gutters */
.lga-navbar > .container,
.lga-footer > .container {
  max-width: 82rem;
  padding-inline: var(--lga-gutter);
}

/* the buttons of the new design: square, small capitals */
.lga-button {
  --bs-btn-border-radius: 0;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-padding-y: 0.95rem;
  --bs-btn-font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* the footer of the new design: charcoal, the ways on, then what the law asks of a site */
.lga-footer {
  padding-block: 3rem;
  font-size: 0.9rem;
  color: #fff;
  background-color: var(--lga-carbone);

  a,
  .wm-consent-preferences {
    color: #fff;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.lga-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.lga-footer-legal {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.25);
  font-size: 0.8rem;
  line-height: 1.7;
  color: #d9d4ce;
}

/* the narrower quotations of the home page (legacy 720 and 600 pixels) */
.lga-quotation.wm-quotation.lga-quotation-medium {
  max-width: 45rem;
}

.lga-quotation.wm-quotation.lga-quotation-narrow {
  max-width: 37.5rem;
}

/* every line in the pages, Laura's texts included, as the separators (legacy hr) */
main hr {
  width: var(--wm-separator-width);
  max-width: 100%;
  height: var(--wm-separator-thickness);
  margin: var(--wm-separator-space) auto;
  border: 0;
  background: linear-gradient(to right, transparent, var(--wm-separator-color), transparent);
  opacity: 1;
}

/* the LinkedIn and CV buttons of the about page, spread over the column (legacy) */
.lga-about-links {
  justify-content: space-around;
}

/* the about page: 7.5rem between the quotation and the photos with the story (legacy), with the quotation's 3rem */
.lga-about-story {
  padding-top: 4.5rem;
}