/*
Theme Name: ISC Web Theme AY26-27 @ SIU Carbondale
Theme URI: https://siu.edu/
Author: Alliah Evangelista Bombais
Author URI: https://siu.edu/
Description: Theme for the International Student Council at Southern Illinois University Carbondale. Content (RSOs, Board Members, Events, Calendar, Gallery) is managed through custom post types in wp-admin — see the theme's README.md.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: isc-siuc
*/

/* Main Style */
:root {
    --siu-maroon: #6c0633;
    --siu-maroon-dark: #4f0025;
    --siu-gold: #ffb400;
    --ink: #171417;
    --text: #2b2528;
    --muted: #61565b;
    --paper: #fffdfa;
    --cream: #f7f1e7;
    --sand: #ece1d2;
    --rose: #f4e8ee;
    --line: #d3c4b5;
    --white: #ffffff;
    --focus: #005fcc;
    --success-bg: #eaf6ed;
    --success-text: #184923;
    --pause-bg: #fff3d2;
    --pause-text: #6d4a00;
    --max-width: 1180px;
    --radius-lg: 1.5rem;
    --radius-md: 1rem;
    --shadow: 0 16px 40px rgba(23, 20, 23, 0.10);
    --grid-bg: linear-gradient(rgba(108, 6, 51, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 6, 51, 0.08) 1px, transparent 1px);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Archivo", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--paper);
}

a {
    color: var(--siu-maroon);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 4px solid var(--focus);
    outline-offset: 4px;
}

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

.skip-link {
    text-decoration: none;
    position: absolute;
    left: 1rem;
    top: -5rem;
    z-index: 1000;
    background: var(--ink);
    color: var(--white);
    padding: 0.85rem 1rem;
    font-weight: 800;
}

.skip-link:focus {
    top: 1rem;
}

.wrap {
    width: min(var(--max-width), calc(100% - 2rem));
    margin: 0 auto;
}

.eyebrow {
    display: inline-block;
    margin: 0 0 0.9rem;
    color: var(--siu-maroon);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    margin-top: 0;
    line-height: 1.1;
    color: var(--ink);
}

h1 {
    font-size: clamp(2.9rem, 8vw, 5.8rem);
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
}

.headline-bold {
    font-weight: 900;
}

.headline-normal {
    font-weight: 500;
    letter-spacing: -0.055em;
}

.lead {
    font-size: clamp(1.06rem, 2vw, 1.2rem);
    color: var(--text);
    max-width: 68ch;
}

.section-copy {
    max-width: 74ch;
    color: var(--muted);
}

.site-alert {
    display: block;
    background: var(--siu-maroon-dark);
    color: var(--white);
    text-align: center;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
}

.site-alert a {
    color: var(--siu-gold);
    font-weight: 800;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 253, 250, 0.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--ink);
    text-decoration: none;
}

/* Board/advisor teaser card name links: this is a heading sitting on a bordered
   card (not a link inline within a run of body text), so per WCAG 1.4.1 an
   underline isn't required as long as the link is otherwise visually distinct. */
.board-member-link {
    text-decoration: none;
}

.board-member-link:hover,
.board-member-link:focus-visible {
    text-decoration: underline;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--siu-maroon);
    color: var(--siu-gold);
    border: 3px solid var(--siu-gold);
    font-weight: 900;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.brand-mark-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.brand-meta small {
    display: block;
    color: var(--siu-maroon);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.brand-meta strong {
    display: block;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    color: var(--ink);
    line-height: 1.15;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.utility-link,
.menu-toggle,
.button,
button {
    min-width: 44px;
    min-height: 44px;
    font: inherit;
    font-weight: 800;
    border-radius: 999px;
}

.utility-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.95rem;
    text-decoration: none;
    color: var(--siu-maroon);
    background: var(--cream);
    border: 1px solid var(--line);
}

.utility-link:hover {
    background: var(--sand);
    color: var(--ink);
}

.menu-toggle {
    display: none;
    padding: 0.65rem 1rem;
    border: 2px solid var(--siu-maroon);
    background: var(--white);
    color: var(--siu-maroon);
    cursor: pointer;
}

.site-nav {
    border-top: 1px solid var(--line);
    padding: 0.55rem 0;
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 0.85rem;
    text-decoration: none;
    color: var(--ink);
    border-radius: 999px;
    font-weight: 800;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    background: var(--siu-maroon);
    color: var(--white);
}

.hero {
    position: relative;
    padding: 3rem 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--rose), rgba(244, 232, 238, 0.35)),
        url('images/siu-pattern.png');
    background-size: 340px;
    background-repeat: repeat;
}

.hero-shell {
    border: 1px solid var(--line);
    border-radius: calc(var(--radius-lg) + 0.3rem);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow);
}

