/* Federation Command responsive layer, 6 November 2026.
   Original desktop selectors are overridden ONLY at 1024 CSS pixels or less.
   Load this file after the original stylesheets. No browser/device sniffing. */
.fc-mobile-nav { display: none; }

@media screen and (max-width: 1024px) {
  body.websitebody {
    margin: 0;
    padding: 0 12px;
    background-color: #05090e;
    background-position: center top;
    background-attachment: scroll;
    font-size: 15px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
  }
  .websitebody .websitebanner,
  .websitebody .maincontent,
  .websitebody .footer {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    table-layout: fixed;
  }
  .websitebody .websitebanner { height: auto; }
  .websitebanner img { display: block; width: 100%; height: auto; }
  .websitebody .topnav,
  .websitebody .maincontent .leftnav { display: none !important; }
  .websitebody .rightcontent {
    width: 100% !important;
    padding: 14px 12px 20px;
    vertical-align: top;
    min-width: 0;
    overflow-wrap: anywhere;
    background: rgba(3, 8, 13, .9);
  }
  .rightcontent *, .fc-mobile-nav, .fc-mobile-nav * { box-sizing: border-box; }

  /* The original includes use tables for both page layout and content. */
  .rightcontent table {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }
  .rightcontent td,
  .rightcontent th {
    width: auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.6;
  }
  .rightcontent img,
  .rightcontent video {
    max-width: 100% !important;
    height: auto !important;
  }
  .rightcontent iframe,
  .rightcontent embed,
  .rightcontent object { max-width: 100%; }
  .rightcontent pre { max-width: 100%; overflow-x: auto; }
  .rightcontent .welcome { width: auto; height: auto; }
  .rightcontent p { text-align: left; }
  .rightcontent p.intro,
  .rightcontent p.v4text,
  .rightcontent p.CBtext { font-size: 15px; line-height: 1.65; }
  .rightcontent p.CBtitle { font-size: 17px; line-height: 1.4; }
  .rightcontent .head,
  .rightcontent .contenthead,
  .rightcontent .contentmid,
  .rightcontent .mainwelcome { width: auto; height: auto; min-height: 25px; }
  .rightcontent .roster-table {
    width: 100% !important;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rightcontent .roster-cell { padding: 6px; overflow-wrap: normal; }
  .rightcontent input:not([type="hidden"]),
  .rightcontent select,
  .rightcontent textarea { max-width: 100%; font-size: 16px; min-height: 44px; }

  /* Homepage slider: remove fixed 760px width, 440px height and left offsets.
     bxSlider itself already recalculates its slide positions on resize. */
  .rightcontent .bx-wrapper {
    width: 100% !important;
    max-width: 700px !important;
    height: auto !important;
    left: 0;
    top: 0;
    margin: 10px auto 44px;
  }
  .rightcontent .bx-wrapper .bx-viewport {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 680 / 404;
    left: 0;
  }
  .rightcontent .bx-wrapper img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 680 / 404;
    object-fit: contain;
  }
  .rightcontent .bx-wrapper .bx-pager,
  .rightcontent .bx-wrapper .bx-controls-auto {
    width: 100%;
    left: 0;
    bottom: -36px;
  }
  .rightcontent .bx-wrapper .bx-pager.bx-default-pager a {
    width: 16px;
    height: 16px;
    margin: 6px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  .rightcontent .bx-wrapper .bx-next { right: 10px; }
  /* Fallback if the old slider JavaScript is unavailable. */
  .rightcontent .welcome > .bxslider { list-style: none; padding: 0; margin: 12px 0; }
  .rightcontent .welcome > .bxslider > li:not(:first-child) { display: none; }
  .rightcontent .welcome > .bxslider img { display: block; width: 100%; }

  .rightcontent .fc-welcome { max-width: 700px; padding: 20px; }
  .rightcontent .fc-welcome__intro { font-size: 16px; line-height: 1.65; }
  .rightcontent .fc-welcome__feature p { font-size: 14px; line-height: 1.6; }
  .rightcontent .fc-welcome__actions a { min-height: 44px; font-size: 12px; }
  /* CuteNews wrappers and the old article with a fixed 200px text offset. */
  .rightcontent > div[style*="width: 95%"] {
    width: 100% !important;
    padding-left: 0 !important;
  }
  .rightcontent .cutenews a:link,
  .rightcontent .cutenews a:visited {
    width: auto;
    float: none;
    display: inline-block;
    font-size: 20px;
    line-height: 1.4;
  }
  .rightcontent p[style*="margin-left"] { margin-left: 0 !important; }
  .rightcontent img[align="left"] { float: none; display: block; margin: 12px auto; padding: 0 !important; }

  .websitebody .footer { height: auto; margin: 16px auto 0; }
  .websitebody .footer td {
    padding: 12px 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.7;
  }

  /* Independent navigation avoids the legacy hover-only dropdown code. */
  .fc-mobile-nav {
    display: block;
    position: relative;
    margin: 0 auto 10px;
    color: #d8e5ef;
    background: rgba(8, 17, 26, .96);
    border: 1px solid #344c60;
    border-radius: 3px;
    font: 15px/1.45 Arial, Helvetica, sans-serif;
  }
  .fc-mobile-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
  .fc-mobile-nav a,
  .fc-mobile-nav summary {
    min-height: 44px;
    padding: 12px;
    color: #dce8f2;
    text-decoration: none;
  }
  .fc-mobile-toolbar a { display: flex; align-items: center; justify-content: center; padding: 9px 10px; }
  .fc-mobile-toolbar .fc-mobile-brand {
    flex: 1;
    justify-content: flex-start;
    padding-left: 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
  }
  .fc-mobile-toolbar .fc-mobile-enlist {
    color: #f5f8fb;
    border: 1px solid #56748d;
    border-radius: 3px;
    background: linear-gradient(#344f65, #1a2d3c);
  }
  .fc-mobile-nav summary { cursor: pointer; }
  .fc-mobile-menu > summary { border-top: 1px solid #2b4052; }
  .fc-mobile-menu > summary span { float: right; color: #9db8ce; font-size: 13px; }
  .fc-mobile-nav ul { margin: 0; padding: 0; list-style: none; }
  .fc-mobile-menu > ul { border-top: 1px solid #344c60; }
  .fc-mobile-nav li { border-top: 1px solid #1e3040; }
  .fc-mobile-nav li:first-child { border-top: 0; }
  .fc-mobile-nav li a { display: block; }
  .fc-mobile-nav li details > ul { padding-left: 18px; background: #0a1520; }
  .fc-mobile-nav details[open] > summary { color: #fff; background: #1a3042; }
  .fc-mobile-nav a:hover { color: #fff; background: #233d52; }
  .fc-mobile-nav a:focus-visible,
  .fc-mobile-nav summary:focus-visible { outline: 2px solid #b4d8f3; outline-offset: -3px; }

  /* Full-width recruitment page has its own two-column layout. */
  body[data-fc-page="joinus"] .rightcontent > .v4content > tbody > tr > td:first-child { width: 35% !important; }
  body[data-fc-page="thismonth"] .rightcontent .content { margin: 0; }
  body[data-fc-page="thismonth"] #myGallery { width: 100% !important; max-width: 100%; }
}

@media screen and (max-width: 600px) {
  body.websitebody { padding: 0 6px; }
  .websitebody .rightcontent { padding: 10px 9px 18px; }
  .fc-mobile-toolbar { gap: 0; padding: 4px; }
  .fc-mobile-toolbar .fc-mobile-brand { font-size: 12px; letter-spacing: 0; }
  .fc-mobile-toolbar a { padding: 8px; font-size: 13px; }
  .rightcontent .fc-welcome { padding: 17px 14px; }
  .rightcontent .fc-welcome__masthead { gap: 8px; flex-wrap: wrap; }
  .rightcontent .fc-welcome__name { font-size: 9px; letter-spacing: 1px; }
  .rightcontent .fc-welcome h2 { font-size: 25px; }
  .rightcontent .fc-welcome__features { grid-template-columns: 1fr; gap: 14px; }
  .rightcontent .fc-welcome__feature + .fc-welcome__feature { border-left: 0; padding-left: 0; border-top: 1px solid #263a4b; padding-top: 13px; }
  .rightcontent .fc-welcome__actions { align-items: stretch; }
  .rightcontent .fc-welcome__actions a { flex: 1 1 100%; }
  .rightcontent table.transcom3 > tbody > tr > td,
  body[data-fc-page="joinus"] .rightcontent > .v4content > tbody > tr > td,
  body[data-fc-page="joinus"] .rightcontent > .v4content > tbody > tr > td:first-child {
    display: block;
    width: 100% !important;
    height: auto;
  }
  body[data-fc-page="joinus"] .rightcontent img[src*="joinus/poster"] { display: block; max-height: 300px; width: auto; max-width: 100%; margin: 0 auto 20px; }
  .websitebody .footer td { display: block; width: 100%; text-align: center; padding: 6px; }
}