/*
Theme Name: YIA Custom
Description: Custom styling for Youth in Action Foundation.
*/

/* ======================================================================
   YIA FOUNDATION — ORGANISED STYLESHEET

   PART A  — Shared / desktop-first styles (all screen sizes)
   PART B  — Desktop only (782px and above)
   PART C  — Tablet adjustments (up to 1000px)
   PART D  — Mobile only (781px and below)
   PART E  — Small phones (650px, 600px, 380px)
   PART F  — Hover effects and accessibility

   HOW TO EDIT:
   - Desktop navigation spacing: PART B > Desktop navigation — spacing override
   - Mobile hamburger / open menu: PART D > Header, logo and navigation
   - Mobile white space under logo: PART D > Mobile header — reduce whitespace
   - Form layout: PART A > WPForms registration

   Existing declarations and override order are retained within each group.
   No class names, colour values, or layout measurements were changed.
   ====================================================================== */

/* ====================================================================
   PART A — SHARED STYLES / DESKTOP DEFAULTS
   ==================================================================== */

/* --- Global settings and colours --- */
:root {
    --yia-gold: #C39746;
    --yia-gold-hover: #D5AB5E;
    --yia-black: #171717;
    --yia-grey: #77736B;
    --yia-ivory: #F7F5F0;
    --yia-border: #E7E1D6;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}


/* --- Header, logo and navigation --- */
.yia-site-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: visible !important;
}

.yia-site-header .yia-logo-container {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.yia-site-header .wp-block-site-logo { margin: 0 !important; }

.yia-site-header .wp-block-site-logo img {
    display: block;
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    object-fit: contain;
}

.yia-site-header .yia-header-navigation {
    position: static !important;
    transform: none !important;
    width: auto;
    margin: 0 auto !important;
}

.yia-site-header .wp-block-navigation__container {
    column-gap: 24px;
    row-gap: 8px;
}

.yia-site-header .wp-block-navigation-item__content {
    color: #171717;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.yia-site-header .wp-block-navigation-item__content:hover {
    color: #C39746;
}

.wp-site-blocks > main { margin-block-start: 0 !important; }

.wp-site-blocks > main > :first-child { margin-block-start: 0; }

body.home .wp-site-blocks > main { padding-top: 20px; }


/* --- Homepage — hero image --- */
.yia-hero-photo {
    margin-top: 48px;
    margin-bottom: 0;
    width: 100%;
}

.yia-hero-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
}


/* --- Homepage — purpose cards --- */
.yia-purpose-section {
    width: 100%;
}

.yia-purpose-cards {
    margin-top: 48px;
    gap: 24px;
    align-items: stretch;
}

.yia-purpose-cards > .wp-block-column {
    display: flex;
    min-width: 0;
}

.yia-purpose-card {
    width: 100%;
    height: 100%;
    border: 1px solid var(--yia-border);
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}

.yia-purpose-card h3 {
    line-height: 1.25;
    letter-spacing: -.025em;
}

.yia-purpose-card p {
    line-height: 1.7;
}


/* --- Homepage — Friday youth programme --- */
.yia-friday-section {
    overflow: hidden;
}

.yia-friday-columns {
    gap: 48px;
    align-items: center;
}

.yia-friday-image {
    margin: 0;
}

.yia-friday-image img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 18px;
}

.yia-friday-benefits {
    list-style: none;
    padding-left: 0;
    margin: 26px 0;
}

.yia-friday-benefits li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    line-height: 1.6;
}

.yia-friday-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--yia-gold);
    font-weight: 700;
}


/* --- Homepage — event showcase --- */
.yia-event-cards {
    margin-top: 40px;
    margin-bottom: 36px;
    gap: 26px;
    align-items: stretch;
}

.yia-event-cards > .wp-block-column {
    display: flex;
    min-width: 0;
}

.yia-event-card {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--yia-border);
    border-radius: 22px;
    transition: transform .25s ease,
                box-shadow .25s ease;
}

.yia-event-image {
    margin: 0;
}

.yia-event-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.yia-event-content {
    padding: 28px;
}

.yia-event-content h3 {
    font-size: 25px;
    line-height: 1.25;
    margin-top: 0;
}

.yia-event-content p {
    line-height: 1.7;
}


/* --- Homepage — get involved --- */
.yia-get-involved {
    margin-top: 60px;
    margin-bottom: 20px;
    overflow: hidden;
}

