/* =========================
   RESET
========================= */
* {
    margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
    font-family: Arial, sans-serif;
}

body {
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =========================
   HEADER
========================= */
header {
	position: relative;
	height: 10vh;
    background: #fff;
    display: flex;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); 	/* ombra inferiore */
    z-index: 10;
}

/* due parti uguali */
.header-left,
.header-right {
    width: 50%;
    display: flex;
    align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}

.header-left img {
    height: 60%;
}

.header-right {
    justify-content: right;
}

/* =========================
   MAIN
========================= */
main {
	background: #e0e0e0;
	flex: 1;
    display: flex;
}

.col {
	height: 100%;
	display: flex;
    justify-content: center;     		/* centro orizzontale */
    align-items: flex-end;       		/* allineamento verticale bottom */
	/*
	min-height: 75vh);	
	min-height: calc(100vh - 25vh); 	/* 10 header + 15 footer */
}

.col.center {
    width: 50%;
	position: relative;
	inset: 0;
}

.col.left,
.col.right {
    width: 25%;
}

.col.right .switch {
	margin-top: auto;
    margin-bottom: 10px;
}

/* ========================= MAIN CONTAINER */
.col.center .container {
	position: relative;
    width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* =========================  slides show */
.slides {
	width: 100%;             	/* prende tutta la larghezza del container */
    height: auto;
    overflow: hidden;        	/* evita scroll se immagine più larga */
}

.slides img {
    position: absolute;
	bottom: 0;
    inset: 0;
	width: 100%;             	/* scala larghezza al 100% del div */
    height: auto;            	/* mantiene proporzioni */
    display: block;          	/* evita spazi bianchi sotto l'immagine */

	object-fit: contain;
    object-position: center;
	
	opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.slides img.active {
    opacity: 1;
    z-index: 1;
}

/* =========================  Dynalink Layout */
.DynaLinks {
    display: flex;
    justify-content: center;
    gap: 20px;
	display: none;
}

/* link su una riga */
.DynaLinks > div {
    white-space: nowrap;
}

.suggestion {
	white-space: nowrap;
	cursor: pointer;
	font-size: 20px;
	font-style: normal;
}
.suggestion:hover,
.suggestion.active {
	background: #e3f0ff;
}

/* =========================
   SWITCH
========================= */
.switch {
  position: relative;
  display: inline-block;
  width: 45px; /* 60 * 0.75 */
  height: 25.5px; /* 34 * 0.75 */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 25.5px; 						/* arrotondato come altezza */
}

.slider:before {
  position: absolute;
  content: "";
  height: 19.5px; width: 19.5px; 				/* 26 * 0.75 */
  left: 3px; bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #0b2540;					/* switch ON blu scuro */
}

input:checked + .slider:before {
  transform: translateX(19.5px); 				/* spostamento proporzionale */
}

/* =========================
   FOOTER
========================= */
footer {
    margin: 0;
	height: 15vh;
    background: #0b2540;						/* blu scuro */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.footer-box {
    width: 50%;
    margin-top: 0px;
	background: #fff;
}

.footer-box input {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 0;
    outline: none;
    color: #000;
    background: #fff;
    font-size: 25px;
	font-style: normal;
}

/* Placeholder corsivo compatibile su tutti i browser moderni */
.footer-box input::placeholder {
    font-style: italic;
    color: #999;
}

/* Prefissi WebKit per Chrome, Opera, Edge, Safari */
.footer-box input::-webkit-input-placeholder {
    font-style: italic;
    color: #999;
}

/* Firefox */
.footer-box input::-moz-placeholder {
    font-style: italic;
    color: #999;
}

/* LINK al posto dell'input */
.footer-box .footer-link {
    display: inline-flex;                  /* fondamentale */
    width: 32%;
    padding: 0;
	margin: 0;
    background: #fff;
    color: #000;
    font-size: 25px;
    font-style: normal;
    text-decoration: none;

    /* centratura */
    justify-content: center;         /* orizzontale */
    align-items: center;             /* verticale */

    box-sizing: border-box;
	white-space: nowrap;
}

/* Hover opzionale */
.footer-box .footer-link:hover {
    background: #e0e0e0;
}

/* =========================
   MOBILE
========================= */
@media screen and (orientation: portrait) {

	.col.center {
		width: 100%;
	}

	.col.left,
	.col.right {
		display: none;
	}

}