.top-strip {
    background: var(--siu-gold);
    color: var(--ink);
    text-align: center;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 2rem;
    padding: clamp(1.3rem, 4vw, 2.5rem);
    background-color: var(--paper);
    background-image: var(--grid-bg);
    background-size: 28px 28px;
}

.hero-copy {
    position: relative;
}

.headline-block {
    max-width: 13ch;
}

.headline-highlight {
    display: inline;
    box-shadow: inset 0 -0.55em 0 rgba(255, 180, 0, 0.48);
}

.hero-subtitle {
    max-width: 60ch;
    margin: 1rem 0 0;
    color: var(--text);
    font-size: 1.05rem;
}

.hero-note {
    display: inline-block;
    margin-top: 1.1rem;
    background: rgba(108, 6, 51, 0.09);
    color: var(--siu-maroon);
    padding: 0.45rem 0.7rem;
    border-radius: 0.45rem;
    font-size: 0.88rem;
    font-weight: 800;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.35rem;
    justify-content: space-between;
}

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.8rem 1.05rem;
    border: 2px solid var(--siu-maroon);
    background: var(--siu-maroon);
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
}

.button::after {
    content: "›";
    font-size: 1.2rem;
    line-height: 1;
}

.button:hover,
button:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

.button.gold {
    background: var(--siu-gold);
    border-color: var(--siu-gold);
    color: var(--ink);
}

.button.gold:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

.button.light {
    background: var(--white);
    color: var(--siu-maroon);
}

.button.light:hover {
    background: var(--sand);
    color: var(--ink);
    border-color: var(--ink);
}

.hero-side {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.mini-card,
.feature-card,
.story-card,
.directory-card,
.board-card,
.membership-card,
.gallery-card,
.contact-card,
.calendar-card,
.form-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 28px rgba(23, 20, 23, 0.06);
}

.membership-card ul,
.membership-card ol {
    list-style-position: outside;
    padding-left: 1.2em;
    margin: 0.75rem 0 0;
}

.membership-card li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.membership-card li:last-child {
    margin-bottom: 0;
}

.mini-card {
    padding: 1rem;
    background: var(--cream);
}

.mini-card strong {
    color: var(--siu-maroon);
}

.photo-placeholder,
.wide-photo-placeholder,
.gallery-placeholder {
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--ink);
    font-weight: 800;
    border: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgba(108, 6, 51, 0.09), rgba(255, 180, 0, 0.17)),
        linear-gradient(180deg, var(--sand), var(--cream));
}

.photo-placeholder {
    min-height: 240px;
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
}

.wide-photo-placeholder {
    min-height: 360px;
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
}

.ribbon {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--siu-maroon);
    color: var(--white);
    padding: 0.65rem 0;
    overflow: hidden;
}

.ribbon p {
    margin: 0;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-section,
.content-section,
.highlight-band,
.board-band,
.members-band,
.contact-section {
    padding: 2.3rem 0;
}

.section-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 1.6rem;
}

.feature-grid,
.board-grid,
.membership-grid,
.gallery-grid {
    display: grid;
    gap: 1rem;
}

/* Info cards (Why Join / Signature Event Types / Elections / Gallery
   highlights) wrap and center as a group instead of stretching to fill 4
   fixed grid tracks — so a row of 1, 2, or 3 cards sits centered at its
   natural width instead of one card ballooning to a quarter of the page
   or a row of 3 leaving an awkward empty 4th slot. */
.feature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}

.feature-card {
    flex: 1 1 260px;
    max-width: 300px;
    overflow: hidden;
}

.feature-card .feature-image {
    width: 100%;
    height: 210px;
    margin: 0;
    display: block;
    background:
        linear-gradient(135deg, rgba(108, 6, 51, 0.2), rgba(255, 180, 0, 0.32)),
        linear-gradient(180deg, var(--sand), var(--cream));
    color: var(--ink);
    font-weight: 800;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

.feature-card:nth-child(2n) .feature-image {
    background:
        linear-gradient(135deg, rgba(255, 180, 0, 0.28), rgba(108, 6, 51, 0.18)),
        linear-gradient(180deg, var(--rose), var(--cream));
}

.feature-card .feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.feature-card-content {
    padding: 1rem;
}

.feature-card:not(:has(.feature-image)) .feature-card-content {
    padding: 1.5rem;
}

.feature-card-content .button {
    margin-top: auto;
    width: auto;
    margin-top: 20px;
}

.story-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.4rem;
    align-items: center;
}

.story-card {
    padding: 1.35rem;
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    list-style: none;
    padding: 0;
    margin: 0.95rem 0 0;
}

.pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.88rem;
    font-weight: 900;
}

.pill {
    background: var(--cream);
    color: var(--ink);
    border: 1px solid var(--line);
}

.status-pill.active {
    background: var(--success-bg);
    color: var(--success-text);
}

.status-pill.inactive {
    background: var(--pause-bg);
    color: var(--pause-text);
}

