/*
    Theme Name: Yahweh Army Theme
    Theme URI: http://example.com/my-child-theme/
    Description: A child theme on Twentytwentyfive for Yahweh Army.
    Author: Codie Whitaker
    Author URI: http://example.com
    Template: twentytwentyfive
    Version: 1.0.0
    */

/* Remove hover underline from site title */
.site-title a:hover,
.wp-block-site-title a:hover,
header .site-title a:hover,
header .wp-block-site-title a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Make site title responsive */
.site-title,
.wp-block-site-title,
header .site-title,
header .wp-block-site-title {
  font-size: clamp(
    2rem,
    5vw,
    4rem
  ) !important; /* Bigger responsive font size */
  line-height: 1.2 !important; /* Better line height for mobile */
  margin: 0.5rem 0 !important; /* Reasonable margins */
  word-wrap: break-word !important; /* Break long words */
  overflow-wrap: break-word !important; /* Modern break-word */
  max-width: 100% !important; /* Don't exceed container width */
  box-sizing: border-box !important; /* Include padding in width calculation */
}

/* Site title link styling */
.site-title a,
.wp-block-site-title a,
header .site-title a,
header .wp-block-site-title a {
  font-size: inherit !important; /* Inherit from parent */
  line-height: inherit !important;
  word-wrap: break-word !important; /* Break long words in links too */
  overflow-wrap: break-word !important;
  display: block !important; /* Make links block level for better wrapping */
}

/* Responsive adjustments for site title */
@media (max-width: 768px) {
  .site-title,
  .wp-block-site-title,
  header .site-title,
  header .wp-block-site-title {
    font-size: clamp(
      1.8rem,
      4.5vw,
      2.5rem
    ) !important; /* Moderately larger on mobile/tablets */
    margin: 0.25rem 0 !important; /* Less margin on mobile */
    padding: 0 1rem !important; /* Add padding to prevent edge overflow */
  }
}

