/*
 * 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;
}

.resizable-textarea {
  width: 100%;
  box-sizing: border-box;
}

.soar_manage_member,
.soar_manage_leader {
  width: 100%;
}
.soar_manage_member table,
.soar_manage_leader table {
  width: 100% !important;
}

#col-colright {
  width: 200px;
}

/* Override 650px fixed desktop width on roster/full so tables fill #content. */
.contentff {
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

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%;
  box-sizing: border-box;
  table-layout: fixed;
}

/* Tablet and below */
@media (max-width: 980px) {
  /* Make container block so header colspan is irrelevant and full-width is guaranteed. */
  #container,
  #container > tbody,
  #container > tbody > tr > td,
  #scontainer,
  #scontainer > tbody,
  #scontainer > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Content-first ordering: flex column on the content row so #content appears before sidebars. */
  #container > tbody > tr,
  #scontainer > tbody > tr {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
  }
  #content {
    order: 1;
  }
  #colleft,
  #scolleft {
    order: 2;
  }
  #colright {
    order: 3;
  }

  /* Home page: right column has event/counter widgets — show before left nav. */
  body:has(#homepage) #colright {
    order: 2;
  }
  body:has(#homepage) #colleft {
    order: 3;
  }

  body {
    font-size: 16px;
    line-height: 1.45;
  }

  /* Account page Past Transactions: allow #content to scroll so the wide table isn't clipped. */
  #content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Account page Past Transactions: wide table — scroll horizontally instead of wrapping. */
  #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;
  }

  /* Include padding in image width so padded images don't overflow their container. */
  img {
    box-sizing: border-box;
  }

  /* Rounded theme: stretch background to full viewport height when content is short. */
  div.background {
    min-height: 100vh;
  }

  /* Rounded theme: hide CSS stepped rounded-corner elements on header and infobar.
     At tablet and below the sections span full width, making the steps look like artifacts.
     Replace with native border-radius on .headerf so the yellow box still appears. */
  .h1f, .h2f, .h3f, .h4f,
  .i1f, .i2f, .i3f, .i4f {
    display: none !important;
  }
  .headerf {
    border-radius: 8px;
    margin: 6px 8px;
  }

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

  /* Remove asymmetric desktop padding (15px left vs 5px right) and top padding on mobile. */
  .background,
  .sbackground {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  #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;
  }

  /* Roster: wide tables scroll horizontally at tablet. */
  .soar_manage_member,
  .soar_manage_leader {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }


  #colright {
    min-width: 0 !important;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top !important;
    padding-top: 0 !important;
  }
  #colright .block,
  #colright .block .title,
  #colright .block .content {
    box-sizing: border-box;
    max-width: 100%;
  }
  #content {
    box-sizing: border-box;
    vertical-align: top !important;
    padding-top: 0 !important;
  }
  #content .links {
    text-align: left !important;
  }
  .soar-file-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .soar-file-scroll table {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  #content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  #colleft {
    height: auto !important;
  }

  /* Header: flex row so left icon, title, right icon stay on one line at all widths.
     Must beat #container > tbody > tr > td specificity, so we chain the selector. */
  #container > tbody > tr > td#header,
  #header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  #headpicleft {
    position: static !important;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
    order: -1;
  }
  #headpicright {
    position: static !important;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
    order: 1;
  }
  #headtitle {
    flex: 1;
    width: auto !important;
    min-width: 0;
    font-size: 20px !important;
    padding: 0 8px !important;
    order: 0;
  }
  /* Themes with pic divs (default, rounded-2): center the title between the icons. */
  #header:has(#headpicleft) #headtitle {
    text-align: center !important;
  }
  /* Rounded theme: .headerff inner wrapper must not interfere with flex layout.
     .headerf is kept as a real block so border-radius applies (gives the rounded box). */
  .headerff {
    display: contents;
  }
  .headerf {
    display: flex !important;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  /* Remove fixed header height for all themes. */
  #header {
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  /* 3colfixed themes: background-image is on #header itself — clear the color so the
     image shows through. Other themes use a solid color and must not be overridden. */
  #header:has(.header-image) {
    background-color: transparent !important;
  }
  /* 3colfixed themes: background-image is on .header-image div (not #header).
     Maintain 900x120 aspect ratio at any viewport width. */
  .header-image {
    height: auto !important;
    aspect-ratio: 900 / 120;
    background-size: 100% 100%;
    background-position: left top;
    width: 100%;
  }
  #headtitle {
    margin-left: 0 !important;
  }

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

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

  /* Files/Links pages: unfloat folder box and stack file rows. */
  .folderadd {
    float: none !important;
    width: auto !important;
    margin-bottom: 12px;
  }
  /* Files/Links: let tables scroll horizontally inside #content (which already has overflow-x: auto).
     No overflow-x on the wrapper div — that would clip the background-image icon. */
  .soar_file,
  #soar_file {
    margin-left: 0 !important;
  }
  .soar_file table,
  #soar_file table,
  .soar_link table,
  #soar_link table {
    width: max-content !important;
    min-width: 100%;
    white-space: nowrap;
  }
  .soar_file table td,
  #soar_file table td,
  .soar_link table td,
  #soar_link table td {
    white-space: nowrap;
  }
  .soar_link {
    margin-left: 0 !important;
  }

  /* Files page: suppress spacer div between folder description and file list. */
  .term-end {
    display: none;
  }

  #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;
    box-sizing: border-box;
  }

  /* 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 !important;
    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;
  }

  /* Home page: right column has event/counter widgets — show before left nav. */
  body:has(#homepage) #colright {
    order: 2;
  }
  body:has(#homepage) #colleft {
    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;
  }

  /* Flag themes: #headtitle is a direct child of #header (no wrapper divs).
     White text ensures legibility over the flag background image. */
  #header > #headtitle {
    color: white !important;
    text-shadow: 2px 2px 6px rgba(0,0,64,0.95) !important;
  }

  #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,
     constrain via max-width rather than clipping #content — clipping #content
     would prevent horizontal scrolling on files/links/snews pages. */
  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;
  }

  /* 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;
  }

}

/* Rounded theme adjustments for mobile. */
@media (max-width: 760px) {
  /* Add left/right padding inside the content box — desktop uses 0 horizontal padding
     which looks fine at full width but cramped when the box fills the phone viewport. */
  .contentff {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }


  .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;
  }
}