.board-band {
    background: linear-gradient(180deg, var(--rose), rgba(244, 232, 238, 0.35));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.board-card {
    padding: 1rem;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 190px;
    height: 100%;
}

.profile-photo {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    place-items: center;
    text-align: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sand), var(--cream));
    border: 1px solid var(--line);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ink);
    padding: 0;
    flex-shrink: 0;
}


.section-block {
    margin-top: 2rem;
}

.directory-tools {
    padding: 1.1rem;
    margin-bottom: 1.25rem;
    background: var(--cream);
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 0.85fr) minmax(170px, 0.85fr);
    gap: 1rem;
    align-items: end;
}

label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 900;
    color: var(--ink);
}

input,
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.8rem;
    border: 2px solid #6f676a;
    border-radius: 0.8rem;
    background: var(--white);
    color: var(--ink);
    font: inherit;
}

textarea {
    min-height: 150px;
    resize: vertical;
}

.filter-status {
    margin-top: 0.85rem;
    font-weight: 800;
    color: var(--siu-maroon);
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.directory-card {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.directory-card[hidden] {
    display: none;
}

/* Horizontal layout: text on left, button on right — all vertically centered */
.directory-card-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0.9rem 1rem;
    gap: 0.75rem;
}

.directory-card-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.directory-card-logo {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, var(--sand), var(--cream));
}

.directory-card-logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--siu-maroon), var(--siu-maroon-dark));
    color: var(--white);
    font-size: 1rem;
    font-weight: 900;
}

.directory-card-top {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.directory-card-name {
    font-size: 0.97rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    /* Prevent very long names from pushing the button off */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-card .pill-list {
    margin: 0;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* Button stays on the right, never shrinks */
.directory-card .button-row {
    margin: 0;
    flex-shrink: 0;
}

/* No arrow icon on "View RSO," matching the arrow-free treatment already
   used on each RSO's own "Find Us" buttons (.rso-links-section below). */
.directory-card .button::after {
    content: none;
}

.notice {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-left: 0.6rem solid var(--siu-gold);
    border-radius: 0.9rem;
    background: #fff8e5;
    border: 1px solid var(--line);
}

.calendar-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: 1rem;
    align-items: stretch;
}

.calendar-card {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1rem;
    background: var(--siu-maroon);
    color: var(--white);
}

.calendar-controls h3 {
    margin: 0;
    color: var(--white);
    text-align: center;
    font-size: 1.15rem;
}

.calendar-controls button {
    width: 48px;
    padding: 0;
    background: var(--siu-gold);
    border-color: var(--siu-gold);
    color: var(--ink);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: 1fr;
    flex: 1;
}

.calendar-day-name,
.calendar-day {
    overflow: hidden;
    padding: 0.35rem 0.4rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
}

.calendar-day-name {
    background: var(--cream);
    font-weight: 900;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.2rem;
    align-items: center;
    justify-content: center;
}

.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
    border-radius: 50%;
}

.calendar-day.has-event {
    cursor: pointer;
}

.calendar-day.has-event .calendar-date {
    background: var(--siu-maroon);
    color: var(--white);
}

.calendar-day.has-event:hover,
.calendar-day.has-event:focus-visible {
    background: var(--cream);
    outline: none;
}

.calendar-day.is-empty {
    background: #faf7f0;
    color: var(--muted);
}

.calendar-list {
    padding: 1.15rem;
}

.calendar-list h4 {
    margin-top: 0;
    color: var(--siu-maroon);
    font-weight: 800;
}

.calendar-list li {
    color: var(--text);
    font-weight: 400;
}

.calendar-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.legend-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--siu-maroon);
    flex-shrink: 0;
}

/* CALENDAR EVENT MODAL */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 20, 23, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-dialog {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--cream);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover,
.modal-close:focus-visible {
    background: var(--siu-maroon);
    color: var(--white);
    border-color: var(--siu-maroon);
}

.modal-title {
    font-size: 1.1rem;
    color: var(--siu-maroon);
    margin: 0 2.5rem 1rem 0;
}

.modal-event-entry {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
}

.modal-event-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.modal-event-entry h3 {
    font-size: 1.15rem;
    margin: 0 0 0.3rem;
}

.modal-event-entry .modal-event-meta {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 0.65rem;
}

.inline-event-link {
    min-width: auto;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--siu-maroon);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.inline-event-link:hover {
    background: transparent;
    color: var(--ink);
    text-decoration: none;
}

.membership-card,
.gallery-card,
.contact-card,
.form-panel {
    padding: 1.15rem;
}

/* The "Get in touch" card's email now uses the site's normal underlined
   link style (see the global `a` rule near the top of this file) instead
   of the no-underline treatment — restored by request. */

/* Board/advisor teaser cards on the homepage: same WCAG 1.4.1 situation as
   the contact card used to be (the role text sitting right next to the
   email is only regular link-colored text, well under the 3:1 contrast
   needed to drop the underline on color alone). Bold gives it a second,
   non-color way to read as a link, so the underline can go while staying
   compliant; it comes back on hover/focus for extra clarity. */
