/* 
Universal CSS file for all pages of the website. 
Useage:  <link rel="stylesheet" href="style.css">  inside the  <head>  tag of the HTML file to connect this CSS to that individual page.
*/


/* Selects the root HTML tags */
:root {
    color-scheme: light;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #182536;
    background: #f4f7fb;
}

/* Universal Selecter */
* {
    box-sizing: border-box;
}


/* All content inside the body tags  */
body {
    min-width: 320px;
    margin: 0;
    background: #f4f7fb;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

hr {
    box-shadow: 0px 0px 6px #182536;
}


/* All content inside the heading tags */
h1,h2,h3 {
    line-height: 1.2;
}

h2 {
    margin: 2.5rem 1rem 1.25rem;
    color: #182536;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
    text-align: center;
}


/* All content inside the paragraph tags */
p {
    padding: 1rem;
    text-align: center;
    margin: 0 auto;
    max-width: 120ch;
}

/* All content inside the main tags */
main {
    display: flow-root;
}

/* Section wrap for Announcements and Welcome Info */
.home-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.25rem;
    width: min(1100px, calc(100% - 2rem));
    margin: 2.5rem auto 3rem;
}

/* Article wrap for both intro cards */
.intro-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #e2e9f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(24 37 54 / 9%);
}

.announcement-card {
    border-top: 4px solid #e5b942;
    background: #fffaf0;
}

/* Small label text for intro cards */
.intro-card .card-label {
    margin: 0 0 0.6rem;
    padding: 0;
    color: #587086;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
}

.intro-card h2 {
    margin: 0 0 1rem;
    text-align: left;
}

.intro-card p:not(.card-label) {
    max-width: none;
    padding: 0;
    text-align: left;
}

/* Annoucements paragraph */
#announcements {
    font-size: 1.1rem;
    font-weight: 600;
}

.meetings-section h2 {
    margin-top: 0;
}


/* links for contact methods */
.contact-links {
    display: block;
    text-align: center;
}

/* All content inside of the <header> */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem clamp(1rem, 5vw, 4rem);
    color: #fff;
    background: #153653;
    box-shadow: 0 4px 16px rgb(21 54 83 / 16%);
}

/* div header-container inside of the header */
.header-container {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 1rem;
}

/* h1 inside the .header-container */
.header-container h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 700;
}

/* The Chess Club logo image that is inside the header */
#header-logo {
    display: block;
    width: 125px;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
}

/* The Chess Club logo image that is on the page itself */
#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 250px;
    max-width: 100%;
    height: auto;
}


/* Navigation bar */
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
}

nav a {
    padding: 0.7rem 1rem;
    border-radius: 999px;
    color: #e8f1f8;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: color 160ms ease, background-color 160ms ease;
}

/* Mouse hover effect on navigation bar */
nav a:hover,
nav a:focus-visible {
    color: #153653;
    background: #fff;
}

nav a:focus-visible {
    outline: 3px solid #f4c95d;
    outline-offset: 3px;
}


/* Entire Information Table */
table {
    width: min(90%, 900px);
    margin: 0 auto 3rem;
    overflow: hidden;
    border-collapse: collapse;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgb(24 37 54 / 9%);
    border: 1px solid #e2e9f0;
}

/* Table Headings and Table Data */
th,
td {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid #cdd9e5;
    text-align: left;
    vertical-align: middle;
}

/* Table Headings */
th {
    color: #fff;
    background: #286087;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr:nth-child(even) {
    background: #eef3f6;
}

tbody tr {
    transition: background-color 150ms ease;
}

/* Column sizing for desktop table */
.meetings-table .meeting-day,
th:nth-child(1),
td:nth-child(1) {
    width: 135px;
    white-space: nowrap;
    font-weight: 700;
}

.meetings-table .meeting-time,
th:nth-child(2),
td:nth-child(2) {
    width: 125px;
    white-space: nowrap;
}

.meetings-table .meeting-location,
th:nth-child(3),
td:nth-child(3) {
    width: auto;
}

/* Location venue and address links */
.venue-name {
    font-weight: 700;
    color: #182536;
}

.venue-separator {
    color: #181b1e;
    margin: 0 0.35rem;
}
j
.venue-address {
    color: #286087;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 150ms ease;
}

.venue-address:hover,
.venue-address:focus-visible {
    color: #153653;
}

/* Contact Page */
.contact-page {
    padding: 0 1rem 2rem;
}

.contact-intro {
    margin: 2rem auto 1.5rem;
    text-align: center;
}