.yia-get-involved h2 {
    letter-spacing: -.035em;
}

.yia-get-involved .wp-block-buttons {
    margin-top: 30px;
    gap: 14px;
}

.yia-get-involved
.wp-block-button.is-style-outline
.wp-block-button__link {
    color: #FFFFFF;
    border-color: var(--yia-gold);
}

.yia-get-involved
.wp-block-button.is-style-outline
.wp-block-button__link:hover {
    background-color: var(--yia-gold);
    color: var(--yia-black);
}


/* --- About Us page --- */
.yia-about-page {
    padding-top: 60px;
    padding-bottom: 100px;
}

.yia-about-hero,
.yia-about-programme {
    overflow: hidden;
}

.yia-about-hero-image {
    margin-top: 45px;
    margin-bottom: 0;
}

.yia-about-hero-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
}

.yia-about-intro {
    padding-top: 110px;
    padding-bottom: 75px;
}

.yia-about-values {
    padding-bottom: 110px;
}

.yia-about-value-columns {
    gap: 26px;
    align-items: stretch;
}

.yia-about-value-columns > .wp-block-column {
    display: flex;
    min-width: 0;
}

.yia-about-value-card {
    width: 100%;
    height: 100%;
    border: 1px solid var(--yia-border);
}

.yia-about-value-card h3 {
    line-height: 1.25;
}

.yia-about-activities {
    margin-top: 45px;
    margin-bottom: 35px;
    gap: 30px;
}

.yia-about-activities p {
    line-height: 1.7;
    color: #E2DED7;
}

.yia-about-cta {
    margin-top: 110px;
}

.yia-about-cta .wp-block-buttons {
    margin-top: 30px;
}


/* --- Events page — upcoming and past events --- */
.yia-events-page {
    padding-top: 60px;
    padding-bottom: 100px;
}

.yia-events-hero {
    overflow: hidden;
}

.yia-events-hero h1 {
    letter-spacing: -.035em;
}

.yia-upcoming-section {
    padding-top: 90px;
    padding-bottom: 95px;
}

.yia-upcoming-card {
    margin-top: 35px;
    border: 1px solid var(--yia-border);
}

.yia-upcoming-card h3 {
    line-height: 1.25;
}

.yia-upcoming-card .wp-block-buttons {
    margin-top: 25px;
}

.yia-upcoming-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 36px;
    align-items: stretch;
}

.yia-upcoming-grid > .yia-mini-event {
    min-width: 0;
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
}

.yia-mini-event {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--yia-border);
    border-radius: 20px;
    background: var(--yia-ivory);
    transition: transform .25s ease,
                box-shadow .25s ease;
}

.yia-mini-event > .yia-mini-event-top,
.yia-mini-event > .yia-mini-event-content {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
}

.yia-mini-event-top {
    padding: 24px;
}

.yia-mini-event-top p {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0 0 10px;
}

.yia-mini-event-top h3 {
    font-size: 25px;
    line-height: 1.2;
    margin: 0;
}

.yia-mini-event-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px;
}

.yia-mini-event-content p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px;
}

.yia-mini-event-content .wp-block-buttons {
    margin-top: auto;
    padding-top: 12px;
}

.yia-mini-event-content .wp-block-button,
.yia-mini-event-content .wp-block-button__link {
    width: 100%;
}

.yia-mini-event-content .wp-block-button__link {
    text-align: center;
    font-size: 13px;
    padding: 12px 16px;
}

.yia-past-events-section {
    padding-bottom: 110px;
}

.yia-events-grid {
    margin-top: 40px;
    gap: 26px;
    align-items: stretch;
}

.yia-events-grid > .wp-block-column {
    display: flex;
    min-width: 0;
}

.yia-events-grid-card {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--yia-border);
    border-radius: 22px;
    transition: transform .25s ease,
                box-shadow .25s ease;
}

.yia-events-grid-image {
    margin: 0;
}

.yia-events-grid-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.yia-events-grid-content {
    padding: 30px;
}

.yia-events-grid-content h3 {
    font-size: 27px;
    line-height: 1.25;
}

.yia-events-grid-content p {
    line-height: 1.7;
}

.yia-events-cta {
    overflow: hidden;
}

.yia-events-cta .wp-block-buttons {
    margin-top: 30px;
}


