/* -- Import Libraries -- */
@import url(reset.css);
@import url(960gs.css);
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&family=Manrope:wght@400;600;700&display=swap');

:root {
    --ink: #1f2a37;
    --muted: #475569;
    --accent: #0f5b8a;
    --accent-dark: #0b3b59;
    --bg: #f7f2eb;
    --bg-soft: #efe7dc;
    --card: #ffffff;
    --shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    --radius: 18px;
    --content-width: 1100px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Manrope', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    color: var(--ink);
    background: radial-gradient(circle at top left, #fff 0%, #f7f2eb 45%, #efe7dc 100%);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

h1, h2, h4, h5, h6 {
    font-family: 'Fraunces', serif;
    color: var(--accent-dark);
    letter-spacing: 0.2px;
}

h1 {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3.2rem);
    padding: 10px 0 20px;
}

h2 {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 2rem);
    padding: 10px 0 16px;
}

h3 {
    color: var(--muted);
    font-size: 1.1rem;
    padding: 5px 0 10px;
}

.liberatoria {
    border: 2px solid var(--accent);
    margin: 10px;
    padding: 20px;
    border-radius: 12px;
    background: #fff;
}

.pLiberatoria,
.privacy {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    color: #000000;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px;
}

h4 {
    font-size: 1.15rem;
    padding: 10px 0 5px;
}

h5 {
    text-align: center;
    color: #b91c1c;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    padding: 5px 0 25px;
}

h6 {
    font-size: 1.1rem;
    padding: 10px 0 5px;
    text-align: center;
}

.img {
    text-align: center;
    line-height: 20px;
}

.img img {
    margin-left: auto;
    margin-right: auto;
}

.cit {
    text-align: right;
    margin-bottom: 20px;
    padding: 0 10px;
    color: var(--muted);
}

p {
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 0px;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

a:hover {
    color: var(--accent-dark);
}

ul, ol {
    margin: 10px;
    list-style: disc inside;
    line-height: 1.7;
}

ol {
    list-style-type: decimal;
}

#slideshow {
    overflow: hidden;
    margin: 18px auto 30px;
    position: relative;
    width: 100%;
    max-width: var(--content-width);
    padding-left: 1rem;
    padding-right: 1rem;
    aspect-ratio: 16 / 7;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

#slideshow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

label {
    display: block;
    font: 1rem 'Manrope', sans-serif;
    margin: .6rem 0;
}

button {
    border: none;
    color: white;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    border-radius: 999px;
    margin: 4px 2px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 91, 138, 0.3);
}

input, textarea, select {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
}

.patrocini { text-align: center; }

.patrocini-logos{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;      /* se non ci stanno, vanno a capo “bene” */
  gap: 12px;            /* spazio tra i loghi */
}

.patrocini-logos img{
  display: block;       /* evita spazi strani da immagini inline */
  height: auto;
}

/* -- Header -- */
#header {
    background: linear-gradient(120deg, #13212d, #0f5b8a);
    border-bottom: 6px solid #f2c879;
    padding: 18px 0 8px;
}

ul#menu {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: var(--content-width);
    padding-left: 1rem;
    padding-right: 1rem;
}

#menu li {
    float: none;
}

#menu li a {
    color: #ffffff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

#menu li a:hover, #menu li a.active {
    background-color: #f2c879;
    color: #13212d;
}

/* -- Layout -- */
.container_12, .container_16 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--content-width);
    padding-left: 1rem;
    padding-right: 1rem;
}

#layout {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--content-width);
    padding-left: 1rem;
    padding-right: 1rem;
}

#wrapper .post, #wrapper .advertise {
    margin-bottom: 24px;
    padding: 20px;
    border-bottom: none;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.home-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 28px;
}

.home-columns p {
    text-align: left;
}

.home-col h2,
.home-col h4 {
    text-align: left;
}

.home-col .img {
    text-align: center;
}

.post p.meta {
    color: var(--accent);
    font-size: 1.1rem;
    text-align: right;
}

.post p.img, .advertise p.img {
    text-align: center;
}

#sidebar {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin: 0 auto 24px;
}

#sidebar p.about {
    border-left: 4px solid var(--accent);
    padding-left: 12px;
    color: var(--muted);
}

#sidebar ul {
    margin: 10px 0;
}

#sidebar li {
    line-height: 1.7;
    list-style: disc inside;
    padding-left: 0;
}

/* -- Footer -- */
#footer {
    color: white;
    width: 100%;
    background: #13212d;
    border-top: 5px solid #f2c879;
    clear: both;
    padding: 16px 0 24px;
}