.board-card a[href^="mailto:"] {
    text-decoration: none;
    font-weight: 800;
}

.board-card a[href^="mailto:"]:hover,
.board-card a[href^="mailto:"]:focus-visible {
    text-decoration: underline;
}

.form-panel {
    background: var(--cream);
}

/* WPForms Lite renders its own markup/classes inside .form-panel (see the
   Contact tab's "Contact form shortcode" field) — style it to match the
   rest of the site's forms instead of WPForms' bare default look.
   !important is used deliberately here: WPForms' own frontend stylesheet
   caps field width at 60% via its "-medium" size class (WPForms' docs
   confirm this is applied straight to the input/select/row element, e.g.
   `.wpforms-container input.wpforms-field-medium { max-width: 60%; }`),
   and gives the submit button its default blue. Both need to be forced
   regardless of load order, and regardless of whether a given WPForms
   version puts the size class on the field wrapper, the field-container,
   or the input itself — so every possible target is covered below. */
.form-panel .wpforms-container,
.form-panel .wpforms-container-full,
.form-panel .wpforms-form,
.form-panel .wpforms-field-container,
.form-panel .wpforms-field-container > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.form-panel .wpforms-container {
    margin: 0;
}

.form-panel .wpforms-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-panel .wpforms-field {
    padding: 0 0 0.25rem;
    margin: 0;
    width: 100% !important;
    max-width: 100% !important;
}

.form-panel .wpforms-field-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 900 !important;
    color: var(--ink);
    font-size: 1rem;
}

.form-panel .wpforms-field-label-inline,
.form-panel .wpforms-field label {
    font-weight: 900 !important;
}

.form-panel .wpforms-required-label {
    color: var(--siu-maroon);
}

.form-panel .wpforms-field-medium,
.form-panel .wpforms-field-large,
.form-panel .wpforms-field-small,
.form-panel .wpforms-field-row,
.form-panel input.wpforms-field-medium,
.form-panel input.wpforms-field-large,
.form-panel input.wpforms-field-small,
.form-panel select.wpforms-field-medium,
.form-panel select.wpforms-field-large,
.form-panel select.wpforms-field-small,
.form-panel .wpforms-field input[type="text"],
.form-panel .wpforms-field input[type="email"],
.form-panel .wpforms-field input[type="tel"],
.form-panel .wpforms-field input[type="url"],
.form-panel .wpforms-field select,
.form-panel .wpforms-field textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    padding: 0.75rem 0.8rem;
    border: 2px solid #6f676a;
    border-radius: 0.8rem;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    box-sizing: border-box !important;
    box-sizing: border-box;
}

.form-panel .wpforms-field textarea {
    min-height: 150px;
    resize: vertical;
}

