/*
Theme Name: Yahso
Theme URI: https://yahso.coosysoft.com
Author: Coosysoft
Author URI: https://coosysoft.com
Description: Custom WordPress theme for Yahso — property maintenance platform. Tailwind CDN, AI wrench branding, navy + coral palette. Includes a desktop/mobile view toggle.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yahso
*/

/* WP admin bar offset for sticky header */
body.admin-bar header.sticky-nav,
body.admin-bar .page-banner,
body.admin-bar .yahso-sidebar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.sticky-nav,
  body.admin-bar .page-banner,
  body.admin-bar .yahso-sidebar { top: 46px; }
}

body { font-family: 'Manrope', 'Inter', system-ui, sans-serif; }

/* ============================================================
   MOBILE VIEW EMULATION
   When the view-toggle is set to "Mobile" the body gains
   .yahso-view-mobile. We constrain the wrapper to 414px AND
   override Tailwind's lg:/md: utilities (which respond to the
   real viewport, not container width) so the page reflows like
   a phone instead of a squashed desktop.
   ============================================================ */

body.yahso-view-mobile {
  background: #e2e8f0;
}

body.yahso-view-mobile .yahso-viewport {
  max-width: 414px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 0 1px #e2e8f0, 0 30px 60px -30px rgba(15,23,42,0.25);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Items that don't belong on mobile */
body.yahso-view-mobile .yahso-hide-on-mobile-view { display: none !important; }
body.yahso-view-mobile .yahso-show-on-mobile-view { display: block !important; }

/* CRITICAL: keep the toggle visible so users can switch back */
body.yahso-view-mobile #yahso-view-toggle { display: inline-flex !important; }
body.yahso-view-mobile #yahso-view-toggle .yahso-toggle-label { display: none; } /* shrink toggle to icon-only on mobile */
body.yahso-view-mobile .yahso-signin-link { display: none !important; }

/* Force any multi-col grid into 1 col, but keep stat grids 2x2 */
body.yahso-view-mobile .grid { grid-template-columns: 1fr !important; gap: 12px !important; }
body.yahso-view-mobile .grid.md\:grid-cols-4,
body.yahso-view-mobile .grid.md\:grid-cols-2,
body.yahso-view-mobile .grid.grid-cols-2,
body.yahso-view-mobile .grid.grid-cols-3,
body.yahso-view-mobile .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; }

/* Quick request stays 2x2 */
body.yahso-view-mobile .grid-cols-2 { grid-template-columns: 1fr 1fr !important; }

/* All col-span overrides collapse */
body.yahso-view-mobile [class*="lg:col-span-"] { grid-column: span 1 / span 1 !important; }

/* Reverse any row-reverse / icon-right layouts to stack normally */
body.yahso-view-mobile .lg\:col-span-5,
body.yahso-view-mobile .lg\:col-span-7,
body.yahso-view-mobile .lg\:col-span-2 { width: 100% !important; }

/* Reduce hero typography to native phone scale */
body.yahso-view-mobile h1 {
  font-size: 30px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
}
body.yahso-view-mobile section h2 { font-size: 24px !important; line-height: 1.18 !important; }
body.yahso-view-mobile section h3 { font-size: 17px !important; }
body.yahso-view-mobile .font-display.text-5xl,
body.yahso-view-mobile .font-display.text-4xl,
body.yahso-view-mobile h1.text-5xl,
body.yahso-view-mobile h2.text-5xl,
body.yahso-view-mobile h2.text-4xl { font-size: 30px !important; line-height: 1.15 !important; }
body.yahso-view-mobile .text-3xl { font-size: 22px !important; }
body.yahso-view-mobile p,
body.yahso-view-mobile .text-\[16\.5px\],
body.yahso-view-mobile .text-\[17px\] { font-size: 14.5px !important; line-height: 1.55 !important; }

/* Stat numbers slim down */
body.yahso-view-mobile .grid > div .font-display.text-5xl { font-size: 30px !important; }
body.yahso-view-mobile .grid > div .font-display.text-3xl { font-size: 24px !important; }

/* Tighten section padding */
body.yahso-view-mobile section,
body.yahso-view-mobile .px-6,
body.yahso-view-mobile .lg\:px-10 { padding-left: 16px !important; padding-right: 16px !important; }
body.yahso-view-mobile .py-24 { padding-top: 36px !important; padding-bottom: 36px !important; }
body.yahso-view-mobile .py-20 { padding-top: 28px !important; padding-bottom: 28px !important; }
body.yahso-view-mobile .py-16,
body.yahso-view-mobile .lg\:py-24,
body.yahso-view-mobile .lg\:py-16 { padding-top: 28px !important; padding-bottom: 28px !important; }
body.yahso-view-mobile .pt-20 { padding-top: 24px !important; }
body.yahso-view-mobile .pb-24 { padding-bottom: 28px !important; }
body.yahso-view-mobile .px-8 { padding-left: 16px !important; padding-right: 16px !important; }

/* Compact header */
body.yahso-view-mobile header.sticky-nav > div {
  height: 56px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  gap: 8px !important;
}
body.yahso-view-mobile .yahso-mark img { width: 30px !important; height: 30px !important; }
body.yahso-view-mobile .yahso-mark .wordmark { font-size: 17px !important; }
body.yahso-view-mobile #yahso-view-toggle button { padding: 6px 8px !important; }

/* Buttons get full-width-ish on mobile */
body.yahso-view-mobile .flex.flex-wrap.gap-3 > a,
body.yahso-view-mobile .flex.flex-wrap.gap-3 > button {
  flex: 1 1 100% !important;
  justify-content: center !important;
}
body.yahso-view-mobile .flex.flex-wrap.items-center.gap-3 > a {
  flex: 1 1 100% !important;
  justify-content: center !important;
}

/* Hide the dashboard sidebar entirely in mobile mode */
body.yahso-view-mobile .yahso-sidebar { display: none !important; }

/* Dashboard top-bar: collapse search + actions to single row */
body.yahso-view-mobile main .sticky.top-16 {
  padding: 10px 14px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Property card: shrink thumbnail */
body.yahso-view-mobile .w-32.h-32 { width: 88px !important; height: 88px !important; }

/* Hero "request card" floats nicely below text instead of overlapping */
body.yahso-view-mobile .hidden.lg\:block.absolute { display: none !important; }

/* Login: brand panel hides, form takes full screen */
body.yahso-view-mobile .auth-aside-bg { display: none !important; }
body.yahso-view-mobile .min-h-\[800px\] { min-height: auto !important; }

/* Footer gets a single column */
body.yahso-view-mobile footer .grid { grid-template-columns: 1fr !important; gap: 24px !important; }

/* Trust indicators row stacks vertically */
body.yahso-view-mobile .mt-12.flex.flex-wrap.items-center { gap: 8px !important; }
body.yahso-view-mobile .mt-12.flex.flex-wrap.items-center > div { width: 100%; }

/* Reduce shadow + remove decorative corner blob padding */
body.yahso-view-mobile .max-w-7xl,
body.yahso-view-mobile .max-w-4xl,
body.yahso-view-mobile .max-w-5xl,
body.yahso-view-mobile .max-w-3xl,
body.yahso-view-mobile .max-w-2xl { max-width: 100% !important; }