.contact-intro h2 {
    margin-top: 0;
}

.contact-intro p {
    padding: 0 1rem 0.75rem;
}

.contact-links {
    display: inline-block;
    color: #286087;
    font-weight: 700;
}

/* Contact Form */
#contact-form {
    display: grid;
    gap: 0.7rem;
    width: min(100%, 680px);
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid #e2e9f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(24 37 54 / 9%);
}

#contact-form h2 {
    margin: 0 0 0.5rem;
}

#contact-form label {
    margin-top: 0.35rem;
    color: #182536;
    font-weight: 700;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid #aebdca;
    border-radius: 8px;
    color: #182536;
    background: #fbfcfe;
    font: inherit;
}

#contact-form textarea {
    min-height: 10rem;
    resize: vertical;
}

#contact-form input:focus-visible,
#contact-form textarea:focus-visible {
    border-color: #286087;
    outline: 3px solid rgb(40 96 135 / 22%);
    outline-offset: 1px;
}

#contact-form .form-buttons {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5rem;
}

#contact-form button[type="submit"] {
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #153653;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 160ms ease, opacity 160ms ease;
}

#contact-form button[type="submit"]:hover {
    background: #286087;
}

#contact-form button[type="submit"]:focus-visible {
    outline: 3px solid #e5b942;
    outline-offset: 3px;
}

#contact-form button[type="submit"]:disabled {
    cursor: wait;
    opacity: 0.7;
}

#contact-form-status {
    width: min(100%, 680px);
    min-height: 1.5rem;
    padding: 0;
    text-align: left;
}


/* 
This will override the CSS properties for devices with smaller screens or view ports, i.e. Mobile phones or tablets.
This MUST be kept at the very bottom of the CSS file to maintain precedence over any properties above.
*/
@media (max-width: 700px) {
    .home-intro {
        grid-template-columns: 1fr;
        margin-top: 1.5rem;
        margin-bottom: 2.5rem;
    }

    header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 1rem 1rem;
    }

    .header-container {
        gap: 0.75rem;
    }

    #header-logo {
        width: clamp(64px, 18vw, 88px);
    }

    .header-container h1 {
        font-size: clamp(1.2rem, 5.5vw, 1.75rem);
    }

    nav {
        width: 100%;
    }

    nav a {
        padding: 0.55rem 0.8rem;
    }

    /* Responsive meeting schedule table converted to clean cards on mobile */
    table {
        display: block;
        width: calc(100% - 2rem);
        max-width: 520px;
        margin: 0 auto 3rem;
        border-radius: 16px;
        border: 1px solid #e2e9f0;
    }

    table thead {
        display: none;
    }

    table tbody {
        display: block;
    }

    table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "day time"
            "location location";
        row-gap: 0.45rem;
        column-gap: 0.75rem;
        align-items: center;
        padding: 1.1rem 1.15rem;
        border-bottom: 1px solid #e2e9f0;
    }

    table tbody tr:last-child {
        border-bottom: none;
    }

    table th,
    table td {
        display: block;
        padding: 0;
        border: none;
        border-bottom: none;
        background: transparent;
        overflow-wrap: normal;
    }

    table th:not(:last-child),
    table td:not(:last-child) {
        border-right: none;
    }

    .meetings-table .meeting-day,
    table td:nth-child(1) {
        grid-area: day;
        width: auto;
        font-size: 1.05rem;
        font-weight: 700;
        color: #153653;
        white-space: nowrap;
    }

    .meetings-table .meeting-time,
    table td:nth-child(2) {
        grid-area: time;
        justify-self: end;
        width: auto;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: #184464;
        background: #e0ebf6;
        box-shadow: 0 1px 10px rgb(24 37 54 / 25%);
        padding: 0.25rem 0.65rem;
        border-radius: 999px;
        border: 1px solid #296193;
        white-space: nowrap;
    }

    .meetings-table .meeting-location,
    table td:nth-child(3) {
        grid-area: location;
        width: auto;
        font-size: 0.95rem;
        line-height: 1.45;
        padding-top: 0.15rem;
    }

    .venue-name {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        color: #182536;
        margin-bottom: 0.2rem;
    }

    .venue-separator {
        display: none;
    }

    .venue-address {
        display: inline-block;
        font-size: 0.88rem;
        color: #286087;
        line-height: 1.45;
        text-decoration: underline;
        text-underline-offset: 2px;
        word-break: normal;
        overflow-wrap: break-word;
    }
}