@charset "utf-8";

/* ==========================================================================
   JSSF responsive additions
   - Desktop layout is unchanged.
   - These rules apply only to screens 768px wide or narrower.
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* Base */
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-width: 0;
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden;
  }

  div#container,
  div#content,
  div#header,
  div#footer,
  div#main,
  div#sidebar,
  div#pickup,
  div.section {
    box-sizing: border-box;
  }

  div#container {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px;
  }

  img,
  video,
  iframe,
  object,
  embed {
    max-width: 100%;
    height: auto !important;
  }

  a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Header / logo */
  div#header {
    position: relative;
    height: auto;
    padding-top: 0;
  }

  div#header h1 {
    position: static;
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
  }

  /* logo.jpg is a two-row sprite (normal / hover).
     Keep the background at exactly two times the visible height so only
     the first logo is shown, even when the logo shrinks on a phone. */
  div#header h1#logo a,
  div#header h1#logo em {
    display: block;
    width: 365px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 365 / 65;
    background-size: 100% 200%;
    background-repeat: no-repeat;
    background-position: left top !important;
    overflow: hidden;
  }

  /* Global navigation: image-sprite menu -> readable mobile buttons */
  div#header ul#gnav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 8px 0;
    padding: 0;
  }

  div#header ul#gnav li {
    float: none;
    width: 50%;
    margin: 0;
    box-sizing: border-box;
  }

  div#header ul#gnav li:last-child {
    width: 100%;
  }

  div#header ul#gnav a,
  div#header ul#gnav em {
    display: block;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 10px 6px;
    box-sizing: border-box;
    background-image: none !important;
    border: 1px solid #b7dfe5;
    color: #075d69;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    white-space: normal;
  }

  div#header ul#gnav em,
  div#header ul#gnav li.selected a,
  div#header ul#gnav li.selected em {
    background: #04ACBC !important;
    color: #fff;
  }

  /* Link / Contact menu */
  div#header ul.menu {
    position: static;
    display: flex;
    width: 100%;
    margin: 0 0 12px 0;
    padding: 0;
  }

  div#header ul.menu li,
  div#header ul.menu li.link,
  div#header ul.menu li.contact {
    float: none;
    width: 50%;
    margin: 0;
    box-sizing: border-box;
  }

  div#header ul.menu a,
  div#header ul.menu em {
    display: block;
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 8px 6px;
    box-sizing: border-box;
    background-image: none !important;
    border: 1px solid #d8e8eb;
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
  }

  div#header ul.menu em,
  div#header ul.menu li.selected a,
  div#header ul.menu li.selected em {
    background: #eef8fa !important;
    color: #075d69;
    font-weight: bold;
  }

  /* Main visual and explanatory text */
  p#main {
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
    overflow: hidden;
  }

  p#main img {
    display: block;
    width: 100%;
    height: auto !important;
  }

  p#text {
    position: static;
    width: auto;
    margin: 0 0 18px 0;
    padding: 10px 12px;
    box-sizing: border-box;
    background: #f4fafb;
    color: #0E2841;
    font-size: 14px;
    line-height: 1.7;
  }

  p#text font {
    font-size: inherit !important;
  }

  p#text blink {
    font-size: 17px !important;
    font-weight: bold;
  }

  /* Main column / sidebar */
  div#main,
  body#home div#main {
    float: none;
    width: 100%;
    margin: 0 0 22px 0;
  }

  div#sidebar,
  body#home div#sidebar {
    float: none;
    width: 100%;
    margin: 0 0 22px 0;
  }

  div#main h2,
  div#sidebar h2,
  body#home div#main h2,
  body#home div#sidebar h2,
  body#home div#pickup h2,
  div#pickup h2 {
    width: auto;
    height: auto;
    margin: 0 0 14px 0;
    padding: 9px 10px;
    box-sizing: border-box;
    overflow: visible;
    background-image: none !important;
    background-color: #eef8fa;
    border-left: 5px solid #04ACBC;
    color: #075d69;
    font-size: 18px;
    line-height: 1.35;
    text-indent: 0;
  }

  div#main h3,
  body#home div#main h3,
  body#home div#sidebar h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  div.section,
  body#home div#main div.section,
  body#home div#sidebar div.section {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* Home page */
  div#scroll {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body#home div#main h5,
  body#home div#sidebar h5 {
    width: 100%;
    max-width: 460px;
    height: 45px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  body#home div#sidebar p.poster {
    margin-right: 0;
    text-align: left;
  }

  body#home div#sidebar p.sponsor {
    padding-right: 0;
    text-align: left;
  }

  /* Side menu */
  /* Subpages already use the hamburger navigation on phones, so the old
     in-page side Menu is redundant. Hide only that Menu; keep Pick up. */
  body#society div#sidebar div#sidemenu {
    display: none;
  }

  div#sidebar div#sidemenu ul {
    margin: 0 0 18px 0;
  }

  div#sidebar div#sidemenu ul li {
    margin: 0;
    padding: 0;
    background-image: none;
    border-right: 0;
  }

  div#sidebar div#sidemenu ul li a {
    width: auto;
    height: auto;
    min-height: 42px;
    padding: 9px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #b7dfe5;
  }

  /* Pick up */
  div#pickup,
  body#home div#pickup {
    clear: both;
    float: none;
    width: 100%;
    margin: 0 0 18px 0;
    padding: 8px;
    background-color: #248CCC;
  }

  div#pickup ul,
  body#home div#pickup ul {
    margin: 0;
    padding: 0;
  }

  div#pickup ul li,
  body#home div#pickup ul li {
    float: none;
    width: auto;
    margin: 0 0 7px 0;
    list-style: none;
  }

  div#pickup ul li a,
  body#home div#pickup ul li a {
    display: block;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 10px 10px 10px 34px;
    box-sizing: border-box;
  }

  body#home div#pickup > a {
    display: block;
    max-width: 100%;
    margin: 8px 0;
  }

  /* Lists */
  div#main ul,
  div#main ol {
    max-width: 100%;
  }

  div#main li {
    margin-left: 1.4em;
    overflow-wrap: anywhere;
  }

  div#main ul.icon li,
  div#main ul.pdf li {
    height: auto;
    min-height: 20px;
  }

  /* Tables: stack label/value cells vertically on phones */
  table {
    width: 100% !important;
    max-width: 100%;
    margin-top: 10px;
    border-spacing: 0;
    table-layout: fixed;
  }

  table tbody,
  table tr,
  table th,
  table td {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  table th,
  table td {
    display: block;
    padding: 8px 6px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  table th {
    background: #eef8fa;
    font-weight: bold;
  }

  table td {
    margin: 0;
  }

  /* Old inline alignment / fixed-size COI images */
  div[align="center"] {
    max-width: 100%;
  }

  /* Footer */
  div#footer {
    margin-top: 22px;
    padding-top: 12px;
  }

  p#top a {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 12px 0;
    background-image: none !important;
    color: #04ACBC;
    text-indent: 0;
    text-align: right;
  }

  div#footer dl#address {
    height: auto;
    margin: 10px 0 16px 0;
  }

  div#footer dl#address dt,
  div#footer dl#address dd,
  div#footer dl#address dd.publication {
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
    padding: 0;
    box-sizing: border-box;
  }

  div#footer dl#address dt {
    width: 165px;
    max-width: 100%;
    height: 17px;
    min-height: 17px;
    margin: 0 0 12px 0;
    background-size: 165px 17px;
    background-position: left top;
    background-repeat: no-repeat;
  }

  div#footer p#copyright {
    margin-bottom: 15px;
    overflow-wrap: anywhere;
  }
}