/* Sidebar block alignment fixes on mobile.
   Float-right elements in event/signup blocks look misaligned when stacked. */
@media (max-width: 760px) {
  .block-event .event-subunit,
  .block-signup .event-subunit,
  .block-signup .event-restrict {
    float: none !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  /* Site counter: right-aligned by .soarcounterimages — left-align on mobile. */
  .soarcounterimages {
    text-align: left !important;
    margin-right: 0 !important;
  }

}


/* snews page: prevent date column from wrapping; let table scroll horizontally on mobile.
   The full /snews page outputs a plain <table cellpadding="2"> directly in #content.
   The homepage widget uses .snews_container > table.snews_recent. */
@media (max-width: 760px) {
  /* Homepage news ticker widget */
  .snews_container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  table.snews_recent {
    width: max-content !important;
    min-width: 100%;
    white-space: nowrap;
  }
  table.snews_recent td {
    white-space: nowrap;
  }

  /* Full /snews listing page — plain table directly in #content */
  #content > table[cellpadding="2"] {
    width: max-content !important;
    min-width: 100%;
    white-space: nowrap;
  }
  #content > table[cellpadding="2"] td {
    white-space: nowrap;
  }
}

/* smail/import admin pages: stack two-column fieldset rows vertically at tablet and below. */
@media (max-width: 980px) {
  #content td[width="50%"],
  #content td[width="45%"],
  #content td[width="55%"] {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* smail icon tables: collapse spacer TD on mobile so icons distribute evenly. */
@media (max-width: 760px) {
  fieldset table td[width="*"] {
    width: 0 !important;
    padding: 0 !important;
  }
}

/* Email list mod: stack List Members and Authorized Senders panels vertically. */
@media (max-width: 980px) {
  table.emailmemlist,
  table.emailmemlist tbody,
  table.emailmemlist tr,
  table.emailmemlist td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* stheme/select: theme picker flex layout — works at all sizes. */
.stheme-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}
.stheme-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.stheme-thumb-cell {
  flex-shrink: 0;
}
.stheme-thumb {
  display: block;
  max-width: 120px;
  height: auto !important;
}
#content .stheme-thumb {
  width: 120px !important;
  max-width: 120px !important;
}
.stheme-desc-cell {
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.themename {
  font-weight: bold;
  margin-bottom: 4px;
}

/* cslogo-1 pack theme: absolutely-positioned header elements at tablet and mobile.
   At desktop the #header is 110px tall and elements are placed by pixel offsets.
   At tablet/mobile we use a #headpacknum wrapper (added in PHP) to group the pack
   word + digits as a single flex item alongside the CS logo. */
@media (max-width: 980px) {
  /* Override the existing flex rule: wrap so city/state drops to its own row.
     Restore the gold background (#FFCC00) that the global transparent rule clears. */
  #container > tbody > tr > td#header:has(#headcs),
  #header:has(#headcs) {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 6px 8px !important;
    height: auto !important;
    position: relative !important;
    background-color: #FFCC00 !important;
  }

  /* Cub Scout logo: left flex item, 60% of header width. */
  #headcs {
    position: static !important;
    flex: 0 0 60% !important;
    order: 1;
  }

  /* Pack word + digits wrapper: right flex item, 20% of header width. */
  #headpacknum {
    position: static !important;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex: 0 0 20% !important;
    order: 2;
    margin-left: 0;
  }
  /* Inside the wrapper, reset each div to static inline. */
  #headpack,
  #headnum0,
  #headnum1,
  #headnum2,
  #headnum3,
  #headnum4 {
    position: static !important;
    display: inline-block !important;
    margin: 0 !important;
  }

  /* City/state: force onto its own row with flex-basis: 100%. */
  #headcitystate {
    position: static !important;
    order: 3;
    flex-basis: 100% !important;
    width: 100% !important;
    font-size: 18px !important;
    padding: 2px 0 4px 0 !important;
    background-color: transparent !important;
  }

  /* Optional photos: full-width below city/state. */
  #headpics {
    order: 4;
    float: none !important;
    flex-basis: 100% !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  #headpic1,
  #headpic2,
  #headpic3 {
    flex: 1 1 auto;
    max-height: 60px !important;
    width: auto;
    float: none !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;
  }
}