/* --- Community dinner card --- */
.yia-dinner-card {
    margin: 30px auto 0 !important;
    width: 100%;
    max-width: 760px;
    border: 1px solid var(--yia-border);
    border-radius: 20px;
    overflow: hidden;
}

.yia-dinner-card > .wp-block-group {
    max-width: none !important;
    width: 100%;
    margin-block: 0 !important;
}

.yia-dinner-header {
    padding: 28px 32px;
}

.yia-dinner-header h3 {
    font-size: 32px;
    margin: 8px 0 12px;
}

.yia-dinner-header p {
    font-size: 15px;
    line-height: 1.5;
}

.yia-dinner-body {
    padding: 26px 32px 30px;
}

.yia-dinner-details {
    margin-bottom: 18px;
    gap: 12px;
}

.yia-dinner-details .wp-block-column p {
    margin-top: 0;
}

.yia-dinner-body > h4 {
    font-size: 21px;
    margin-top: 18px;
}

.yia-dinner-body > p {
    font-size: 15px;
    line-height: 1.6;
}

.yia-dinner-prices {
    margin-top: 18px;
    margin-bottom: 18px;
    gap: 12px;
}

.yia-dinner-price {
    padding: 16px 20px;
    border: 1px solid var(--yia-border);
    border-radius: 18px;
    background: #FFFFFF;
}

.yia-dinner-price p {
    margin: 0 0 8px;
}

.yia-dinner-price h3 {
    font-size: 28px;
    margin: 0;
}

.yia-dinner-body .wp-block-buttons {
    margin-top: 18px;
}


/* --- Dashboard-managed event cards --- */
.yia-managed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 36px;
    align-items: stretch;
}

.yia-managed-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--yia-border);
    border-radius: 20px;
    background: var(--yia-ivory);
    transition: transform .25s ease,
                box-shadow .25s ease;
}

.yia-managed-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #EAE6DE;
}

.yia-managed-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yia-managed-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px 24px;
}

.yia-managed-label {
    display: block;
    color: #A57B34;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.yia-managed-content h3 {
    color: var(--yia-black);
    font-size: 25px;
    line-height: 1.2;
    margin: 0 0 18px;
    overflow-wrap: break-word;
}

.yia-managed-meta {
    color: #48443E;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 8px;
}

.yia-managed-description {
    margin-top: 14px;
    color: var(--yia-grey);
    font-size: 14px;
    line-height: 1.7;
}

.yia-managed-description p {
    margin: 0 0 12px;
}

.yia-managed-price {
    color: var(--yia-black);
    font-size: 15px;
    font-weight: 700;
    margin: 12px 0 18px;
}

.yia-managed-button {
    display: block;
    margin-top: auto;
    padding: 13px 16px;
    border-radius: 999px;
    background: var(--yia-gold);
    color: var(--yia-black) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    text-align: center;
    transition: background .2s ease;
}

.yia-managed-button:hover {
    background: var(--yia-gold-hover);
}

.yia-managed-button:focus-visible {
    outline: 3px solid var(--yia-black);
    outline-offset: 3px;
}

.yia-events-empty {
    margin-top: 30px;
    padding: 28px;
    background: var(--yia-ivory);
    border-radius: 18px;
    color: var(--yia-grey);
}


/* --- Event registration page --- */
.yia-registration-page {
    padding-top: 60px;
    padding-bottom: 100px;
}

.yia-registration-hero {
    padding: 85px 35px;
    border-radius: 28px;
}

