css
/* ================================================== */
/* DEL LAGO PTA - GLOBAL SITE STYLING                 */
/* Full width, responsive, accessible, mobile-friendly */
/* ================================================== */

/* ============================= */
/* GLOBAL SIZING                 */
/* ============================= */

#mtk-pagewrapper,
#mtk-pagewrapper * {
    box-sizing: border-box;
}

/* ============================= */
/* EDGE-TO-EDGE SITE             */
/* ============================= */

#mtk-pagewrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif;
}

#mtk-pagewrapper .container {
    width: 100% !important;
    max-width: none !important;
}

/* Give common content areas breathing room.
   Avoid forcing extra padding onto calendar cells. */

#mtk-pagewrapper .content-main {
    min-width: 0;
}

/* Responsive images and embedded content */

#mtk-pagewrapper img,
#mtk-pagewrapper iframe,
#mtk-pagewrapper video {
    max-width: 100%;
}

#mtk-pagewrapper img {
    height: auto;
}

/* Prevent long words and links from breaking layouts */

#mtk-pagewrapper p,
#mtk-pagewrapper li {
    overflow-wrap: anywhere;
}

/* ============================= */
/* DEL LAGO PTA BRAND COLORS     */
/* ============================= */

:root {
    --pta-blue: #0b5fa5;
    --pta-teal: #2f90a8;
    --pta-light-blue: #f0f8fb;
    --pta-border: #dbe7ef;
    --pta-text: #333333;
    --pta-muted: #6b7280;
}

/* Accessible keyboard focus */

#mtk-pagewrapper a:focus-visible,
#mtk-pagewrapper button:focus-visible,
#mtk-pagewrapper input:focus-visible,
#mtk-pagewrapper select:focus-visible,
#mtk-pagewrapper textarea:focus-visible {
    outline: 3px solid var(--pta-teal);
    outline-offset: 3px;
}

/* Smooth, consistent link interactions */

#mtk-pagewrapper a {
    transition: color 0.2s ease;
}

#mtk-pagewrapper a:hover {
    color: var(--pta-blue);
}

/* ============================= */
/* VOLUNTEER FORM CALENDAR VIEW  */
/* ============================= */

#mtk-pagewrapper .volunteer-calendar td ul li .vol-opp {
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* ============================= */
/* CALENDAR EVENT TEXT WRAPPING  */
/* ============================= */

#mtk-pagewrapper .calendar-normal table tr td ul li div.event {
    position: relative;
    white-space: normal;
    text-overflow: unset;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

#mtk-pagewrapper .calendar-normal table tr td ul li {
    height: auto;
    margin-bottom: 6px;
}

/* ============================= */
/* MONTH HEADER                  */
/* ============================= */

#mtk-pagewrapper .calendar-normal .month-year-header {
    font-size: 26px !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 12px 0;
    color: var(--pta-blue);
}

/* ============================= */
/* MONTH NAVIGATION ARROWS       */
/* ============================= */

#mtk-pagewrapper .calendar-normal .prev-month > a,
#mtk-pagewrapper .calendar-normal .next-month > a {
    display: inline-block;
    font-size: 22px !important;
    font-weight: 600;
    color: var(--pta-blue);
    opacity: 0.8;
    padding: 4px;
    transition: opacity 0.2s ease;
}

#mtk-pagewrapper .calendar-normal .prev-month > a:hover,
#mtk-pagewrapper .calendar-normal .next-month > a:hover {
    opacity: 1;
}

/* ============================= */
/* DAY HEADERS                   */
/* ============================= */

#mtk-pagewrapper .calendar-normal .day-header-row th {
    font-size: 14px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 4px;
    color: var(--pta-muted);
}

/* ============================= */
/* DATE NUMBERS                  */
/* ============================= */

#mtk-pagewrapper .calendar-normal .date-number {
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 24px;
    width: 24px;
    border-radius: 6px