/* ===========
 *    FONTS   
 * =========== */
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

/* ==================
 *    Global stuff   
 * ================== */

* {
    box-sizing: border-box;
}

:root {
	--light: rgba(211,61,39,0.265);
    --dark: #d33d27;
	--darker: #be3723;
	--greyish: rgb(36,36,36);
}

body {
	margin: 0;
    font-family: "Inter", sans-serif;
}

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

a:hover {
    text-decoration: none;
}

h1, h2 {
	margin-bottom: 0;

	line-height: 1.2;
	letter-spacing: 0;
	font-style: normal;
	font-weight: 400;
	text-align: inherit;
	text-transform: none;
	text-decoration: none;
}

h1 { 
	font-size: 50px;
}

.small-h1 h1 { 
	font-size: 30px;
}

h2 { 
	font-size: 30px;
}

ul.austms-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.austms-list > li {
    position: relative;
    padding-left: 1.25rem;
}

ul.austms-list > li::before {
    position: absolute;
    left: 0;

    content: "▸";
}

/* =================
 *    Page layout   
 * ================= */

main {
	display: flex;
	flex-direction: column;
	gap: 3rem;

    max-width: 75.5rem;
    margin: 0 auto;

	font-size: 18px;
	line-height: 1.5;
}


main > section:first-of-type {
    padding-top: 2rem;
}

main > section:last-of-type {
    padding-bottom: 50px;
}

main > section {
    padding-inline: 1rem;
}

.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.two-columns.wide-left {
    grid-template-columns: 55fr 45fr;
}

.two-columns.wide-right {
    grid-template-columns: 45fr 55fr;
}


/* =========================
 *    Header and branding   
 * ========================= */

.branding {
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 5rem;

	padding: 0.5rem 0;

	background: black;
	color: white;

	font-size: 50px;
}

.branding a {
	color: white;
    text-decoration: none;
}

.branding img {
    display: block;
}

.austms-logo {
	padding: 5px;
	border-radius: 10px;
	background-color: rgb(218, 235, 243);
}

.logo-link {
    text-decoration: none;
}

.branding {
    position: relative;
    overflow: hidden;
}

.branding-wave {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;
}

.branding-wave path {
    fill: var(--greyish);
}

.branding > :not(.branding-wave) {
    position: relative;
    z-index: 1;
}

/* =====================
 *    Main navigation   
 * ===================== */

.main-nav {
	position: sticky;
    top: 0;
	z-index: 10;

	display: flex;
    justify-content: center;

	padding: 0.5rem 0;
	background: var(--greyish);
}

.main-nav > ul {
    display: flex;
	gap: 2rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.main-nav > ul > li > a {
    text-decoration: none;
	color: white;
}

.main-nav > ul > li {
	padding: 0 12px;
    border-bottom: 2px solid transparent;
	transition: border-color 0.2s linear; 
}

.main-nav > ul > li.current,
.main-nav > ul > li:hover {
    border-bottom-color: var(--dark);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-button {
	padding: 0;
    border: 0;

    background: none;
	color: white;

	font: inherit;

	appearance: none;
	cursor: pointer;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
	left: 0;
	z-index: 20;

    display: none;

	padding: 3px 0 0;

	background: transparent;

    list-style: none;
}

.nav-dropdown-menu li {
	padding-inline: 0.25rem;
	background: var(--greyish);
}

.nav-dropdown-menu a {
	display: block;

	padding: 0.3rem;

	color: white;

	font-size: 14px;
	text-decoration: none;
    white-space: nowrap;
}

.nav-dropdown-menu > li.current,
.nav-dropdown-menu li:hover {
	background: var(--dark);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
}

/* ============
 *    Footer   
 * ============ */

footer { 
	background-color: var(--greyish);
}

footer p {
	max-width: 75.5rem;

	margin: 0 auto;
	padding: 12px;

	color: white;

	font-size: 18px;
    text-align: right;
}


/* =======================
 *    Dialogs and so on   
 * ======================= */

.overlay {
    padding: 0;
    border: 0;
    background: transparent;
}

.overlay-content {
	width: 61rem;
	max-width: calc(100vw - 1rem);
    padding: 2rem;

    border-radius: 10px;
    background: white;
}

.overlay::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.overlay-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;

	padding: 0;
    border: 0;

    background: none;

    font: inherit;
    font-size: 1.5rem;

    appearance: none;
    cursor: pointer;
}

.overlay:focus {
    outline: none;
}

[data-accordion-panel] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.15s ease;
}