.form-panel .wpforms-field-description,
.form-panel .wpforms-description {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.form-panel .wpforms-submit-container {
    margin-top: 0.25rem;
}

.form-panel button.wpforms-submit,
.form-panel input.wpforms-submit,
.form-panel .wpforms-submit-container button[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem !important;
    border-radius: 999px !important;
    border: none !important;
    background: #6c0633 !important;
    color: var(--white) !important;
    font-weight: 900;
    letter-spacing: 0.02em;
    cursor: pointer;
    font: inherit;
    transition: transform 0.15s ease, background 0.15s ease;
}

.form-panel button.wpforms-submit:hover,
.form-panel input.wpforms-submit:hover,
.form-panel .wpforms-submit-container button[type="submit"]:hover {
    background: var(--siu-maroon-dark) !important;
    color: var(--white) !important;
    transform: translateY(-1px);
}

.form-panel .wpforms-error,
.form-panel label.wpforms-error {
    color: #a4222c;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.form-panel .wpforms-field.wpforms-has-error input,
.form-panel .wpforms-field.wpforms-has-error textarea,
.form-panel .wpforms-field.wpforms-has-error select {
    border-color: #a4222c !important;
}

.form-panel .wpforms-confirmation-container {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--success-bg);
    color: var(--success-text);
    font-weight: 900;
}

.members-band {
    background: linear-gradient(180deg, rgba(255, 180, 0, 0.16), rgba(255, 180, 0, 0.03));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.membership-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-card {
    min-height: 100%;
}

.gallery-placeholder {
    min-height: 190px;
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
}

.gallery-band {
    padding: 2.3rem 0;
    background: linear-gradient(180deg, var(--rose), rgba(244, 232, 238, 0.35));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 1rem;
    align-items: start;
}

.site-footer {
    margin-top: 2rem;
    background: var(--ink);
    color: var(--white);
}

.footer-inner {
    padding: 2.75rem 0 2.25rem;
    text-align: center;
}

.footer-title {
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

.site-footer a {
    color: var(--siu-gold);
}

.footer-tagline {
    font-style: italic;
    color: #ece2d7;
    margin: 0 0 1.35rem;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1.35rem;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--siu-gold);
    transition: background 0.15s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    background: var(--siu-gold);
    color: var(--siu-maroon-dark);
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav li {
    display: flex;
    align-items: center;
}

.footer-nav li:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.footer-nav a {
    display: inline-block;
    padding: 0.2rem 0.9rem;
    color: var(--white);
    font-weight: 800;
    text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--siu-gold);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.9rem 0;
}

.footer-bottom p {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(236, 226, 215, 0.65);
}

.footer-credit-link {
    color: inherit;
    text-decoration: none;
}

.footer-credit-link:hover,
.footer-credit-link:focus-visible {
    color: var(--siu-gold);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.section-heading .section-copy {
    margin-left: auto;
    margin-right: auto;
}

#history .story-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.equal-pair {
    align-items: stretch;
}

.equal-card {
    min-height: 100%;
}

.stacked-media,
.stacked-cards {
    display: grid;
    gap: 1rem;
    height: 100%;
}

.stacked-media {
    grid-template-rows: 1fr 1fr;
}

.stacked-cards {
    grid-template-rows: auto auto 1fr;
}

.split-photo {
    min-height: 0;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 20 / 10;
}

.compact-card {
    padding: 1.05rem;
    height: 100%;
}

.compact-card h3,
.board-card h3 {
    margin-bottom: 0.45rem;
}

.compact-card p,
.compact-card ol,
.board-card p {
    margin-top: 0;
    margin-bottom: 0.55rem;
}

.compact-card ul {
    margin: 0;
    padding-left: 1.15rem;
}

.compact-card ul li {
    margin-bottom: 0.4rem;
}

.compact-card ul li:last-child {
    margin-bottom: 0;
}

.board-grid {
    align-items: stretch;
}

.board-card>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 100%;
}



.headline-highlight {
    font-weight: 900;
}

.headline-normal {
    display: inline-block;
    font-weight: 500;
    letter-spacing: -0.055em;
    white-space: nowrap;
}

.hero-side {
    position: relative;
    isolation: isolate;
    grid-template-rows: 1.65fr 0.75fr;
}

.hero-button-stack {
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
}

.hero-button-stack .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

.hero-photo-large {
    min-height: 370px;
}

.hero-photo-medium {
    min-height: 260px;
}

.hero-photo-small {
    min-height: 150px;
}

.hero-cta {
    padding: 0.95rem 1.3rem;
}

.board-card {
    min-height: 120px;
    padding: 0.85rem;
}

.board-card>div:last-child {
    gap: 0.05rem;
    min-height: auto;
}

.board-card h3 {
    margin-bottom: 0.25rem;
}

.board-card p {
    margin-bottom: 0.25rem;
    line-height: 1.35;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.calendar-stack {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
}

.calendar-list {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 10px 28px rgba(23, 20, 23, 0.06);
}

.archive-card {
    height: 100%;
}

.gallery-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.85rem;
}

.gallery-card h3,
.gallery-card p {
    flex: none;
    margin: 0;
}

.gallery-card h3 {
    margin-top: 0.25rem;
}



.contact-layout {
    align-items: stretch;
}

.contact-card,
.contact-layout .form-panel {
    height: 100%;
}

.contact-layout .form-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    align-content: start;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 1024px) {

    .hero-inner,
    .story-layout,
    .board-grid,
    .directory-grid,
    .calendar-shell,
    .membership-grid,
    .gallery-grid,
    .contact-layout,
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-inner,
    .story-layout,
    .calendar-shell,
    .contact-layout,
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* Tablets don't have room for the full 11-item nav row, so collapse it into
       the hamburger menu here rather than waiting for the 760px phone breakpoint. */
    .menu-toggle {
        display: inline-flex;
    }

    .site-nav {
        display: none;
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav ul {
        display: grid;
        gap: 0.15rem;
    }

    .site-nav a {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .site-header {
        position: static;
    }

    .header-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* Card grids (board, directory/RSO, membership, gallery) previously kept
       the 2-column tablet layout all the way down to phone widths. That's
       fine on an actual tablet (761–1024px, still plenty wide per column),
       but on true phone widths two columns left each card too narrow —
       names/pills got clipped or overlapped the button, and some cards
       effectively became unreadable. 2 columns now stays only in the real
       tablet range above this breakpoint; phones drop to a single,
       full-width column per card so nothing is squeezed. */
    .board-grid,
    .directory-grid,
    .membership-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .board-card {
        grid-template-columns: 78px minmax(0, 1fr);
        min-height: auto;
    }

    .profile-photo {
        width: 78px;
        height: 78px;
    }

    .headline-normal {
        white-space: normal;
    }

    /* The calendar used to collapse into a plain vertical list of days on
       phones. It now keeps the same real 7-column grid the tablet layout
       uses — just with tighter cell padding/type so it still fits without
       overflowing a narrow screen. */
    .calendar-day-name,
    .calendar-day {
        padding: 0.22rem 0.15rem;
    }

    .calendar-day-name {
        font-size: 0.65rem;
    }

    .calendar-date {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.72rem;
    }
}

.siu-header {
    background: #6c0633;
    padding: 0.75rem 0;
}

.siu-header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding: 0.5rem 0;
}

.photo-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eadccf, #f7f1e8);
    border-radius: 1.5rem;
    border: 1px solid #d7c6b8;
}

