/*
 * Responsive retrofit layer for legacy Drupal 5 default theme.
 * Keep desktop behavior intact and only adjust at smaller breakpoints.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* Make fixed-width spacer images non-blocking on small screens. */
img[width="208px"],
img[width="208"] {
  max-width: 100%;
  width: auto;
  height: auto;
}

table {
  max-width: 100%;
}

#container,
#scontainer {
  width: 100%;
}

/* Tablet and below */
@media (max-width: 980px) {
  body {
    font-size: 16px;
    line-height: 1.45;
  }

  .width,
  .minwidth,
  .minccontainer,
  .mincontainer,
  .background,
  .sbackground {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  /* Equalize the asymmetric desktop padding (15px left vs 5px right). */
  .background,
  .sbackground {
    padding-left: 5px;
    padding-right: 5px;
  }

  #header,
  #headerbottom,
  #footer,
  #content,
  #colleft,
  #colright,
  #scolleft {
    width: auto;
  }

  /* Let the sidebar grow with its content instead of clipping at 500px. */
  #colleft,
  #colright,
  #scolleft {
    height: auto;
    min-height: 0;
  }

  /* Drop the decorative silhouette background that bleeds through stacked content. */
  #container {
    background-image: none;
  }

  #content {
    padding: 0 12px 12px;
    box-sizing: border-box;
  }

  #colleft,
  #colright,
  #scolleft {
    padding: 12px;
    box-sizing: border-box;
  }

  .headpicleftimage,
  .headpicrightimage {
    max-height: 72px;
    width: auto;
  }
}