[data-accordion-panel].open {
    grid-template-rows: 1fr;
}

.accordion-panel-inner {
    overflow: hidden;
}

/* =========================
 *    Thematic components   
 * ========================= */

.link-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;

	width: 580px;

	margin: 0 auto 36px auto;
}

.action-button {
    border: 0;
    border-radius: 10px;

    background: var(--dark);
    color: white;

    text-decoration: none;

    appearance: none;
    cursor: pointer;
    transition: background-color 0.1s linear;
}

.action-button:is(:hover, .active) {
    background: var(--darker);
}

.link-button {
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.5rem;
    font-size: 16px;
    font-weight: 600;
	text-align: center;
}

.link-button i {
    margin-right: 0.4rem;
}

.tile-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
	text-align: center;
}

.info-section {
	display: flex;
    flex-direction: column;
    gap: 16px;

	margin-bottom: 28px;
}

.info-box {
    display: flex;

    min-height: 52px;

    border-radius: 5px;
    background-color: var(--light);

	font-size: 16px;
	line-height: 19px;
}

.info-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 52px;
    width: 52px;

    border-radius: 5px 0 0 5px;
    background-color: var(--dark);
    color: white;
}

.info-box-icon i {
    font-size: 1rem;
}

.pars {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1rem;
}

.info-box p {
    margin: 0;
}

table.alt-grey-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	text-align: left;
}

table.alt-grey-table td,
table.alt-grey-table th {
	padding: 12px 8px 12px 8px;
    border-width: 1px;
    border-style: solid;
    border-color: #9a9c9b;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

table.alt-grey-table tr td:nth-child(even) {
    background: #f0f2f1;
}

.scroll-wrap {
	width: 100%;
	overflow-x: auto;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table thead tr {
    background-color: #ebd0ca;
}

.schedule-table thead th {
    padding: 8px;
    text-align: left;
}

.schedule-table td {
    padding: 8px;
}

.schedule-table tr {
    border-bottom: 1px solid #ccc;
}

.schedule-table tr th:last-of-type,
.schedule-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.grey-box {
	padding: 2.5rem;
	background: #f3f3f3;
}

.info-split {
    display: grid;
    grid-template-columns: 65fr 35fr;
	align-items: center;
	gap: 1rem;
}


/* ================
 *    Front page   
 * ================ */

.homepage h1 {
	margin-bottom: 36px;
}

.homepage > section:first-of-type {
    padding-top: 72px;
}

.quicklink-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 1rem;

	margin-top: 16px;
	margin-bottom: 2rem;
}

.quicklink {
	padding: 10px;
}

.quicklink > span {
	width: 100%;
	font-size: 24px;
	line-height: 1.125;
}

.quicklink-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 1em;

	font-size: 40px;
}

.campus-picture img {
	display: block;
    width: 100%;
    height: auto;
}

.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 2rem;

	padding-inline: 1rem;
}

.sponsor {
    position: relative;
}

.sponsor-marker {
    position: absolute;
    top: 1.2rem;
    right: 0;
	font-size: 1.5rem;
}

.sponsor-footnote {
	padding: 1rem;
}

.sponsor img {
    max-width: 100%;
    height: auto;
}

/* ==============
 *    Schedule   
 * ============== */

.schedule h2 {
	margin-bottom: 1rem;
}

.schedule {
	gap: 0;
}

