/* Coast FM Northern Ireland mobile header and drawer rebuild
   Mobile only. Desktop header/navigation is untouched above 760px. */
.cfm-mobile-header,
.cfm-mobile-overlay,
.cfm-mobile-drawer{display:none}

@media (max-width:760px){
  html.cfm-menu-open,
  body.cfm-menu-open{overflow:hidden !important}

  body .site-header{display:none !important}

  .cfm-mobile-header{
    display:block !important;
    background:#ffffff;
    position:relative;
    z-index:9000;
    box-shadow:0 1px 0 rgba(5,55,97,.08),0 12px 28px rgba(5,55,97,.10);
  }
  .cfm-mobile-header-inner{
    min-height:112px;
    padding:14px 16px 12px;
    display:grid;
    grid-template-columns:minmax(190px,1fr) auto auto;
    align-items:center;
    gap:10px;
  }
  .cfm-mobile-logo{
    display:flex;
    align-items:center;
    justify-content:flex-start; justify-self:start;
    min-width:0;
    text-decoration:none;
  }
  .cfm-mobile-logo img{
    display:block !important;
    width:min(220px,56vw) !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    transform:none !important;
    rotate:0deg !important;
    margin:0 !important;
  }
  .cfm-mobile-listen{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:58px;
    padding:0 18px;
    border-radius:0;
    background:#ff8a00;
    color:#ffffff !important;
    text-decoration:none !important;
    font-size:1rem;
    font-weight:900;
    letter-spacing:.02em;
    line-height:1;
    box-shadow:none;
    white-space:nowrap;
    text-transform:uppercase;
  }
  .cfm-mobile-listen::before{
    content:"";
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:14px solid #ffffff;
  }
  .cfm-mobile-menu-button{
    width:58px;
    height:58px;
    border:2px solid #b7bdc4;
    border-radius:0;
    background:#ffffff;
    color:#66727c;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
  }
  .cfm-mobile-menu-button span,
  .cfm-mobile-close span{
    width:28px;
    height:20px;
    position:relative;
    display:block;
  }
  .cfm-mobile-menu-button span::before,
  .cfm-mobile-menu-button span::after,
  .cfm-mobile-menu-button i{
    content:"";
    position:absolute;
    left:0;
    width:28px;
    height:3px;
    border-radius:3px;
    background:#747d86;
  }
  .cfm-mobile-menu-button span::before{top:0}
  .cfm-mobile-menu-button i{top:8px}
  .cfm-mobile-menu-button span::after{top:16px}

  .cfm-mobile-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.68);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
    z-index:9100;
  }
  .cfm-mobile-drawer{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(78vw,380px);
    max-width:380px;
    background:#008cff;
    color:#ffffff;
    transform:translateX(-104%);
    transition:transform .26s ease;
    z-index:9200;
    box-shadow:12px 0 28px rgba(0,0,0,.28);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .cfm-menu-open .cfm-mobile-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .cfm-menu-open .cfm-mobile-drawer{transform:translateX(0)}

  .cfm-mobile-drawer-top{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:14px 24px 4px;
  }
  .cfm-mobile-close{
    width:56px;
    height:56px;
    border:0;
    background:transparent;
    color:#ffffff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
  }
  .cfm-mobile-close span::before,
  .cfm-mobile-close span::after{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:32px;
    height:4px;
    border-radius:3px;
    background:#ffffff;
  }
  .cfm-mobile-close span::before{transform:rotate(45deg)}
  .cfm-mobile-close span::after{transform:rotate(-45deg)}

  .cfm-mobile-nav{padding:4px 28px 34px}
  .cfm-mobile-nav a,
  .cfm-mobile-nav button{
    font-family:inherit;
    color:#ffffff;
  }
  .cfm-mobile-link,
  .cfm-mobile-section-button{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0;
    border:0;
    background:transparent;
    color:#ffffff !important;
    text-decoration:none !important;
    font-size:1.58rem;
    font-weight:900;
    line-height:1.15;
    text-align:left;
  }
  .cfm-mobile-section{margin:8px 0 10px}
  .cfm-mobile-section-button{
    cursor:pointer;
    min-height:60px;
    background:#ff8a00;
    padding:0 18px;
  }
  .cfm-mobile-section-button::after{
    content:"";
    width:14px;
    height:14px;
    border-right:4px solid #ffffff;
    border-bottom:4px solid #ffffff;
    transform:rotate(45deg);
    margin-left:20px;
    transition:transform .2s ease;
  }
  .cfm-mobile-section.is-open > .cfm-mobile-section-button::after{transform:rotate(225deg)}
  .cfm-mobile-submenu{
    display:none;
    padding:8px 0 12px 22px;
  }
  .cfm-mobile-section.is-open > .cfm-mobile-submenu{display:block}
  .cfm-mobile-submenu a{
    display:flex;
    align-items:center;
    min-height:48px;
    color:#ffffff !important;
    text-decoration:none !important;
    font-size:1.34rem;
    font-weight:500;
    line-height:1.2;
  }
  .cfm-mobile-nav a:focus-visible,
  .cfm-mobile-nav button:focus-visible,
  .cfm-mobile-listen:focus-visible,
  .cfm-mobile-menu-button:focus-visible,
  .cfm-mobile-close:focus-visible{
    outline:3px solid #ffffff;
    outline-offset:3px;
  }

  .cfm-mobile-live-status{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:0 16px 16px;
    background:#ffffff;
  }
  .cfm-mobile-live-card{
    display:grid !important;
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    align-items:center;
    min-height:70px;
    padding:10px 12px;
    border:1px solid rgba(0,75,134,.14);
    border-radius:18px;
    background:linear-gradient(135deg,#ffffff,#eef8ff);
    box-shadow:0 8px 22px rgba(5,55,97,.10);
    overflow:hidden;
  }
  .cfm-mobile-live-image{
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    object-fit:cover !important;
    background:#004b86 !important;
  }
  .cfm-mobile-live-copy{min-width:0;display:block;}
  .cfm-mobile-live-label{
    display:block;
    color:#ff8a1f;
    font-size:.66rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:3px;
  }
  .cfm-mobile-live-title{
    display:block;
    color:#004b86;
    font-size:.92rem;
    line-height:1.15;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .cfm-mobile-live-sub{
    display:block;
    margin-top:2px;
    color:#31536f;
    font-size:.72rem;
    line-height:1.15;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

}

@media (max-width:430px){
  .cfm-mobile-header-inner{
    min-height:104px;
    padding:14px 16px;
    grid-template-columns:minmax(170px,1fr) auto auto;
    gap:8px;
  }
  .cfm-mobile-logo img{width:min(198px,54vw) !important}
  .cfm-mobile-listen{min-height:52px;padding:0 13px;font-size:.9rem}
  .cfm-mobile-menu-button{width:52px;height:52px}
  .cfm-mobile-drawer{width:80vw}
  .cfm-mobile-nav{padding-left:22px;padding-right:22px}
  .cfm-mobile-link,
  .cfm-mobile-section-button{font-size:1.38rem;min-height:52px}
  .cfm-mobile-submenu a{font-size:1.18rem;min-height:44px}
}


@media (max-width:560px){
  .cfm-mobile-live-status{grid-template-columns:1fr;padding:0 14px 14px;}
}

@media (max-width:360px){
  .cfm-mobile-header-inner{grid-template-columns:1fr auto;grid-template-areas:"logo menu" "listen listen"}
  .cfm-mobile-logo{grid-area:logo}
  .cfm-mobile-menu-button{grid-area:menu}
  .cfm-mobile-listen{grid-area:listen;width:100%}
}


/* Header logo resize rebuild */
header .logo img,
.site-logo img,
.header-logo img,
.navbar-brand img{
    max-height:100px !important;
    width:auto !important;
    display:block;
    object-fit:contain;
}


/* Inner page hero width fix
   Keep the named page hero banners inside the same desktop site shell as the header/nav.
   This is intentionally limited to inner pages only; it does not redesign the homepage. */
@media (min-width: 761px) {
  body:not(.home-page) .station-hero,
  body:not(.home-page) .contact-hero,
  body:not(.home-page) .photos-hero,
  body:not(.home-page) .advertise-hero,
  body:not(.home-page) .schedule-hero,
  body:not(.home-page) .rebuilt-schedule-hero,
  body:not(.home-page) .tuning-hero,
  body:not(.home-page) .crew-hero-v2 {
    width: min(1120px, calc(100% - 64px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* Schedule and advertise hero width fix
   Keep these inner page banners inside the same desktop site shell as header/nav. */
@media (min-width: 761px) {
  body:not(.home-page) .advertise-hero,
  body:not(.home-page) .schedule-hero,
  body:not(.home-page) .rebuilt-schedule-hero {
    width: min(1120px, calc(100% - 64px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* Recently played/contact hero content alignment */
body.hero-pad-recent .page-hero,
body.hero-pad-recent .hero,
body.hero-pad-recent .hero-section,
body.hero-pad-contact .page-hero,
body.hero-pad-contact .hero,
body.hero-pad-contact .hero-section{
    box-sizing:border-box;
}

body.hero-pad-recent .page-hero .container,
body.hero-pad-recent .hero .container,
body.hero-pad-recent .hero-section .container,
body.hero-pad-contact .page-hero .container,
body.hero-pad-contact .hero .container,
body.hero-pad-contact .hero-section .container{
    padding-left:48px !important;
    padding-right:48px !important;
    box-sizing:border-box;
}

body.hero-pad-recent .page-hero-content,
body.hero-pad-recent .hero-content,
body.hero-pad-contact .page-hero-content,
body.hero-pad-contact .hero-content{
    padding-left:48px !important;
    padding-right:48px !important;
    box-sizing:border-box;
}

@media (max-width:700px){
    body.hero-pad-recent .page-hero .container,
    body.hero-pad-recent .hero .container,
    body.hero-pad-recent .hero-section .container,
    body.hero-pad-contact .page-hero .container,
    body.hero-pad-contact .hero .container,
    body.hero-pad-contact .hero-section .container,
    body.hero-pad-recent .page-hero-content,
    body.hero-pad-recent .hero-content,
    body.hero-pad-contact .page-hero-content,
    body.hero-pad-contact .hero-content{
        padding-left:24px !important;
        padding-right:24px !important;
    }
}