/*
Theme Name: polimi-cds-theme
Theme Domain: polimi-cds-theme
Theme URI: https://example.com/
Author: Giovanni Malausa
Author URI: https://giovannimalausa.com
Description: Minimal block theme to convert a static HTML page into reusable Gutenberg patterns with locked styling.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.2.47
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: polimi-cds-theme
Tags: block-patterns, full-site-editing, accessibility-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/* #region Global Styles */
:root {
    /* ======== COLORS ======== */

    /* Area Colors */
    --design-solid: #aedd00;
    --design-alpha: #AEDD0000;

    --AUIC-solid: #FF8C8C;
    --AUIC-alpha: #FF8C8C00;

    --eng-generic-solid: #4DC9FF;
    --eng-generic-alpha: #4DC9FF00;

    --eng-ICAT-solid: #2DB7FF;
    --eng-ICAT-alpha: #2DB7FF00;

    --eng-3i-solid: #0BA4FF;
    --eng-3i-alpha: #0BA4FF00;

    /* Colors */
    --blue-main: #102C53;
    --blue-main-60: #75849A;
    --blue-main-40: rgba(16, 44, 83, 0.4);

    --primary-blue-accent: #2942DB;
    --primary-blue-accent-dark: #1C34C8;
    --primary-accent-2: #67B3FF;

    --primary-accent-solid: var(--design-solid); /* <——— Customize this with correct area*/
    --primary-accent-alpha: var(--design-alpha); /* <——— Customize this with correct area */

    --grey-50: #F3F3F1;
    --grey-100: #E7EEF3;
    --grey-200: #E3E8EB;
    --grey-300: #C1C7CA;
    --grey-disabled: #5C6F82;
    --grey-news: #5C6F82;

    /* ======== FONT ======== */
    font-family: Manrope;

    /* ======== SIZES ======== */
    --max-width-desktop: 1456px;
    --padding-desktop: 80px;
    --radius-8px: 8px;
    --nav-height: 70px;

    /* tablet */
    --padding-tablet: 24px;

    /* mobile */
    --padding-mobile: 16px;

}

html {
    scroll-behavior: smooth;
}

/* ======== RESET ======== */
h1, h2, h3, h4, h5, p, a {
    margin: 0;
}

body {
    color: var(--blue-main);
}    

a {
    cursor: pointer;
    color: inherit;
    text-underline-offset: 4px;
}

h2 {
    font-size: 32px;
}

em {
    font-style: normal; /* Manrope does not support italic style of <em>. Ovveride to prevent rendering issues. */
}

* {
    box-sizing: border-box;
    margin: 0;
}

/* #endregion Global Styles */

/* Branding Bar */
.branding-bar {
    width: 100%;
    background-color: #e6e6e6;
}

.branding-bar--container {
    height: var(--nav-height);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.link--servizi-online {
    display: inline-flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--primary-blue-accent);
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 90%;
    text-decoration: none;
}

/* ==========================================================================
   Header & Navigation Structure
   ========================================================================== */

/* The main <header> element that sticks to the top */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* The primary <nav> bar */
nav {
    position: relative;
    z-index: 100;
    width: 100%;
    background-color: #ffffffb3;
    backdrop-filter: blur(30px);
    transition: background-color .2s ease-in-out;
}

nav:hover {
    background-color: var(--primary-accent-solid);
}

/* The container that centers the nav content */
.nav--container {
    height: var(--nav-height); /* Use min-height instead of height */
    max-width: var(--max-width-desktop);
    padding: 0 var(--padding-desktop); /* Adjust vertical padding for aesthetics */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Site logo/title */
.nav--site-id {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-main);
    text-transform: uppercase;
    text-decoration: none;
}

/* Wrapper for the main menu <ul> */
.nav--links-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    margin-right: -16px; /* Balances padding of the last link */
}

