/**
 * SiloKala Theme - Main Stylesheet
 * High-performance base styles, normalize reset, typography defaults, and grid utilities.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--silo-font-family);
  font-size: 16px;
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--silo-white);
  color: var(--silo-gray-900);
  font-family: var(--silo-font-family);
  overflow-x: clip;
}

#page.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
}


main#primary,
.site-content {
  flex: 1 0 auto;
  width: 100%;
}

img,
picture,
video,
canvas {
  max-width: 100%;
  height: auto;
}

svg {
  vertical-align: middle;
}

/* Scoped Theme Element Resets */
.site-header ul,
.site-header ol,
.site-footer ul,
.site-footer ol,
.silo-home-main ul,
.silo-home-main ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header h1, .site-header h2, .site-header h3, .site-header h4, .site-header h5, .site-header h6, .site-header p,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6, .site-footer p,
.silo-home-main h1, .silo-home-main h2, .silo-home-main h3, .silo-home-main h4, .silo-home-main h5, .silo-home-main h6, .silo-home-main p {
  margin: 0;
}

/* App surface layout support (Messages, Profile, Cart, Checkout, Dashboard, Exchange) */
.silo-page-main.silo-app-surface {
  width: 100%;
  min-height: calc(100vh - 160px);
  background-color: var(--color-surface-canvas, #f7f8fb);
  padding: 0 !important;
  margin: 0 !important;
}

.silo-page-main.silo-app-surface .silo-page-article,
.silo-page-main.silo-app-surface .entry-content {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.silo-page-main.silo-app-surface .entry-header,
body.sk-exchange-browse .entry-header,
body.sk-exchange-browse h1.entry-title,
body.sk-exchange-browse .entry-title {
  display: none !important;
}

@media (max-width: 768px) {
  body.sk-exchange-browse .silo-container,
  body.sk-exchange-browse .site-main,
  body.sk-exchange-browse #primary,
  body.sk-exchange-browse #content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.has-silo-mobile-nav.sk-exchange-browse,
  body.has-silo-mobile-nav:has(.mobile-bottom-bar) {
    padding-bottom: calc(56px + 90px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Set proper canvas background for Cart, Checkout, Profile, and Messages */
body:has(.sk-cart-checkout),
body:has(#silokala-checkout),
body:has(.sk-checkout),
body:has(.sk-buyer-profile-site-wrapper),
body:has(.sk-messages-root),
body.silokala-checkout-page {
  background-color: var(--color-surface-canvas, #f7f8fb) !important;
}

/* Defensive suppression of storefront header/footer on seller dashboard */
body.silokala-vendor-dashboard-canvas .site-header,
body.silokala-vendor-dashboard-canvas .silo-mobile-header,
body.silokala-vendor-dashboard-canvas .silo-mobile-bottom-nav,
body.silokala-vendor-dashboard-canvas .site-footer,
body.silokala-vendor-dashboard-canvas #masthead,
body.silokala-vendor-dashboard-canvas #colophon,
body:has(.silokala-vendor-dashboard) .site-header,
body:has(.silokala-vendor-dashboard) .silo-mobile-header,
body:has(.silokala-vendor-dashboard) .silo-mobile-bottom-nav,
body:has(.silokala-vendor-dashboard) .site-footer,
body:has(.silokala-vendor-dashboard) #masthead,
body:has(.silokala-vendor-dashboard) #colophon {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}
body.silokala-vendor-dashboard-canvas,
body:has(.silokala-vendor-dashboard) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Container Utilities */
.silo-container {
  width: 100%;
  max-width: var(--silo-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--silo-container-pad);
  padding-right: var(--silo-container-pad);
}

.silo-container-wide {
  width: 100%;
  max-width: var(--silo-container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--silo-container-pad);
  padding-right: var(--silo-container-pad);
}

/* Screen reader only (.screen-reader-text & .sr-only) */
.screen-reader-text,
.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  white-space: nowrap;
}

.screen-reader-text:focus,
.sr-only:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -9999px;
  right: 50%;
  transform: translateX(50%);
  background: var(--silo-orange-500);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: var(--silo-radius-md);
  font-weight: 700;
  z-index: 100001;
  text-decoration: none;
}
.skip-link:focus {
  top: 10px;
}

/* Responsive visibility utilities */
@media (max-width: 979px) {
  .hide-on-mobile,
  .hide-on-tablet {
    display: none !important;
  }
  .show-on-mobile,
  .show-on-tablet {
    display: block !important;
  }
  /* Add bottom padding for fixed mobile bottom nav only when active */
  body.has-silo-mobile-nav {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 1025px) {
  .hide-on-desktop {
    display: none !important;
  }
  .show-on-mobile,
  .show-on-tablet {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .hide-on-phone {
    display: none !important;
  }
}