.photo-placeholder img,
.wide-photo-placeholder img,
.gallery-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: inherit;
}

.photo-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    color: white;
}

.hero-note,
.site-alert {
    display: none;
}

.board-band.siu-dawg-band {
    position: relative;
    background-color: #67001a;
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
    overflow: hidden;
    border-radius: 12px;
}

.board-band.siu-dawg-band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/siu-dawg-head.svg');
    background-repeat: repeat;
    background-size: 100px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

.band-content {
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
}

.office-locator-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 28px rgba(23, 20, 23, 0.06);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 100%;
}

.office-locator-card h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--ink);
    font-weight: 900;
}

.office-locator-card .card-meta {
    margin-top: -0.5rem;
}

.office-locator-card .card-subtitle {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--siu-maroon);
}

.office-locator-card .card-address {
    margin: 0.2rem 0 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.locator-tabs-container {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.85rem;
}

.office-locator-card input[type="radio"] {
    display: none;
}

.locator-tabs-container .tab-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.5rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 800;
    border-radius: 999px;
    cursor: pointer;
    background: var(--cream);
    color: var(--siu-maroon);
    border: 1px solid var(--line);
    transition: all 0.2s ease;
}

.locator-tabs-container .tab-label:hover {
    background: var(--sand);
    color: var(--ink);
}

#tab-map:checked~.locator-tabs-container label[for="tab-map"],
#tab-floor:checked~.locator-tabs-container label[for="tab-floor"] {
    background: var(--siu-maroon);
    color: var(--white);
    border-color: var(--siu-maroon);
}

.locator-tab-content {
    display: none;
}

#tab-map:checked~.content-map,
#tab-floor:checked~.content-floor {
    display: block;
}

.office-locator-card .media-wrapper {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--cream);
    height: 300px;
}

.office-locator-card iframe,
.office-locator-card .floor-layout-img {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.office-locator-card .floor-layout-img {
    object-fit: contain;
}

/* Styles for 'Board Members' Page */
.page-banner {
    background: var(--siu-maroon);
    color: var(--white);
    padding: 3rem 0 2.5rem;
    text-align: center;
    border-bottom: 4px solid var(--siu-gold);
}

.page-banner .eyebrow {
    color: var(--siu-gold);
}

.page-banner h1 {
    color: var(--white);
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 0.5rem;
}

.page-banner p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    max-width: 60ch;
    margin: 0 auto;
}

.board-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1.5rem;
}

.board-member-profile {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 28px rgba(23, 20, 23, 0.07);
    padding: 1rem;
    display: grid;
    grid-template-columns: minmax(150px, 190px) 1fr;
    gap: 1rem;
    align-items: start;
    scroll-margin-top: 6rem;
}

.board-member-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
}