.yia-registration-hero h1 {
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.yia-registration-hero > p:first-child,
.yia-registration-section > p:first-child {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.yia-registration-hero p,
.yia-registration-section > p {
    line-height: 1.7;
}

.yia-registration-section {
    padding-top: 85px;
    padding-bottom: 85px;
}

.yia-registration-section h2 {
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -.025em;
}

.yia-registration-cta {
    padding: 70px 35px;
    border-radius: 28px;
}

.yia-registration-cta h2 {
    font-size: clamp(30px, 4vw, 48px);
}

.yia-registration-cta p {
    line-height: 1.7;
}


/* --- WPForms registration — fields and form layout --- */
.yia-registration-form-wrap {
    width: 100%;
    max-width: 820px;
    margin: 40px auto 25px;
    padding: 45px;
    background: #FFFFFF;
    border: 1px solid #EAE5DB;
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(0,0,0,.04);
}

.yia-registration-form-wrap .wpforms-container,
.yia-registration-form-wrap .wpforms-form,
.yia-registration-form-wrap .wpforms-field-container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.yia-registration-form-wrap .wpforms-field {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 0 22px !important;
    clear: both;
}

.yia-registration-form-wrap .wpforms-field-label {
    display: block;
    margin-bottom: 9px !important;
    color: var(--yia-black);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.yia-registration-form-wrap .wpforms-form input[type="text"],
.yia-registration-form-wrap .wpforms-form input[type="email"],
.yia-registration-form-wrap .wpforms-form input[type="tel"],
.yia-registration-form-wrap .wpforms-form input[type="number"],
.yia-registration-form-wrap .wpforms-form select,
.yia-registration-form-wrap .wpforms-form textarea {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px;
    padding: 12px 15px;
    background: #FAF9F7;
    border: 1px solid #E3DED5;
    border-radius: 10px;
    color: var(--yia-black);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color .2s ease,
                box-shadow .2s ease;
}

.yia-registration-form-wrap .wpforms-form input:focus,
.yia-registration-form-wrap .wpforms-form select:focus,
.yia-registration-form-wrap .wpforms-form textarea:focus {
    outline: none;
    border-color: var(--yia-gold);
    box-shadow: 0 0 0 3px rgba(195,151,70,.13);
}

.yia-registration-form-wrap .wpforms-form select {
    height: 50px;
    min-height: 50px;
    appearance: auto;
    cursor: pointer;
}


/* --- WPForms registration — first and last name --- */
.yia-registration-form-wrap
.wpforms-field-name
.wpforms-field-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

.yia-registration-form-wrap
.wpforms-field-name
.wpforms-field-row-block {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
}

.yia-registration-form-wrap
.wpforms-field-name
.wpforms-field-row-block input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.yia-registration-form-wrap
.wpforms-field-name
.wpforms-field-sublabel {
    display: block;
    margin-top: 7px;
    color: var(--yia-grey);
    font-size: 12px;
    text-align: left;
}


/* --- WPForms registration — submit button and errors --- */
.yia-registration-form-wrap .wpforms-form textarea {
    min-height: 110px;
    resize: vertical;
}

.yia-registration-form-wrap .wpforms-submit-container {
    padding-top: 10px;
    margin-top: 10px;
}

.yia-registration-form-wrap button[type="submit"],
.yia-registration-form-wrap button.wpforms-submit {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    background: var(--yia-gold);
    color: var(--yia-black);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease;
}

.yia-registration-form-wrap button[type="submit"]:hover,
.yia-registration-form-wrap button.wpforms-submit:hover {
    background: var(--yia-gold-hover);
}

.yia-registration-form-wrap .wpforms-error {
    font-size: 13px;
}


/* --- Contact page form --- */
body.page-slug-contact .wpforms-container,
body.page .wpforms-container:not(.yia-registration-form-wrap .wpforms-container) {
    max-width: 760px;
}

body.page-id-0 .wpforms-container {
    width: 100%;
}

body.page .entry-content .wpforms-container {
    margin-left: auto;
    margin-right: auto;
}

body.page .entry-content .wpforms-form input[type="text"],
body.page .entry-content .wpforms-form input[type="email"],
body.page .entry-content .wpforms-form textarea {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    background: #FAF9F7;
    border: 1px solid #E3DED5;
    border-radius: 10px;
    font-size: 15px;
    box-sizing: border-box;
}

body.page .entry-content .wpforms-form textarea {
    min-height: 150px;
    resize: vertical;
}

body.page .entry-content .wpforms-field-label {
    font-size: 14px;
    font-weight: 600;
    color: #171717;
    margin-bottom: 9px;
}

body.page .entry-content .wpforms-field {
    padding: 0;
    margin-bottom: 24px;
}

body.page .entry-content .wpforms-submit-container button {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 14px 24px;
    background: #C39746;
    color: #171717;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

body.page .entry-content .wpforms-submit-container button:hover {
    background: #D5AB5E;
}

body.page .entry-content .wpforms-form input:focus,
body.page .entry-content .wpforms-form textarea:focus {
    border-color: #C39746;
    outline: none;
    box-shadow: 0 0 0 3px rgba(195,151,70,.13);
}


/* --- Footer and footer links --- */
footer.wp-block-group {
    padding-top: 30px !important;
    padding-bottom: 15px !important;
}

footer.wp-block-group .wp-block-columns {
    margin-bottom: 0;
    gap: 25px;
}

footer.wp-block-group h3,
footer.wp-block-group h4 {
    margin-top: 0;
    margin-bottom: 8px;
}

footer.wp-block-group p {
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.5;
}

footer.wp-block-group .wp-block-separator {
    margin-top: 12px;
    margin-bottom: 12px;
}

.yia-footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    padding: 3px 0;
}

.yia-footer-nav a {
    color: var(--yia-gold);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.yia-footer-nav a:hover,
.yia-footer-nav a:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
}


/* ====================================================================
   PART B — DESKTOP ONLY (782px AND ABOVE)
   ==================================================================== */
@media (min-width: 782px) {

    /* --- Header refinements — navigation size and spacing --- */
    .yia-site-header
        .wp-block-navigation-item__content {
            font-size: 20px !important;
            font-weight: 500 !important;
            line-height: 1.4 !important;
        }

    .yia-site-header
        .wp-block-navigation__container {
            column-gap: 28px !important;
        }

    .yia-site-header {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            gap: 10px !important;
        }

    body .wp-site-blocks > main {
            margin-block-start: 0 !important;
        }

    body.home .wp-site-blocks > main {
            padding-top: 12px !important;
        }

    body.home .wp-site-blocks > main > :first-child {
            margin-block-start: 0 !important;
        }


    /* --- Mobile header — reduce whitespace --- */
    header .wp-block-navigation,
        header .wp-block-navigation__container,
        header .wp-block-navigation__responsive-container-content,
        header .wp-block-navigation__responsive-container-content
        .wp-block-navigation__container {
            column-gap: 40px !important;
            row-gap: 10px !important;
        }

    header .wp-block-navigation-item {
            margin: 0 !important;
        }

}

/* ====================================================================
   PART C — TABLET ADJUSTMENTS (1000px AND BELOW)
   ==================================================================== */
@media (max-width: 1000px) {

    /* --- Events page — upcoming and past events --- */
    .yia-upcoming-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }


    /* --- Dashboard-managed event cards --- */
    .yia-managed-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

}

/* ====================================================================
   PART D — MOBILE (781px AND BELOW)
   ==================================================================== */
@media (max-width: 781px) {

    /* --- Header, logo and navigation --- */
    .yia-site-header {
            min-height: 100px;
            padding: 12px 5% !important;
            gap: 0 !important;
        }

    .yia-site-header .yia-header-navigation {
            position: static !important;
            transform: none !important;
            width: 100% !important;
            margin: 0 !important;
        }

    .yia-site-header .wp-block-navigation__responsive-container-open {
            position: absolute !important;
            top: 50% !important;
            right: 5% !important;
            left: auto !important;
            transform: translateY(-50%) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            z-index: 10;
        }

    .yia-site-header .wp-block-navigation__responsive-container-open svg {
            width: 28px;
            height: 28px;
        }

    .yia-site-header .wp-block-navigation__responsive-container.is-menu-open {
            position: fixed !important;
            inset: 0 !important;
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;
            max-height: none !important;
            padding: 75px 28px 35px !important;
            background: #fff !important;
            color: #171717 !important;
            overflow-y: auto !important;
            transform: none !important;
            z-index: 999999 !important;
            box-sizing: border-box !important;
        }

    .yia-site-header .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: flex-start !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100% !important;
        }

    .yia-site-header .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__container {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: flex-start !important;
            gap: 24px !important;
            width: 100% !important;
        }

    .yia-site-header .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item { width: 100%; text-align: left !important; }

    .yia-site-header .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item__content {
            display: block !important;
            color: #171717 !important;
            font-size: 20px !important;
            font-weight: 600 !important;
            text-align: left !important;
            text-decoration: none !important;
        }

    .yia-site-header .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__responsive-container-close {
            position: absolute !important;
            top: 22px !important;
            right: 22px !important;
            display: flex !important;
            color: #171717 !important;
            z-index: 2;
        }


    /* --- Homepage — hero image --- */
    .yia-hero-photo {
            margin-top: 32px;
        }

    .yia-hero-photo img {
            aspect-ratio: 4 / 3;
            border-radius: 14px;
        }


    /* --- Homepage — purpose cards --- */
    .yia-purpose-section {
            padding-top: 60px !important;
            padding-bottom: 50px !important;
        }

    .yia-purpose-cards {
            margin-top: 32px;
            gap: 16px;
        }

    .yia-purpose-cards > .wp-block-column {
            flex-basis: 100% !important;
        }

    .yia-purpose-card {
            padding: 28px 24px !important;
        }


    /* --- Homepage — Friday youth programme --- */
    .yia-friday-section {
            padding: 24px !important;
        }

    .yia-friday-columns {
            gap: 30px;
        }

    .yia-friday-image img {
            height: auto;
            aspect-ratio: 4 / 3;
            border-radius: 14px;
        }


    /* --- Homepage — event showcase --- */
    .yia-events-section {
            padding-top: 65px !important;
        }

    .yia-event-cards {
            margin-top: 30px;
            gap: 20px;
        }

    .yia-event-cards > .wp-block-column {
            flex-basis: 100% !important;
        }

    .yia-event-content {
            padding: 22px;
        }

    .yia-event-content h3 {
            font-size: 23px;
        }


    /* --- Homepage — get involved --- */
    .yia-get-involved {
            margin-top: 35px;
            padding: 55px 24px !important;
            border-radius: 22px !important;
        }

    .yia-get-involved .wp-block-buttons {
            flex-direction: column;
            align-items: stretch;
        }

    .yia-get-involved .wp-block-button {
            width: 100%;
        }

    .yia-get-involved .wp-block-button__link {
            display: block;
            width: 100%;
            text-align: center;
        }


    /* --- About Us page --- */
    .yia-about-page {
            padding: 25px 20px 65px;
        }

    .yia-about-page > .alignwide {
            max-width: 100%;
        }

    .yia-about-hero {
            padding: 55px 24px 28px !important;
        }

    .yia-about-hero-image {
            margin-top: 30px;
        }

    .yia-about-hero-image img {
            aspect-ratio: 4 / 3;
            border-radius: 14px;
        }

    .yia-about-intro {
            padding-top: 65px;
            padding-bottom: 45px;
        }

    .yia-about-values {
            padding-bottom: 65px;
        }

    .yia-about-value-columns {
            gap: 18px;
        }

    .yia-about-value-columns > .wp-block-column {
            flex-basis: 100% !important;
        }

    .yia-about-value-card {
            padding: 28px 24px !important;
        }

    .yia-about-programme {
            padding: 45px 24px !important;
        }

    .yia-about-activities {
            margin-top: 30px;
            gap: 22px;
        }

    .yia-about-cta {
            margin-top: 65px;
            padding: 50px 24px !important;
        }


    /* --- Events page — upcoming and past events --- */
    .yia-events-page {
            padding: 25px 20px 65px;
        }

    .yia-events-page > .alignwide {
            max-width: 100%;
        }

    .yia-events-hero {
            padding: 60px 24px !important;
        }

    .yia-upcoming-section {
            padding-top: 65px;
            padding-bottom: 65px;
        }

    .yia-past-events-section {
            padding-bottom: 65px;
        }

    .yia-events-grid {
            gap: 20px;
            margin-top: 30px;
        }

    .yia-events-grid > .wp-block-column {
            flex-basis: 100% !important;
        }

    .yia-events-grid-content {
            padding: 24px;
        }

    .yia-events-grid-content h3 {
            font-size: 24px;
        }

    .yia-events-cta {
            padding: 55px 24px !important;
        }


    /* --- Community dinner card --- */
    .yia-dinner-card {
            max-width: 100%;
        }

    .yia-dinner-header {
            padding: 24px 20px;
        }

    .yia-dinner-header h3 {
            font-size: 28px;
        }

    .yia-dinner-body {
            padding: 22px 20px;
        }

    .yia-dinner-price {
            padding: 14px 16px;
        }

    .yia-dinner-body .wp-block-button,
        .yia-dinner-body .wp-block-button__link {
            width: 100%;
            text-align: center;
        }


    /* --- WPForms registration — submit button and errors --- */
    .yia-registration-page {
            padding: 25px 20px 65px;
        }

    .yia-registration-hero {
            padding: 55px 24px;
        }

    .yia-registration-section {
            padding-top: 60px;
            padding-bottom: 60px;
        }

    .yia-registration-cta {
            padding: 55px 24px;
        }

    main.wp-block-group {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

    main.wp-block-group > .alignwide {
            max-width: 100%;
        }

    main.wp-block-group > .alignwide:first-child {
            padding-left: 24px !important;
            padding-right: 24px !important;
        }

    main.wp-block-group > .has-black-background-color {
            padding-left: 24px !important;
            padding-right: 24px !important;
        }

    .yia-purpose-cards {
            width: 100%;
        }

    main h1,
        main h2,
        main h3 {
            overflow-wrap: break-word;
        }


    /* --- Header refinements — navigation size and spacing --- */
    .wp-site-blocks > header,
        .wp-site-blocks > .wp-block-template-part:first-child {
            padding-top: 8px !important;
            padding-bottom: 8px !important;
            margin-bottom: 0 !important;
        }

    .wp-site-blocks > .wp-block-template-part:first-child
        .wp-block-group.is-vertical {
            gap: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }

    .wp-site-blocks > main {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

    body.home .wp-site-blocks > main {
            padding-top: 5px !important;
        }

    header .wp-block-navigation {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            min-height: 0 !important;
        }

}

/* ====================================================================
   PART E — SMALLER SCREENS (MAX-WIDTH: 650PX)
   ==================================================================== */
@media (max-width: 650px) {

    /* --- Events page — upcoming and past events --- */
    .yia-upcoming-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }

    .yia-mini-event-top,
        .yia-mini-event-content {
            padding: 22px 20px;
        }


    /* --- Dashboard-managed event cards --- */
    .yia-managed-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }

    .yia-managed-content {
            padding: 22px 20px;
        }

    .yia-managed-content h3 {
            font-size: 23px;
        }


    /* --- WPForms registration — submit button and errors --- */
    .yia-registration-form-wrap {
            padding: 25px 20px;
            margin-top: 25px;
            border-radius: 18px;
        }

    .yia-registration-form-wrap
        .wpforms-field-name
        .wpforms-field-row {
            grid-template-columns: 1fr !important;
            gap: 14px !important;
        }

    .yia-registration-form-wrap .wpforms-field {
            margin-bottom: 18px !important;
        }


    /* --- Contact page form --- */
    body.page .entry-content .wpforms-container {
            width: 100%;
        }

    body.page .entry-content .wpforms-form input,
        body.page .entry-content .wpforms-form textarea {
            font-size: 16px;
        }

}

/* ====================================================================
   PART E — SMALLER SCREENS (MAX-WIDTH: 600PX)
   ==================================================================== */
@media (max-width: 600px) {

    /* --- Footer and footer links --- */
    footer.wp-block-group {
            padding-top: 24px !important;
            padding-bottom: 16px !important;
        }

    footer.wp-block-group .wp-block-columns {
            gap: 12px;
        }

    .yia-footer-nav {
            gap: 12px 18px;
        }

    .yia-footer-nav a {
            font-size: 13px;
        }

}

/* ====================================================================
   PART E — SMALLER SCREENS (MAX-WIDTH: 380PX)
   ==================================================================== */
@media (max-width: 380px) {

    /* --- General mobile page spacing --- */
    main.wp-block-group {
            padding-left: 16px !important;
            padding-right: 16px !important;
        }

}

/* ====================================================================
   PART F — INTERACTION / ACCESSIBILITY (HOVER: HOVER)
   ==================================================================== */
@media (hover: hover) {

    /* --- Homepage — purpose cards --- */
    .yia-purpose-card:hover {
            transform: translateY(-5px);
            border-color: var(--yia-gold);
            box-shadow: 0 14px 35px rgba(23,23,23,.07);
        }


    /* --- Homepage — event showcase --- */
    .yia-event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 14px 35px rgba(23,23,23,.08);
        }


    /* --- Events page — upcoming and past events --- */
    .yia-mini-event:hover,
        .yia-events-grid-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(23,23,23,.08);
        }


    /* --- Dashboard-managed event cards --- */
    .yia-managed-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(23,23,23,.08);
        }

}

/* ====================================================================
   PART F — INTERACTION / ACCESSIBILITY (PREFERS-REDUCED-MOTION: REDUCE)
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {

    /* --- General mobile page spacing --- */
    .yia-purpose-card,
        .yia-event-card,
        .yia-mini-event,
        .yia-events-grid-card,
        .yia-managed-card,
        .yia-managed-button,
        .yia-registration-form-wrap button {
            transition: none;
        }

}