#footer p {
    color: white;
    line-height: 1.6;
    text-align: center;
    margin: 0;
}

#footer .container_12,
#footer .container_16,
#footer > p {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -- Responsive -- */
@media (max-width: 1100px) {
    #menu li a {
        padding: 8px 14px;
    }
}

@media (min-width: 1100px) {
    #layout {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(560px, 3fr) minmax(220px, 1fr);
        column-gap: 28px;
    }

    #layout .sidebars {
        display: contents;
    }

    #layout > #sidebar.grid_1,
    #layout .sidebars > #sidebar.grid_1 {
        grid-column: 1;
        margin-left: 0;
        margin-right: 0;
        float: none;
    }

    #layout #container {
        grid-column: 2;
        float: none;
        width: auto;
    }

    #layout > #sidebar.grid_4,
    #layout .sidebars > #sidebar.grid_4 {
        grid-column: 3;
        margin-left: 0;
        margin-right: 0;
        float: none;
    }

    #layout #container #wrapper.grid_7 {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    body.layout-two #layout {
        grid-template-columns: minmax(640px, 4fr) minmax(240px, 1.2fr);
    }

    body.layout-two #layout #container {
        grid-column: 1;
    }

    body.layout-two #layout > #sidebar.grid_4,
    body.layout-two #layout .sidebars > #sidebar.grid_4 {
        grid-column: 2;
    }
}

@media (max-width: 980px) {
  .home-columns { grid-template-columns: 1fr; }

  /* MENU: resta "mobile" anche se Safari cambia zoom */
  ul#menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0 1rem;       /* così resta allineato come il resto */
    list-style: none;
    max-width: var(--content-width);
  }

  #menu li { width: auto; }

  #menu li a {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
  }

  #layout {
    width: 100%;
    max-width: var(--content-width);
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 auto 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  #layout #container { order: 1; width: 100%; }

  #layout .sidebars {
    order: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  body.has-two-sidebars #layout .sidebars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #layout .sidebars #sidebar {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,
  .grid_13,.grid_14,.grid_15,.grid_16 {
    float: none;
    display: block;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .prefix_1,.prefix_2,.prefix_3,.prefix_4,.prefix_5,.prefix_6,.prefix_7,.prefix_8,.prefix_9,.prefix_10,.prefix_11,
  .suffix_1,.suffix_2,.suffix_3,.suffix_4,.suffix_5,.suffix_6,.suffix_7,.suffix_8,.suffix_9,.suffix_10,.suffix_11 {
    padding-left: 0;
    padding-right: 0;
  }

  #slideshow {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: var(--content-width);
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  #header { padding: 14px 0 8px; }

  #slideshow {
    aspect-ratio: 4 / 3;
    margin: 12px auto 20px;
  }

  #wrapper .post, #wrapper .advertise, #sidebar {
    padding: 16px;
  }
}

@media (max-width: 380px) {
  ul#menu { grid-template-columns: 1fr; }
}

#header {
  position: relative;
  background: none; /* sposta lo sfondo su ::before */
}

#header::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;                /* full viewport sempre */
  background: linear-gradient(120deg, #13212d, #0f5b8a);
  border-bottom: 6px solid #f2c879;
  z-index: -1;
}

/* ==========================================================
   iPhone / TOUCH: menu e layout "mobile" SEMPRE
   (anche se Safari fa zoom/dezoom e cambia i px)
   ========================================================== */
@media (hover: none) and (pointer: coarse) {

  /* header e contenuto: stessa identica larghezza */
  #header > .container_12,
  #layout {
    width: 100% !important;
    max-width: var(--content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* MENU: griglia SEMPRE su touch (min 3 colonne come vuoi tu) */
  ul#menu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important; /* il padding lo fa già .container_12 */
    list-style: none !important;
  }

  #menu li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  #menu li a {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    justify-content: center !important;
  }

  /* Evita che il vecchio 960gs ti rimetta colonne/fissi su mobile */
  #layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,
  .grid_13,.grid_14,.grid_15,.grid_16 {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .prefix_1,.prefix_2,.prefix_3,.prefix_4,.prefix_5,.prefix_6,.prefix_7,.prefix_8,.prefix_9,.prefix_10,.prefix_11,
  .suffix_1,.suffix_2,.suffix_3,.suffix_4,.suffix_5,.suffix_6,.suffix_7,.suffix_8,.suffix_9,.suffix_10,.suffix_11 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}