@media (max-width: 480px) {
  .site-title,
  .wp-block-site-title,
  header .site-title,
  header .wp-block-site-title {
    font-size: clamp(
      1.6rem,
      5vw,
      2.2rem
    ) !important; /* Slightly larger on small phones */
    margin: 0.125rem 0 !important; /* Minimal margin on small screens */
    padding: 0 0.5rem !important; /* Smaller padding on very small screens */
  }
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 768px) {
  /* Global mobile overflow fix */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }


  /* Fix common overflow culprits */
  .wp-block-group,
  .wp-site-blocks,
  .wp-block-columns,
  .entry-content,
  header,
  .site-header,
  main,
  .parallax-section {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Ensure header doesn't cause overflow */
  header,
  .site-header,
  .wp-block-group {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* Make logo clickable - targeting your specific logo structure */
.wp-block-image.size-full.is-resized,
.wp-block-image.size-full.is-resized img {
  cursor: pointer !important;
  transition: opacity 0.3s ease;
}

/* Hover effect for logo */
.wp-block-image.size-full.is-resized:hover,
.wp-block-image.size-full.is-resized img:hover {
  opacity: 0.8 !important;
}

.hide-title {
  display: none !important;
}

/* Make locations-rows responsive - default to row layout */
.locations-rows {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important; /* Add space between items */
  flex-direction: row !important; /* Default to row layout for desktop */
}

.locations-rows > .wp-block-group {
  flex: 1 !important;
  max-width: calc(50% - 0.5rem) !important;
  width: calc(50% - 0.5rem) !important;
  margin-bottom: 1rem !important;
  box-sizing: border-box !important;
}

/* Mobile only - stack vertically */
@media (max-width: 767px) {
  .locations-rows {
    flex-direction: column !important;
  }

  .locations-rows > .wp-block-group {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  /* Location sections - 90% width and centered on mobile only */
  .locations-section {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    box-sizing: border-box !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Override parent container constraints for location sections on mobile */
  .entry-content:has(.locations-section),
  .wp-block-post-content:has(.locations-section),
  .wp-block-group:has(.locations-section) {
    max-width: 100vw !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
  }

  /* Target specific WordPress constrained containers */
  .entry-content.alignfull.has-global-padding:has(.locations-section),
  .wp-block-group.alignwide.has-global-padding:has(.locations-section) {
    max-width: 100vw !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
  }
}

/* Alternative approach - if flexbox doesn't work, use display methods */
@media (max-width: 767px) {
  .locations-rows.is-nowrap {
    flex-wrap: wrap !important; /* Override the is-nowrap */
  }

  .locations-rows {
    display: block !important;
  }

  .locations-rows > .wp-block-group {
    display: block !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
    margin-bottom: 1rem !important;
  }

  /* Fix column overflow issues on mobile */
  .locations-rows .wp-block-columns {
    flex-direction: column !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .locations-rows .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    margin-bottom: 1rem !important;
  }

  /* Ensure all content within columns is visible */
  .locations-rows .wp-block-columns,
  .locations-rows .wp-block-column,
  .locations-rows .wp-block-column * {
    box-sizing: border-box !important;
    overflow: visible !important;
  }
}

/* Center align post title */
.wp-block-post-title {
  text-align: center !important;
}

/* Left align posts page title */
.posts-page-title {
  text-align: left !important;
}

/* Leadership section text wrap styles */
.leadership-section {
  position: relative !important;
  overflow: visible !important;
}

.leadership-image {
  float: left !important;
  width: 45% !important;
  margin-right: var(--wp--preset--spacing--50) !important;
  margin-bottom: var(--wp--preset--spacing--30) !important;
  margin-top: 0 !important;
  clear: left !important;
}

.leadership-content {
  overflow: visible !important;
  width: 100% !important;
}

.leadership-content h2,
.leadership-content p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile responsive - stack image and text on mobile */
@media (max-width: 768px) {
  /* Force override any WordPress container constraints */
  .entry-content,
  .wp-block-post-content,
  .wp-site-blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Target the main page container */
  .wp-block-group.alignfull.leadership-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .leadership-image {
    float: none !important;
    width: 100% !important;
    max-width: 400px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    margin-bottom: var(--wp--preset--spacing--30) !important;
    display: block !important;
    text-align: center !important;
  }

  .leadership-image figure {
    margin: 0 auto !important;
    text-align: center !important;
  }

  .leadership-content {
    width: 100% !important;
    clear: both !important;
    text-align: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  .leadership-content h2,
  .leadership-content p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }

  .leadership-section {
    display: block !important;
    text-align: center !important;
  }

  /* Ensure the main containers are also centered */
  .leadership-section .wp-block-group.alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center !important;
    display: block !important;
  }

  /* Additional centering overrides for stubborn alignment */
  .leadership-section,
  .leadership-section * {
    box-sizing: border-box !important;
  }

  .leadership-section .wp-block-group {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Override any left-aligned defaults */
  .leadership-content .wp-block-heading,
  .leadership-content .wp-block-paragraph,
  .leadership-content h2,
  .leadership-content p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Force centering on the entire leadership section container */
  .wp-block-group.leadership-section {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .wp-block-group.leadership-section .alignwide {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Break out of constrained layouts */
  .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Force full width and center everything */
  .wp-block-group.alignfull {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Override Twenty Twenty-Five theme specific constraints */
  .wp-block-group.alignfull.has-global-padding {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Main navigation menu styling */
.wp-block-navigation,
.wp-block-navigation ul,
.wp-block-navigation__container {
  background-color: #111111 !important;
}

.wp-block-navigation .wp-block-navigation-item {
  background-color: #111111 !important;
  border-radius: 10px !important;
}

.wp-block-navigation .wp-block-navigation-item a,
.wp-block-navigation .wp-block-navigation-item__content {
  border-radius: 10px !important;
}

/* Mobile hamburger menu styling */
/* Target the mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-dialog.is-menu-open,
.wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-dialog-content {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Mobile menu items styling */
.wp-block-navigation__responsive-container .wp-block-navigation-item a,
.wp-block-navigation__responsive-dialog .wp-block-navigation-item a,
.wp-block-navigation__responsive-container .wp-block-navigation-link,
.wp-block-navigation__responsive-dialog .wp-block-navigation-link,
.wp-block-navigation__responsive-container .wp-block-navigation__container a,
.wp-block-navigation__responsive-dialog .wp-block-navigation__container a {
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 12px 16px !important;
  display: block !important;
}

/* Mobile menu items hover effect */
.wp-block-navigation__responsive-container .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-dialog .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container .wp-block-navigation-link:hover,
.wp-block-navigation__responsive-dialog .wp-block-navigation-link:hover,
.wp-block-navigation__responsive-container
  .wp-block-navigation__container
  a:hover,
.wp-block-navigation__responsive-dialog
  .wp-block-navigation__container
  a:hover {
  color: #cccccc !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile menu close button styling */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-dialog-close {
  color: #ffffff !important;
  background-color: transparent !important;
  border: none !important;
}

.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-dialog-close:hover {
  color: #cccccc !important;
}

/* Remove focus indicators from hamburger menu button */
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-dialog-open:focus,
.wp-block-navigation__responsive-container-open:active,
.wp-block-navigation__responsive-dialog-open:active,
.wp-block-navigation__responsive-container-open:visited,
.wp-block-navigation__responsive-dialog-open:visited {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Alternative selectors for different WordPress themes/versions */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #000000 !important;
}

.wp-block_navigation
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  background-color: #000000 !important;
}

.wp-block-navigation
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  background-color: transparent !important;
}

.wp-block-navigation
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item
  a {
  color: #ffffff !important;
}

/* Make sure the overlay covers the full screen */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-dialog.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
}

/* Prevent horizontal overflow / cutoff of nav links in responsive menu */
@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-dialog.is-menu-open,
  .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-dialog-content,
  .wp-block-navigation__responsive-container .wp-block-navigation__container,
  .wp-block-navigation__responsive-dialog .wp-block-navigation__container {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 20px !important; /* consistent horizontal gutter */
    margin: 0 !important;
    overflow-x: hidden !important;
  }
}

/* Ensure menu items are properly spaced and visible */
.wp-block-navigation__responsive-container .wp-block-navigation__container,
.wp-block-navigation__responsive-dialog .wp-block-navigation__container {
  padding: 20px 0 !important;
  margin: 0 !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item,
.wp-block-navigation__responsive-dialog .wp-block-navigation-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: right !important;
}

/* Ensure link blocks wrap and don't overflow horizontally */
.wp-block-navigation__responsive-container .wp-block-navigation-item a,
.wp-block-navigation__responsive-dialog .wp-block-navigation-item a,
.wp-block-navigation__responsive-container .wp-block-navigation-link,
.wp-block-navigation__responsive-dialog .wp-block-navigation-link {
  white-space: normal !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-align: right !important;
}

/* Community Resources Styling */
/* Remove padding above the columns */
.locations-rows {
  padding-top: 0 !important;
}

/* Remove padding from the parent container of locations-rows */
.locations-rows:parent,
div[style*="width: 90%"][style*="margin: 0 auto"] {
  padding-top: 0 !important;
}

/* More specific targeting for the community resources container */
#community-resources-container
  div[style*="padding-top:var(--wp--preset--spacing--60)"] {
  padding-top: 0 !important;
}

/* Target any div within community resources that has inline padding-top */
#community-resources-container div[style*="padding-top"] {
  padding-top: 0 !important;
}

/* Additional targeting for any container with the specific padding variable */
div[style*="padding-top:var(--wp--preset--spacing--60)"] {
  padding-top: 0 !important;
}

/* Remove margin below the filter button */
#resources-filter-container {
  margin-bottom: 0 !important;
}

/* Global Image Border Radius */
/* Apply 10px border radius to all images except parallax background */
img {
  border-radius: 10px !important;
  transition: opacity 180ms linear; /* enable smooth fade globally */
}

/* Also target WordPress image blocks and figures */
.wp-block-image img,
figure img,
.wp-block-media-text img,
.wp-block-gallery img {
  border-radius: 10px !important;
}

/* Ensure featured images and post thumbnails get border radius */
.post-thumbnail img,
.wp-post-image {
  border-radius: 10px !important;
}

/* Mobile Site Title and Header Logo Adjustments */
/* Make header logo smaller */
.wp-block-site-logo img,
.custom-logo,
.site-logo img {
  max-height: 50px !important;
  width: auto !important;
}

/* Fine-tune logo size on mobile */
@media (max-width: 767px) {
  .wp-block-site-logo img,
  .wp-block-site-logo .custom-logo,
  .custom-logo,
  .site-logo img,
  header .wp-block-site-logo img,
  header .wp-block-site-logo .custom-logo,
  .wp-block-group .wp-block-site-logo img,
  .site-header .wp-block-site-logo img,
  img.custom-logo,
  .wp-block-site-logo a img,
  .wp-image-15,
  img.wp-image-15 {
    width: 65px !important;
    margin-left: 10px !important;
    object-fit: contain !important;
    max-width: 80px !important;
  }

  /* Target the logo container as well */
  .wp-block-site-logo,
  header .wp-block-site-logo,
  .site-header .wp-block-site-logo {
    width: 80px !important;
    margin-left: 20px !important;
  }
}

/* Add margin to navigation icon on mobile and tablet */
@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-dialog-open,
  .wp-block-navigation .wp-block-navigation__responsive-container-open,
  .wp-block-navigation .wp-block-navigation__responsive-dialog-open {
    margin-right: 20px !important;
  }
}

/* Header background on all pages */
header.site-header,
header,
.site-header {
  background-color: #111111 !important;
}

/* Scroll opacity image specific overrides */
/* Remove border radius on images meant to fade */
img.scroll-opacity,
.wp-block-image.scroll-opacity img,
figure.scroll-opacity img {
  border-radius: 0 !important;
}

/* Mobile: make the scroll-opacity image span edge-to-edge if placed in a constrained container */
@media (max-width: 767px) {
  img.scroll-opacity,
  .wp-block-image.scroll-opacity img,
  figure.scroll-opacity img {
    width: 100vw !important; /* full viewport width */
    max-width: 100vw !important; /* override theme/img max-width rules */
    margin-left: calc(-50vw + 50%) !important; /* break out of centered container */
    margin-right: calc(-50vw + 50%) !important;
    display: block !important;
  }
  /* Ensure parent figure also breaks out if it carries the class */
  figure.scroll-opacity {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
}

/* Removed complex :has() and JS helper; keep CSS-only targeted mobile breakout above */

/* Footer: center items in .footer-top only on mobile */
@media (max-width: 767px) {
  .footer-top {
    justify-content: center !important;
  }
}

/* Footer: center text inside .footer-1 only on mobile */
@media (max-width: 767px) {
  .footer-1 {
    text-align: center !important;
    display: flex !important;           /* ensure it's a flex container on mobile */
    justify-content: center !important; /* center children horizontally */
    align-items: center !important;     /* center children vertically (single row) */
    flex-wrap: wrap !important;         /* allow wrapping if there are multiple items */
  }
}
