/* BEER Lab: beer-lab.org look for ORSEE (same header, photo band and footer as the
   lab's site; server-project website/public/site.css). The masthead is shared with the
   admin area; the band, footer, font and colours apply to the participant area only.
   Linked from tagsets/html_stuff.php with ?v= (bump it when this file changes: CSS is
   cached 4 h). VENDORED ADDITION: keep on ORSEE upgrade. */

/* ---------- masthead (both areas) ---------- */
.orsee .orsee-masthead.beer-masthead {
    background: #fff;
    border-bottom: 1px solid #e3e7ef;
    box-shadow: none;
    overflow: visible;
}
.orsee .beer-masthead::after { display: none !important; }
.orsee .beer-masthead .orsee-brand {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 84px;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}
.orsee .beer-masthead .orsee-brand-left { flex: 0 0 auto; max-width: none; padding: 0; }
.orsee .beer-masthead .orsee-brand-left:empty { display: none; }
.beer-logos { display: flex; align-items: center; gap: 16px; text-decoration: none; min-width: 0; }
.beer-logos .tec { height: 38px; width: auto; }
.beer-logos .bar { width: 1px; height: 40px; background: #e3e7ef; }
.beer-logos .beer { height: 52px; width: auto; }
.beer-menu { display: flex; gap: 28px; margin-left: auto; }
.beer-menu a {
    color: #1d2330; text-decoration: none; font-family: "Mulish", system-ui, sans-serif;
    font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    padding: 6px 0; border-bottom: 2px solid transparent;
}
.beer-menu a:hover, .beer-menu a[aria-current] { color: #0039a6; border-bottom-color: #0039a6; }
.orsee.orsee-area-admin .beer-masthead .orsee-brand { min-height: 70px; max-width: none; }
.orsee.orsee-area-admin .beer-logos .tec { height: 32px; }
.orsee.orsee-area-admin .beer-logos .beer { height: 44px; }
@media (max-width: 960px) {
    /* phones/tablets: the menu becomes a second header row that scrolls sideways */
    .orsee .beer-masthead .orsee-brand { flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
    .beer-menu { order: 3; flex: 0 0 calc(100% + 32px); margin: 0 -16px; padding: 0 12px; gap: 10px; justify-content: space-between;
        overflow-x: auto; scrollbar-width: none; border-top: 1px solid #e3e7ef; }
    .beer-menu::-webkit-scrollbar { display: none; }
    .beer-menu a { white-space: nowrap; font-size: .68rem; letter-spacing: .04em; padding: 11px 0 9px; }
}
@media (max-width: 385px) {
    .beer-menu { justify-content: flex-start; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
}

/* ---------- participant area: fonts, colours, radii ---------- */
.orsee.orsee-area-public {
    --orsee-radius: 6px;
    --font-header-bar: "Mulish", system-ui, sans-serif;
    --font-title: "Mulish", system-ui, sans-serif;
    --font-menu: "Mulish", system-ui, sans-serif;
    --font-ui: "Mulish", system-ui, sans-serif;
    --orsee-body_link: #0039a6;
    --orsee-body_alink: #002d82;
    --orsee-body_vlink: #0039a6;
    --orsee-panel_title_background: #0039a6;
    --orsee-list_header_background: #0039a6;
    --orsee-menu_item_highlighted_background: rgba(255, 255, 255, .16);
    background: #fff;
    font-family: "Mulish", system-ui, sans-serif;
}

/* photo band with the page title (markup: html__show_style_header) */
.orsee .beer-band {
    position: relative; color: #fff;
    background: #0b1f4d url("https://beer-lab.org/img/laboratorio-aula.jpg") center 60% / cover no-repeat;
}
.orsee .beer-band::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(7,20,47,.95) 0%, rgba(0,45,130,.86) 50%, rgba(0,57,166,.5) 100%);
}
.beer-wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.orsee .beer-band .beer-wrap { position: relative; padding-top: clamp(36px, 6vw, 72px); padding-bottom: clamp(36px, 6vw, 72px); }
.orsee .beer-eyebrow {
    margin: 0 0 12px; color: #9fc0ff; font-size: .8rem; font-weight: 800;
    letter-spacing: .22em; text-transform: uppercase;
}
.orsee.orsee-area-public .beer-band .orsee-title {
    display: block; margin: 0; color: #fff; text-align: left !important;
    font-family: "Mulish", system-ui, sans-serif; font-weight: 200; text-transform: none;
    font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: -.01em;
}
.orsee .beer-band .orsee-page-title-icon { display: none; }

/* shell: side menu + content on a white page */
.orsee.orsee-area-public .orsee-shell {
    max-width: 1160px; margin: 0 auto; padding: 40px 16px 64px; gap: 32px; box-sizing: border-box;
}
.orsee.orsee-area-public .orsee-main { background: transparent; padding: 0; border-radius: 0; }
.orsee.orsee-area-public .orsee-menu {
    border-radius: 6px; border: 0; box-shadow: none; margin-top: 0; top: 100px;
    padding: .7rem 0 .9rem;
}
.orsee.orsee-area-public .orsee-menu::before,
.orsee.orsee-area-public .orsee-menu::after { display: none; }
.orsee.orsee-area-public .orsee-menu .orsee-nav__section { border-radius: 0; box-shadow: none; font-weight: 800; }
.orsee.orsee-area-public .orsee-menu .orsee-nav__item { border-radius: 0; }

/* content panels: square, thin border, blue top edge (as the site's cards) */
.orsee.orsee-area-public .orsee-content > .orsee-panel,
.orsee.orsee-area-public .orsee-content > form > .orsee-panel {
    border-radius: 6px; border: 1px solid #e3e7ef; border-top: 4px solid #0039a6;
    box-shadow: 0 10px 30px rgba(11, 31, 77, .06);
}
.orsee.orsee-area-public .orsee-panel-title { border-radius: 0; letter-spacing: .01em; }
.orsee.orsee-area-public .button.is-primary,
.orsee.orsee-area-public .orsee-btn.is-primary { background: #0039a6; border-color: #0039a6; border-radius: 4px; font-weight: 700; }

/* footer (markup: html__beer_site_footer) */
.orsee .beer-footer { background: #07142f; color: #b9c3d8; font-size: .92rem; font-family: "Mulish", system-ui, sans-serif; line-height: 1.6; }
.beer-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.beer-flogos { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.beer-flogos img { filter: brightness(0) invert(1); width: auto; }
.beer-flogos .tec { height: 30px; }
.beer-flogos .beer { height: 44px; }
.orsee .beer-footer h4 { color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; margin: 6px 0 14px; }
.orsee .beer-footer ul { list-style: none; margin: 0; padding: 0; }
.orsee .beer-footer li { margin-bottom: 8px; }
.orsee.orsee-area-public .beer-footer a { color: #fff; text-decoration: none; font-weight: 300; }
.orsee.orsee-area-public .beer-footer a:hover { text-decoration: underline; }
.orsee .beer-footer address { font-style: normal; }
.beer-legal { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 16px; text-align: center; font-size: .8rem; color: #8894ad; }

/* ---------- phones (ORSEE's own mobile layout starts at 740px) ---------- */
@media (max-width: 740px) {
    .orsee .beer-masthead .orsee-brand { min-height: 62px; padding: 0 12px 0 4px; gap: 10px; }
    .orsee.orsee-area-public .beer-masthead .orsee-brand-left { flex: 0 0 auto; padding: 0; }
    .orsee.orsee-area-public .orsee-burger { width: 44px; height: 44px; margin: 0; }
    .beer-logos { gap: 10px; }
    .beer-logos .tec { height: 26px; }
    .beer-logos .bar { height: 30px; }
    .beer-logos .beer { height: 36px; }
    .orsee.orsee-area-public .beer-band .orsee-title { display: block; font-size: 1.9rem; }
    .orsee .beer-eyebrow { letter-spacing: .14em; font-size: .72rem; }
    /* ORSEE's phone title bar repeats the band's title: keep only its action buttons */
    .orsee.orsee-area-public .orsee-public-pagebar-title { display: none; }
    .orsee .beer-band .beer-wrap { padding-top: 28px; padding-bottom: 28px; }
    .orsee.orsee-area-public .orsee-shell { padding: 20px 8px 32px; }
    /* the burger menu opens right under the header (the photo band would push it down) */
    .orsee.orsee-area-public.orsee-m-nav-open .orsee-menu {
        position: fixed; top: 63px; left: 0; right: 0; margin: 0; border-radius: 0;
        max-height: calc(100vh - 63px); overflow-y: auto; z-index: 1200;
    }
    .beer-footer-cols { grid-template-columns: 1fr; gap: 28px; }
    /* room for ORSEE's bottom tab bar */
    .orsee .beer-footer { padding-bottom: 72px; }
}