/**
 * DIGINETIC - RESPONSIVE CSS
 * Global responsive rules for shared components (navbar, footer, logo)
 * and page-specific rules for Home, Chi Siamo, Servizi, Contatti.
 * Sofia page responsive rules are in sofia/index.html inline <style>.
 * v1.1 - 2026-02-28
 */

/* ========================================
   NAVBAR — show/hide + mobile collapse
   ======================================== */

/* Desktop: always show navbar, hide toggler */
@media (min-width: 992px) {
  .navbar-toggler {
    display: none;
  }

  .navbar-collapse {
    display: flex !important;
    align-items: center;
  }
}

/* Desktop stretto (992-1500px): il container dell'header si allarga per dare
   respiro alle 8 voci (fix 2026-07-11 — con max-width 80% le voci andavano
   a capo pur col font fluido). */
@media (min-width: 992px) and (max-width: 1500px) {
  .header-dg .navbar > .container {
    max-width: 96%;
  }
}

/* Tablet/mobile: hide navbar by default, show toggler */
@media (max-width: 991px) {
  .navbar-toggler {
    display: block;
  }

  .navbar-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dg-white);
    padding: 1rem;
    box-shadow: var(--shadow-md);
    z-index: 1000;
  }

  .navbar-collapse.show {
    display: block;
  }

  .header-dg .navbar {
    position: relative;
  }

  .header-dg .navbar > .container {
    max-width: 95%;
  }

  .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-link {
    font-size: 1.1rem !important;
    padding: 0.6rem 1rem;
    width: 100%;
  }

  .lang-switcher {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--dg-gray-300);
    justify-content: center;
  }

  .brand-name {
    font-size: 1.3rem;
  }
}


/* ========================================
   BREAKPOINT 991px — TABLET
   ======================================== */
@media (max-width: 991px) {

  /* --- Chi Siamo: wrapper 80% → full width --- */
  .hero-mep > div { width: 100% !important; padding: 0 1rem !important; margin: 0 !important; }

  /* --- Chi Siamo: pillar layout --- */


  .pillar-box {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: center !important;
    margin-top: 2rem !important;
    opacity: 1 !important;
  }

  .pillar-title {
    font-size: 2rem !important;
  }

  .pillar-desc {
    font-size: 1.2rem !important;
  }

  /* Chi Siamo: force height auto on section */
  .hero-mep {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Allow scroll on chi-siamo */
  html:has(.hero-mep), body:has(.hero-mep) {
    overflow: auto !important;
    height: auto !important;
  }

  /* --- Servizi: component scaling --- */

  .sbox-left .sbox-content {
    padding-top: 1rem !important;
  }

  .bust-loop-container {
    width: 120px !important;
    height: 120px !important;
  }
}


/* ========================================
   BREAKPOINT 768px — MOBILE
   ======================================== */
@media (max-width: 768px) {

  .brand-name {
    font-size: 1.2rem;
  }

  /* --- Home --- */
  .manifesto-cta {
    flex-direction: column;
  }

  /* --- Chi Siamo --- */


  .pillar-title {
    font-size: 1.6rem !important;
  }

  .pillar-desc {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .pillar-box {
    margin-top: 1.5rem !important;
  }

  /* --- Servizi --- */

  .sbox {
    padding: 1.5rem 1rem !important;
  }

  .sbox-left .sbox-content {
    padding-top: 0.5rem !important;
  }

  .bust-loop-container {
    width: 100px !important;
    height: 100px !important;
  }

  .slice-right {
    gap: 1rem;
  }

  /* --- Contatti --- */
  .card-glass {
    padding: 1.5rem;
  }

  /* --- General sections --- */
  .section-dg {
    padding: 3rem 0 !important;
  }

  .section-approccio {
    padding: 3rem 0 !important;
  }

  .section-servizio-dark,
  .section-servizio-light {
    padding: 3rem 0 !important;
  }
}


/* ========================================
   BREAKPOINT 480px — SMALL MOBILE
   ======================================== */
@media (max-width: 480px) {

  .nav-link {
    font-size: 1rem !important;
  }

  /* --- Home --- */
  .manifesto-claim {
    font-size: clamp(1.3rem, 6vw, 1.8rem);
  }

  .manifesto-pillar {
    font-size: clamp(0.95rem, 4vw, 1.3rem);
  }

  .manifesto-closing-claim {
    font-size: clamp(1.3rem, 6vw, 1.8rem);
  }

  /* --- Chi Siamo --- */

  .pillar-title {
    font-size: 1.3rem !important;
  }

  .pillar-desc {
    font-size: 0.9rem !important;
  }

  /* --- Servizi --- */

  .sbox-right-top,
  .sbox-right-bottom {
    padding: 1.2rem 1rem !important;
  }

  .bust-loop-container {
    width: 80px !important;
    height: 80px !important;
  }

  .slice-right {
    gap: 0.75rem !important;
  }

  /* --- Contatti --- */
  .hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  .hero-description {
    font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
  }
}