/* =========================================================
   onepen-layout-fixes.css
   Purpose:
   1) Make Gutenberg/Theme use wider content area globally
   2) Fix hero width + REAL padding
   3) Remove accidental scaling + conflicting padding rules
========================================================= */

/* ---------- GLOBAL WIDTH (Gutenberg controlled) ---------- */
/* These two vars are the “real boss” in block themes / modern WP */
:root{
  --wp--style--global--content-size: 1600px; /* try 1500–1800 */
  --wp--style--global--wide-size: 96vw;
}

/* Some themes still clamp layout with these */
.wp-site-blocks,
.site,
#page,
#content,
.site-main,
.content-area,
.entry-content{
  max-width:none !important;
}

/* Gutenberg layout engine clamps constrained blocks — free them */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: var(--wp--style--global--content-size) !important;
}
.alignwide{
  max-width: var(--wp--style--global--wide-size) !important;
}
.alignfull{
  max-width: none !important;
  width: 100% !important;
}

/* ---------- HERO: FORCE WIDTH + PADDING (ONE RULESET) ---------- */
/* 1) Make sure we are not scaling the hero (you had transform:scale) */
.onepen-stage--hero .onepen-stage__glass{
  transform: none !important;
}

/* 2) Make the big glass wrapper actually wide */
.onepen-stage--hero .onepen-stage__glass{
  width: min(1700px, 96vw) !important;   /* wider than your old 1220px cap */
  margin: 18px auto 0 !important;
  box-sizing: border-box !important;
}

/* 3) REAL padding: apply to BOTH wrapper + inner Gutenberg containers */
.onepen-stage--hero .onepen-stage__glass{
  padding: 56px !important; /* the “air” you keep asking for */
}

.onepen-stage--hero .onepen-stage__glass :where(.wp-block-columns, .wp-block-group, .wp-block-cover__inner-container){
  box-sizing: border-box !important;
}

/* If Gutenberg adds an inner container that “eats” padding visually, pad it too */
.onepen-stage--hero .onepen-stage__glass > :where(.wp-block-group, .wp-block-columns){
  padding: 0 !important; /* keep padding on the glass wrapper */
  margin: 0 !important;
}

/* Inner panels: give them breathing room */
.onepen-stage--hero .onepen-hero-media,
.onepen-stage--hero .onepen-hero-text{
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* Tabs: keep inside the padded area */
.onepen-stage--hero .onepen-tabs{
  left: 34px !important;
  top: 56px !important;
}

/* Space between image/text panels */
.onepen-stage--hero .onepen-hero-grid,
.onepen-stage--hero .wp-block-columns{
  gap: 36px !important;
}

/* Buttons area moved right (your request) */
.onepen-stage--hero .wp-block-buttons{
  justify-content: flex-end !important;
  gap: 16px !important;
  margin-top: 22px !important;
}

/* Mobile */
@media (max-width:900px){
  :root{
    --wp--style--global--content-size: 92vw;
    --wp--style--global--wide-size: 96vw;
  }

  .onepen-stage--hero .onepen-stage__glass{
    width: 94vw !important;
    padding: 20px !important;
  }

  .onepen-stage--hero .onepen-tabs{
    position: static !important;
    margin-bottom: 12px !important;
  }
}