/*
 * global.css — mediaset-distribution-new
 * Grafica di base: variabili CSS, reset, font, stili globali
 */

/* ─── IMPORT FONT ─────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('/wp-content/themes/mediasetdistribution-theme/assets/fonts/geologica-auto/Geologica_Auto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ─── VARIABILI CSS ───────────────────────────────────────────────────────── */
:root {
    /* Colori — dal Figma */
    --color-text:        #323E48;
    --color-accent-blue: #2B75F5;
    --color-accent-violet: #8520DA;
    --color-accent-purple: #B900FF;
    --color-white:       #FFFFFF;
    --color-bg:          #FFFFFF;
    --color-footer-bg:   #323E48;
    --color-gradient-subnav: linear-gradient(90deg, #2B75F5 0%, #B900FF 50%, #323E48 100%);

    /* Tipografia — dal Figma */
    --font-body:         'Geologica', sans-serif;
    --font-display:      'Geologica', sans-serif;

    /* Font sizes — dal Figma */
    --font-size-small:   14px;  /* testo piccolo: line-height 17px */
    --font-size-base:    16px;  /* testo medio: line-height 20px */
    --font-size-medium:  18px;  /* testo: line-height 22px */
    --font-size-h3:      28px;  /* H3: line-height 28px */
    --font-size-h2:      36px;  /* H2: line-height 36px */

    /* Font weights */
    --font-weight-light:  300;
    --font-weight-bold:   700;

    /* Border radius — dal Figma */
    --radius-card:   20px;
    --radius-button: 50px;
    --radius-footer: 20px 20px 0px 0px;

    /* Spaziature — dal Figma */
    --spacing-xs:   10px;
    --spacing-sm:   20px;
    --spacing-md:   25px;
    --spacing-lg:   50px;
    --spacing-xl:   100px;

    /* Layout */
    --max-width:     1728px;
    --padding-page:  100px;

    /* Breakpoint */
    --bp-mobile:  768px;
    --bp-tablet:  1024px;
    --bp-desktop: 1280px;
}

/* ─── RESET BASE ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ─── BODY ────────────────────────────────────────────────────────────────── */

html {
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-base);
    line-height: 20px;
    font-feature-settings: 'ss01' on;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image: none; /* rimuove background.jpg del vecchio tema */
    padding: 0;
    margin: 0;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-footer {
    margin-top: auto;
}

/* ─── LINK ────────────────────────────────────────────────────────────────── */
/* Vecchio tema: color #33f — nuovo: #323E48 */
a {
    color: var(--color-text);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ─── TITOLI ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-top: 0;
    line-height: 1;
}

/* Dal Figma — H2 */
h2 {
    font-size: var(--font-size-h2);
    line-height: 36px;
}

/* Dal Figma — H3 */
h3 {
    font-size: var(--font-size-h3);
    line-height: 28px;
}

/* vecchio tema: h4 Oswald uppercase letter-spacing */
h4 {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

/* ─── PARAGRAFI ───────────────────────────────────────────────────────────── */
p {
    margin: 0 0 20px 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-base);
    line-height: 20px;
    font-feature-settings: 'ss01' on;
}

p strong {
    font-weight: var(--font-weight-bold);
}

/* ─── HR ──────────────────────────────────────────────────────────────────── */
hr {
    border: 0;
    border-bottom: 1px solid #eee;
    margin: 40px 0;
}

/* ─── IMMAGINI ────────────────────────────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─── FORM ────────────────────────────────────────────────────────────────── */
/* Riusato dal vecchio tema, aggiornato al nuovo design */
form {
    width: 100%;
    max-width: 700px;
}

form input[type="radio"],
form input[type="checkbox"] {
    margin-right: 5px;
    width: auto;
}

form input[type="text"],
form input[type="email"],
form textarea {
    padding: 7px 10px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 0;
    box-sizing: border-box;
    outline: none;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

form select {
    padding: 2px;
    border: 1px solid #ccc;
    font-family: var(--font-body);
}

form textarea {
    resize: vertical;
    min-height: 50px;
    max-height: 200px;
}

form .row {
    margin-bottom: 5px;
}

.form-error {
    display: inline-block;
    padding: 10px 15px;
    margin-bottom: 40px;
    background-color: #d95054;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: var(--font-size-small);
}

/* ─── WRAPPER PAGINA ──────────────────────────────────────────────────────── */
/* Riusato dal vecchio tema */
#mainContent {
    width: 100%;
}

.wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--padding-page);
    padding-right: 0;
    box-sizing: border-box;
}

/* ─── BREADCRUMB ──────────────────────────────────────────────────────────── */
/* Dal Figma: visibile in MARKETS, CATALOGO, NEWS ecc. */
/* Home / Pagina — Geologica 300 14px #323E48 */
/* !important necessari solo dove bootstrap.css viene caricato dopo questo file
   (custom-search.php, new-releases.php, is_archive()) e altrimenti vincerebbe
   il suo .breadcrumb di default (sfondo grigio #f5f5f5, padding diverso).
   padding-top: 0 — lo spazio dall'header lo dà il contenitore della pagina
   (60px, stesso valore ovunque nel sito), non il breadcrumb stesso. */
.breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    font-family: var(--font-body);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-small);
    line-height: 17px;
    color: var(--color-text);
}

.breadcrumb a {
    color: var(--color-text);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    color: var(--color-text);
    opacity: 0.6;
}

/* ─── TITOLO PAGINA ───────────────────────────────────────────────────────── */
/* Dal Figma MARKETS: "Markets" — Geologica Cursive 700 28px #2B75F5 */
.page-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h3);
    line-height: 28px;
    color: var(--color-accent-blue);
    margin: 0 0 30px 0;
}

/* ─── BOTTONE BASE ────────────────────────────────────────────────────────── */
/*
  Dal Figma — Bottone basic:
  padding: 15px 25px; border-radius: 50px; border: 1px solid #FFFFFF;
  background: rgba(255,255,255,0.9); color: #323E48;
  font-family: 'Geologica'; font-weight: 700; font-size: 16px;
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    border-radius: var(--radius-button);
    border: 1px solid var(--color-text);
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.btn:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* Bottone su sfondo scuro (es. Show Reel) */
.btn--light {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--color-white);
    color: var(--color-text);
}

/* ─── MEDIA QUERIES ───────────────────────────────────────────────────────── */

@media screen and (max-width: 1280px) {
    :root {
        --padding-page: 60px;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --padding-page: 40px;
        --spacing-xl: 60px;
    }

    h2 { font-size: 28px; line-height: 32px; }
    h3 { font-size: 22px; line-height: 26px; }
}

@media screen and (max-width: 768px) {
    :root {
        --padding-page: 16px;
        --spacing-xl: 40px;
        --spacing-lg: 30px;
    }

    h2 { font-size: 24px; line-height: 28px; }
    h3 { font-size: 20px; line-height: 24px; }
}