.board-member-photo {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid var(--siu-gold);
    background: linear-gradient(135deg, var(--siu-maroon), var(--siu-maroon-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.board-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.board-member-identity h2 {
    font-size: 1.35rem;
    margin-bottom: 0.15rem;
}

.board-member-identity .role-tag {
    display: inline-block;
    color: var(--siu-maroon);
    font-weight: 900;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.board-member-identity .member-country {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
}

.board-member-info {
    text-align: left;
}

.board-member-info .bio-text {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    margin-top: 0;
    margin-bottom: 1rem;
}

.board-member-info .contact-line {
    font-size: 0.95rem;
    color: var(--muted);
}

.board-member-info .contact-line a {
    color: var(--siu-maroon);
    font-weight: 800;
    text-decoration: none;
}

.board-member-info .contact-line a:hover,
.board-member-info .contact-line a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 700px) {
    /* auto-fit, minmax(420px, 1fr) forces a 420px-wide track no matter how
       narrow the screen is, which pushes the page into horizontal scroll
       on any phone or small tablet. Collapse to a single column instead. */
    .board-profiles-grid {
        grid-template-columns: 1fr;
    }

    .board-member-profile {
        grid-template-columns: 1fr;
    }
}

.scrapbook-divider {
    text-align: center;
    padding: 0.5rem 0;
    color: var(--siu-gold);
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
}

.advisors-heading {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px dashed var(--line);
}

.back-link-row {
    padding: 1.5rem 0;
}

.back-link-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    color: var(--siu-maroon);
    text-decoration: none;
}

.back-link-row a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .board-member-photo {
        width: 120px;
        height: 120px;
        font-size: 1.4rem;
    }
}

/* Styles for RSOs Page */
.rso-banner {
    background: var(--siu-maroon);
    padding: 3rem 0 2.5rem;
    text-align: center;
    border-bottom: 4px solid var(--siu-gold);
}

.rso-logo-banner {
    width: 160px;
    height: 160px;
    object-fit: contain;
    object-position: center;
    margin: 0 auto 1.25rem;
    display: block;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.rso-banner h1 {
    color: var(--white);
    font-size: clamp(1.8rem, 5vw, 3rem);
    margin-bottom: 0.4rem;
}

.rso-banner .eyebrow {
    color: var(--siu-gold);
}

.rso-banner .status-badge {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 900;
    margin-top: 0.5rem;
}

.rso-banner .status-badge.active {
    background: var(--success-bg);
    color: var(--success-text);
}

.rso-banner .status-badge.inactive {
    background: var(--pause-bg);
    color: var(--pause-text);
}

/* RSO description paragraph */
.rso-description {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Mission / Vision / Goals — always 3 equal columns, fills full width */
.constitution-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
    align-items: stretch;
}

.constitution-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 6px 18px rgba(23, 20, 23, 0.06);
    display: flex;
    flex-direction: column;
}

.constitution-card h3 {
    color: var(--siu-maroon);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.constitution-card p {
    margin: 0;
    flex: 1;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--text);
}

.constitution-card h3 {
    font-weight: 1000;
}

/* Board members — 2-column grid so officer cards fill the row */
.rso-board-section {
    margin-top: 2.5rem;
}

.rso-board-section h2 {
    margin-bottom: 1rem;
}

.rso-links-section {
    margin-top: 2.5rem;
}

.rso-links-section h2 {
    margin-bottom: 1rem;
}

@media (max-width: 700px) {
    .constitution-section {
        grid-template-columns: 1fr;
    }
}

.rso-logo-banner--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    background: linear-gradient(135deg, var(--siu-gold), #d99a00);
    color: var(--siu-maroon-dark);
    font-size: 2.4rem;
    font-weight: 900;
}

/* RSO Links Section */
.rso-links-section {
    text-decoration: none;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.rso-links-section h2 {
    margin-bottom: 1rem;
}

.rso-links-section .button-row {
    justify-content: flex-start;
}

.rso-links-section .button::after {
    content: none;
}

.rso-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.rso-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    border: 2px solid var(--siu-maroon);
    border-radius: 999px;
    background: var(--white);
    color: var(--siu-maroon);
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.rso-link-btn:hover,
.rso-link-btn:focus {
    background: var(--siu-maroon);
    color: var(--white);
    outline-offset: 2px;
}

.back-link-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    color: var(--siu-maroon);
    text-decoration: none;
}

.back-link-row a:hover {
    text-decoration: underline;
}

#rso-load-status {
    color: var(--muted);
    font-style: italic;
}

/* Styles for 'Events Archive' Page */
.page-banner .eyebrow {
    color: var(--siu-gold);
}

.page-banner h1 {
    color: var(--white);
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 0.5rem;
}

.page-banner p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 60ch;
    margin: 0 auto;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.event-archive-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 28px rgba(23, 20, 23, 0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.event-archive-card-image {
    min-height: 180px;
    background: linear-gradient(135deg, rgba(108, 6, 51, 0.18), rgba(255, 180, 0, 0.26)),
        linear-gradient(180deg, var(--sand), var(--cream));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.event-archive-card-image span {
    font-weight: 800;
    color: var(--ink);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

.event-archive-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-archive-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-archive-card-body .event-date {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--siu-maroon);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.event-archive-card-body h3 {
    margin-bottom: 0.5rem;
}

.event-archive-card-body p {
    color: var(--muted);
    font-size: 0.95rem;
    flex: 1;
}

.event-archive-card-body .button {
    margin-top: 1rem;
    align-self: flex-start;
}



.back-link-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    color: var(--siu-maroon);
    text-decoration: none;
}

.back-link-row a:hover {
    text-decoration: none;
}

#archive-status {
    color: var(--muted);
    font-style: italic;
    margin-top: 1rem;
}

/* Styles for 'Events' Page */
.page-banner .eyebrow {
    color: var(--siu-gold);
}

.page-banner h1 {
    color: var(--white);
    font-size: clamp(1.8rem, 5vw, 3rem);
    margin-bottom: 0.5rem;
}

.page-banner p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 60ch;
    margin: 0 auto;
}

.event-detail-body {
    max-width: 800px;
    margin: 0 auto;
}

.event-detail-body .full-description {
    font-size: 1.08rem;
    line-height: 1.7;
    margin: 1.5rem 0;
}

.event-spec-panel {
    padding: 1.2rem 1.5rem;
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
    border-left: 5px solid var(--siu-gold);
}

