/* ============================================================
   BHOOMIVISTA DESIGN SYSTEM — UTILITIES v7.1
   ------------------------------------------------------------
   Purpose:
     Core helper classes used across all themes, blocks, and pages.
     Provides spacing, layout, alignment, border, and color utilities.
     Fully mobile-first, responsive, and accessibility-safe.

   Works with:
     – core.css  (tokens)
     – motion.css (keyframes)
     – Elementor + Gutenberg (FSE)
     – iOS / Android browsers

   Structure:
     [1] Spacing Utilities
     [2] Flex & Grid Alignment
     [3] Text & Content Alignment
     [4] Shape & Border Utilities
     [5] Color & Background Utilities
     [6] Visibility & Display Utilities
     [7] Accessibility Helpers
     [8] Responsive Modifiers
   ============================================================ */


/* ============================================================
   [1] SPACING UTILITIES
   ------------------------------------------------------------
   Use relative spacing classes to avoid inline styles.
   Units derived from --space-unit (20px base).
   ============================================================ */
.space-xs { margin-bottom: .5rem !important; }
.space-sm { margin-bottom: 1rem !important; }
.space-md { margin-bottom: 2rem !important; }
.space-lg { margin-bottom: 3.5rem !important; }
.space-xl { margin-bottom: 5rem !important; }

.pad-xs { padding: .5rem !important; }
.pad-sm { padding: 1rem !important; }
.pad-md { padding: 2rem !important; }
.pad-lg { padding: 3rem !important; }
.pad-xl { padding: 5rem !important; }

.pad-inline-sm { padding-inline: 1rem !important; }
.pad-inline-md { padding-inline: 2rem !important; }
.pad-block-sm { padding-block: 1rem !important; }
.pad-block-md { padding-block: 2rem !important; }

.gap-xs { gap: .5rem !important; }
.gap-sm { gap: 1rem !important; }
.gap-md { gap: 1.5rem !important; }
.gap-lg { gap: 3rem !important; }

/* Section rhythm */
.section { padding-block: clamp(50px, 8vw, 80px); }

