/*
 * Sahab mobile outer-gutter refinement v2
 * Purpose: reclaim usable viewport width on phones on every theme template.
 * Outer page gutters are reduced; intentional padding inside cards, buttons,
 * checkout fields and content panels is kept readable.
 */
:root {
  --sahab-mobile-outer-gutter: 6px;
  --sahab-mobile-narrow-gutter: 4px;
}

@media (max-width: 1024px) {
  html, body { max-width: 100%; }
  body .site,
  body #page,
  body #primary,
  body #content,
  body main,
  body .site-main,
  body .site-content,
  body .content-area { min-width: 0; max-width: 100%; }

  body .container,
  body .site-container,
  body .wrap,
  body .wrapper,
  body .sahab-container,
  body .sahab-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  :root { --sahab-mobile-outer-gutter: 6px; }

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body { margin-inline: 0; }

  /* Main page roots go edge-to-edge; the immediate content containers below
     provide the small, consistent gutter. Vertical spacing is not changed. */
  body .site-main,
  body main#main,
  body #primary.site-main,
  body .site-content,
  body .content-area,
  body .sahab-elementor-page-content {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  /* Core and WordPress page containers: consistent small outer gutter. */
  body .container,
  body .site-container,
  body .wrap,
  body .wrapper,
  body .sahab-container,
  body .sahab-wrap,
  body .entry-content,
  body .page-content,
  body .woocommerce,
  body .woocommerce-page {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .container,
  body .site-container,
  body .wrap,
  body .wrapper,
  body .sahab-container,
  body .sahab-wrap {
    width: 100% !important;
    margin-inline: auto !important;
    padding-left: var(--sahab-mobile-outer-gutter) !important;
    padding-right: var(--sahab-mobile-outer-gutter) !important;
  }

  body .entry-content,
  body .page-content,
  body .woocommerce,
  body .woocommerce-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Full-width Elementor and block-editor structures without squeezed columns. */
  body .elementor-section,
  body .elementor-section.elementor-section-stretched,
  body .elementor-section.elementor-section-boxed > .elementor-container,
  body .elementor-container,
  body .elementor-row,
  body .elementor-widget-wrap,
  body .wp-site-blocks,
  body .wp-block-group,
  body .wp-block-cover {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  body .elementor-section.elementor-section-boxed > .elementor-container {
    width: 100% !important;
    padding-left: var(--sahab-mobile-outer-gutter) !important;
    padding-right: var(--sahab-mobile-outer-gutter) !important;
  }
  body .wp-block-image,
  body .wp-block-media-text,
  body .wp-block-table,
  body figure { max-width: 100%; }

  /* Dedicated content pages. Keep the card's own padding, shrink only the
     surrounding shell that previously used calc(100% - 22/30/44px). */
  body .sahab-blog-standalone .sb-shell,
  body .sahab-glass-page .sahab-glass-layout,
  body .sahab-contact-page .sc-container,
  body .sahab-cart-page .sahab-cart-container,
  body .sahab-checkout-page .sahab-checkout-container,
  body .sahab-shop-page .s-shop-shell,
  body .sahab-shop-page .s-shop-breadcrumb,
  body .sahab-single-product-page .s-product-container,
  body .sahab-blog-archive .container,
  body .sahab-blog-page .container,
  body .sahab-course-detail .container,
  body .sahab-courses-page .container,
  body .sahab-about-page .container,
  body .sahab-study-tools-page .container,
  body .sahab-placement-page .container,
  body .sahab-single.sp-layout {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--sahab-mobile-outer-gutter) !important;
    padding-right: var(--sahab-mobile-outer-gutter) !important;
  }

  /* Custom section shells used on About, Contact, Placement and Study Tools. */
  body .sahab-about-page .sa-about-intro,
  body .sahab-about-page .sa-about-story,
  body .sahab-about-page .sa-about-learning,
  body .sahab-about-page .sa-about-local,
  body .sahab-contact-page .sc-container,
  body .sahab-placement-page > section,
  body .sahab-study-tools-page > section,
  body .sahab-cart-page .sahab-cart-hero,
  body .sahab-checkout-page .sahab-checkout-hero {
    padding-left: var(--sahab-mobile-outer-gutter) !important;
    padding-right: var(--sahab-mobile-outer-gutter) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Article reader and regular WordPress pages. */
  body .sahab-glass-page { padding-left: 0 !important; padding-right: 0 !important; }
  body .sahab-glass-page .sahab-glass-main-column,
  body .sahab-glass-page .sahab-glass-sidebar { min-width: 0; max-width: 100%; }
  body .sahab-glass-page .sahab-glass-main-column { padding: 12px !important; }
  body .sahab-glass-page .sahab-glass-sidebar { padding: 12px !important; }
  body .sahab-single .sp-main,
  body .sahab-single .sp-content,
  body .sahab-single .sp-article-header { min-width: 0; max-width: 100%; }

  /* Catalog, cart and checkout outer spacing; product/forms retain internal
     touch-safe padding and all input fields remain full-width. */
  body .sahab-cart-page,
  body .sahab-checkout-page,
  body .sahab-shop-page,
  body .sahab-single-product-page,
  body .sahab-account,
  body .sahab-access-page {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }
  body .sahab-cart-page .sahab-cart-hero-inner,
  body .sahab-checkout-page .sahab-checkout-hero-inner,
  body .sahab-cart-page .sahab-cart-main,
  body .sahab-checkout-page .sahab-checkout-main { min-width: 0; max-width: 100%; }

  /* Keep the login and dashboard usable while using less viewport width. */
  body .sahab-access-page .sahab-access-layout { width: 100% !important; max-width: 100% !important; }
  body .sahab-access-page .sahab-access-content { padding-left: 8px !important; padding-right: 8px !important; }
  body .sahab-access-page .sahab-access-sidebar { padding-left: 8px !important; padding-right: 8px !important; }
  body .sahab-account { padding-left: 4px !important; padding-right: 4px !important; }

  /* Header menu can use almost the entire phone width. */
  body .nav.is-open,
  body #primary-navigation .sub-menu,
  body .site-header .nav-menu.is-open {
    left: var(--sahab-mobile-outer-gutter) !important;
    right: var(--sahab-mobile-outer-gutter) !important;
    max-width: calc(100% - 2 * var(--sahab-mobile-outer-gutter)) !important;
    box-sizing: border-box;
  }

  /* Prevent oversized embeds, long labels and legacy min-widths from forcing
     sideways scrolling. Scrollable tables remain scrollable inside themselves. */
  body img,
  body video,
  body iframe,
  body svg,
  body canvas { max-width: 100%; }
  body input,
  body select,
  body textarea,
  body button,
  body [role="button"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
  body pre,
  body code,
  body .entry-content,
  body .page-content,
  body .woocommerce-product-details__short-description { overflow-wrap: anywhere; }
  body .entry-content table,
  body .page-content table,
  body .woocommerce table.shop_table { max-width: 100%; }
}

@media (max-width: 480px) {
  :root { --sahab-mobile-outer-gutter: 4px; }

  body .container,
  body .site-container,
  body .wrap,
  body .wrapper,
  body .sahab-container,
  body .sahab-wrap,
  body .sahab-blog-standalone .sb-shell,
  body .sahab-glass-page .sahab-glass-layout,
  body .sahab-contact-page .sc-container,
  body .sahab-cart-page .sahab-cart-container,
  body .sahab-checkout-page .sahab-checkout-container,
  body .sahab-shop-page .s-shop-shell,
  body .sahab-shop-page .s-shop-breadcrumb,
  body .sahab-single-product-page .s-product-container,
  body .sahab-blog-archive .container,
  body .sahab-blog-page .container,
  body .sahab-course-detail .container,
  body .sahab-courses-page .container,
  body .sahab-about-page .container,
  body .sahab-study-tools-page .container,
  body .sahab-placement-page .container,
  body .sahab-single.sp-layout {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body .sahab-blog-standalone .sb-topbar { padding-left: 12px !important; padding-right: 12px !important; }
  body .sahab-blog-standalone .sb-main-panel,
  body .sahab-blog-standalone .sb-sidebar { padding: 8px !important; }
  body .sahab-glass-page .sahab-glass-main-column,
  body .sahab-glass-page .sahab-glass-sidebar { padding: 10px !important; }
  body .sahab-cart-page .sahab-cart-hero,
  body .sahab-checkout-page .sahab-checkout-hero { padding-left: 4px !important; padding-right: 4px !important; }
  body .sahab-access-page .sahab-access-content { padding-left: 6px !important; padding-right: 6px !important; }
}

@media (max-width: 360px) {
  :root { --sahab-mobile-outer-gutter: 3px; }
  body .sahab-account { padding-left: 3px !important; padding-right: 3px !important; }
  body .sahab-blog-standalone .sb-main-panel,
  body .sahab-blog-standalone .sb-sidebar { padding: 6px !important; }
}