/*
Theme Name: POSP Custom Block Theme
Theme URI: https://posp.co.uk
Author: Custom Developer
Description: A bespoke block theme for Parish of Old St Pancras inspired by ThemeRex Mission.
Version: 1.0.0
Text Domain: posp-theme
*/

/* ==========================================================================
   1. VARIABLES & BASE RESET
   ========================================================================== */
:root {
  --wp--preset--color--primary-gold: #c49a45;
  --wp--preset--color--deep-dark: #1c1d1f;
  --wp--preset--color--footer-dark: #1c110b;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevents horizontal scrollbars from 100vw breakouts */
}

/* Remove main wrapper constraints */
main.wp-block-group {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

/* ==========================================================================
   TRANSPARENT OVERLAY HEADER (FLOATING)
   ========================================================================== */

/* 1. Pull the header template part wrapper completely out of document flow */
header.wp-block-template-part {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* 2. Style the inner header group */
.site-header {
  position: relative !important;
  width: 100% !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
}

/* 3. Eliminate top block margins on main content */
.wp-site-blocks > main,
.wp-site-blocks > :first-child {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* 4. Account for WordPress Admin Bar when logged in */
.logged-in header.wp-block-template-part {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .logged-in header.wp-block-template-part {
    top: 46px !important;
  }
}

/* 5. Mobile Nav Overlay Background Fix */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--deep-dark, #1c1d1f) !important;
}

/* 6. Push cover block inner text down so it isn't hidden under logo/buttons */
.wp-block-cover .wp-block-cover__inner-container {
  padding-top: 140px !important;
  padding-bottom: 60px !important;
}

/* ==========================================================================
   3. HERO & COVER BLOCK PADDING
   ========================================================================== */

/* Push hero content down so header controls don't overlap title text */
.wp-block-cover .wp-block-cover__inner-container {
  padding-top: 140px;
  padding-bottom: 80px;
}

/* ==========================================================================
   4. FULL-WIDTH (100VW) BREAKOUT SYSTEM
   ========================================================================== */

/* Unclip layout wrappers */
main.is-layout-constrained,
main .entry-content.is-layout-constrained {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Constrained content widths */
.is-layout-constrained
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size, 800px);
  margin-left: auto !important;
  margin-right: auto !important;
}

.is-layout-constrained > .alignwide {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Breakout full width */
.is-layout-constrained > .alignfull,
.wp-block-cover.alignfull {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
}

/* ==========================================================================
   5. FOOTER STYLES
   ========================================================================== */

.site-footer .wp-block-social-links {
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .site-footer .wp-block-social-links {
    justify-content: center;
    margin-top: 20px;
  }
}