/* Vigilis Tree Shelters – Layout & Spacing System */

:root {
  /* Spacing Scale (Base unit: 4px) */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.12);

  /* Container — 1600px content rail used site-wide: section __inner shells, .wp-container-core-group__content (Gutenberg group blocks), and theme.json contentSize/wideSize. Plain pages and blog content reflow to this measure. Section wrappers (e.g. dark CTA, testimonials) span full viewport; only their __inner shells are constrained. */
  --container-max-width: 1600px;
  --container-padding-mobile: var(--spacing-4);
  --container-padding-tablet: var(--spacing-6);
  --container-padding-desktop: var(--spacing-8);

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Body & Container */
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-primary);
}

.wp-site-blocks {
  padding: 0;
}

/* Container Wrapper */
.wp-container-core-group__content {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* Main landmark resets — prevent any cascade applying block spacing to the page wrapper */
.wp-block-group.site-main {
  padding: 0 !important;
  margin: 0 !important;
}

.wp-block-columns {
  gap: var(--spacing-6);
  margin: var(--spacing-6) 0;
}

.wp-block-column {
  padding: var(--spacing-6);
}

.wp-block-image {
  margin: var(--spacing-6) 0;
}

.wp-block-image img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero Section – Optimized heights for mobile UX & SEO (reduced initial scroll) */
.wp-block-cover {
  /* Small mobile: 40vh (reduces scrolling, better LCP) */
  min-height: 40vh;
  padding: var(--spacing-6) var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (min-width: 480px) {
  .wp-block-cover {
    min-height: 45vh;
    padding: var(--spacing-8) var(--spacing-4);
  }
}

@media (min-width: 640px) {
  .wp-block-cover {
    min-height: 55vh;
    padding: var(--spacing-12) var(--spacing-6);
  }
}

@media (min-width: 768px) {
  .wp-block-cover {
    min-height: 60vh;
    padding: var(--spacing-16) var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .wp-block-cover {
    min-height: 70vh;
    padding: var(--spacing-24);
  }
}

/* Card Styling */
.wp-block-group.is-style-card,
.wp-block-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  transition: all 200ms ease-in-out;
  box-shadow: none;
}

.wp-block-group.is-style-card:hover,
.wp-block-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Responsive Utilities – 5-tier responsive system (optimized for real devices) */

/* Small Mobile (< 480px) – iPhone SE, small phones */
@media (max-width: 479px) {
  .wp-block-columns {
    flex-direction: column;
    gap: var(--spacing-4);
  }

  /* Responsive button padding for 44px+ touch targets */
  .wp-block-button__link {
    padding: 16px 24px;
  }

  h1, .h1 {
    margin-bottom: var(--spacing-3);
  }
}

/* Mobile (480–639px) – Standard phones */
@media (min-width: 480px) and (max-width: 639px) {
  .wp-block-columns {
    flex-direction: column;
    gap: var(--spacing-4);
  }

  /* Responsive button padding */
  .wp-block-button__link {
    padding: 16px 24px;
  }
}

/* Mobile Plus (640–767px) – Large phones, small tablets */
@media (min-width: 640px) and (max-width: 767px) {
  .wp-block-columns {
    flex-direction: column;
    gap: var(--spacing-6);
  }

  /* Responsive button padding */
  .wp-block-button__link {
    padding: 16px 24px;
  }
}

/* Tablet (768–1023px) – iPad portrait */
@media (min-width: 768px) and (max-width: 1023px) {
  .wp-block-columns {
    gap: var(--spacing-6);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Responsive button padding (slightly smaller on tablet) */
  .wp-block-button__link {
    padding: 14px 24px;
  }
}

/* Desktop (1024–1279px) – Standard desktop */
@media (min-width: 1024px) and (max-width: 1279px) {
  .wp-block-columns {
    gap: var(--spacing-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  /* Standard button padding on desktop */
  .wp-block-button__link {
    padding: 12px 24px;
  }
}

/* Wide (1280px+) – Large displays */
@media (min-width: 1280px) {
  .wp-block-columns {
    gap: var(--spacing-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  /* Standard button padding */
  .wp-block-button__link {
    padding: 12px 24px;
  }
}

/* Grid System */
.wp-block-group.is-grid {
  display: grid;
  gap: var(--spacing-6);
}

.wp-block-group.is-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.wp-block-group.is-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.wp-block-group.is-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .wp-block-group.is-grid.columns-2,
  .wp-block-group.is-grid.columns-3,
  .wp-block-group.is-grid.columns-4 {
    grid-template-columns: 1fr;
  }
}

/* Flexbox Utilities */
.wp-block-group.is-flex {
  display: flex;
  gap: var(--spacing-6);
  flex-wrap: wrap;
}

.wp-block-group.is-flex.flex-column {
  flex-direction: column;
}

.wp-block-group.is-flex.items-center {
  align-items: center;
}

.wp-block-group.is-flex.justify-center {
  justify-content: center;
}

.wp-block-group.is-flex.justify-between {
  justify-content: space-between;
}

/* Aspect Ratios */
.wp-block-image.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.wp-block-image.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.wp-block-image.aspect-1-1 {
  aspect-ratio: 1 / 1;
}

/* Display Utilities */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Spacing Utilities */
.mt-0 { margin-top: var(--spacing-0); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-12 { margin-top: var(--spacing-12); }

.mb-0 { margin-bottom: var(--spacing-0); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-12 { margin-bottom: var(--spacing-12); }

.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }

.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }

/* Print Styles */
@media print {
  body {
    background: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }

  .no-print {
    display: none !important;
  }
}