/*
    Template: smarty
    Theme Name: Youth Music Education
    Theme URI: https://youthmusiceducation.co.uk
    Author: Youth Music Education
    Description: Child theme for Youth Music Education website
    Version: 2.4
    License: GNU General Public License v2 or later
    Text Domain: smarty
*/

/* ============================================================
   LOGO FIX
   ============================================================ */
.logo {
    height: 70px !important;
    line-height: 70px !important;
    float: left !important;
    display: flex !important;
    align-items: center !important;
    max-width: 80px !important;
    overflow: hidden !important;
}

.logo img {
    display: block !important;
    max-width: 70px !important;
    max-height: 70px !important;
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
}

.header .logo {
    max-width: 80px !important;
}

header#masthead.header_view-style_1,
header#masthead.header {
    min-height: 70px !important;
}

header#masthead .header__content {
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
}

.header-mobile .logo,
.header-mobile__logo .logo {
    height: 60px !important;
    line-height: 60px !important;
    max-width: 70px !important;
}

.header-mobile .logo img,
.header-mobile__logo .logo img {
    max-width: 60px !important;
    max-height: 60px !important;
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
}

/* ============================================================
   HIDE SEARCH AND CART
   ============================================================ */
.top-bar__search,
.shopping-cart,
.header .shopping-cart {
    display: none !important;
}

/* ============================================================
   FIX WHITE GAP ABOVE FOOTER
   ============================================================ */
.content {
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* ============================================================
   FOOTER - GENERAL
   ============================================================ */
.footer_widgets_wrapper .widget_footer {
    margin-bottom: 15px !important;
}

.footer_widgets_wrapper {
    padding-top: 25px !important;
    padding-bottom: 20px !important;
}

.footer_widgets_wrapper .row {
    margin-bottom: 0 !important;
}

/* ============================================================
   FOOTER TEXT COLOURS
   ============================================================ */
.footer_widgets_wrapper .widget,
.footer_widgets_wrapper .widget p,
.footer_widgets_wrapper .widget span,
.footer_widgets_wrapper .widget div,
.footer_widgets_wrapper .widget a,
.footer_widgets_wrapper .wp-block-heading,
.footer_widgets_wrapper h1,
.footer_widgets_wrapper h2,
.footer_widgets_wrapper h3,
.footer_widgets_wrapper h4,
.footer_widgets_wrapper h5,
.footer_widgets_wrapper h6,
#block-9 h4,
#block-9 .wp-block-heading,
#colophon h4,
#colophon .wp-block-heading {
    color: #ffffff !important;
}

/* ============================================================
   FOOTER CONTACT ICONS - using pseudo elements
   ============================================================ */

/* Phone icon - targets WhatsApp link */
.widget-area_type_footer .widget_footer a[href*="wa.me"]::before {
    content: "📞 ";
    font-family: inherit !important;
    font-size: 14px !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    vertical-align: middle !important;
}

/* Email icon - targets mailto link */
.widget-area_type_footer .widget_footer a[href*="mailto"]::before {
    content: "✉ ";
    font-family: inherit !important;
    font-size: 14px !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    vertical-align: middle !important;
}

/* ============================================================
   FOOTER LOGO
   ============================================================ */
.footer_widgets_wrapper .widget_logo_box img {
    max-width: 120px;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

/* ============================================================
   FOOTER SOCIAL NETWORKS
   ============================================================ */
#stm_widget_social_networks-2 {
    margin-top: 0 !important;
}

#stm_widget_social_networks-2 .list_social-networks {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#stm_widget_social_networks-2 .list__item {
    margin-bottom: 0 !important;
}

/* ============================================================
   COLOPHON
   ============================================================ */
#colophon {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#colophon .widget-area.widget-area_type_footer {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
}

#colophon .widget {
    margin-bottom: 10px !important;
}

#colophon .list_social-networks {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   MISC
   ============================================================ */
.vc_parallax-content-moving-fade {
    display: none;
}

/* ============================================================
   PAGE HEADER / BREADCRUMBS
   ============================================================ */
.stm-page-head {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: auto !important;
}

