/* Moving Music site header and footer, Nov 2026.
   From the homepage prototype (v3.79) and the inner-page base the prototype pages share (site.css).
   Loaded on every page: the homepage and garlic page (mm-default.hbs) and every Edition page (default.hbs).
   Sizes are in px because Edition sets the root font size to 62.5%, so a rem on an Edition page is 10px, not 16px.
   Classes carry the mm- prefix so Edition's CSS, the CSS moved out of code injection, and the code-injection
   scripts that look for .gh-head and .gh-foot leave the header and footer alone. */

.mm-head,.mm-foot,.mm-sticker{
  --mm-paper:#f3ede1;
  --mm-card:#fbf8f2;
  --mm-rule-dark:#8d8068;
  --mm-ink:#231f1b;
  --mm-ink-2:#5a5248;
  --mm-red:#8a2f22;
  --mm-red-dark:#6f2419;
  --mm-wordmark:#54748D;
  --mm-sticker:#6A744C;
  --mm-serif:"EB Garamond",Georgia,serif;
  --mm-sans:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --mm-display:"Alegreya Sans",sans-serif;
  --mm-display-serif:"Alegreya",serif;
}
.mm-head,.mm-head *,.mm-foot,.mm-foot *,.mm-sticker,.mm-sticker *{box-sizing:border-box}
.mm-wrap{max-width:1120px;margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}

