/* ==========================================
   DARJA RIHLA — PAGE SHELL v1
   File: dr-page.css
   Role: Shared page-level shell helpers.
   Sits between dr-visual-engine and dr-theme-page in the
   enqueue waterfall. Provides only: WP block content
   width resets for pages, page root defaults, responsive
   spacing helpers, and safe fallbacks.
   Does NOT contain post layout or category mood styling.
   Mobile-first throughout.
   ========================================== */

/* ==========================================
   1. WORDPRESS PAGE CONTENT RESETS
   Scoped to .dr-family-page so these never
   affect single-post or archive templates.
   ========================================== */

body.dr-family-page .wp-block-post-content {
  width: 100%;
  max-width: 100%;
  padding-block: 0 3rem;
  padding-inline: 0;
}

body.dr-family-page .wp-block-post-content > * {
  max-width: none;
}

body.dr-family-page .is-layout-constrained
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: min(100% - 2rem, var(--dr-container, 1200px));
  margin-inline: auto;
}

body.dr-family-page .wp-block-post-content > .alignfull,
body.dr-family-page .wp-block-post-content > .wp-block-group.alignfull {
  width: 100%;
  max-width: 100%;
}

/* ==========================================
   2. PAGE ROOT DEFAULTS
   Minimal defaults. Body background and color
   are already set by dr-global.css.
   ========================================== */

body.dr-family-page {
  --dr-page-top-pad: clamp(2.5rem, 6vw, 5rem);
}

body.dr-family-page main.wp-block-group,
body.dr-family-page .site-main {
  min-height: 60vh;
}

/* ==========================================
   3. RESPONSIVE SPACING HELPERS
   Page-scoped classes. These complement the
   dr-section / dr-container utilities in
   dr-global.css without duplicating them.
   ========================================== */

.dr-page-top {
  padding-top: var(--dr-page-top-pad, clamp(2.5rem, 6vw, 5rem));
}

.dr-page-section {
  position: relative;
  padding-block: clamp(2.5rem, 5.5vw, 5rem);
}

.dr-page-section--tight {
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
}

.dr-page-section--large {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.dr-page-inner {
  width: min(100% - 2rem, var(--dr-container-wide, 1360px));
  margin-inline: auto;
}

.dr-page-inner--narrow {
  width: min(100% - 2rem, 960px);
  margin-inline: auto;
}

/* ==========================================
   4. PAGE ADMIN BAR OFFSET
   ========================================== */

body.dr-family-page.admin-bar {
  scroll-padding-top: 46px;
}

/* ==========================================
   5. RESPONSIVE BREAKPOINTS
   ========================================== */

@media (min-width: 768px) {
  body.dr-family-page .wp-block-post-content {
    padding-block: 0 4rem;
  }
}

@media (min-width: 1200px) {
  body.dr-family-page .wp-block-post-content {
    padding-block: 0 5rem;
  }
}

/* ==========================================
   6. SAFE FALLBACKS
   Ensure page background is always set even
   if dr-global.css loads out of order.
   ========================================== */

body.dr-family-page {
  background-color: var(--dr-bg, #071019);
  color: var(--dr-text, #ecf5fb);
}