.schedule .link-buttons {
    width: 588px;
}

/* ==============================
 *    Session timetable viewer   
 * ============================== */

.session-timetable-viewer h3 {
	font-size: 24px;
	font-weight: 400;
	margin-bottom: 0.5rem;
	margin-top: 0;
}

.session-timetable-viewer .schedule-table {
	margin-bottom: 2rem;
}

.schedule-table.session-table tr > td:first-child,
.schedule-table.session-table tr > th:first-child {
	white-space: nowrap;
}

.schedule-table.day-table tr th:nth-last-child(-n+2),
.schedule-table.day-table tr td:nth-last-child(-n+2) {
	white-space: nowrap;
}

.session-tab-bar {
	display: flex;
	margin-block: 1rem;
	border-bottom: 1px solid #ccc;
}

.session-tab {
	margin-right: 4px;
	padding: 8px 16px;

	border: none;
	border-radius: 8px 8px 0 0;
	background: #eee;

	font-size: 18px;

	appearance: none;
	cursor: pointer;
}

.session-tab.active {
	border: 1px solid #ccc;
	background: white;
	font-weight: 700;
}

.session-tab-pane {
	padding: 10px; 
}

#session-select {
	font-size: inherit;
    margin-bottom: 2rem;
}

.session-timetable-viewer label[for="session-select"] {
    display: block;
	margin-bottom: 1rem;
}

/* ===============
 *    Plenaries   
 * =============== */


.plenary-speakers {
	gap: 6rem;
}

.plenary-speakers > section:first-of-type {
    padding-top: 4rem;
}

.plenary {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 0;
}

.plenary h1 {
	margin: 0;
}

.plenary h2 {
	margin-block: 18px;

	font-size: 1.5rem;
	font-weight: 600;
}

.plenary p {
	margin: 0;
}

.plenary p.abstract {
	font-family: "Aptos", sans-serif;
	font-size: 14.666667px;
	line-height: 27px;
}

.plenary p.abstract + p.abstract {
    margin-top: 0.5lh;
}

.plenary-photo {
    width: 300px;
    height: 350px;
    object-fit: cover;
}

/* ==============
 *    Sessions
 * ============== */

.sessions {
	font-size: 1rem;
	gap: 0;
}

.sessions .link-buttons {
	margin-top: 3rem;
    width: 699px;
}

/* ======================= 
 *    Local information
 * ======================= */

.local-information {
	gap: 0;
}

.transport-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.transport-button {
    padding: 16px;
    font-size: 30px;
}

.transport-button > i {
	font-size: 40px;
}

.transport-content-inner > div {
    margin-block: 8px;
    padding-left: 5px;
    border-left: 4px double
}

/* ================
 *   Committees
 * ================ */

.committees li {
	font-size: 14px;
}

/* ==================
 *   Registration
 * ================== */

.registration-button {
	display: block;
	width: 334px;
    margin: 2rem auto;
	padding: 21px 62px;
	font-size: 32px;
	text-align: center;
}

.registration-info > button {
	width: 100%;

	margin: 0.5rem 0;
	padding: 1rem;
    border-radius: 5px;


	font-size: 18px;
	text-align: left;
}

.registration .accordion-panel-inner {
	padding-inline: 1rem;
}

.registration-fees table {
	font-size: 1rem;
}

.registration-fees p {
	font-size: 12px;
}

.registration-deadlines {
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    align-items: center;
}

.registration-deadlines-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    font-size: 3rem;
}

.registration-deadline {
    text-align: center;
}

.registration-deadline p {
    margin: 0;
	font-size: .815rem;
}


/* ===================
 *   Announcements
 * =================== */

.announcements {
	gap: 2rem;
}

.announcements p {
	margin: 0;
}

.announcements .grey-box {
	margin-inline: 2rem;
}

.announcements h2 {
	margin: 0;
}
.announcements h3 {
	margin: 8px 0 0 0;
	font-size: 24px;
	font-weight: 400;
}

