/**
 * PHC TOP Pro 2.0.0 - SPACING SYSTEM
 * 
 * Centralized spacing system using CSS variables
 * Automatically scales from mobile to desktop
 * NO manual padding/margin fixes needed!
 * 
 * @package PHC_TOP
 * 
 */

/* ========================================
   BASE SPACING SCALE
   ======================================== */

:root {
  /* Spacing scale (8px base unit) */
  --space-0:    0;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;
  --space-5xl:  96px;
  
  /* Block-level spacing (scales responsively) */
  --block-gap:        var(--space-lg);      /* Gap between blocks */
  --block-padding:    var(--space-lg);      /* Padding inside blocks */
  --section-spacing:  var(--space-3xl);     /* Gap between sections */
  --component-gap:    var(--space-md);      /* Gap inside components */
  --line-height:      1.6;                  /* Default line height */
  
  /* Layout spacing */
  --container-padding:  var(--space-xl);
  --grid-gap:          var(--space-lg);
  --card-padding:      var(--space-xl);
  --card-gap:          var(--space-md);
  
  /* Touch-friendly */
  --touch-target:      48px;                /* Min touch target size */
}

/* ========================================
   MOBILE SPACING (320px - 479px)
   ======================================== */

@media (max-width: 479px) {
  :root {
    --block-gap:        var(--space-md);    /* Reduce gaps */
    --block-padding:    var(--space-md);    /* Reduce padding */
    --section-spacing:  var(--space-2xl);   /* Keep section gaps */
    --component-gap:    var(--space-sm);    /* Tight components */
    --container-padding: var(--space-md);
    --card-padding:      var(--space-md);
  }
}

/* ========================================
   LARGE MOBILE (480px - 767px)
   ======================================== */

@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --block-gap:        var(--space-md);
    --block-padding:    var(--space-lg);
    --component-gap:    var(--space-md);
    --container-padding: var(--space-lg);
  }
}

/* ========================================
   TABLET SPACING (768px - 1023px)
   ======================================== */

@media (min-width: 768px) {
  :root {
    --block-gap:        var(--space-lg);
    --block-padding:    var(--space-xl);
    --section-spacing:  var(--space-2xl);
    --component-gap:    var(--space-lg);
    --container-padding: var(--space-2xl);
    --card-padding:      var(--space-lg);
  }
}

/* ========================================
   DESKTOP (1024px - 1439px)
   ======================================== */

@media (min-width: 1024px) {
  :root {
    --block-gap:        var(--space-lg);
    --block-padding:    var(--space-xl);
    --section-spacing:  var(--space-3xl);
    --component-gap:    var(--space-lg);
    --container-padding: var(--space-2xl);
    --card-padding:      var(--space-xl);
  }
}

/* ========================================
   LARGE DESKTOP (1440px+)
   ======================================== */

@media (min-width: 1440px) {
  :root {
    --block-gap:        var(--space-xl);
    --block-padding:    var(--space-xl);
    --section-spacing:  var(--space-3xl);
    --component-gap:    var(--space-lg);
    --container-padding: var(--space-2xl);
    --card-padding:      var(--space-xl);
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Padding utilities */
.p-0    { padding: var(--space-0); }
.p-xs   { padding: var(--space-xs); }
.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }
.p-lg   { padding: var(--space-lg); }
.p-xl   { padding: var(--space-xl); }
.p-2xl  { padding: var(--space-2xl); }
.p-3xl  { padding: var(--space-3xl); }

/* Padding top */
.pt-0   { padding-top: var(--space-0); }
.pt-xs  { padding-top: var(--space-xs); }
.pt-sm  { padding-top: var(--space-sm); }
.pt-md  { padding-top: var(--space-md); }
.pt-lg  { padding-top: var(--space-lg); }
.pt-xl  { padding-top: var(--space-xl); }

/* Padding bottom */
.pb-0   { padding-bottom: var(--space-0); }
.pb-xs  { padding-bottom: var(--space-xs); }
.pb-sm  { padding-bottom: var(--space-sm); }
.pb-md  { padding-bottom: var(--space-md); }
.pb-lg  { padding-bottom: var(--space-lg); }
.pb-xl  { padding-bottom: var(--space-xl); }

/* Margin utilities */
.m-0    { margin: var(--space-0); }
.m-xs   { margin: var(--space-xs); }
.m-sm   { margin: var(--space-sm); }
.m-md   { margin: var(--space-md); }
.m-lg   { margin: var(--space-lg); }
.m-xl   { margin: var(--space-xl); }
.m-2xl  { margin: var(--space-2xl); }

/* Margin top */
.mt-0   { margin-top: var(--space-0); }
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }

/* Margin bottom */
.mb-0   { margin-bottom: var(--space-0); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* Gap utilities (for flex/grid) */
.gap-0    { gap: var(--space-0); }
.gap-xs   { gap: var(--space-xs); }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.gap-lg   { gap: var(--space-lg); }
.gap-xl   { gap: var(--space-xl); }
.gap-2xl  { gap: var(--space-2xl); }

/* ========================================
   BLOCK DEFAULTS
   ======================================== */

/* All blocks get consistent spacing */
.wp-block {
  margin-bottom: var(--block-gap) !important;
}

.wp-block:last-child {
  margin-bottom: 0 !important;
}

/* Block containers */
.phc-block-container {
  padding: var(--block-padding);
  margin-bottom: var(--block-gap);
}

/* Section spacing */
.phc-section {
  margin-bottom: var(--section-spacing);
  padding: var(--block-padding);
}

/* Grid/flex components */
.phc-flex,
.phc-grid {
  gap: var(--component-gap);
}

/* Cards */
.phc-card {
  padding: var(--card-padding);
  gap: var(--card-gap);
}

/* ========================================
   RESPONSIVE FLEX
   ======================================== */

.phc-flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: var(--component-gap);
}

.phc-flex-responsive > * {
  flex: 1 1 100%;
}

@media (min-width: 480px) {
  .phc-flex-responsive > * {
    flex: 1 1 calc(50% - var(--component-gap) / 2);
  }
}

@media (min-width: 768px) {
  .phc-flex-responsive > * {
    flex: 1 1 calc(50% - var(--component-gap) / 2);
  }
}

@media (min-width: 1024px) {
  .phc-flex-responsive > * {
    flex: 1 1 calc(33.333% - var(--component-gap));
  }
}

/* ========================================
   NO-SPACING VARIANTS
   ======================================== */

/* Remove all spacing when needed */
.phc-no-gap {
  gap: 0 !important;
}

.phc-no-padding {
  padding: 0 !important;
}

.phc-no-margin {
  margin: 0 !important;
}

/* ========================================
   RESET DEFAULTS
   ======================================== */

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

body {
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: var(--space-md);
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--space-md);
  margin-top: var(--space-lg);
}

h1:first-child,
h2:first-child,
h3:first-child {
  margin-top: 0;
}

/* ========================================
   PRINT SPACING
   ======================================== */

@media print {
  :root {
    --block-gap:        var(--space-lg);
    --section-spacing:  var(--space-2xl);
  }
}