/* responsive.css - mobile layer. Desktop rendering is intentionally unchanged. */

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-120px;z-index:100;background:#fff;color:#0a3b72;
  padding:10px 16px;font:bold 14px/1 Verdana,sans-serif;border:2px solid #0a3b72}
.skip-link:focus{top:8px}
a:focus-visible,button:focus-visible{outline:3px solid #f5b301;outline-offset:2px}

.brad_wrapper .brad_inside{max-width:1003px;width:100%}
.brad_header{position:relative}
.brad_logo{display:block}
.brad_logo img{display:block;width:100%;height:auto;max-width:1003px;margin:0 auto}
.brad_left img{display:block;max-width:100%;height:auto}
.page_h1{font-size:20px;color:#053974;margin:0 0 14px;text-transform:capitalize}
.to_top{position:absolute;right:40px;bottom:50px;margin:0;font-size:13px}
.footer{border-top:1px solid #000;text-align:right;margin:0 30px 20px;padding:0 0 10px;
  font-size:10px;font-family:Verdana,Arial,sans-serif}
.footer a,.footer strong{color:#0A3B72;text-decoration:none;font-weight:bold}

/* embeds: never overflow their column */
.brad_right iframe,.brad_right img{max-width:100%}
.brad_right iframe[src*="soundcloud"]{width:100%;max-width:560px}
.youtube{position:relative;padding-bottom:56.25%;padding-top:35px;height:0}
.youtube iframe{position:absolute;inset:0;width:100%;height:100%}

/* the image menu collapses into a text menu below the point where it stops fitting */
.nav_toggle{display:none;align-items:center;gap:8px;margin:10px auto 14px;padding:9px 16px;
  background:#0a3b72;color:#fff;border:0;border-radius:6px;font:bold 14px/1 Verdana,sans-serif;
  cursor:pointer;-webkit-appearance:none}
.nav_toggle__bars{position:relative;display:block;width:18px;height:2px;background:#fff}
.nav_toggle__bars::before,.nav_toggle__bars::after{content:"";position:absolute;left:0;
  display:block;width:18px;height:2px;background:#fff}
.nav_toggle__bars::before{top:-6px}
.nav_toggle__bars::after{top:6px}
/* open state: the three bars collapse into an X */
.nav_toggle__bars,.nav_toggle__bars::before,.nav_toggle__bars::after{
  transition:transform .22s var(--nt-ease,ease),opacity .18s ease,top .22s ease}
.nav_toggle[aria-expanded="true"] .nav_toggle__bars{background:transparent}
.nav_toggle[aria-expanded="true"] .nav_toggle__bars::before{top:0;transform:rotate(45deg)}
.nav_toggle[aria-expanded="true"] .nav_toggle__bars::after{top:0;transform:rotate(-45deg)}
.mobile_nav{display:none}
.mobile_nav[hidden]{display:none!important}
.mobile_nav ul{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid #c2c2c2}
.mobile_nav li{margin:0}
.mobile_nav a{display:block;padding:14px 16px;text-align:left;font:bold 15px/1.2 Verdana,sans-serif;
  color:#0a3b72;border-bottom:1px solid #e3e3e3}
.mobile_nav a[aria-current="page"]{background:#f2f5f9}

@media (max-width:1023px){
  body{padding:0}
  .brad_wrapper .brad_inside{width:100%}
  /* stacked order: header, content, sidebar image, top link, footer.
     The image sits beside the copy at desktop; stacked it was landing ABOVE the
     content, so it became the first thing on the page. Moved below the copy. */
  .brad_wrapper .brad_inside{display:flex;flex-direction:column}
  .brad_wrapper .brad_header{order:1}
  .brad_wrapper .brad_right{order:2}
  .brad_wrapper .brad_left{order:3}
  .brad_wrapper .to_top{order:4}
  .brad_wrapper .footer{order:5}
  .brad_wrapper .brad_right{width:auto;float:none;padding:0 16px 30px}
  .brad_wrapper .brad_left{float:none;width:auto;padding:4px 16px 20px;text-align:center}
  .brad_wrapper .brad_left img{max-width:282px;margin:0 auto}
  .brad_wrapper .brad_right .home{width:auto}
  .yt_wrapper{display:block;width:auto;margin:0 0 26px}
  .to_top{position:static;text-align:center;margin:10px 0 18px}
  .footer{text-align:center;margin:0 16px 18px}
}
@media (max-width:859px){
  /* the source rule is .brad_wrapper .top_menu_wrapper -- match its specificity */
  .brad_wrapper .top_menu_wrapper{display:none}
  .brad_logo{padding:12px 16px 4px}
  .brad_logo picture{display:block}
  .brad_logo img{max-width:420px;margin:0 auto}
  .nav_toggle{display:flex}
  .mobile_nav:not([hidden]){display:block}
  .brad_right ul li{margin:12px 0}
  .brad_right iframe[width]{width:100%}
}
@media (max-width:600px){
  .home_top h1{font-size:21px;line-height:1.25}
}
@media (max-width:480px){
  .page_h1{font-size:18px}
  .home_top h1{font-size:18px}
  body{font-size:15px}
}
/* long unbreakable tokens (e.g. "Composer/Songwriter") pushed the page 2px wide */
h1,h2,h3,p,li,td,dd,dt,.brad_right{overflow-wrap:break-word;word-wrap:break-word}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* --- footer: copyright left, Design by BOA right --- */
/* center, not baseline: boa-credit.js makes the link an inline-flex box */
.footer,.brad_wrapper .footer{display:flex;flex-wrap:nowrap;justify-content:space-between;
  align-items:center;gap:12px;text-align:left;padding-top:10px}
/* same font, size and black as the copyright, at rest and on hover */
.footer .boa-credit,.footer .boa-credit:hover,.footer .boa-credit:focus-visible{
  margin-left:auto;text-align:right;white-space:nowrap;font:inherit;line-height:inherit;
  font-weight:normal;color:#000;text-decoration:none}

/* --- videos page: full-width two columns on desktop --- */
@media (min-width:1024px){
  .brad_wrapper .brad_right.brad_right--wide{width:auto;float:none;padding:0 30px}
  .brad_right--wide .yt_wrapper{width:calc(50% - 34px);margin:0 15px}
}

/* --- preload the nav hover images (no flicker on first hover) --- */
.brad_wrapper .top_menu_wrapper{position:relative}
.brad_wrapper .top_menu_wrapper::after{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;pointer-events:none;content:url(../images/menu_home_over.png) url(../images/menu_about_over.png) url(../images/menu_works_over.png) url(../images/menu_music_over.png) url(../images/menu_videos_over.png) url(../images/menu_holiday_songs_over.png) url(../images/menu_musical_services_over.png) url(../images/menu_contact_over.png)}

/* --- page fade (content only) --- */
@keyframes brFadeIn{from{opacity:0}to{opacity:1}}
@keyframes brFadeOut{from{opacity:1}to{opacity:0}}
.pf .brad_left,.pf .brad_right,.pf .to_top,.pf .footer{animation:brFadeIn .35s ease-out both}
.pf.pf-out .brad_left,.pf.pf-out .brad_right,.pf.pf-out .to_top,.pf.pf-out .footer{
  animation:brFadeOut .2s ease-in both}
@media (prefers-reduced-motion:reduce){
  .pf .brad_left,.pf .brad_right,.pf .to_top,.pf .footer{animation:none}
}

/* --- contact form --- */
.contact_form_wrap{max-width:560px;margin:34px auto 0;text-align:left;
  border-top:1px solid #c2c2c2;padding-top:24px}
.contact_form__h{font-size:16px;color:#053974;margin:0 0 16px;text-align:center}
.form_row{margin:0 0 16px}
.form_row label{display:block;font:bold 13px/1.3 Verdana,sans-serif;color:#0a3b72;margin-bottom:5px}
.form_row input,.form_row textarea{display:block;width:100%;padding:11px 12px;
  font:15px/1.35 Verdana,sans-serif;color:#222;border:1px solid #9aa8bb;border-radius:4px;
  background:#fff;-webkit-appearance:none}
.form_row textarea{resize:vertical;min-height:140px}
.form_row input:focus,.form_row textarea:focus{outline:none;border-color:#0a3b72;
  box-shadow:0 0 0 3px rgba(10,59,114,.18)}
.form_row input[aria-invalid="true"],.form_row textarea[aria-invalid="true"]{border-color:#b3261e}
.req{color:#b3261e}
.hp_row{position:absolute;left:0;top:-9999px;width:1px;height:1px;overflow:hidden}
.form_actions{margin:22px 0 0;text-align:center}
.form_submit{background:#0a3b72;color:#fff;border:0;border-radius:6px;cursor:pointer;
  font:bold 15px/1 Verdana,sans-serif;padding:14px 30px;min-height:44px;-webkit-appearance:none}
.form_submit:hover{background:#082d59}
.form_submit[disabled]{opacity:.6;cursor:progress}
.form_status{margin:16px 0 0;text-align:center;font:bold 13px/1.45 Verdana,sans-serif;min-height:1em}
.form_status.ok{color:#1a6b34}
.form_status.err{color:#b3261e}
.form_note{font:bold 15px/1.5 Verdana,sans-serif;padding:14px;border-radius:6px}
.form_note--ok{color:#1a6b34;background:#eaf5ee}
.form_note--err{color:#b3261e;background:#fdeceb}
.form_small{font:11px/1.5 Verdana,sans-serif;color:#666;text-align:center;margin:14px 0 0}

/* --- album page --- */
.album{max-width:760px;margin:0 auto 26px;text-align:left}
.album__art{float:left;margin:0 18px 12px 0;box-shadow:0 8px 6px -6px rgba(0,0,0,.6)}
.album__meta{overflow:hidden;line-height:1.55}
.album__tagline{margin-top:0}
.album__video{max-width:750px;margin:0 auto 8px}
.album__caption{font-size:13px;margin:6px 0 24px}
.credits{max-width:760px;margin:0 auto 30px;text-align:left;border:1px solid #c2c2c2;
  border-radius:6px;background:#fafbfc}
.credits summary{cursor:pointer;padding:13px 16px;font:bold 14px/1.2 Verdana,sans-serif;
  color:#0a3b72;list-style:none}
.credits summary::-webkit-details-marker{display:none}
.credits summary::after{content:" +";float:right}
.credits[open] summary::after{content:" \2212"}
.credits__list{margin:0;padding:4px 16px 18px;border-top:1px solid #e1e5ea}
.credit{display:flex;flex-wrap:wrap;gap:6px 12px;padding:7px 0;border-bottom:1px solid #eef0f3}
.credit:last-child{border-bottom:0}
.credit dt{flex:0 0 200px;font:bold 12px/1.5 Verdana,sans-serif;color:#0a3b72}
.credit dd{flex:1 1 260px;margin:0;font:12px/1.6 Verdana,sans-serif;color:#333}
@media (max-width:600px){
  .album__art{float:none;display:block;margin:0 auto 14px}
  .album__meta{text-align:center}
  .credit dt{flex:1 1 100%}
}