/* ============================================================
   [2] FLEX & GRID ALIGNMENT
   ============================================================ */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-column { display: flex; flex-direction: column; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 992px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

/* ============================================================
   [3] TEXT & CONTENT ALIGNMENT
   ============================================================ */
.center   { text-align: center !important; }
.left     { text-align: left !important; }
.right    { text-align: right !important; }
.justify  { text-align: justify !important; }
.upper    { text-transform: uppercase !important; }
.lower    { text-transform: lowercase !important; }
.capital  { text-transform: capitalize !important; }
.nowrap   { white-space: nowrap !important; }

/* ============================================================
   [4] SHAPE & BORDER UTILITIES
   ============================================================ */
.round-sm { border-radius: var(--radius-sm) !important; }
.round-md { border-radius: var(--radius-md) !important; }
.round-lg { border-radius: var(--radius-lg) !important; }
.round-pill { border-radius: 9999px !important; }
.round-full { border-radius: 50% !important; }

.border { border: 1px solid rgba(0,0,0,0.1) !important; }
.border-none { border: none !important; }
.border-light { border: 1px solid rgba(255,255,255,0.3) !important; }
.border-dark { border: 1px solid rgba(0,0,0,0.2) !important; }

.shadow-soft { box-shadow: var(--shadow-soft) !important; }
.shadow-medium { box-shadow: var(--shadow-medium) !important; }
.shadow-strong { box-shadow: var(--shadow-strong) !important; }

/* ============================================================
   [5] COLOR & BACKGROUND UTILITIES
   ============================================================ */
.text-primary   { color: var(--brand-primary) !important; }
.text-highlight { color: var(--brand-highlight) !important; }
.text-accent    { color: var(--brand-accent) !important; }
.text-muted     { color: var(--brand-neutral) !important; }
.text-invert    { color: var(--color-white) !important; }

.bg-primary   { background: var(--brand-primary) !important; color: #fff; }
.bg-highlight { background: var(--brand-highlight) !important; color: #000; }
.bg-accent    { background: var(--brand-accent) !important; color: #fff; }
.bg-light     { background: var(--color-bg-light) !important; color: var(--color-text-main); }
.bg-dark      { background: var(--color-bg-dark) !important; color: #fff; }

/* Gradients (theme-based) */
.bg-spark  { background: linear-gradient(135deg, #B45F4B 0%, #D7B67A 100%) !important; color:#fff; }
.bg-lightg { background: linear-gradient(135deg, #F6E8B1 0%, #DCA85C 100%) !important; color:#2B2B2B; }
.bg-echo   { background: linear-gradient(135deg, #315E8C 0%, #7EB3E6 100%) !important; color:#fff; }
.bg-freedom{ background: linear-gradient(135deg, #2A5250 0%, #4C7F78 100%) !important; color:#fff; }

/* Transparent overlays */
.overlay-dark::before,
.overlay-light::before {
  content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none;
}
.overlay-dark::before { background: rgba(0,0,0,0.5); }
.overlay-light::before{ background: rgba(255,255,255,0.25); }

/* ============================================================
   [6] VISIBILITY & DISPLAY UTILITIES
   ============================================================ */
.hide { display: none !important; }
.show { display: block !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.z-top { z-index: 999 !important; }
.z-mid { z-index: 100 !important; }
.z-low { z-index: 1 !important; }

/* ============================================================
   [7] ACCESSIBILITY HELPERS
   ============================================================ */
.sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.focus-visible {
  outline: var(--a11y-focus-outline);
  outline-offset: var(--a11y-focus-offset);
}
[role="button"]:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: var(--a11y-focus-outline);
  outline-offset: var(--a11y-focus-offset);
}

/* ============================================================
   [8] RESPONSIVE MODIFIERS
   ------------------------------------------------------------
   Add suffix -md / -lg / -xl for breakpoint-specific behavior.
   Example: .hide-md → hides on screens ≥768px.
   ============================================================ */
@media (min-width: 768px){
  .hide-md { display:none !important; }
  .show-md { display:block !important; }
}
@media (min-width: 992px){
  .hide-lg { display:none !important; }
  .show-lg { display:block !important; }
}
@media (min-width: 1200px){
  .hide-xl { display:none !important; }
  .show-xl { display:block !important; }
}
/* ============================================================
   [9] [LEGACY SUPPORT] .bv-site Wrapper
   ------------------------------------------------------------
   Purpose:
     Maintains compatibility with old Elementor/WP Travel layouts
     that wrapped all page content in .bv-site.
     Prevents layout collapse after modularization.
   ============================================================ */
.bv-site {
  display: block;
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

/* ============================================================
   [10] ACCESSIBILITY EXTENSION] CONTRAST-SAFE TEXT v7.1
   ------------------------------------------------------------
   Purpose:
     Adjusts text color automatically for high-contrast safety
     when layered over bright or dark surfaces.
   ============================================================ */

.contrast-safe {
  color: color-mix(in srgb, var(--color-text-main) 70%, var(--color-bg-light) 30%);
}

.dark-bg .contrast-safe {
  color: color-mix(in srgb, var(--color-white) 90%, var(--brand-accent) 10%);
}

/* ============================================================
   [11] [UTILITY EXTENSION] BV-TABS SUPPORT  v7.3
   ------------------------------------------------------------
   Purpose:
     Structural helpers for .bv-tabs and .bv-tab-panels
     so tabs align properly inside plugin or block wrappers.
   ============================================================ */

.bv-tabs,
.terra-tabs {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.bv-tab-panel img,
.bv-tab-panel video,
.bv-tab-panel iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.bv-tab-panel p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   END OF FILE — utilities.css v7.1
   Next: components.css → header, footer, navigation, buttons
   ============================================================ */