/* Phone */
@media (max-width: 760px) {
  /* Collapse legacy table-based layouts into stacked blocks.
     Scoped to direct children so nested content tables (calendar, etc.) are unaffected. */
  #container,
  #container > tbody,
  #container > tbody > tr > td,
  #container > tr > td,
  #scontainer,
  #scontainer > tbody,
  #scontainer > tbody > tr > td,
  #scontainer > tr > td {
    display: block;
    width: 100% !important;
  }

  /* Each layout-table row becomes a flex column so we can reorder content vs. sidebar. */
  #container > tbody > tr,
  #container > tr,
  #scontainer > tbody > tr,
  #scontainer > tr {
    display: flex;
    flex-direction: column;
    width: 100% !important;
  }

  /* Put main content above the left sidebar on mobile. */
  #content {
    order: 1;
  }
  #colleft,
  #scolleft {
    order: 2;
  }
  #colright {
    order: 3;
  }

  /* Splash header uses an inner <table width="100%"> for left/title/right. */
  #header > table,
  #header > table tbody,
  #header > table tr,
  #header > table td {
    display: block;
    width: 100% !important;
    text-align: center;
  }

  #header,
  #headerbottom,
  #footer {
    display: block;
  }

  #colleft,
  #colright,
  #scolleft {
    margin-top: 8px;
  }

  #headtitle,
  #sheadtitle {
    font-size: 1.25rem;
    line-height: 1.2;
    padding: 8px 10px;
  }

  #sheadpicleft,
  #sheadpicright {
    text-align: center;
  }

  .breadcrumb,
  .messages {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* Drupal admin tabs (view / edit / signup / etc.) overflow on narrow widths.
     Scroll the OUTER wrapper so the inner ul.tabs can let tab borders bleed
     above its baseline (that's the visual "tab sticking up" effect).
     The selector :not(ul) avoids matching the inner ul.tabs.primary. */
  div.tabs:not(ul) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 4px;
  }
  div.tabs ul.primary,
  div.tabs ul.secondary {
    white-space: nowrap;
    overflow: visible;
  }

  .page-content,
  .node,
  .block {
    max-width: 100%;
    box-sizing: border-box;
  }

  .soarlink {
    font-size: 0.9rem;
  }

  /* Event calendar: keep the 7-column grid intact and scroll horizontally
     instead of letting the global table { max-width: 100% } collapse it. */
  .event-calendar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .event-calendar table {
    max-width: none;
    width: auto;
    min-width: 560px;
  }

  /* Calendar month/year jump form: the inline desktop style applies a
     padding-left:330px to push it past the calendar header. On phones it
     just shoves the dropdowns off-screen to the right. */
  .caljumpdiv {
    padding-left: 0 !important;
    margin-bottom: 8px;
  }
  .caljumpdiv .cjmonth {
    max-width: 45%;
  }

  /* Signup admin "Event Registration Guide" yellow box (signup.module emits
     it as an inline-styled float-right div). On phones, unfloat it so it
     stacks above the form rather than overflowing the viewport. */
  div[style*="background-color: yellow"][style*="float: right"] {
    float: none !important;
    width: auto !important;
    margin: 0 0 12px 0 !important;
  }

  /* Form items: prevent labels and descriptions from being cut off on the right. */
  .form-item,
  .form-item .description {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  /* fieldset ignores overflow in some browsers due to special UA rendering,
     so we clip at #content instead and let the fieldset be constrained
     by its containing block rather than by its own overflow property. */
  #content {
    overflow-x: hidden;
  }
  fieldset {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Account page: two-column Details/Options layout table inside form.
     Stack vertically on mobile for better readability. */
  form > div > table {
    display: block;
    width: 100%;
  }
  form > div > table tbody {
    display: block;
  }
  form > div > table tr {
    display: block;
    width: 100%;
  }
  form > div > table td {
    display: block;
    width: 100% !important;
  }

  /* Account page Options fieldset: restore table display and distribute buttons evenly. */
  fieldset > table {
    display: table !important;
  }
  fieldset > table tbody {
    display: table-row-group !important;
  }
  fieldset > table tr {
    display: table-row !important;
  }
  fieldset > table td,
  fieldset > table th {
    display: table-cell !important;
  }

  /* Account page Options: distribute Upgrade/Renew/Cancel evenly across the fieldset. */
  #sacct_cp fieldset > table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  #sacct_cp fieldset > table td {
    width: auto !important;
    text-align: center !important;
  }

  /* Account page Past Transactions: wide table — scroll horizontally instead of wrapping. */
  #sacct-past-transactions {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #sacct-past-transactions > table {
    display: table !important;
    table-layout: auto !important;
    width: auto !important;
    min-width: 500px;
    white-space: nowrap;
  }
  #sacct-past-transactions > table td,
  #sacct-past-transactions > table th {
    white-space: nowrap;
    width: auto !important;
    text-align: left !important;
  }

  /* Event Costs and other data tables with wide columns inside fieldsets
     need horizontal scroll. Use overflow on the fieldset instead. */
  fieldset {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Force all form elements and their containers to respect the viewport. */
  form,
  #content form,
  .form-item,
  .form-item label,
  .form-item .description,
  .container-inline {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* drupal.css forces .container-inline div { display: inline }, which
     prevents description text inside fieldsets from wrapping. Scope this
     override to fieldset context only — time picker and other intentional
     inline groups (e.g. event edit form) must remain inline. */
  fieldset .container-inline .description,
  fieldset .container-inline > .form-item > .description {
    display: block !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* drupal.css sets white-space:nowrap on .form-item inside tr.odd/tr.even. */
  tr.odd .form-item,
  tr.even .form-item,
  .form-item .description,
  tr.odd .form-item .description,
  tr.even .form-item .description,
  fieldset .description {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Wide text inputs (e.g. size="60") blow out narrow fieldsets. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Files page: .folderadd box is float:right with fixed width 130px from
     style.css — unfloat it so it stacks above the file listing. */
  .folderadd {
    float: none !important;
    width: auto !important;
    margin-bottom: 12px;
  }

  /* Email list tables (Manual/Automated/Event Email Lists) on /smail pages.
     These are direct children of #content. Restore table structure and allow
     horizontal scroll by making the table auto-width with overflow. */
  #content > table {
    display: table;
    width: auto;
    min-width: 100%;
  }
  #content > table tbody {
    display: table-row-group;
  }
  #content > table tr {
    display: table-row;
  }
  #content > table td,
  #content > table th {
    display: table-cell;
  }

  /* Wrap #content itself in a scroll container for tables that are wider than viewport. */
  #content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Data tables (Adult Leaders, Scouts, etc.) inside #soar_manage_member.
     These are multi-column tables that don't fit phone widths. Allow horizontal
     scroll so all columns remain visible and readable. */
  #soar_manage_member {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #soar_manage_member table {
    min-width: 600px;
  }

  /* Roster page: two-column table (Troop | Patrols) inside #smember_roster.
     Stack columns vertically and keep icon+label pairs on one line. */
  #smember_roster table {
    display: block;
    width: 100% !important;
  }
  #smember_roster table tbody,
  #smember_roster table tr {
    display: block;
    width: 100%;
  }
  #smember_roster .main > table > tbody > tr > td,
  #smember_roster .main > table > tr > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* Keep icon + link text on one line within each roster entry. */
  #smember_roster img[align="middle"] {
    vertical-align: middle;
  }

  /* Each file/link row is its own <table> inside #soar_file / #soar_link
     with a fixed-width first <td> for the icon+title. Stack vertically. */
  #soar_file table,
  #soar_link table {
    display: block;
    width: 100% !important;
  }
  #soar_file table tbody,
  #soar_file table tr,
  #soar_link table tbody,
  #soar_link table tr {
    display: block;
    width: 100%;
  }
  #soar_file table td,
  #soar_link table td {
    display: block;
    width: 100% !important;
    padding: 2px 0;
  }
}

/* Rounded theme: .contentff has a fixed width:650px and margin:0 10px, and .contentf
   provides the white background — stretch both to fill the viewport on mobile so the
   green theme background does not bleed through on the sides or when scrolling.
   Also collapse the CSS rounded-corner step elements (.n1f–.n4f) which use
   side margins to create the stepped corner effect — on mobile these just create
   green gaps on left and right. */
@media (max-width: 760px) {
  .contentff {
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .contentf {
    width: 100%;
    box-sizing: border-box;
  }
  .n1f, .n2f, .n3f, .n4f {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Very small devices */
@media (max-width: 420px) {
  body {
    font-size: 15px;
  }

  #content,
  #colleft,
  #colright,
  #scolleft {
    padding-left: 10px;
    padding-right: 10px;
  }

  .comment {
    margin: 1em 10px 0 10px;
  }
}