/*
 * HostGuru safe fixes layer
 * Purpose: final, rollback-friendly overrides for mobile/cascade conflicts.
 * Delete this file and remove its enqueue in functions.php to revert these fixes.
 */

/* Baseline overflow/media safety */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
.container-hg { width: min(100% - 32px, 1200px); margin-left: auto; margin-right: auto; }

/* Header: ensure the actual header.php mobile panel wins over old #hg-menubar slide-in CSS. */
#hg-menubar { right: auto !important; box-shadow: none; }
#hg-menubar-backdrop, #hg-mobile-nav-header { display: none !important; }
#hg-mobile-panel { display: flex; }
@media (min-width: 992px) {
  #hg-mobile-panel, #hg-mob-backdrop { display: none !important; }
  #hg-menubar { display: flex !important; position: static !important; height: 60px !important; width: auto !important; overflow: visible !important; padding: 0 !important; }
}
@media (max-width: 991px) {
  .hg-navbar { height: 56px !important; }
  .hg-nav-inner { display: flex !important; align-items: center !important; min-width: 0 !important; }
  .navbar-brand { margin-right: 8px !important; min-width: 0 !important; }
  .navbar-brand img { max-width: 128px !important; height: auto !important; }
  .hg-nav-right { flex: 0 0 auto !important; margin-left: auto !important; width: auto !important; justify-content: flex-end !important; gap: 0 !important; }
  .hg-nav-right .nav-link { padding: 8px 7px !important; min-height: 40px !important; }
  #hg-mobile-toggle-li { display: flex !important; }
  #hg-menubar { display: none !important; }
  .hg-nav-cta { display: none !important; }
  #hg-mobile-panel { width: min(86vw, 320px) !important; right: calc(-1 * min(86vw, 320px)) !important; }
  #hg-mobile-panel.open { right: 0 !important; }
  .hgmp-link { min-width: 0; }
}
@media (max-width: 380px) {
  .navbar-brand img { max-width: 112px !important; }
  .hg-nav-right .nav-link { padding: 7px 5px !important; }
}

/* Hosting pages: predictable responsive layout for shared .hgp-* and .plan components. */
.plans-wrp { width: 100%; overflow: visible; }
.plans { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; width: 100%; }
.plan { min-width: 0; box-sizing: border-box; }
@media (max-width: 1100px) {
  .plans { gap: 18px !important; }
  .plan { flex: 1 1 calc(50% - 18px) !important; max-width: calc(50% - 9px) !important; }
}
@media (max-width: 640px) {
  .plans { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 16px !important; }
  .plan { flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important; padding: 22px 14px !important; }
  .plan .p-price { justify-content: center !important; flex-wrap: wrap !important; }
  .plan .p-value { font-size: clamp(2rem, 12vw, 2.65rem) !important; }
  .plan .pl-title { font-size: 1.22rem !important; }
  .plan .p-feat { font-size: .88rem !important; }
}

/* Shared hosting hero/components */
.hgp-hero-split, .hgp-feat-grid, .hgp-plans-grid, .hgp-explore-row { min-width: 0; }
@media (max-width: 900px) {
  .hgp-hero { padding: 48px 0 42px !important; }
  .hgp-hero-split { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }
  .hgp-hero-split-img { display: none !important; }
  .hgp-hero-desc { margin-left: auto !important; margin-right: auto !important; }
  .hgp-hero-checks { justify-content: center !important; gap: 10px 14px !important; }
  .hgp-hero-ctas { justify-content: center !important; }
  .hgp-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
}
@media (max-width: 640px) {
  .hgp-section { padding: 44px 0 !important; }
  .hgp-title-centre { margin-bottom: 28px !important; }
  .hgp-feat-grid, .hgp-plans-grid, .hgp-explore-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  .hgp-feat-card { padding: 18px 16px !important; }
  .hgp-trust-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .hgp-trust-item { width: auto !important; border-right: 0 !important; justify-content: center !important; white-space: normal !important; text-align: center !important; padding: 9px 8px !important; }
  .hgp-hero-ctas, .hgp-cta-btns { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; }
  .hgp-hero-ctas a, .hgp-cta-btns a, .hgp-btn-primary, .hgp-btn-ghost, .hgp-cta-btn-white, .hgp-cta-btn-outline { width: 100% !important; justify-content: center !important; text-align: center !important; }
}

/* Tables: never squeeze comparison tables into the viewport. */
.hg-comp-table, .hgp-table-wrap, .table-responsive { max-width: 100%; }
@media (max-width: 767px) {
  .hgp-table-wrap, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .hg-comp-table { display: table !important; min-width: 680px !important; width: 100% !important; white-space: normal !important; }
  .hg-comp-table th, .hg-comp-table td { font-size: 12px !important; padding: 10px 12px !important; }
}