/* The main <ul> menu list */
.nav--nav-links {
    list-style: none;
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Sub-Menu System
   ========================================================================== */

/* The container that positions the sub-menu bar */
.sub-menu-container {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 99; /* Sits just behind the main nav */
    pointer-events: none; /* Prevents interaction when hidden */
}

/* The actual <ul> sub-menu bar */
.sub-menu-container .sub-menu {
    width: 100%;
    height: var(--nav-height);
    background-color: #ffffffb3;
    backdrop-filter: blur(30px);
    
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 32px;
    
    /* Animation: Hidden by default */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

/* The "open" state for the sub-menu bar */
.sub-menu-container .sub-menu.submenu-open {
    visibility: visible;
    opacity: 1;
    pointer-events: all; /* Enables interaction when visible */
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   Shared Link Styles (Main & Sub-Menu)
   ========================================================================== */


/* Base styles for ALL links in both menus */
.nav--nav-links > .menu-item > a,
.sub-menu-container .sub-menu > .menu-item > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 22px 16px 20px 16px;
    border-bottom: 2px solid transparent;
    transition: padding 0.2s ease-in-out, border-color 0.2s ease-in-out;
    
    font-size: 14px;
    color: var(--blue-main);
    text-decoration: none;
}

/* Shared hover state for the underline effect */
.nav--nav-links > .menu-item > a:hover,
.sub-menu-container .sub-menu > .menu-item > a:hover {
    padding-top: 20px;
    padding-bottom: 24px;
    border-bottom-color: var(--blue-main);
}

/* --- Unique font weights for each menu --- */
.nav--nav-links > .menu-item > a {
    font-weight: 700;
}
.sub-menu-container .sub-menu > .menu-item > a {
    font-weight: 500;
}

/* The dropdown indicator arrow on parent items */
.nav--nav-links > .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.9014 10.7725L13.4014 18.2725C13.2968 18.3774 13.1727 18.4606 13.0359 18.5174C12.8992 18.5742 12.7526 18.6034 12.6045 18.6034C12.4564 18.6034 12.3098 18.5742 12.1731 18.5174C12.0363 18.4606 11.9121 18.3774 11.8076 18.2725L4.30762 10.7725C4.09627 10.5612 3.97754 10.2746 3.97754 9.97567C3.97754 9.67678 4.09627 9.39014 4.30762 9.17879C4.51896 8.96745 4.8056 8.84872 5.10449 8.84872C5.40338 8.84872 5.69002 8.96745 5.90137 9.17879L12.6054 15.8829L19.3095 9.17786C19.5208 8.96651 19.8075 8.84778 20.1064 8.84778C20.4053 8.84778 20.6919 8.96651 20.9032 9.17786C21.1146 9.3892 21.2333 9.67584 21.2333 9.97473C21.2333 10.2736 21.1146 10.5603 20.9032 10.7716L20.9014 10.7725Z' fill='%23102C53'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.25s ease-in-out;
}

/* Rotates the indicator when the menu is open */
.nav--nav-links > .menu-item-has-children.submenu-open > a::after {
    transform: rotate(180deg);
}

/* ======== PAGE STRUCTURE ======== */

.home-section {
    padding-top: 40px;
}

.is-homepage .home-section {
    padding-top: 80px;
}

/* HOME TITLE SECTION */
.home--title-section {
    position: relative;
    height: 78svh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: calc(-1 * var(--nav-height)); /* to offset the nav height */
    margin-bottom: 40px;
}

.home--title-section--video,
.home--title-section--bg-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/* Specific Z-indexes to create layers */
.home--title-section--bg-image {
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.home--title-section--video {
    z-index: 2; /* Video sits on top of the fallback image */
}

.home--title-section--gradient {
    position: absolute;
    width: 100%;
    inset: 0;
    background: linear-gradient(0deg, #FFF 7.5%, rgba(255, 255, 255, 0) 70%);
    z-index: 3;
}

.home--title-section--header {
    position: relative;
    z-index: 4;
    display: flex;
    flex-flow: column;
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.home--title-section--supertitle {
    color: var(--primary-blue-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
}

.home--title-section--title {
    font-size: 92px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
    color: var(--blue-main);
}

/* STATIC PAGE TITLE SECTION */

.static-page--simple-title-section {
    position: relative;
    margin-top: -67px; /* to offset the nav height */
    padding-top: calc(67px + 48px);
    padding-bottom: 100px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.static-page--title-section {
    position: relative;
    height: 70svh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: -67px; /* to offset the nav height */
    margin-bottom: 100px;
}

.static-page--title-section--img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.static-page--title-section--gradient {
    position: absolute;
    width: 100%;
    inset: 0;
    background: linear-gradient(0deg, #FFF 7.5%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
}

.static-page--title-section--header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-flow: column;
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.static-page--title-section--supertitle {
    color: var(--primary-blue-accent);
    font-size: 17px;
    font-weight: 700;
    line-height: 120%;
}

.static-page--title-section--backlink {
    color: var(--blue-main);
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.static-page--title-section--backlink:hover {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.static-page--title-section--backlink::before {
    content: '';
    background-image: url('Assets/Arrows/arrow--internal--blue-circle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
}

.static-page--title-section--title,
.page-title--no-image--title {
    font-size: 56px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--blue-main);
}

.static-page--title-section--subtitle,
.page-title--no-image--subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    margin-top: 16px;
    max-width: 80ch;
}

/* SECTION HEADER */
.is-homepage .section-header {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

.section-supertitle,
.course-semester-title {
    border-left: 1px solid var(--primary-blue-accent);
    color: var(--primary-blue-accent);
    margin-bottom: 16px;
    padding-left: 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -1%;
    color: var(--blue-main);
}

.section-title--wrapper {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: baseline;
}

.section-title--last-updated {
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    color: var(--blue-main-40);
    margin-top: 8px;
}

.section-title--CTA {
    display: inline-flex;
    flex-flow: row;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-main);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

.section-title--CTA:hover {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.section-title--CTA::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('Assets/Arrows/arrow--internal--blue-circle.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* SECTION CONTAINER */
.is-homepage .section--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

/* STATIC PAGE -- CONTAINER */
.static-page--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
    align-items: baseline;
}

.static-page--shoulder {
    grid-column: 1 / 4; /* Always occupy the first three columns (columns 1..3) */
    grid-row: 1 / -1; /* Span from the first to the last row so it fills any rows created */
    display: flex;
    flex-flow: column;
    gap: 4px;
    position: sticky;
    top: 67px; /* Stick under the top navigation (nav height is 67px) */
}

.static-page--shoulder--title {
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
}

.static-page--main-content {
    grid-column: 4 / 11;
    display: flex;
    flex-flow: column;
    gap: 0px;
    margin-bottom: 80px;
}

.static-page--main-content > h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
    margin-bottom: 24px;
}

.static-page--main-content > h2:not(:first-child) {
    margin-top: 48px;
}

.static-page--main-content > p,
.people-block--description {
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

.static-page--main-content > p a, .warning-msg--block a {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

/* HOME HERO SECTION */
.home--hero-section--wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 16px;
    margin-bottom: 40px;
    align-items: baseline;
}

.home--hero-section--title {
    grid-column: span 3;
    display: flex;
    justify-content: flex-start;
    font-size: 32px;
}

.home--hero-section--description {
    grid-column: span 7;
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 0px;
}

.home--hero-section--description p {
    font-size: 27px;
    font-weight: 500;
    line-height: 130%;
    color: var(--blue-main);
    margin-bottom: 0px;
}

.home--hero-section--description p:last-of-type {
    margin-bottom: 48px;
}


/* Link / Arrow Right (circled, blue) */
.link--arrow-right--circled--blue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue-accent);
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.link--arrow-right--circled--blue::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('Assets/arrow-right_circled_white-on-blue.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.link--arrow-right--circled--blue:hover {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

/* CARDS */
/* Cards Wrappers */
.cards-wrapper-2x1-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-column-gap: 16px;
    grid-auto-rows: 400px;
    gap: 16px;
}

.cards-wrapper-2x1-grid > *:nth-child(n+4) {
    display: none;
}

.cards-wrapper-3x1-sq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-column-gap: 16px;
    grid-template-rows: 1fr;
    gap: 16px;
}

.spotlight--cards-wrapper {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(2, 1fr);
    height: 650px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
}

/* Card Base Styles */
.card {
    height: 100%;
    background-color: var(--grey-100);
    border-radius: var(--radius-8px);
    display: flex;
    flex-flow: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    color: white;
}

.card-square {
    aspect-ratio: 1/1;
}

.card.is-text {
    color: var(--blue-main);
}

.graphical-card {
    color: var(--blue-main);
}

.card--bg-img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    inset: 0;
    width: 100%;
    height: 100%;
}

.card--graphics {
    position: absolute;
    bottom: 0px;
    right: 0px;
    object-fit: scale-down;
    object-position: center;
}

.card.is-text .card-graphic {
    position: absolute;
    bottom: 0px;
    right: 0px;
    object-fit: scale-down;
    object-position: center;
    height: 80%;
}

.card.is-text .card-upper-title {
    color: var(--primary-blue-accent);
}

.card.is-text .card-text {
    margin-top: 8px;
}

.card.is-text .card-cta {
    background-color: var(--primary-blue-accent);
    color: white;
}

.spotlight-card {
    color: var(--blue-main);
    aspect-ratio: unset;
}

.spotlight--bg-img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.card-overlay {
    background-image: linear-gradient(#000000a1,#0000 62%);
    width: 100%;
    height: 100%;
    position: absolute;
}

.accent {
    background-image: linear-gradient(180deg,var(--primary-accent-alpha) 36%,var(--primary-accent-solid));
    inset: 0% auto auto 0%;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.card:hover .accent {
    opacity: 1
}

.card-link {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    padding: 24px;
}

.spotlight-card.card-link {
    padding: 0px;
}

.card-header {
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.graphical-card .card-header {
    max-width: 70%;
}

.card-title {
    font-size: 27px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
}

.spotlight-card-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
    color: var(--blue-main);
}

.card-upper-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 125%;
}

.graphical-card .card-upper-title {
    color: var(--primary-blue-accent);
}

.spotlight-card .card-upper-title {
    color: var(--primary-blue-accent);
}

.card-description {
    font-size: 18px;
    font-weight: 500;
    line-height: 160%;
    margin-top: 8px;
}

.card-cta {
    gap: 0px;
    color: var(--blue-main);
    background-color: rgb(255, 255, 255);
    border-radius: 200px;
    justify-content: center;
    align-items: center;
    width: max-content;
    height: 38px;
    padding: 10px;
    transition-property: padding, grid-column-gap;
    transition-duration: 0.6s, 0.6s;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1), cubic-bezier(.645, .045, .355, 1);
    display: flex;
    position: relative;
    bottom: 0px;
    left: 0px;
}

.graphical-card .card-cta {
    background-color: var(--primary-blue-accent);
    color: white;
}

.card:hover .card-cta {
    padding-left: 12px;
    grid-column-gap: 2px;
}

.card-cta-txt {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    line-height: 20;
    max-width: 0px;
    overflow: hidden;
    transition: max-width 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.card:hover .card-cta-txt {
    max-width: 300px;
}

.card-cta-img {
    object-fit: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
}

.spotlight--main-card {
    grid-area: span 5/span 1/span 5/span 1;
}

.spotlight--main-card .card-link, .spotlight--tertiary-card .card-link {
    padding: 24px;
}

.spotlight--secondary-card {
    grid-area: span 3/span 1/span 3/span 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.spotlight--secondary-card--left-half {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 24px;
}

.spotlight--secondary-card--right-half {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

.spotlight--secondary-card--right-half img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.spotlight--tertiary-card {
    grid-area: span 2/span 1/span 2/span 1;
}

.spotlight--tertiary-card--footer {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end; /* align items to the bottom edge */
    width: 100%;
}

.spotlight--tertiary-card--stats-wrapper {
    display: flex;
    flex-flow: row;
    gap: 56px;
}

.spotlight--tertiary-card--stat {
    display: flex;
    flex-flow: column;
    gap: 4px;
}

.spotlight--tertiary-card--stat--value {
    font-size: 56px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
    background: linear-gradient(90deg, #2942DB, #67B3FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spotlight--tertiary-card--stat--label {
    font-size: 14px;
    font-weight: 700;
}

.spotlight--tertiary-card--bg-img {
    position: absolute;
    object-fit: cover;
    inset: auto 0% 0% auto;
}

/* FULL WIDTH BANNER */
.full-width-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--primary-accent-solid);
    padding-top: 48px;
    padding-bottom: 48px;
    margin-top: 80px;

    background-image: url("Assets/Graphics/full-width-banner--bg-graphics.svg"); /* Do not repeat, cover */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.full-width-banner--container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.full-width-banner--description {
    font-size: 14px;
    font-weight: 700;
    line-height: 125%;
}

.full-width-banner--title {
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
}

.full-width-banner--cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px 14px 24px;
    border-radius: 200px;
    border: 1px solid var(--blue-main);
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
    text-decoration: none;
    width: max-content;
    transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.full-width-banner--cta:hover {
    background-color: var(--blue-main);
    color: white;
}

.full-width-banner--cta svg {
    position: relative;
    top: 1px;
}

/* STAT SECTION */
.stats-section--wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 40px;
    grid-auto-flow: column dense;
    margin-top: 80px;
}

/* Statistic */
.stats-section--stat {
    grid-column: span 4;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    gap: 16px;
}

.stats-section--stat.is-large {
    grid-row: 1;
}

.stats-section--stat.is-small {
    grid-row: 2;
}

.stats-section--stat--value {
    font-size: 40px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -1%;
    border-left: 1px solid var(--blue-main);
    padding-left: 16px;
}

.stats-section--stat.is-large .stats-section--stat--value {
    font-size: 74px;
}

.stats-section--stat--label {
    font-size: 16px;
    font-weight: 500;
    line-height: 125%;
    padding-left: 16px;
}

/* Table of Contents */ 
.toc-list {
    list-style-type: decimal-leading-zero;
    font-size: 14px;
    font-weight: 500;
    padding-left: 30px;
}

.toc-list a {
    text-decoration: none;
}

/* FOOTER */
footer {
    background-color: var(--blue-main);
    margin-top: 80px;
}

body > .full-width-banner + .footer {
    /* selects the footer when directly following a full-width banner */
    margin-top: 0px;
}

.footer--container {
    display: flex;
    flex-flow: column;
    color: white;
    font-size: 14px;
}

.footer--row {
    border-bottom: 1px solid #ffffff33;
}

.footer--row:last-child {
    border-bottom: none;
}

.footer--inner-row-1,
.footer--inner-row-2,
.footer--inner-row-3 {
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.footer--inner-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 24px;
}

.footer--inner-row-2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.footer--row-2--clmn-1 {
    grid-column: span 6;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.footer--row-2--clmn-2, .footer--row-2--clmn-3 {
    grid-column: span 3;
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.footer--inner-row-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.footer--row-3--links {
    display: flex;
    gap: 24px;
    font-weight: 700;
}

.footer--row-2--clmn-1--sedi,
.footer--row-2--clmn-1--dona {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.footer--row-2--clmn-1--sedi > *:not(h3),
.footer--row-2--clmn-1--dona > *:not(h3),
.footer--row-2--clmn-2 > *:not(h3),
.footer--row-2--clmn-3 > *:not(h3) {
    margin-left: 19px;
}

.footer--row-1--social-icons {
    display: flex;
    gap: 16px;
}

.footer--social-media-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

footer h3 {
    display: flex;
    padding-left: 19px;
    border-left: 1px solid var(--primary-accent-2);
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    color: var(--primary-accent-2);
}

footer a {
    text-decoration: none;
}

.link--external--outline {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 16px;
    border-radius: 200px;
    border: 1px solid white;
    align-self: flex-start;
    transition: border 0.2s ease-in-out;
}

.link--external--outline:hover {
    border: 1px solid #ffffff80;
}

.link--external--outline::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("Assets/Arrows/arrow--external--white.svg") no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.footer--nav-links {
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.footer--nav-links .menu-item, .footer--link--internal, .footer--link--external {
    text-decoration: none;
    text-align: unset;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style-type: none;
    margin-block-end: 0;
    margin-block-start: 0;
    padding-inline-start: 0;
}

.footer--nav-links .menu-item::after, .footer--link--internal::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("Assets/Arrows/arrow--internal--light-blue.svg") no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.footer--link--external::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("Assets/Arrows/arrow--external--light-blue.svg") no-repeat center;
    background-size: contain;
    vertical-align: middle;
    margin-left: 2px;
}

.footer--row-2--clmn-1--dona p {
    font-size: 13px;
    font-weight: 700;
    line-height: 160%;
}

/* News Post Styles */
.news-post--title-section {
    padding-bottom: 40px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.news-post--title-section--wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 80px;
}

.news-post--title-section--left-side {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    grid-column: span 1;
}

.news-post--title-section--image {
    grid-column: span 1;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
}

.news-post--title-section--header {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.news-post--title-section--backlink {
    color: var(--primary-blue-accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.news-post--title-section--header h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: -1px;
}

.news-post--title-section--date {
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}

.news-post--title-section--tag-wrapper {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
}

.news-post--title-section--tag {
    display: inline-flex;
    padding: 6px 10px;
    color: var(--grey-news);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    border: 1px solid #C1C7CA;
    border-radius: 8px;
    width: max-content;
}

.news-post--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 80px;
}

.news-post--content {
    grid-column: 4 / -3; /* Always occupy 7 columns (3 empty on left, 2 empty on right) */
    display: flex;
    flex-flow: column;
    gap: 24px;
    margin-top: 24px;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.page-title--no-image--wrapper {
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* News Archive Styles */
.news-archive--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
}

.news-archive--grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 24px;
}

.news--preview {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    height: 300px;
    border-radius: 16px;
    background-color: var(--grey-100);
    overflow: hidden;
}

.news--preview--image-link {
    grid-column: span 4;
    display: block;
    width: 100%;
    height: 100%;
}

.news--preview--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news--preview--content {
    grid-column: span 8;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 24px;
}

.news--preview--meta {
    display: flex;
    flex-flow: column;
    gap: 16px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
}

.news--preview--title {
    font-size: 18px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: -1%;
}

.news--preview--title a {
    text-decoration: none;
}

.news--preview--date {
    color: var(--grey-news);
    font-weight: 700;
}

.news--preview--more {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--primary-blue-accent);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

/* Home > News Grid */

.home-news--grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    height: 470px;
}

.news--card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    row-gap: 16px;
    height: 100%;
    border-radius: 8px;
    background-color: var(--grey-100);
    overflow: hidden;
    grid-column: span 3;
    border: 1px solid var(--grey-200);
    transition: box-shadow 0.2s ease-in-out;
}

.news--card:hover {
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.1); /* soft, diffused ambient */
}

.news--card:hover .news--card--more {
    text-decoration: underline;

}

.news--card--image-link {
    grid-row: span 2;
    display: block;
    width: 100%;
    height: 100%;
}

.news--card--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news--card--content {
    grid-row: span 3;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 16px;
}

.news--card--meta {
    display: flex;
    flex-flow: column;
    gap: 8px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
}

.news--card--title {
    font-size: 18px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -1%;
}

.news--card--title a {
    text-decoration: none;
}

.news--card--date {
    color: var(--grey-news);
    font-weight: 700;
}

.news--card--excerpt {
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    display: -webkit-box;
    -webkit-line-clamp: 3;  /* number of lines to show */
    line-clamp: 3;          /* standard property (for forward compatibility) */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news--card--more {
    display: flex;
    gap: 3px;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--primary-blue-accent);
    text-decoration: none;
    text-decoration-thickness: 1.5px;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

.warning-msg--block {
    border-left: 2px solid var(--blue-main);
    border-radius: 0px 8px 8px 0px;
    background-color: var(--grey-100);
    display: flex;
    flex-flow: column;
    gap: 0px;
    padding: 24px 56px 24px 60px;
    overflow: hidden;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    margin-top: 48px;
}

.static-page--main-content > .warning-msg--block:first-child {
    margin-top: 0;
}

.warning-msg--block--title {
    font-size: 18px;
    font-weight: 700;
    line-height: 160%;
    margin: 0;
}

.warning-msg--block p {
    margin: 0;
}

.editor-error {
    color: red;
    font-weight: 700;
}

/* PROJECTS ARCHIVE Layout */
.projects-archive--grid {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    width: 100%;
    max-width: var(--max-width-desktop);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    row-gap: 16px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.projects-archive--grid .project--card {
    grid-column: span 4;
}

/* PEOPLE LAYOUT */
.people-archive--grid {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    width: 100%;
    max-width: var(--max-width-desktop);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    row-gap: 24px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.people-archive--card {
    grid-column: span 4;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 16px;
}

.people-archive--card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 8px;
}

.people-archive--card--details {
    font-weight: 500;
}   

.people-archive--card--fullName {
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
    margin: 0;
}

.people-archive--card--link {
    text-decoration: none;
    color: var(--blue-main);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.people-archive--card--link:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary-blue-accent);
}

/* People archive: optional black & white images */
.people-archive--section.is-bw .people-archive--card img {
    filter: grayscale(100%);
}

/* PEOPLE Block LAYOUT */
.people-block--section .container {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.people-block--header {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.people-block--grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 24px;
}

.people-block--grid .people-archive--card {
    grid-column: span 1;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 16px;
}

/* ====== Course Program Display ====== */
.course-program-display {
    display: flex;
    flex-flow: column;
    gap: 48px;
}

.course-year {
    display: flex;
    flex-flow: column;
    gap: 24px;
}

.course-year-title {
    margin-bottom: 16px;
}

.subject-list {
    list-style: none;  /* Removes the bullet points */
    padding: 0;        /* Removes the default left padding */
    margin: 0;         /* Removes the default top/bottom margins */
    margin-top: 16px;
    margin-bottom: 16px;
    width: 100%;
    display: flex;
    flex-flow: column;
}

.subject-list li {
    padding: 16px 0;
    margin: 0;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid var(--grey-200);
}

.subject-list li.has-options {
    padding-bottom: 0px;
    border-bottom: none;
}

.subject-options-list li {
    padding-left: 24px;
}

.subject-list li:first-child {
    border-top: 1px solid var(--grey-200);
}

.subject-header {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: baseline;
    justify-content: space-between;
}

.subject-title a,
.subject-option-title a {
    text-decoration: none;
}

.subject-meta {
    display: flex;
    flex-flow: row;
    gap: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--blue-main-60);
}

.subject-sections {
    display: flex;
    flex-flow: row;
    gap: 8px;
}

.subject-items-wrapper {
    display: flex;
    flex-flow: row;
    gap: 8px;
    color: var(--blue-main);
}

.subject-cfu {
    color: var(--blue-main);
}

.subject-options-list {
    list-style: none;  /* Removes the bullet points */
    padding: 0;        /* Removes the default left padding */
    margin: 0;         /* Removes the default top/bottom margins */
    display: flex;
    flex-flow: column;
    width: 100%;
}

.subject-options-list li {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.subject-external-link {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 2px;
    color: var(--primary-blue-accent);
}


.course-year-filters {
    display: flex;
    flex-flow: row;
    gap: 12px;
    overflow-x: auto;
}

.course-filter-btn {
    cursor: pointer;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: var(--blue-main);
    background-color: var(--grey-200);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.course-filter-btn:hover {
    background-color: var(--grey-300);
}

.course-filter-btn.is-active {
    background-color: var(--primary-accent-solid);
}



/* ====== BUTTONS ====== */

.polimi-button-internal-fill {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    padding: 10px 12px 10px 16px;
    border-radius: 200px;
    text-decoration: none;
    width: fit-content;
    /* Fill */
    background: var(--primary-blue-accent);
    color: white;
    border: 1px solid var(--primary-blue-accent);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.polimi-button-internal-fill::after {
    content: "";
    display: block;
    position: relative;
    width: 18px;
    height: 18px;
    
    /* Add the -webkit- prefixes */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* This is correct: the background-color IS the icon color */
    background-color: currentColor;

    /* Add the prefixed version of mask-image */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z'/%3E%3C/svg%3E");
}

.polimi-button-internal-fill:hover {
    background: var(--primary-blue-accent-dark);
    color: white;
    border: 1px solid var(--primary-blue-accent-dark);
}

.wp-block-buttons {
    margin-top: 24px;
    margin-bottom: 24px;
    gap: 16px;
}

/* Reset WP default button styles */
/* Scope to your variant + cover both link classes */
.wp-block-button.is-style-polimi-button-internal-outline :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-internal-fill :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-external-outline :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-external-fill :is(.wp-block-button__link, .wp-element-button) {
    /* Optional reset to ditch core defaults */
    all: unset;
    display: inline-flex;
    cursor: pointer;

    /* Your base look */
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    font-weight: 700;
    padding: 10px 12px 10px 16px;
    border-radius: 200px;
    text-decoration: none;
}

.wp-block-button.is-style-polimi-button-internal-outline :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-external-outline :is(.wp-block-button__link, .wp-element-button) {
    /* Outline */
    background: transparent;
    color: var(--primary-blue-accent);
    border: 1px solid var(--primary-blue-accent);
}

.wp-block-button.is-style-polimi-button-internal-fill :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-external-fill :is(.wp-block-button__link, .wp-element-button) {
    /* Fill */
    background: var(--primary-blue-accent);
    color: white;
    border: 1px solid var(--primary-blue-accent);
}

.is-style-polimi-button-internal-outline .wp-block-button__link:hover,
.is-style-polimi-button-external-outline .wp-block-button__link:hover {
    background-color: var(--primary-blue-accent);
    color: white;
    border: 1px solid var(--primary-blue-accent);
}

.is-style-polimi-button-internal-fill .wp-block-button__link:hover,
.is-style-polimi-button-external-fill .wp-block-button__link:hover {
    background-color: var(--primary-blue-accent-dark);
    color: white;
    border: 1px solid var(--primary-blue-accent-dark);
}
/* add the arrow as an SVG background */
.wp-block-button.is-style-polimi-button-internal-outline .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-internal-fill .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-external-outline .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-external-fill .wp-block-button__link::after {
    content: "";
    display: block;
    position: relative;
    width: 18px;
    height: 18px;
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: currentColor;
}

.wp-block-button.is-style-polimi-button-internal-outline .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-internal-fill .wp-block-button__link::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='white'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z' fill='%23102C53'/%3E%3C/svg%3E");
}

.wp-block-button.is-style-polimi-button-external-outline .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-external-fill .wp-block-button__link::after {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill='white' d='M11.9369 5.65776C11.8466 5.61791 11.7493 5.59628 11.6506 5.59413L6.3473 5.59412C6.24841 5.59412 6.15048 5.6136 6.05912 5.65145C5.96775 5.68929 5.88473 5.74476 5.8148 5.81469C5.67358 5.95592 5.59424 6.14747 5.59424 6.34719C5.59424 6.44609 5.61371 6.54401 5.65156 6.63538C5.6894 6.72675 5.74488 6.80976 5.8148 6.87969C5.95603 7.02092 6.14758 7.10026 6.3473 7.10026L9.84218 7.09496L5.81697 11.1202C5.67632 11.2608 5.5973 11.4516 5.5973 11.6505C5.5973 11.8494 5.67632 12.0402 5.81697 12.1808C5.95763 12.3215 6.14839 12.4005 6.3473 12.4005C6.54622 12.4005 6.73698 12.3215 6.87763 12.1808L10.9028 8.15562L10.8975 11.6505C10.8971 11.7495 10.9163 11.8476 10.954 11.9392C10.9917 12.0307 11.0471 12.1139 11.1171 12.1839C11.1872 12.2539 11.2703 12.3094 11.3619 12.3471C11.4534 12.3848 11.5515 12.404 11.6506 12.4036C11.7496 12.404 11.8477 12.3848 11.9392 12.3471C12.0308 12.3094 12.114 12.2539 12.184 12.1839C12.254 12.1139 12.3094 12.0307 12.3471 11.9392C12.3848 11.8476 12.404 11.7495 12.4036 11.6505V6.34719C12.4015 6.24848 12.3798 6.15115 12.34 6.06082C12.2639 5.87866 12.1191 5.73384 11.9369 5.65776Z'/></svg>");
}


/* ==========================================================================
   START: Responsive Styles (Mobile & Tablet)
   ========================================================================== */

/* --- Mobile Menu Toggle Button (Hamburger) --- */
.nav--menu-toggle {
    display: none; /* Hidden by default on desktop */
    z-index: 101; /* Ensure it's above the nav bar content */
    padding: 8px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.nav--menu-toggle svg {
    width: 28px;
    height: 28px;
    color: var(--blue-main);
}

.nav--menu-toggle .icon--close {
    display: none; /* The 'X' icon is hidden initially */
}

/* When the menu is open, show the 'X' and hide the hamburger */
.site-header.is-open .nav--menu-toggle .icon--close {
    display: block;
}
.site-header.is-open .nav--menu-toggle .icon--menu {
    display: none;
}

/* Hide the mobile menu container on desktop */
.mobile-menu {
    display: none;
}


@media (max-width: 992px) {
    /* --- Your mobile and tablet styles go here --- */

    /* Hide a desktop-only element */
    .desktop-only-element {
        display: none;
    }
    
    /* --- START: Mobile Navigation Styles --- */
    .desktop-menu,
    .sub-menu-container {
        display: none; /* Hide the desktop menu */
    }

    /* Show the hamburger button */
    .nav--menu-toggle {
        display: block;
    }

    /* --- MOBILE MENU PANEL STYLING (THE FIX) --- */
    .mobile-menu {
        display: block; /* Show the mobile menu container */
        position: fixed;
        top: var(--nav-height); /* FIX: Start below the nav bar */
        left: 0;
        width: 100vw;
        height: calc(100vh - var(--nav-height)); /* Fill remaining screen height */
        background-color: #fff;
        padding: 16px 0;
        overflow-y: auto;
        
        /* Animation: Hide it by default */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* When the menu is open, make the panel visible */
    .site-header.is-open .mobile-menu {
        visibility: visible;
        opacity: 1;
    }
    
    .mobile-nav-links > .menu-item {
        display: flex; /* NEW: Use Flexbox for layout */
        justify-content: space-between; /* NEW: Push items apart */
        align-items: center;
        flex-wrap: wrap; /* Allows sub-menu to wrap to a new line */
        width: 100%;
        padding-left: var(--padding-tablet);
        padding-right: var(--padding-tablet);
        border-bottom: 1px solid #5c6f82;
    }

    .mobile-nav-links {
        list-style-type: none;
        margin-block-start: 0px;
        margin-block-end: 0px;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
        padding-inline-end: 0px;
    }

    .mobile-nav-links a {
        flex-grow: 1; /* NEW: Link takes up all available space */
        padding: 16px 0;
        /* border-bottom: none;  */
        text-decoration: none;
        font-weight: 500;
        display: flex;
        gap: 4px;
        align-items: center;
    }

    /* Arrow icon for ALL menu items */
    .mobile-nav-links > .menu-item > a::after {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.64795 6.39795L4.89795 10.1479C4.79228 10.2536 4.64895 10.313 4.49951 10.313C4.35007 10.313 4.20675 10.2536 4.10107 10.1479C3.9954 10.0423 3.93604 9.89895 3.93604 9.74951C3.93604 9.60007 3.9954 9.45674 4.10107 9.35107L7.4531 5.99998L4.10201 2.64795C4.04969 2.59562 4.00818 2.53351 3.97986 2.46514C3.95155 2.39678 3.93697 2.32351 3.93697 2.24951C3.93697 2.17551 3.95155 2.10224 3.97986 2.03388C4.00818 1.96551 4.04969 1.9034 4.10201 1.85107C4.15433 1.79875 4.21645 1.75724 4.28482 1.72893C4.35318 1.70061 4.42645 1.68604 4.50045 1.68604C4.57445 1.68604 4.64772 1.70061 4.71608 1.72893C4.78445 1.75724 4.84656 1.79875 4.89889 1.85107L8.64889 5.60107C8.70126 5.65339 8.7428 5.71554 8.77111 5.78394C8.79942 5.85235 8.81395 5.92567 8.81386 5.99971C8.81377 6.07374 8.79907 6.14703 8.7706 6.21536C8.74213 6.2837 8.70045 6.34575 8.64795 6.39795Z' fill='%232942DB'/%3e%3c/svg%3e");
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: -1px; /* Slight adjustment to align with text */

    }

    /* --- ACCORDION BUTTON (+/- icon) --- */
    .accordion-toggle {
        /* Reset button styles */
        background: none;
        border: none;
        padding: 15px; /* Make it easy to tap */
        cursor: pointer;
        position: relative;
        width: 48px; /* Fixed width */
        height: 48px;
    }

    /* Create the + icon using pseudo-elements */
    .accordion-toggle::before,
    .accordion-toggle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2px;
        background-color: var(--blue-main);
        border-radius: 1px;
        transition: transform 0.25s ease-in-out;
    }
    .accordion-toggle::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .accordion-toggle::after {
        transform: translate(-50%, -50%);
    }

    /* Transform + to - when expanded */
    .menu-item.is-expanded .accordion-toggle::before {
        transform: translate(-50%, -50%) rotate(180deg);
    }
    .menu-item.is-expanded .accordion-toggle::after {
        transform: translate(-50%, -50%) rotate(180deg);
    }

    .mobile-nav-links .sub-menu {
        list-style: none;
        padding-inline-start: 0px;
        padding-left: 16px; /* Indent sub-items */
        width: 100%;
        
        /* Accordion animation */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }
    .mobile-nav-links .menu-item.is-expanded > .sub-menu {
        max-height: 500px; /* Animate to a large enough value */
    }
    .mobile-nav-links .sub-menu a {
        font-size: 14px;
        font-weight: 700;
        padding: 16px 0;
    }

    /* --- END: Mobile Navigation Styles --- */

    .branding-bar--container,
    .nav--container {
        padding-right: var(--padding-tablet);
        padding-left: var(--padding-tablet);
    }

    .home--title-section--header,
    .is-homepage .section-header,
    .is-homepage .section--container,
    .spotlight--cards-wrapper,
    .full-width-banner--container,
    .footer--inner-row-1, .footer--inner-row-2, .footer--inner-row-3,
    .static-page--title-section--header,
    .static-page--container,
    .page-title--no-image--wrapper,
    .news-archive--container,
    .people-archive--grid {
        padding-right: var(--padding-tablet);
        padding-left: var(--padding-tablet);
        margin-left: 0px;
        margin-right: 0px;
        max-width: 100%;
        width: 100%;
    }

    .is-homepage .home-section {
        padding-top: 40px;
    }

    .home--hero-section--wrapper {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .cards-wrapper-2x1-grid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-auto-rows: 280px;
    }

    .home-news--grid {
        display: flex;
        flex-flow: column;
        gap: 16px;
        height: unset;
    }

    .home--title-section--supertitle {
        font-size: 21px;
    }

    .static-page--title-section--title,
    .page-title--no-image--title,
    .home--title-section--title {
        font-size: 38px;
    }

    .section-supertitle,
    .course-semester-title {
        font-size: 14px;
    }

    .section-title--CTA {
        font-size: 14px;
    }

    .section-title,
    .home--hero-section--title,
    .spotlight-card-title,
    .card-title,
    .full-width-banner--title {
        font-size: 24px;
    }

    .full-width-banner--title br {
        display: none;
    }

    .home--hero-section--description p {
        font-size: 18px;
    }

    /* Unset grid spans and grid areas */
    .home--hero-section--title,
    .home--hero-section--description,
    .home--hero-section--link,
    .home--hero-section--image,
    .spotlight--main-card,
    .spotlight--secondary-card,
    .spotlight--tertiary-card,
    .news--card {
        grid-column: unset;
        grid-row: unset;
        grid-area: unset;
    }

    /* Spotlight layout */
    .spotlight--cards-wrapper {
        display: flex;
        flex-flow: column;
        gap: 16px;
        height: unset;
    }

    .spotlight--main-card {
        height: 300px;
    }

    .spotlight--secondary-card {
        display: flex;
        flex-flow: column;
    }

    .spotlight--secondary-card--right-half {
        order: -1;
    }

    .spotlight--secondary-card--left-half {
        gap: 16px;
    }

    .card-link {
        height: 100%;
        justify-content: space-between;
        gap: 16px;
    }

    .spotlight--tertiary-card--footer {
        flex-flow: column;
        align-items: flex-start;
        gap: 16px;
    }

    .spotlight--tertiary-card--stats-wrapper {
        gap: 32px;
    }

    .spotlight--tertiary-card--stat--value {
        font-size: 32px;
    }

    .news--card {
        display: flex;
        flex-flow: column;
    }

    .cards-wrapper-3x1-sq-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
    }

    .footer--inner-row-2,
    .footer--inner-row-3 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer--row-2--clmn-1 {
        order: 3;
    }

    .footer--row-2--clmn-2 {
        order: 1;
    }

    .footer--row-2--clmn-3 {
        order: 2;
    }


    .static-page--simple-title-section {
        padding-top: calc(67px + 32px);
        padding-bottom: 40px;
    }

    .static-page--container {
        display: flex;
        flex-flow: column;
        gap: 16px;
    }

    .static-page--main-content {
        width: 100%;
    }

    .static-page--shoulder {
        position: static;
    }

    /* Subjects */
    .course-year-filters {
        margin-left: calc(-1 * var(--padding-tablet));
        margin-right: calc(-1 * var(--padding-tablet));
        padding-left: var(--padding-tablet);
        padding-right: var(--padding-tablet);
        gap: 8px;
    }

    .subject-list li {
        flex-flow: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .subject-header {
        flex-flow: column;
        align-items: flex-start;
        gap: 4px;
    }

    .subject-options-list li {
        gap: 4px;
    }

    .subject-cfu {
        order: -1;
    }

}