/* ===========================
 *    Events and satellites
 * =========================== */

.content-list h1 {
	font-weight: 600;
}

.content-list h2 {
	margin: 0;
}

.events .info-section {
	margin-block: 2rem;
}

.content-list .info-split {
	margin-block: 2rem;
	margin-inline: 1rem;
}

.satellites .grey-box h2,
.events .conference-dinner h2,
.events .public-lecture h2,
.events .public-lecture h3 {
	font-size: 18px;
	font-weight: 600;
}

.content-list .grey-box p {
	margin-top: 0.5rem;
	margin-bottom: 0;
	font-size: 14px;
}

.content-list .info-box p {
	font-size: 14px;
}

.content-list .info-box-icon i {
	font-size: 24px;
}

.content-list .info-box {
    --info-box-size: 60px;

    height: var(--info-box-size);
}

.content-list .info-box-icon {
    flex: 0 0 var(--info-box-size);
    width: var(--info-box-size);
}

.content-list .pars {
    padding: 0 1rem;
}

.satellites p {
	margin: 0;
}

/* =====================
 *    Art exhibition
 * ===================== */

.art-exhibition h1 {
	margin-top: 1rem;
	font-size: 60px;
}

.art-exhibition h2 {
	margin-top: 0;
}

.exhibition-header {
	width: 100%;
    display: flex;
	flex-direction: column;
    align-items: center;
}

.art-exhibition .info-section {
	width: 60%;
	margin-top: 3rem;
	margin-bottom: 0;
}
.art-exhibition .info-box {
	width: 100%;
	line-height: 24px;
}

.art-exhibition .two-columns {
	gap: 2rem;
}

.art-exhibition .two-columns {
	padding-inline: 16px;
}

.art-exhibition .art-box {
	font-size: 12px;
	line-height: 24px;
}

.art-exhibition .art-box p {
	margin-top: 0;
}

.art-image-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;

    font: inherit;
    appearance: none;
    cursor: pointer;
}

.art-image-open img {
    display: block;
    max-width: 100%;
    height: auto;
}

.art-dialog-body img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ================
 *    Info pages    
 * ================ */

.info-page {
	gap: 0;
}

.info-page p {
	margin: 0;
}

.archive p {
	margin-block: 2rem;
}

/* ================
 *    Campus map
 * ================ */

.campus-map {
	gap: 0;
}

.campus-map-frame {
    max-width: 100%;
    height: 835px;
    border: none;
    margin-inline: 1rem;
	margin-bottom: 2rem;
}

.campus-map-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.campus-map p {
	margin-bottom: 0;
}


/* ============
 *    Photos
 * ============ */

.photos {
	gap: 0;
}

.photos h2 {
	margin-bottom: 1rem;
}

.photos .splide__slide img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.photos .splide__pagination {
    bottom: -1rem;
}

.photos .splide {
    margin-bottom: 2rem;
}

.photos .splide__arrow {
    background: var(--dark);
    opacity: 1;
}

.photos .splide__arrow:hover {
    background: var(--darker);
    opacity: 1;
}

.photos .splide__arrow svg {
    fill: white;
}

.photos .splide__arrow--prev {
    left: -3rem;
}

.photos .splide__arrow--next {
    right: -3rem;
}

.photos .splide {
    margin: 0 3rem 3rem;
}

.photos .splide__pagination__page.is-active {
    background: black;
}

/* ==================
 *    Scam warning   
 * ================== */

.scam-warning {
	position: relative;

	margin-bottom: 20px;
	padding: 12px 16px;

	border-bottom: 1px solid #ffeeba;
	border-radius: 0.375rem;
	background-color: #fff3cd;
	color: #856404;
}

.scam-warning-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scam-warning p {
    margin: 0;
}

[data-warning-close] {
    border: 0;
    background: none;
	color: #856404;

	font-size: 20px;
	font-weight: bold;
	line-height: 1;

	appearance: none;
	cursor: pointer;
}