/* Very narrow phones */
@media screen and (max-width: 380px) {
  div#header ul#gnav li,
  div#header ul#gnav li:last-child {
    width: 100%;
  }

  div#header ul.menu {
    display: block;
  }

  div#header ul.menu li,
  div#header ul.menu li.link,
  div#header ul.menu li.contact {
    width: 100%;
  }
}

/* ========================================================================== 
   Hamburger navigation enhancement
   ========================================================================== */
.mobile-menu-toggle {
  display: none;
}

@media screen and (max-width: 768px) {
  div#header.mobile-menu-ready {
    padding-top: 0;
  }

  div#header.mobile-menu-ready h1 {
    width: calc(100% - 58px);
    min-height: 56px;
    margin-bottom: 8px;
  }

  div#header.mobile-menu-ready h1#logo a,
  div#header.mobile-menu-ready h1#logo em {
    width: 100%;
    max-width: 365px;
  }

  .mobile-menu-toggle {
    position: absolute;
    top: 7px;
    right: 0;
    z-index: 10;
    width: 50px;
    min-width: 50px;
    height: 48px;
    margin: 0;
    padding: 5px 4px 3px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #9fcfd6;
    border-radius: 5px;
    background: #fff;
    color: #075d69;
    font-family: inherit;
    cursor: pointer;
  }

  div#header.mobile-menu-ready .mobile-menu-toggle {
    display: flex;
  }

  .mobile-menu-toggle:focus {
    outline: 2px solid #04ACBC;
    outline-offset: 2px;
  }

  .mobile-menu-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 17px;
  }

  .mobile-menu-icon span {
    position: absolute;
    left: 0;
    display: block;
    width: 24px;
    height: 2px;
    background: #075d69;
    transition: transform .18s ease, top .18s ease, opacity .18s ease;
  }

  .mobile-menu-icon span:nth-child(1) { top: 0; }
  .mobile-menu-icon span:nth-child(2) { top: 7px; }
  .mobile-menu-icon span:nth-child(3) { top: 14px; }

  .mobile-menu-label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
  }

  div#header.nav-open .mobile-menu-icon span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }

  div#header.nav-open .mobile-menu-icon span:nth-child(2) {
    opacity: 0;
  }

  div#header.nav-open .mobile-menu-icon span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  div#header.mobile-menu-ready #mobile-nav-panel {
    display: none;
    clear: both;
    width: 100%;
    margin: 0 0 14px 0;
    padding: 0;
    border: 1px solid #b7dfe5;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
  }

  div#header.mobile-menu-ready.nav-open #mobile-nav-panel {
    display: block;
  }

  div#header.mobile-menu-ready #mobile-nav-panel ul#gnav,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu {
    position: static;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  div#header.mobile-menu-ready #mobile-nav-panel ul#gnav li,
  div#header.mobile-menu-ready #mobile-nav-panel ul#gnav li:last-child,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu li,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu li.link,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu li.contact {
    float: none;
    width: 100%;
    margin: 0;
  }

  div#header.mobile-menu-ready #mobile-nav-panel ul#gnav a,
  div#header.mobile-menu-ready #mobile-nav-panel ul#gnav em,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu a,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu em {
    display: block;
    width: 100%;
    min-height: 46px;
    height: auto;
    padding: 12px 14px;
    box-sizing: border-box;
    background-image: none !important;
    border: 0;
    border-bottom: 1px solid #d9ecef;
    color: #075d69;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
  }

  div#header.mobile-menu-ready #mobile-nav-panel ul.menu li:last-child a,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu li:last-child em {
    border-bottom: 0;
  }

  div#header.mobile-menu-ready #mobile-nav-panel ul#gnav li.selected a,
  div#header.mobile-menu-ready #mobile-nav-panel ul#gnav li.selected em,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu li.selected a,
  div#header.mobile-menu-ready #mobile-nav-panel ul.menu li.selected em {
    background: #04ACBC !important;
    color: #fff;
    font-weight: bold;
  }

  div#header.mobile-menu-ready #mobile-nav-panel ul.menu {
    border-top: 4px solid #eef8fa;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-icon span {
    transition: none;
  }
}