/* Billing/monthly tabs: scroll instead of wrapping badly. */
.hg-billing-toggle-wrap, .billing-toggle-wrap, .plans-tabs, .hgp-tabs { max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.hg-billing-toggle-wrap > *, .billing-toggle-wrap > *, .plans-tabs > *, .hgp-tabs > * { flex-shrink: 0; }
@media (max-width: 640px) {
  .hg-billing-toggle-wrap, .billing-toggle-wrap, .plans-tabs, .hgp-tabs { justify-content: flex-start !important; padding-bottom: 4px; }
}

/* Generic mobile button rows: center and stack gracefully. */
@media (max-width: 640px) {
  .hgp-hero-ctas, .hgp-cta-btns, [class*="-cta-btns"], [class*="-actions"] { justify-content: center !important; text-align: center !important; }
  [class*="-cta-btns"] > a, [class*="-actions"] > a { justify-content: center !important; }
}

/* Footer mobile: accordion and copyright links centered. */
@media (max-width: 640px) {
  .hgf-copy-inner, .footer-copyright-inner { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
  .hgf-copy-links, .footer-copyright-links { justify-content: center !important; text-align: center !important; flex-wrap: wrap !important; }
}

/* ─── Blog sidebar search widget ─────────────────────────────────────────────
 * WordPress outputs class="search-form" on the <form> element, not an ID.
 * The existing index.css targets #search-form (ID) which never matches.
 * These rules override any parent-theme 'primary-btn / submit-btn' styles
 * that strip the button's orange background inside the sidebar widget.
 * ─────────────────────────────────────────────────────────────────────────── */
.bs-widget .search-widget,
.bs-widget .search-form { display: flex !important; width: 100%; }

.bs-widget .search-widget .search-field,
.bs-widget .search-form .search-field {
  flex: 1 1 auto !important;
  padding: 9px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 13px !important;
  outline: none !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: none !important;
  transition: border-color .2s;
}
.bs-widget .search-form .search-field:focus { border-color: #f57200 !important; }

.bs-widget .search-widget .submit-btn,
.bs-widget .search-form .submit-btn,
.bs-widget .search-widget button[type="submit"],
.bs-widget .search-form  button[type="submit"] {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f57200 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 0 14px !important;
  min-width: 44px !important;
  height: auto !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .2s !important;
}
.bs-widget .search-widget .submit-btn:hover,
.bs-widget .search-form  .submit-btn:hover,
.bs-widget .search-widget button[type="submit"]:hover,
.bs-widget .search-form  button[type="submit"]:hover { background: #d96000 !important; }

/* ===============================================================
   MOBILE FIXES — Audited June 2026
   =============================================================== */

/* M8: mobile nav link touch targets */
@media (max-width: 991px) {
  .hgmp-link { min-width: 0; min-height: 44px; display: flex; align-items: center; }
}

/* M24: hide scrollbar on tab strips on mobile */
@media (max-width: 768px) {
  .hg-billing-toggle-wrap, .billing-toggle-wrap, .plans-tabs, .hgp-tabs { scrollbar-width: none; }
  .hg-billing-toggle-wrap::-webkit-scrollbar, .billing-toggle-wrap::-webkit-scrollbar,
  .plans-tabs::-webkit-scrollbar, .hgp-tabs::-webkit-scrollbar { display: none; }
}

/* M25: nav link touch target */
.hg-nav-right .nav-link { min-height: 44px !important; }

/* L8: search field flex overflow fix */
.bs-widget .search-form .search-field { min-width: 0; }

/* ===============================================================
   LANDSCAPE ORIENTATION — Phone & Small Tablet
   Targets devices rotated sideways: wide viewport, short height.
   Breakpoint: landscape + max-height 560px (covers all phones,
   excludes tablets which have taller landscape viewports).
   =============================================================== */

@media (orientation: landscape) and (max-height: 560px) {

  /* -- TOPBAR: hide to reclaim vertical space ------------------ */
  .hg-topbar { display: none !important; }

  /* -- NAVBAR: compact height ---------------------------------- */
  .hg-navbar { height: 48px !important; min-height: 48px !important; }
  .hg-header { top: 0 !important; }
  .admin-bar .hg-header { top: 28px !important; }

  /* -- HERO SECTIONS: slash vertical padding ------------------- */
  /* Main page heroes */
  .hgp-hero,
  .hgp-hero-split { padding: 24px 0 20px !important; }

  /* KB / Help Center hero */
  .kb-cat-hero,
  .kb-hero { padding: 24px 0 20px !important; min-height: unset !important; }
  .kb-cat-hero h1,
  .kb-hero h1 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; margin-bottom: 8px !important; }

  /* Ecosystem / dark heroes */
  .hg-ecosystem-hero-inner { padding: 20px 16px !important; }
  .hg-ecosystem-headline { font-size: 20px !important; margin-bottom: 10px !important; }
  .hg-ecosystem-subtext { display: none; }
  .hg-ecosystem-trust-row { display: none; }

  /* SSL / hosting page heroes */
  .ssl-hero, .fssl-hero { padding: 28px 0 24px !important; }

  /* How To Pay hero */
  .pay-hero { padding: 0 !important; }
  .pay-hero-inner { padding: 20px 0 16px !important; }
  .pay-hero h1 { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; margin-bottom: 8px !important; }
  .pay-hero-desc { display: none; }
  .pay-hero-trust { display: none; }

  /* n8n hero */
  .n8n-hero-inner { padding: 24px 16px 20px !important; }

  /* Wide banners */
  .hg-wide-banner-inner { padding: 20px 16px !important; }

  /* -- SECTIONS: reduce top/bottom padding throughout ---------- */
  .hgp-section,
  section.hgp-section { padding: 32px 0 !important; }

  .hg-infra { padding: 32px 16px !important; }
  .hg-infra-head { margin-bottom: 20px !important; }
  .hg-infra-grid { margin-bottom: 20px !important; }
  .hg-infra-stats { padding-top: 20px !important; }

  .hgf-nav { padding: 24px 0 20px !important; }

  /* -- KB ARTICLE: sidebar hidden, full width content --------- */
  .kb-sidebar-col { display: none !important; }
  .kb-article-col { flex: 0 0 100% !important; max-width: 100% !important; }

  /* -- MOBILE PANEL: ensure it fills landscape viewport ------- */
  #hg-mobile-panel {
    width: 100vw !important;
    right: -100vw !important;
    height: 100dvh !important; /* dvh = dynamic viewport height */
  }
  #hg-mobile-panel.open { right: 0 !important; }
  .hgmp-body { padding-bottom: 80px; } /* prevent CTA overlap */

  /* -- JOURNEY BAR: hide on landscape to save space ----------- */
  .hg-journey-bar { display: none !important; }

  /* -- PLANS: two columns instead of one on landscape --------- */
  .plans .plan { flex: 0 0 48% !important; max-width: 48% !important; }

  /* -- CTA BAND: compact --------------------------------------- */
  .hgp-cta-band { padding: 28px 0 !important; }
  .hgp-cta-band h2 { font-size: 1.3rem !important; margin-bottom: 8px !important; }
  .hgp-cta-band p { display: none; }

  /* -- FOOTER BLOG SECTION: hide on landscape phones ----------- */
  .hgf-blog { display: none !important; }

  /* -- PAYMENT PAGE PILLS: compact ---------------------------- */
  .pay-hero-pills { gap: 8px !important; margin-top: 12px !important; }
  .pay-methods { padding: 24px 0 !important; }

  /* -- HEADINGS: scale down on short screens ------------------- */
  .hgp-h1, .pay-sec-h2, .hg-infra-h2 {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
  }

}

/* -- LANDSCAPE: wider phones (568px–900px wide) keep 2-col plans */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 568px) {
  .hgl-grid { grid-template-columns: 1fr 1fr !important; }
  .hg-crosssell-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ===============================================================
   LANDSCAPE — PRICING PLANS
   Phones rotated sideways are typically 568–812px wide but only
   360–430px tall. Show 2-column plans instead of 1-column so
   users can compare plans without scrolling as much.
   =============================================================== */

@media (orientation: landscape) and (max-height: 560px) {

  /* -- BILLING TOGGLE: ensure visible & scrollable ------------- */
  .billing-toggle {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
    margin-bottom: 16px !important;
  }
  .bt-btn {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
  }

  /* -- PLANS TABS (hosting type tabs): 2-col grid -------------- */
  .plans-tabs {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
  }
  .pt { font-size: 11.5px !important; padding: 7px 8px !important; }

  /* -- HGL CARD GRID: 2 columns in landscape ------------------- */
  .hgl-grid,
  .hgl-grid-3col,
  .hgl-grid-4col,
  .hgl-grid-5col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* -- HGL CARD: compact padding & sizing ---------------------- */
  .hgl-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }
  .hgl-name {
    font-size: .85rem !important;
    margin-bottom: 8px !important;
    padding-right: 50px !important;
  }
  .hgl-price {
    font-size: 1.5rem !important;
  }
  .hgl-price-block {
    margin-bottom: 10px !important;
  }
  .hgl-features {
    gap: 5px !important;
    margin-bottom: 12px !important;
  }
  .hgl-feat {
    font-size: 11.5px !important;
    padding: 3px 0 !important;
  }
  .hgl-btn {
    padding: 9px 12px !important;
    font-size: 12.5px !important;
  }

  /* -- STANDARD .plan CARDS (non-hgl) ------------------------- */
  .plans {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .plans .plan {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    padding: 16px 14px !important;
  }

  /* -- FEATURED BADGE: reposition on compact cards ------------- */
  .hgl-featured-badge,
  .hgl-card.hgl-featured::before {
    font-size: 9px !important;
    padding: 2px 10px !important;
  }

  /* -- SECTION HEADING: reduce space above plans --------------- */
  .hgp-plans-head,
  .plans-head,
  .hgl-section-head {
    margin-bottom: 16px !important;
  }
  .hgp-plans-head h2,
  .plans-head h2 {
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
    margin-bottom: 6px !important;
  }
  .hgp-plans-head p,
  .plans-head p {
    display: none;
  }

}

/* -- Wider landscape phones: allow 3-col for 5-col grids -------- */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 700px) {
  .hgl-grid-5col { grid-template-columns: repeat(3, 1fr) !important; }
}