/* Header */
.mm-head{background:var(--mm-paper);color:var(--mm-ink);font-family:var(--mm-sans);font-size:16.32px;line-height:1.55;-webkit-font-smoothing:antialiased}
.mm-head a{color:inherit}
.mm-head a:hover,.mm-foot a:hover,.mm-sticker:hover{opacity:1}
.mm-head-inner{display:flex;align-items:flex-start;gap:22.4px;padding-top:18px;padding-bottom:14px}
.mm-nav{margin-left:auto}
.mm-lockup{text-decoration:none;line-height:1.1;display:flex;flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
.mm-lockup .l1{font-family:var(--mm-display);font-weight:700;letter-spacing:.14em;font-size:21.6px;color:var(--mm-wordmark)}
.mm-lockup .l2{font-family:var(--mm-display-serif);font-style:italic;font-weight:500;font-size:18.4px;color:var(--mm-ink-2)}
.mm-nav{display:flex;align-items:center;gap:22.4px;flex-wrap:wrap;justify-content:flex-end;font-family:var(--mm-display)}
.mm-nav a.menu{text-transform:uppercase;letter-spacing:.08em;font-size:15.2px;text-decoration:none;font-weight:600}
.mm-nav a.menu[aria-current="page"]{color:var(--mm-red)}
.mm-nav a{transition:color .15s}
.mm-nav a:hover,.mm-nav a:focus-visible{color:var(--mm-red)}
.mm-sub{display:inline-block;flex:none;padding:9.6px 17.6px;border-radius:999px;background:var(--mm-red);color:#fff;text-decoration:none;font-weight:700;font-size:15.2px;font-family:var(--mm-display);line-height:1.1}
.mm-sub:hover{background:var(--mm-red-dark)}
/* The CSS moved out of code injection colors any signed-in [data-portal="account"] link teal; keep the pill white on red. */
.mm-head .mm-sub[data-portal]{color:#fff!important;font-weight:700!important;letter-spacing:normal!important}

/* Strapline under the lockup */
.mm-brand{display:flex;flex-direction:column;gap:8px}
.mm-strap{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.6px 9.6px;font-family:var(--mm-serif);font-size:17.28px;color:var(--mm-ink-2)}
.mm-strap a{text-decoration:none;color:var(--mm-ink)}
.mm-strap a:hover{color:var(--mm-red)}
.mm-strap .sep{color:var(--mm-rule-dark)}

/* Log in pill for existing members (v3.76): visitors only; signed-in members get Account */
.mm-login{display:inline-block;flex:none;padding:8.1px 16.1px;border:1.5px solid var(--mm-ink);border-radius:999px;background:transparent;color:var(--mm-ink);text-decoration:none;font-family:var(--mm-display);font-weight:700;font-size:15.2px;line-height:1.1;transition:color .15s,border-color .15s}
.mm-nav a.mm-login:hover,.mm-nav a.mm-login:focus-visible,.mm-login:hover,.mm-login:focus-visible{color:var(--mm-red);border-color:var(--mm-red)}
.mm-login--head{display:none}

/* Free-pick sticker: in the header's top-right corner on the homepage; on phones it hangs under the songbook cards */
.mm-sticker{display:block;position:absolute;right:-8px;top:-58px;width:112px;height:112px;border:0;background:none;padding:0;cursor:pointer;text-decoration:none;transform:rotate(-7deg);transition:transform .15s;z-index:5}
.mm-sticker:hover{transform:rotate(-3deg) scale(1.03)}
.mm-sticker svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--mm-sticker)}
.mm-sticker .st-text{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:16px;text-align:center;color:var(--mm-card);font-family:var(--mm-sans);font-size:8px;line-height:1.2;font-weight:500}
.mm-sticker u{display:block;margin-top:3px;font-weight:700;color:var(--mm-card);text-decoration-color:var(--mm-card);text-underline-offset:2px}

/* Footer */
.mm-foot{padding:30px 0 46px;color:var(--mm-ink-2);font-family:var(--mm-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.mm-foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.mm-foot a{color:inherit;text-decoration:none;margin-right:19.2px}
.mm-foot a:hover{color:var(--mm-red)}
.mm-foot strong{font-weight:700}

/* Homepage header for visitors (v3.68): the free-pick sticker takes the place of the Sign up button */
.mm-sticker.mm-sticker--head{position:relative;right:auto;top:auto;bottom:auto;flex:none;width:104px;height:104px;margin:-12px 0 -56px 16px}
@media (min-width:601px){.mm-sticker.mm-sticker--grid{display:none}}

/* Signed-in free members (Nov 9, 2026): red Support the songbook at the top right with an outlined
   Free Account under it, so the wider pair doesn't push the menu onto a second row on desktop */
@media (min-width:1121px){
  .mm-head--free .mm-head-inner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand nav sub" "brand . login";column-gap:22.4px;row-gap:8px;align-items:start}
  .mm-head--free .mm-brand{grid-area:brand}
  .mm-head--free .mm-nav{grid-area:nav;margin-left:0;align-self:center}
  .mm-head--free .mm-sub{grid-area:sub}
  .mm-head--free .mm-login--nav{display:none}
  .mm-head--free .mm-login--head{display:inline-block;grid-area:login;justify-self:end}
}

/* Below 1120px the header becomes a grid, as on the homepage and garlic page prototypes:
   lockup and strapline at the left, Sign up (or the sticker, or Account) at the right, the menu on its own row */
@media (max-width:1120px){
  .mm-head-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand sub" "nav nav";align-items:start;gap:11.2px 16px}
  .mm-brand{grid-area:brand}
  .mm-sub{grid-area:sub;justify-self:end;align-self:start}
  .mm-nav{grid-area:nav;margin-left:0;justify-content:flex-start;gap:17.6px}
  .mm-head--sticker .mm-head-inner{grid-template-areas:"brand head" "nav head"}
  .mm-sticker.mm-sticker--head{grid-area:head;margin:-8px 0 0 0;align-self:start}
}
@media (max-width:900px){
  .mm-lockup .l1{font-size:18.4px;letter-spacing:.1em}
  .mm-lockup .l2{font-size:16px}
  .mm-sticker{width:136px;height:136px;top:-96px;right:0;transform:rotate(-6deg)}
  .mm-sticker .st-text{font-size:9.28px;padding:20px}
}
/* Phones: Log in sits under Sign up at the top right, so the lockup keeps its one line; on the homepage the sticker moves under the cards */
@media (max-width:600px){
  .mm-sub{padding:7.2px 12.8px;font-size:13.6px}
  .mm-lockup{gap:7.2px}
  .mm-lockup .l1{font-size:clamp(12.48px,3.75vw,14.4px);letter-spacing:.07em}
  .mm-lockup .l2{font-size:clamp(12px,3.5vw,13.6px)}
  .mm-strap{font-size:16px}
  .mm-sticker{width:124px;height:124px;top:auto;bottom:-30px;right:10px}
  .mm-sticker .st-text{font-size:8.32px;padding:18px;line-height:1.2}
  .mm-sticker u{margin-top:3px}
  .mm-login--nav{display:none}
  .mm-login--head{display:inline-block;grid-area:login;justify-self:end;align-self:start;padding:5.7px 11.3px;font-size:13.6px}
  .mm-head-inner{grid-template-areas:"brand sub" "brand login" "nav nav";row-gap:6px}
  .mm-head-inner .mm-nav{margin-top:5px}
  .mm-head--sticker .mm-head-inner{grid-template-areas:"brand login" "nav nav";row-gap:11.2px}
  .mm-head--sticker .mm-head-inner .mm-nav{margin-top:0}
  .mm-sticker.mm-sticker--head{display:none}
}