/* ==========================================================================
   RESPONSIVE OVERRIDES FOR BEEJACK1 960 GRID THEME
   Nuclear mobile reset: flatten everything inside the three wrappers,
   then rebuild only what's needed.
   ========================================================================== */

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

  /* ------------------------------------------------------------------
     0. GLOBAL RESET
     ------------------------------------------------------------------ */
  html, body {
    width: 100% !important; max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  * { box-sizing: border-box; }

  /* ------------------------------------------------------------------
     1. NUCLEAR RESET — flatten ALL descendants of the three wrappers
     Override every fixed width, float, and position from the 960 grid
     and theme CSS in one sweep.
     ------------------------------------------------------------------ */
  body #header-wrap *,
  body #page-wrap *,
  body #footer-wrap * {
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Re-apply display for elements that need it (the wildcard above
     doesn't touch display, but let's ensure block-level defaults) */
  body #header-wrap,
  body #page-wrap,
  body #footer-wrap,
  body .container-12,
  body .container-16 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    margin: 0 !important;
  }

  /* Grid cells — all full-width stacking */
  body .grid-1, body .grid-2, body .grid-3, body .grid-4, body .grid-5,
  body .grid-6, body .grid-7, body .grid-8, body .grid-9, body .grid-10,
  body .grid-11, body .grid-12 {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }
  body .alpha, body .omega { padding: 0 !important; }
  body [class*="push-"], body [class*="pull-"] {
    left: auto !important; right: auto !important;
  }

  /* ------------------------------------------------------------------
     2. HEADER — clean mobile layout
     ------------------------------------------------------------------ */
  body #header-wrap {
    padding: 0 !important;
    background-image: none !important;
    background-color: #e8edf1 !important;
  }

  body #site-header {
    display: flex !important; flex-direction: column !important;
    align-items: center !important;
    text-align: center; padding: 10px 8px 0 !important;
  }

  /* Logo — centered on its own line */
  body #branding {
    display: block !important; text-align: center;
    width: 100% !important; margin: 0 0 4px 0 !important;
  }
  body #logo { display: block !important; }
  body #branding a,
  body #logo a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    min-height: 44px !important;
  }
  body #branding img,
  body #logo img {
    display: block !important;
    width: auto !important; max-width: 160px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  body #site-name { display: none !important; }
  body #site-slogan { display: none !important; }

  /* Hide language block on mobile */
  body #locale-block,
  body #block-beejack-lang_switch,
  body #block-locale-0,
  body #locale-block * {
    display: none !important;
  }

  /* Hide tagline on mobile */
  body #block-block-11,
  body #block-block-11 * {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     3. PRIMARY NAV — equal-width button row
     Aggregated: ul.main-menu{position:absolute} li a{width:81px;height:36px;background:url(...)}
     ------------------------------------------------------------------ */
  body #site-menu {
    width: 100% !important; padding: 0 !important;
    border-top: 1px solid #b6c2ca !important;
    border-bottom: 1px solid #b6c2ca !important;
    background-color: #d6dee4 !important;
    overflow: hidden !important;
  }
  body #site-menu ul.main-menu {
    display: flex !important; flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 0 !important; margin: 0 !important;
    list-style: none !important;
  }
  body #site-menu ul.main-menu li {
    flex: 1 1 0% !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    border-right: 1px solid #b6c2ca !important;
  }
  body #site-menu ul.main-menu li.last {
    border-right: none !important;
  }
  body #site-menu ul.main-menu li a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    min-height: 44px !important; height: auto !important;
    padding: 8px 4px !important;
    font-size: 12px !important; font-weight: bold !important;
    color: #002b67 !important; text-decoration: none !important;
    text-align: center !important; white-space: nowrap !important;
    background: none !important; background-image: none !important;
    width: auto !important;
    line-height: 1.2 !important;
    border-bottom: none !important;
  }

  /* ------------------------------------------------------------------
     4. SECONDARY NAV — horizontal scroll row
     ------------------------------------------------------------------ */
  body #site-subheader {
    width: 100% !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #ddd !important;
  }
  body #block-menu-menu-under-primary-menu {
    width: max-content !important; min-width: 100% !important;
  }
  body #block-menu-menu-under-primary-menu ul.menu {
    display: flex !important; flex-wrap: nowrap !important;
    padding: 0 !important; margin: 0 !important;
    list-style: none !important; white-space: nowrap !important;
  }
  body #block-menu-menu-under-primary-menu ul.menu li {
    flex-shrink: 0 !important; white-space: nowrap !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    background: none !important; background-image: none !important;
  }
  body #block-menu-menu-under-primary-menu ul.menu li a {
    display: flex !important; align-items: center !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    color: #333 !important; text-decoration: none !important;
  }

  /* ------------------------------------------------------------------
     TOUCH TARGETS — ensure 44px min for all clickable elements
     ------------------------------------------------------------------ */
  body .casino-get-bonus-linko {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important;
    padding: 8px 12px !important; margin: 4px 0 !important;
    font-size: 13px !important;
  }
  body .node .links a,
  body .more-link a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important;
    padding: 8px 0 !important;
  }
  body #footer ul.menu li a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
  }
  /* Casino table links — stack Get Bonus / Read Review vertically */
  body table.tableorder56 td:last-child,
  body table.tableorder7 td:last-child {
    display: flex !important; flex-direction: column !important;
    gap: 4px !important; align-items: stretch !important;
  }
  body table.tableorder56 td:last-child a,
  body table.tableorder7 td:last-child a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    text-align: center !important;
  }

  /* Links grid (block-block-23) — 44px targets */
  body #block-block-23 td a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important; padding: 8px 4px !important;
  }

  /* Inline body links — increase line-height for tap spacing */
  body .node .content p {
    line-height: 1.8 !important;
  }
  body .node .content p a {
    padding: 4px 0 !important;
  }

  /* Views block links (sidebar, category links, views-row links) */
  body .view .views-row a,
  body .view .item-list a,
  body .view .view-footer a,
  body .view .view-header a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important; padding: 4px 0 !important;
  }

  /* Quicktab headers */
  body .quicktabs_tabs a,
  body ul.quicktabs-tabs a,
  body ul.quicktabs_tabs a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important; padding: 8px !important;
    font-size: 13px !important;
  }

  /* Block title-wrap links */
  body #title-wrap a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important;
  }

  /* SEO text blocks with inline links */
  body #block-block-24 a,
  body #block-block-25 a,
  body #block-block-26 a,
  body #block-block-10 a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important; padding: 4px 0 !important;
  }

  /* Paragraph inline links in block-block-23 */
  body #block-block-23 p a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important; padding: 4px 0 !important;
  }

  /* Casino review image-only links (no text) in views */
  body .view-casinos-reviews-focused .views-field a,
  body .view-casinos-reviews .views-field a {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important;
  }

  /* Node body inline links — use generous line-height instead of min-height
     to avoid distorting paragraph flow */
  body .node .content a {
    padding-top: 6px !important; padding-bottom: 6px !important;
  }

  /* ------------------------------------------------------------------
     4. MAIN CONTENT AREA
     ------------------------------------------------------------------ */
  body #page-wrap, body #page, body #main, body #main-content {
    width: 100% !important; display: block !important;
    padding: 5px !important; margin: 0 !important;
  }

  /* Sidebar — stack below content */
  body #sidebar-left, body #sidebar-right {
    width: 100% !important; display: block !important;
    clear: both; margin-top: 15px; padding: 5px !important;
  }
  body .sidebar .block, body #sidebar-right .block {
    width: 100% !important; margin-bottom: 15px;
  }

  /* ------------------------------------------------------------------
     5. CASINO REVIEW BLOCK — full-width above article text
     Aggregated CSS: .casino-review-block4{float:right;margin:0 -3px 10px 10px}
     ------------------------------------------------------------------ */
  body .casino-review-block4 {
    width: 100% !important; display: block !important;
    margin: 0 0 15px 0 !important; clear: both;
  }
  body .casino-review-block4 table,
  body table.tableorder56 {
    width: 100% !important;
  }

  /* Front page: hide duplicate "Our Recommended Casinos" tables */
  body.front .node ~ .node .casino-review-block4 { display: none !important; }

  /* ------------------------------------------------------------------
     6. NODE CONTENT
     ------------------------------------------------------------------ */
  body .node .content { width: 100% !important; clear: both; }
  body .node .content p { word-wrap: break-word; }
  body .node h2 a { font-size: 18px; line-height: 1.3; }

  /* ------------------------------------------------------------------
     7. LINKS GRID (block-block-23) — stack 3-column table
     ------------------------------------------------------------------ */
  body #block-block-23 { margin-bottom: 15px !important; clear: both; }
  body #block-block-23 table,
  body #block-block-23 tbody,
  body #block-block-23 tr,
  body #block-block-23 td {
    display: block !important; width: 100% !important;
  }
  body #block-block-23 td { padding: 6px 5px !important; }

  /* ------------------------------------------------------------------
     8. HIDE OBSOLETE / HEAVY SECTIONS on mobile
     ------------------------------------------------------------------ */
  /* Blackjack Tool Win95 software download */
  body #block-views-uc_products-block_1 { display: none !important; }
  /* Quicktabs (Best Offers / Recent News / Recent Articles) */
  body #block-quicktabs-1 { display: none !important; }
  /* Ad menu sidebar categories */
  body #ad-menu { display: none !important; }
  /* Advertisement blocks (dead clktr4ck links) */
  body .block-ad { display: none !important; }

  /* ------------------------------------------------------------------
     9. TABLES — responsive widths
     ------------------------------------------------------------------ */
  body table { width: 100% !important; }
  body table td, body table th { padding: 4px 5px !important; font-size: 13px; }
  body table.tableorder7 { width: 100% !important; background-image: none !important; }

  /* Casino reviews focused view — undo absolute-positioned children */
  body .view-casinos-reviews-focused .views-row {
    width: 100% !important; padding-left: 0 !important;
    margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;
  }

  /* Title headings with fixed widths in aggregated CSS */
  body #title-56 h2,
  body #title-page h2 {
    width: 100% !important;
  }

  /* ------------------------------------------------------------------
     10. IMAGES
     ------------------------------------------------------------------ */
  body img { max-width: 100% !important; height: auto !important; }

  /* ------------------------------------------------------------------
     11. QUICKTABS (for inner pages where not hidden)
     ------------------------------------------------------------------ */
  body .quicktabs-wrapper,
  body .quicktabs_wrapper {
    width: 100% !important;
  }
  body ul.quicktabs-tabs,
  body ul.quicktabs_tabs {
    display: flex !important; flex-wrap: wrap !important;
    padding: 0 !important; margin: 0 !important;
  }
  body ul.quicktabs-tabs li,
  body ul.quicktabs_tabs li {
    flex-shrink: 0;
  }
  body ul.quicktabs-tabs a,
  body ul.quicktabs_tabs a {
    width: auto !important; padding: 5px 8px; font-size: 12px;
  }

  /* ------------------------------------------------------------------
     12. FOOTER — override height:92px + bg image
     ------------------------------------------------------------------ */
  body #footer-wrap { clear: both; }
  body #footer {
    text-align: center; padding: 10px !important;
    background-image: none !important;
  }
  body #footer-bot { background-image: none !important; }
  body #footer-region .block { width: 100% !important; }
  body #footer p, body #footer a {
    white-space: normal !important; word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  body #footer ul.menu {
    display: flex !important; flex-wrap: wrap !important;
    justify-content: center;
    padding: 0 !important; margin: 0 0 10px 0 !important;
    list-style: none !important;
  }
  body #footer ul.menu li { padding: 3px 6px; }

  /* ------------------------------------------------------------------
     13. MISC fixed-width elements from aggregated CSS
     ------------------------------------------------------------------ */
  body .view-general-articles-block_2 { width: 100% !important; }
  body .view-general-articles-block_2 .view-header { width: 100% !important; }
  body .category_page { width: 100% !important; }
  body .front .view-casinos-reviews table,
  body .front .view-casinos-reviews-usa table { width: 100% !important; }
  body .casino-review-top-items .casino-review-top-items-without-slides,
  body .casino-review-top-items .casino-review-top-items-wrap { width: 100% !important; }
  body .node-review .right,
  body .node-type-review-article .right { width: 100% !important; }
  body .node-type-review-article .node .top { width: 100% !important; }
  body .no-sidebars #main { width: 100% !important; }
  body .not-front #sidebar-right { width: 100% !important; }
  body #site-subheader { width: 100% !important; }
  body #block-menu-secondary-links ul.menu { width: 100% !important; }
  body #block-countryorder-1 #title-wrap { width: 100% !important; }
  body table.tableorder8 { width: 100% !important; }
  body .webform-client-form { width: 100% !important; }
  body .webform-client-form label { width: 100% !important; }
  body .webform-client-form .form-text { width: 100% !important; }
  body .resizable-textarea,
  body .resizable-textarea .form-textarea { width: 100% !important; }
  body .sign-up-bonus { width: 100% !important; }
  body .sign-up-bonus label,
  body .sign-up-bonus span { width: 100% !important; }
  body .more-link a,
  body .front-link-to-casino-reviews { width: auto !important; }
  body .casino-get-bonus-link a,
  body .casino-review-top-items-without-slides .casino-get-bonus-link a {
    width: auto !important;
  }
  body #forum table { width: 100% !important; }
  body #forum tr td.forum { width: 100% !important; }
  body .view-slots-reviews-page_1 .view-content,
  body .page-review-casino .view-content,
  body .view-slots-reviews-page_1 table,
  body .page-review-casino table { width: 100% !important; }
  body .page-review-casino tr td.views-field-title { width: auto !important; }
  body .view-casinos-reviews-block_5 .view-content table,
  body .view-casinos-reviews-block_4 .view-content table { width: 100% !important; }
}

/* ------------------------------------------------------------------
   NARROW MOBILE (≤ 480px)
   ------------------------------------------------------------------ */
@media screen and (max-width: 480px) {
  body #branding img, body #logo img { max-width: 130px !important; }
  body #site-menu ul.main-menu li a { font-size: 11px !important; padding: 8px 2px !important; }
  body table td, body table th { padding: 3px 4px !important; font-size: 12px; }
  body .node h2 a { font-size: 16px; }
}