.event-spec-panel.rules {
    background: var(--rose);
    border-color: var(--siu-maroon);
}

.event-spec-panel.games {
    background: var(--cream);
    border-color: var(--siu-gold);
}

.event-spec-panel h3 {
    margin-top: 0;
    color: var(--siu-maroon-dark);
}

.event-social-links {
    margin: 2rem 0;
}

.event-social-links h3 {
    margin-bottom: 0.75rem;
}

.event-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.event-photo-grid figure {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--cream);
}

.event-photo-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.event-photo-grid figcaption {
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    color: var(--muted);
}



.back-link-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    color: var(--siu-maroon);
    text-decoration: none;
}

.back-link-row a:hover {
    text-decoration: underline;
}

#event-load-status {
    color: var(--muted);
    font-style: italic;
}

/* Styles for 'Gallery' Page */
.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-top: 1.5rem;
    align-items: start;
}

.gallery-item {
    margin: 0;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--sand);
    display: block;
}

.gallery-item-image-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.gallery-item-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-item-image-wrapper img {
    transform: scale(1.05);
}

.gallery-download-overlay {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    background: rgba(108, 6, 51, 0.88);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.gallery-item:hover .gallery-download-overlay,
.gallery-item:focus-within .gallery-download-overlay {
    opacity: 1;
}

.gallery-download-overlay:focus {
    opacity: 1;
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.gallery-item-caption {
    padding: 0.4rem 0.6rem 0.5rem;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    background: var(--white);
    border-top: 1px solid var(--line);
}

.gallery-item-meta {
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--siu-maroon);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.gallery-item-missing {
    height: 100%;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    color: var(--muted);
    font-style: italic;
    font-size: 0.85rem;
}

.gallery-empty {
    text-align: center;
    padding: 3rem;
    color: var(--muted);
    font-style: italic;
}

#gallery-status {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* The download button only appears on :hover / :focus-within, which means
   touch users (no hover state) could never see it, only guess-tap it.
   Show it permanently on touch devices instead. */
@media (hover: none) and (pointer: coarse) {
    .gallery-download-overlay {
        opacity: 1;
    }
}

/* ============================================================
   PHONE LAYOUT (≤480px)
   Everything above already reflows reasonably well down to
   tablet width via the 1024px / 760px / 700px / 640px rules,
   but small phones (iPhone SE/mini, most Android phones in
   portrait) need a few more adjustments so nothing overflows
   horizontally and spacing/type stays comfortable to tap and read.
   ============================================================ */
@media (max-width: 480px) {

    .wrap {
        width: min(var(--max-width), calc(100% - 1.5rem));
    }

    /* Slightly smaller headline/heading sizes so titles don't force
       awkward line breaks on narrow screens. */
    h1 {
        font-size: clamp(2.1rem, 9vw, 5.8rem);
    }

    h2 {
        font-size: clamp(1.6rem, 7vw, 3.2rem);
    }

    .top-strip {
        font-size: 0.72rem;
        padding: 0.4rem 0.6rem;
    }

    /* Hero photos are decorative — let them take up less vertical
       space on phones so the headline and buttons aren't pushed
       far down the page. */
    .hero-photo-large {
        min-height: 200px;
    }

    .hero-photo-medium {
        min-height: 140px;
    }

    .hero-cta {
        padding: 0.85rem 1.1rem;
    }

    /* Header utility links (SIU Home / CIE / Student Engagement) wrap
       already, just tighten them so more fit per row. */
    .utility-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* RSO directory cards: logo + name + button in a single row gets
       cramped under ~400px. Stack them instead. */
    .directory-card-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .directory-card-identity {
        flex-direction: column;
        text-align: center;
    }

    .directory-card-name {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .directory-card .pill-list {
        justify-content: center;
    }

    .directory-card .button-row {
        width: 100%;
    }

    .directory-card .button-row .button {
        width: 100%;
    }

    /* Force single-column on the few grids that still use a fixed
       minmax() track wider than a small phone's content area, which
       otherwise causes horizontal scrolling. */
    .events-grid,
    .event-photo-grid,
    .board-profiles-grid {
        grid-template-columns: 1fr;
    }

    /* Gallery masonry looks sparse as a single column, so keep 2
       narrower columns instead. */
    .gallery-masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .board-member-photo {
        width: 100px;
        height: 100px;
        font-size: 1.2rem;
    }

    .rso-logo-banner,
    .rso-logo-banner--placeholder {
        width: 120px;
        height: 120px;
    }

    .page-banner,
    .rso-banner {
        padding: 2rem 0 1.5rem;
    }

    .office-locator-card .media-wrapper {
        height: 220px;
    }

    .modal-overlay {
        padding: 0.75rem;
    }

    .modal-dialog {
        padding: 1.25rem;
    }

    .calendar-controls h3 {
        font-size: 1rem;
    }

    .calendar-list,
    .gallery-empty {
        padding: 1rem;
    }
}