/* ============================================================
   restore-mobile.css
   Responsive overrides for the archived AnxietyBC "anxiety_bc"
   theme (fixed 1002px floated layout, ~2012). Added during the
   restore so the legacy pages are usable on phones/tablets.

   Desktop layout is untouched: everything here is gated behind
   a max-width media query and only neutralises fixed widths /
   floats so the columns stack and nothing overflows the screen.
   ============================================================ */

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

  /* --- kill horizontal scroll from any fixed-width straggler --- */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* --- structural wrappers: go fluid, stop floating --- */
  #background,
  #container,
  #outer_wrapper,
  #wrapper,
  #inner_wrapper,
  #super_inner_wrapper,
  #absolutenator,
  #content_wrapper,
  #content_inner_wrapper,
  #page_topper,
  #footer,
  #footer_background,
  #inner_footer {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box;
  }

  /* tiled side/top background images assume a 1002px box — drop them
     so they don't show seams on a narrow, taller column */
  #background,
  #wrapper,
  #inner_wrapper {
    background-image: none !important;
  }

  /* --- header / navigation: let the sprite blocks wrap --- */
  #navigation,
  #secondary_navigation,
  #utilities,
  #logo,
  #search,
  #search_block_outerwrapper {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  #secondary_navigation { overflow: visible !important; }
  #secondary_navigation ul.menu li,
  #navigation ul.menu li { float: none; display: inline-block; }

  /* --- content columns: stack full width --- */
  #column_one,
  #column_two,
  #column_three {
    width: 100% !important;
    float: none !important;
    overflow: visible !important;
  }
  #column_one_pad   { margin: 16px !important; }
  #column_two_pad   { margin: 16px !important; }
  #column_three_pad { margin: 16px !important; }

  /* hide the empty/decorative left rail on interior pages */
  #column_one:empty { display: none !important; }

  /* --- media never overflows the viewport --- */
  img, object, embed, iframe, video {
    max-width: 100% !important;
    height: auto;
  }
  /* fixed-size iframes (YouTube etc.) — keep aspect, fit width */
  iframe { width: 100% !important; }

  /* --- the pinned translucent footer eats the screen on mobile;
         let it sit in normal flow instead --- */
  #footer_wrapper {
    position: static !important;
    width: 100% !important;
    opacity: 1 !important;
    filter: none !important;
    -moz-opacity: 1 !important;
  }
  #footer, #footer_wrapper { height: auto !important; }
  #footer {
    background-image: none !important;
    background: #000 !important;
    padding: 12px 0 !important;
  }
  #footer #copyright,
  #footer #credits { display: block !important; position: static !important;
                     width: auto !important; float: none !important;
                     text-align: center !important; color: #ccc !important; }
  #footer #credits { background-image: none !important; }

  /* the "Copyright …" line in #inner_footer is a hard 501px box that
     alone forces the page wider than a phone — make it fluid */
  #inner_footer { height: auto !important; background-image: none !important; }
  #copyright, #credits {
    width: auto !important; max-width: 100% !important; float: none !important;
    text-align: center !important; background-image: none !important;
    padding: 10px 12px !important;
  }
  #copyright strong { margin: 0 !important; }

  /* ===========================================================
     Homepage (layout_index) specifics
     =========================================================== */
  #index_header_wrapper {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    background-image: none !important;
  }
  #index_header,
  #index_news,
  #header_image_wrapper,
  #index_sprites_wrapper,
  #search,
  #newsletter_sigunup_outerwrapper,
  #app_icon_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    height: auto !important;
    box-sizing: border-box;
  }
  #header_image_wrapper { margin: 12px auto !important; text-align: center; }
  #index_news,
  #index_faq { width: 100% !important; float: none !important; }
  #index_news .index-news-story-wrapper,
  #index_news .index-news-story-more,
  #index_news #featured-news,
  #index_news #featured-news .index-news-story-wrapper,
  #index_news #featured-news .index-news-story-more {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* index sprite nav: let the three 210px icons stack/wrap */
  #index_sprites_wrapper { overflow: visible !important; }
  #index_sprites { margin: 10px !important; }
  #index_sprites ul.menu li { float: none !important; display: block; margin: 0 auto; }
  #index_sprites ul.menu li a { margin: 0 auto !important; }

  /* ===========================================================
     Interior layout: main content + breadcrumb go fluid
     =========================================================== */
  .breadcrumb { width: auto !important; float: none !important; margin: 9px 16px !important; }
  .news-page-wrapper,
  .news-page-wrapper .news-page-title,
  .news-page-wrapper .news-page-date,
  .news-page-wrapper .news-page-body,
  .news-page-wrapper .news-page-more {
    width: auto !important;
    float: none !important;
  }

  /* resources / sidebar link lists: full-width tappable rows */
  #resources_wrapper ul.menu li a {
    width: auto !important;
    float: none !important;
    display: block !important;
  }

  /* generic guard: any element that hard-codes a width wider than a
     phone is reined in (cheap, only applies inside the content area) */
  #content_wrapper table { max-width: 100% !important; }
}

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

  /* ===========================================================
     Secondary category nav (Resources / Parents / Adults / …)
     Desktop renders these as 100px-wide right-floated gradient
     chips. On mobile, stack them as a clean full-width list of
     tappable buttons; keep the Superfish drop-downs collapsed.
     =========================================================== */
  #secondary_navigation {
    width: 100% !important; height: auto !important;
    float: none !important; overflow: visible !important;
    padding: 0 !important;
  }
  #secondary_navigation ul.menu { display: block !important; }
  #secondary_navigation ul.menu li,
  #secondary_navigation ul.menu li.first {
    display: block !important; float: none !important; width: 100% !important;
  }
  #secondary_navigation ul.menu li div { margin: 0 0 8px 0 !important; }
  #secondary_navigation ul.menu li a,
  #secondary_navigation ul.menu li.first a,
  #secondary_navigation ul.menu li.list1 a,
  #secondary_navigation ul.menu li.list2 a,
  #secondary_navigation ul.menu li.list3 a,
  #secondary_navigation ul.menu li.list4 a,
  #secondary_navigation ul.menu li.list5 a,
  #secondary_navigation ul.menu li.last a {
    width: auto !important;
    padding: 13px 14px !important;
    text-align: center !important;
    background-image: none !important;     /* drop the divider gif */
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  /* never expand the nested drop-downs inline on touch */
  #secondary_navigation ul.menu ul.menu { display: none !important; }

  /* --- right-column blocks: FAQ / newsletter / here-to-help --- */
  #index_faq { width: 100% !important; float: none !important; }
  #newsletter_sigunup_outerwrapper {
    width: auto !important; float: none !important;
    margin: 12px 16px !important;
    background-image: none !important;     /* fixed-offset logo bg */
    box-sizing: border-box;
  }
  #newsletter_sigunup_form input.form-text,
  #search_block_outerwrapper input.form-text {
    width: 100% !important; box-sizing: border-box;
  }
  #here_to_help_icon { text-align: center !important; }
  #here_to_help_icon img { float: none !important; }

  /* --- "What's New" news list: stop the fixed widths/nowrap --- */
  #index_news,
  #index_news .view,
  #index_news .view-content,
  #index_news .views-row {
    width: auto !important; max-width: 100% !important; float: none !important;
  }
  #index_news .index-news-story-title,
  #index_news .index-news-story-title a {
    white-space: normal !important; float: none !important; width: auto !important;
  }

  /* --- long words / URLs wrap instead of forcing the page wide --- */
  #content_wrapper, #content_wrapper * {
    overflow-wrap: break-word; word-wrap: break-word;
  }

  /* ===========================================================
     CBT section (layout_cbt) + the anythingSlider carousel.
     These use their own fixed 760–982px boxes; rein them in.
     Selectors are inert on pages that don't use the CBT theme.
     =========================================================== */
  #page_indicator,
  #column_two_top,
  #cbt_header,
  #cbt_nav_wrapper,
  #cbt_home_videos_wrapper,
  #slider_container,
  #slider_wrapper,
  .anythingSlider,
  .anythingSlider .wrapper,
  .anythingSlider .anythingBase {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box;
  }
  /* the carousel's inner track is intentionally very wide — clip it
     at the container edge so it can't push the page sideways */
  #slider_container,
  .anythingSlider,
  .anythingSlider .wrapper { overflow: hidden !important; height: auto !important; }
  #cbt_logo { max-width: 100% !important; background-size: contain !important; }

  /* these CBT boxes are full-width but keep a small left margin that
     bleeds ~10px past the screen edge — drop horizontal margins */
  #page_indicator,
  #column_two_top,
  #slider_container,
  #cbt_header,
  #cbt_home_videos_wrapper { margin-left: 0 !important; margin-right: 0 !important; }
  #column_two_top img,
  #slider_container img,
  #cbt_header img,
  #cbt_home_videos_wrapper img { margin-left: 0 !important; margin-right: 0 !important; }

  /* image-replaced / fixed-width headings shouldn't exceed the screen */
  #content_wrapper h1,
  #content_wrapper h2,
  #column_two h1 { max-width: 100% !important; width: auto !important; }
}

@media screen and (max-width: 1024px) {
  /* top utility menu (Home / News / About / … / Contact): let it
     wrap onto multiple lines instead of being clipped at the edge */
  #navigation, #navigation_inner_one, #navigation_inner_two {
    width: auto !important; height: auto !important;
    float: none !important; overflow: visible !important; white-space: normal !important;
  }
  #navigation ul.menu { white-space: normal !important; }
  #navigation ul.menu li { float: none !important; display: inline-block !important; }

  /* long single-word headings (e.g. COGNITIVE-BEHAVIOURAL) shouldn't
     get clipped — allow them to break */
  #content_wrapper h1, #content_wrapper h2, #content_wrapper h3 {
    overflow-wrap: break-word; word-break: break-word; hyphens: auto;
  }
}

/* phones: a touch more breathing room + larger tap targets */
@media screen and (max-width: 600px) {
  #column_two_pad,
  #column_one_pad,
  #column_three_pad { margin: 12px !important; }

  #secondary_navigation ul.menu li a,
  #navigation ul.menu li a { padding: 8px 12px !important; }
}