.stm-page-head__content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.stm-page-head .breadcrumbs {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* ============================================================
   MOBILE FIXES
   ============================================================ */
@media (max-width: 767px) {

    /* Fix white gap on mobile */
    .content,
    #content {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    footer#colophon,
    .footer {
        margin-top: 0 !important;
    }

    /* Hide empty footer columns */
    .widget-area_type_footer .col-lg-3:not(:has(.widget)),
    .widget-area_type_footer .col-md-3:not(:has(.widget)) {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Stack footer columns on mobile */
    .widget-area_type_footer .row {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0 !important;
    }

    .widget-area_type_footer .col-lg-3,
    .widget-area_type_footer .col-md-3,
    .widget-area_type_footer .col-sm-6,
    .widget-area_type_footer .col-xs-12 {
        width: 100% !important;
        float: none !important;
        flex: none !important;
        padding: 0 15px 10px 15px !important;
        margin: 0 !important;
    }

    .widget-area_type_footer .widget_footer {
        margin-bottom: 5px !important;
    }

    /* Prevent emoji images on mobile too */
    .footer_widgets_wrapper img.emoji {
        display: none !important;
    }
}

/* ============================================================
   PREVENT WORDPRESS EMOJI FROM BECOMING IMAGES SITE-WIDE
   ============================================================ */
img.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.1em !important;
    max-width: none !important;
}

/* But in footer, hide emoji images completely and use CSS instead */
.footer_widgets_wrapper img.emoji {
    display: none !important;
}

/* ============================================================
   SITE-WIDE FONTS (Fredoka headings + Poppins body)
   Fonts are enqueued in functions.php
   ============================================================ */
body,
.content,
p, li, td, th, label, input, textarea, select, button,
.vc_column_container,
#colophon, .footer_widgets_wrapper {
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.vc_custom_heading,
.stm-page-head__title,
.heading_font {
    font-family: 'Fredoka', sans-serif !important;
}

/* ============================================================
   TASTER / PARENTS FORM (WPForms ID 5136) - rounded two-column
   ============================================================ */
.wpforms-container-5136 input[type=text],
.wpforms-container-5136 input[type=email],
.wpforms-container-5136 input[type=tel],
.wpforms-container-5136 input[type=number],
.wpforms-container-5136 textarea {
    background-color: #eceafb !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 14px 22px !important;
    color: #2e2a6b !important;
    font-size: 16px !important;
    width: 100% !important;
    box-shadow: none !important;
    font-family: 'Poppins', sans-serif !important;
}

.wpforms-container-5136 textarea {
    border-radius: 20px !important;
    min-height: 120px !important;
    resize: vertical;
}

.wpforms-container-5136 ::placeholder {
    color: #9a97c4 !important;
    opacity: 1;
}

.wpforms-container-5136 .wpforms-field-label {
    color: #2e2a6b !important;
    font-weight: 600 !important;
    font-family: 'Fredoka', sans-serif !important;
    margin-bottom: 6px !important;
}

.wpforms-container-5136 .wpforms-required-label {
    color: #2e2a6b !important;
}

/* two-column field pairs */
.wpforms-container-5136 div.wpforms-one-half {
    width: 48% !important;
    display: inline-block !important;
    vertical-align: top;
    float: none !important;
}

.wpforms-container-5136 div.wpforms-one-half.wpforms-last {
    margin-left: 3% !important;
}

/* submit button - full-width dark pill */
.wpforms-container-5136 button[type=submit],
.wpforms-container-5136 .wpforms-submit {
    background-color: #2e2a6b !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 16px 40px !important;
    width: 100% !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wpforms-container-5136 button[type=submit]:hover,
.wpforms-container-5136 .wpforms-submit:hover {
    background-color: #211e52 !important;
}

@media (max-width: 600px) {
    .wpforms-container-5136 div.wpforms-one-half,
    .wpforms-container-5136 div.wpforms-one-half.wpforms-last {
        width: 100% !important;
        margin-left: 0 !important;
        display: block !important;
    }
}

/* ============================================================
   TRIM GAP BETWEEN BREADCRUMB BAR AND PAGE CONTENT
   ============================================================ */
.stm-page-head {
    margin-bottom: 0 !important;
}

.content,
.page .content,
#content.content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* first content row/column should not add its own top spacing */
.content .container > .row:first-child,
.content .container > .row:first-child > [class^="col-"]:first-child,
.content .vc_row:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* WPBakery raw-html / first element top spacing */
.content .wpb_row:first-child,
.content .wpb_text_column:first-child {
    margin-top: 0 !important;
}

/* ============================================================
   FOOTER BACKGROUND - single gradient across whole footer
   Apply gradient to the OUTER container only; make all inner
   layers transparent so they don't stack and create patches.
   ============================================================ */
#colophon {
    background: linear-gradient(135deg, #2e2a6b 0%, #7b5cd6 100%) !important;
}

#colophon .footer_widgets_wrapper,
#colophon .widget-area,
#colophon .widget-area.widget-area_type_footer,
#colophon .bottom-bar,
#colophon .footer_bottom,
#colophon .copyright,
.footer_widgets_wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================================
   FOOTER LINKS - force white (override theme pink/red)
   ============================================================ */
#colophon a,
#colophon a:link,
#colophon a:visited,
.footer_widgets_wrapper a,
.footer_widgets_wrapper a:link,
.footer_widgets_wrapper a:visited,
.widget-area_type_footer a,
.widget-area_type_footer .widget_footer a {
    color: #ffffff !important;
}

#colophon a:hover,
.footer_widgets_wrapper a:hover,
.widget-area_type_footer a:hover {
    color: #8ef0c8 !important; /* mint on hover for a subtle accent */
}

/* ============================================================
   HIDE PINK TOP BAR (Staff/Parents login strip)
   ============================================================ */
.top-bar,
.header .top-bar,
.top_bar,
.header-top,
.header__top,
.stm-top-bar,
.top-panel {
    display: none !important;
}

/* ============================================================
   FOOTER EMAIL / LONG LINK WRAPPING
   Keep the email on one line (shrink slightly to fit), no mid-word break
   ============================================================ */
#colophon a,
.footer_widgets_wrapper a,
.widget-area_type_footer a,
.widget-area_type_footer .widget_footer p,
.widget-area_type_footer .widget_footer {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* shrink the email link a touch so the full address fits one line on desktop */
/* targeted directly at the email widget (#block-11) for reliability */
/* #block-10 = phone/WhatsApp, matched to the same size for consistency */
#block-10,
#block-10 p,
#block-10 a,
#block-11,
#block-11 p,
#block-11 a,
#colophon a[href*="mailto"],
.widget-area_type_footer a[href*="mailto"] {
    font-size: 13px !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

#block-10 p,
#block-11 p {
    margin: 0 !important;
}

/* on small screens allow it to wrap normally (mobile has room differently) */
@media (max-width: 767px) {
    .widget-area_type_footer a[href*="mailto"],
    #colophon a[href*="mailto"] {
        white-space: normal !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   TIGHTEN GAP UNDER "GET IN TOUCH" FOOTER HEADING
   ============================================================ */
#block-9,
#block-9 h4,
#block-9 .wp-block-heading {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}

/* reduce space above the phone widget too */
#block-10 {
    margin-top: 0 !important;
}