/* Mobile-only collapsible history lists (meeting page) */
.mobile-list-toggle {
  display: none;
}

@media screen and (max-width: 768px) {
  ul.mobile-collapsible-list.newest-first > li:nth-child(n+4) {
    display: none;
  }

  ul.mobile-collapsible-list.oldest-first > li {
    display: none;
  }

  ul.mobile-collapsible-list.oldest-first > li:nth-last-child(-n+3) {
    display: list-item;
  }

  ul.mobile-collapsible-list.mobile-expanded > li {
    display: list-item !important;
  }

  .mobile-list-toggle {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 14px 0 4px 0;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #9fcfd6;
    border-radius: 5px;
    background: #f2fafd;
    color: #075d69;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
  }

  .mobile-list-toggle:focus {
    outline: 2px solid #04ACBC;
    outline-offset: 2px;
  }
}


/* Compact mobile header: remove the blank space below the logo */
@media screen and (max-width: 768px) {
  div#header,
  div#header.mobile-menu-ready {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  div#header h1,
  div#header.mobile-menu-ready h1 {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 0;
  }

  div#header h1#logo a,
  div#header h1#logo em,
  div#header.mobile-menu-ready h1#logo a,
  div#header.mobile-menu-ready h1#logo em {
    margin: 0 !important;
    padding: 0 !important;
  }

  div#content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Keep only a small visual gap before the page banner. */
  div#content > p#main:first-child {
    margin-top: 4px !important;
  }
}

/* Mobile: the page main visual is only a desktop backdrop for p#text.
   Once p#text is placed in normal flow on phones, leaving this visual
   creates a large blank-looking area below the logo. Hide it on mobile. */
@media screen and (max-width: 768px) {
  div#content > p#main:first-child {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  div#content > p#text {
    margin-top: 4px !important;
  }
}