/*
APGI / HTMA Mobile Menu Fix
Scoped to .apgi-htma-menu-plugin-active and .apgi-htma-menu-fixed.
Desktop navigation is not changed.
*/

@media (max-width: 782px) {

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #071b46 !important;
    background-color: #071b46 !important;
    color: #ffffff !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .menu-toggle {
    display: block !important;
    width: auto !important;
    min-width: 150px !important;
    margin: 0 !important;
    padding: 12px 22px !important;
    background: #c90000 !important;
    background-color: #c90000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: center !important;
    float: none !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .menu-toggle:hover,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .menu-toggle:focus {
    background: #a90000 !important;
    color: #ffffff !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled ul.menu,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled ul.nav-menu,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled > div > ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #071b46 !important;
    box-sizing: border-box !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #071b46 !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled > div > ul > li > a,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled > ul > li > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 13px 12px !important;
    background: #071b46 !important;
    color: #ffffff !important;
    border: 2px solid #d4af37 !important;
    border-radius: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    float: none !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled > div > ul > li > a:hover,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled > div > ul > li > a:focus,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled > ul > li > a:hover,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled > ul > li > a:focus {
    background: #0066d9 !important;
    color: #ffffff !important;
    border-color: #d4af37 !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled .current-menu-item > a,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed.toggled .current_page_item > a {
    background: #0c2f75 !important;
    color: #ffffff !important;
    border-color: #d4af37 !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .menu-item-has-children {
    position: relative !important;
  }

  body.apgi-htma-menu-plugin-active.apgi-collapse-submenus
       .apgi-htma-menu-fixed.toggled
       .menu-item-has-children > .sub-menu {
    display: none !important;
  }

  body.apgi-htma-menu-plugin-active.apgi-collapse-submenus
       .apgi-htma-menu-fixed.toggled
       .menu-item-has-children.apgi-submenu-open > .sub-menu {
    display: block !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .sub-menu {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    background: #071b46 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .sub-menu li > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 11px 42px 11px 10px !important;
    background: #0c2f75 !important;
    color: #ffffff !important;
    border: 1px solid #d4af37 !important;
    border-radius: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .sub-menu li > a:hover,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .sub-menu li > a:focus {
    background: #0066d9 !important;
    color: #ffffff !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .dropdown-toggle,
  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .apgi-submenu-toggle {
    position: absolute !important;
    top: 4px !important;
    right: 5px !important;
    z-index: 5 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 38px !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  body.apgi-htma-menu-plugin-active .apgi-htma-menu-fixed .dropdown-toggle svg {
    fill: #ffffff !important;
  }

  body.apgi-htma-menu-plugin-active.apgi-center-menu-labels
       .apgi-htma-menu-fixed.toggled li > a {
    text-align: center !important;
  }
}


/* =========================================================
   MOBILE PAGE TITLE CENTERING
   Keeps WordPress page titles centered without changing
   article section headings or desktop layouts.
   ========================================================= */
@media (max-width: 782px) {

  body.apgi-htma-menu-plugin-active .entry-header,
  body.apgi-htma-menu-plugin-active .page-header,
  body.apgi-htma-menu-plugin-active header.entry-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  body.apgi-htma-menu-plugin-active h1.entry-title,
  body.apgi-htma-menu-plugin-active .entry-title,
  body.apgi-htma-menu-plugin-active h1.page-title,
  body.apgi-htma-menu-plugin-active .page-title,
  body.apgi-htma-menu-plugin-active .wp-block-post-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    float: none !important;
    text-align: center !important;
  }

  /* Common classic-theme page-title wrappers */
  body.apgi-htma-menu-plugin-active .site-main > article > .entry-header,
  body.apgi-htma-menu-plugin-active .content-area .entry-header,
  body.apgi-htma-menu-plugin-active .site-content .entry-header {
    text-align: center !important;
  }
}


/* =========================================================
   MOBILE DROPDOWN CLARITY — v1.0.2
   One obvious dropdown control; no duplicate-looking arrows.
   Artist submenu uses HTMA royal blue, not gray.
   ========================================================= */
@media (max-width: 782px) {

  /* Give parent text room for one large dropdown control */
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed.toggled
       .menu-item-has-children > a {
    padding-right: 64px !important;
    position: relative !important;
  }

  /* Hide decorative arrow markers inside/on the parent link.
     The real dropdown button remains visible and clickable. */
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > a::after,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > a .submenu-icon,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > a .dropdown-icon,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > a .sub-arrow {
    display: none !important;
    content: none !important;
  }

  /* ONE large, unmistakable dropdown button */
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > .dropdown-toggle,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > .apgi-submenu-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 42px !important;
    min-width: 48px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #0066d9 !important;
    color: #ffffff !important;

    border: 2px solid #d4af37 !important;
    border-radius: 4px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    cursor: pointer !important;
    z-index: 20 !important;
  }

  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > .dropdown-toggle:hover,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > .dropdown-toggle:focus,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > .apgi-submenu-toggle:hover,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .menu-item-has-children > .apgi-submenu-toggle:focus {
    background: #0c2f75 !important;
    color: #ffffff !important;
    border-color: #d4af37 !important;
    outline: none !important;
  }

  /* Artist Spotlight submenu: royal blue, never gray */
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .sub-menu,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .sub-menu li {
    background: #071b46 !important;
    background-color: #071b46 !important;
  }

  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .sub-menu li > a,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .sub-menu .current-menu-item > a,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .sub-menu .current_page_item > a {
    background: #0066d9 !important;
    background-color: #0066d9 !important;
    color: #ffffff !important;

    border: 2px solid #d4af37 !important;
    border-radius: 0 !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    text-align: center !important;
    padding: 12px 14px !important;
  }

  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .sub-menu li > a:hover,
  body.apgi-htma-menu-plugin-active
       .apgi-htma-menu-fixed
       .sub-menu li > a:focus {
    background: #0c2f75 !important;
    color: #ffffff !important;
  }
}


/* =========================================================
   MOBILE PAGE TITLE POLISH — v1.0.3
   Clean, crisp, squared sans-serif title styling that visually
   matches the mobile navigation without becoming another button.
   ========================================================= */
@media (max-width: 782px) {

  body.apgi-htma-menu-plugin-active h1.entry-title,
  body.apgi-htma-menu-plugin-active .entry-title,
  body.apgi-htma-menu-plugin-active h1.page-title,
  body.apgi-htma-menu-plugin-active .page-title,
  body.apgi-htma-menu-plugin-active .wp-block-post-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 32px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;

    color: #ffffff !important;
    text-align: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 10px auto 12px !important;
    padding: 8px 14px !important;

    box-sizing: border-box !important;
    float: none !important;

    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body.apgi-htma-menu-plugin-active .entry-header,
  body.apgi-htma-menu-plugin-active .page-header,
  body.apgi-htma-menu-plugin-active header.entry-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  body.apgi-htma-menu-plugin-active h1.entry-title,
  body.apgi-htma-menu-plugin-active .entry-title,
  body.apgi-htma-menu-plugin-active h1.page-title,
  body.apgi-htma-menu-plugin-active .page-title,
  body.apgi-htma-menu-plugin-active .wp-block-post-title {
    font-size: 28px !important;
    line-height: 1.14 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}