/*
The Hurt Boss - Block Frontend Styles
Ensures consistency between editor and frontend
*/

/* Block editor color classes */
.has-mint-green-color {
  color: #9dcfb9 !important;
}

.has-mint-green-background-color {
  background-color: #9dcfb9 !important;
}

.has-navy-blue-color {
  color: #253871 !important;
}

.has-navy-blue-background-color {
  background-color: #253871 !important;
}

.has-yellow-color {
  color: #f7ed50 !important;
}

.has-yellow-background-color {
  background-color: #f7ed50 !important;
}

.has-light-gray-color {
  color: #fafafa !important;
}

.has-light-gray-background-color {
  background-color: #fafafa !important;
}

.has-medium-gray-color {
  color: #bdc3c7 !important;
}

.has-medium-gray-background-color {
  background-color: #bdc3c7 !important;
}

.has-black-color {
  color: #000000 !important;
}

.has-black-background-color {
  background-color: #000000 !important;
}

.has-white-color {
  color: #ffffff !important;
}

.has-white-background-color {
  background-color: #ffffff !important;
}

/* Font size classes */
.has-small-font-size {
  font-size: 14px !important;
}

.has-normal-font-size {
  font-size: 16px !important;
}

.has-medium-font-size {
  font-size: 18px !important;
}

.has-large-font-size {
  font-size: 22px !important;
}

.has-extra-large-font-size {
  font-size: 36px !important;
}

.has-hero-font-size {
  font-size: 60px !important;
}

/* Core block styles */
.wp-block-buttons {
	width: 100%;
}

/* .wp-block-button .wp-block-button__link {
  background: #f7ed50;
  color: #000000;
  font-weight: 600;
  border-radius: 5px;
  padding: 12px 24px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 16px;
  border: none;
  display: inline-block;
  cursor: pointer;
}

.wp-block-button .wp-block-button__link:hover {
  background: #9DCFB9;
  color: #ffffff;
  transform: translateY(-2px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #f7ed50;
  border: 2px solid #f7ed50;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #253871;
  color: #ffffff;
} */

/* Quote blocks */
.wp-block-quote {
  border-left: 4px solid #9dcfb9;
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
}

.wp-block-quote cite {
  color: #bdc3c7;
  font-size: 14px;
  font-style: normal;
}

.wp-block-pullquote {
  border-top: 2px solid #9dcfb9;
  border-bottom: 2px solid #9dcfb9;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 1.2em;
  font-style: italic;
}

/* Table blocks */
.wp-block-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5rem;
}

.wp-block-table td,
.wp-block-table th {
  border: 1px solid #bdc3c7;
  padding: 12px;
  text-align: left;
}

.wp-block-table th {
  background: #fafafa;
  font-weight: 700;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: #fafafa;
}

/* Separator blocks */
.wp-block-separator {
  border: none;
  border-top: 1px solid #bdc3c7;
  margin: 2rem 0;
}

.wp-block-separator.is-style-wide {
  border-top: 2px solid #bdc3c7;
}

.wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
}

.wp-block-separator.is-style-dots::before {
  content: '···';
  color: #bdc3c7;
  font-size: 20px;
  letter-spacing: 2px;
}

/* Code blocks */
.wp-block-code {
  background: #fafafa;
  border: 1px solid #bdc3c7;
  border-radius: 3px;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  overflow-x: auto;
}

.wp-block-preformatted {
  background: #fafafa;
  border: 1px solid #bdc3c7;
  border-radius: 3px;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

/* Image blocks */
.wp-block-image {
  margin-bottom: 1.5rem;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Remove WordPress default figure aspect ratio */
figure.wp-block-image {
  aspect-ratio: unset !important;
}

/* Support for percentage-based image dimensions */
.wp-block-image[style*="width"] img {
  width: inherit;
}

.wp-block-image[style*="height"] img {
  height: inherit;
  max-height: none;
}

.wp-block-image figcaption {
  color: #bdc3c7;
  font-size: 14px;
  text-align: center;
  margin-top: 0.5rem;
}

.wp-block-image.alignleft {
  float: left;
  margin-right: 1.5rem;
}

.wp-block-image.alignright {
  float: right;
  margin-left: 1.5rem;
}

.wp-block-image.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Gallery blocks */
.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.wp-block-gallery .wp-block-image {
  margin-bottom: 0;
}

/* Columns */
.wp-block-columns {
  display: flex;
  gap: 2rem;
}

.wp-block-column {
  flex: 1;
}

.wp-block-group.has-background {
  padding: 2rem;
  
}

/* Cover blocks */
.wp-block-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover .wp-block-cover__inner-container h3,
.wp-block-cover .wp-block-cover__inner-container h4,
.wp-block-cover .wp-block-cover__inner-container h5,
.wp-block-cover .wp-block-cover__inner-container h6 {
  color: #ffffff;
}

/* Media & Text */
.wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1fr 1fr;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
  order: 2;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  order: 1;
}

/* Alignments */
.alignwide {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .has-hero-font-size {
    font-size: 36px !important;
  }
  
  .has-extra-large-font-size {
    font-size: 28px !important;
  }
  
  .wp-block-columns {
    flex-direction: column;
    gap: 1rem;
  }
  
  .wp-block-media-text {
    grid-template-columns: 1fr;
  }
  
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media,
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    order: initial;
  }
  
  .wp-block-cover {
    min-height: 300px;
    padding: 1rem;
  }
  
  .wp-block-gallery {
    grid-template-columns: 1fr;
  }
	
  // Rows should be able to wrap like columns do, so now they can
  .mobile-row > :is(*, div) {
      flex-basis: 100% !important;
  }
	.mobile-row {
		flex-wrap: wrap;
	}
	.mobile-service-cell {
		flex-basis: 100% !important;
		padding: 16px !important;
	}
	.mobile-small-img {
		min-height: 250px !important;
	}
}

/* Custom Spacing (Margin & Padding) Support */
/* These classes are automatically generated by WordPress when users set custom spacing */

/* Margin classes */
.has-margin { margin: var(--wp--style--block-gap, 1rem) !important; }

/* Top margins */
.has-margin-top-0 { margin-top: 0 !important; }
.has-margin-top-xs { margin-top: 0.25rem !important; }
.has-margin-top-sm { margin-top: 0.5rem !important; }
.has-margin-top-md { margin-top: 1rem !important; }
.has-margin-top-lg { margin-top: 1.5rem !important; }
.has-margin-top-xl { margin-top: 2rem !important; }
.has-margin-top-xxl { margin-top: 3rem !important; }

/* Bottom margins */
.has-margin-bottom-0 { margin-bottom: 0 !important; }
.has-margin-bottom-xs { margin-bottom: 0.25rem !important; }
.has-margin-bottom-sm { margin-bottom: 0.5rem !important; }
.has-margin-bottom-md { margin-bottom: 1rem !important; }
.has-margin-bottom-lg { margin-bottom: 1.5rem !important; }
.has-margin-bottom-xl { margin-bottom: 2rem !important; }
.has-margin-bottom-xxl { margin-bottom: 3rem !important; }

/* Left margins */
.has-margin-left-0 { margin-left: 0 !important; }
.has-margin-left-xs { margin-left: 0.25rem !important; }
.has-margin-left-sm { margin-left: 0.5rem !important; }
.has-margin-left-md { margin-left: 1rem !important; }
.has-margin-left-lg { margin-left: 1.5rem !important; }
.has-margin-left-xl { margin-left: 2rem !important; }
.has-margin-left-xxl { margin-left: 3rem !important; }

/* Right margins */
.has-margin-right-0 { margin-right: 0 !important; }
.has-margin-right-xs { margin-right: 0.25rem !important; }
.has-margin-right-sm { margin-right: 0.5rem !important; }
.has-margin-right-md { margin-right: 1rem !important; }
.has-margin-right-lg { margin-right: 1.5rem !important; }
.has-margin-right-xl { margin-right: 2rem !important; }
.has-margin-right-xxl { margin-right: 3rem !important; }

/* Padding classes */
.has-padding { padding: var(--wp--style--block-gap, 1rem) !important; }

/* Top padding */
.has-padding-top-0 { padding-top: 0 !important; }
.has-padding-top-xs { padding-top: 0.25rem !important; }
.has-padding-top-sm { padding-top: 0.5rem !important; }
.has-padding-top-md { padding-top: 1rem !important; }
.has-padding-top-lg { padding-top: 1.5rem !important; }
.has-padding-top-xl { padding-top: 2rem !important; }
.has-padding-top-xxl { padding-top: 3rem !important; }

/* Bottom padding */
.has-padding-bottom-0 { padding-bottom: 0 !important; }
.has-padding-bottom-xs { padding-bottom: 0.25rem !important; }
.has-padding-bottom-sm { padding-bottom: 0.5rem !important; }
.has-padding-bottom-md { padding-bottom: 1rem !important; }
.has-padding-bottom-lg { padding-bottom: 1.5rem !important; }
.has-padding-bottom-xl { padding-bottom: 2rem !important; }
.has-padding-bottom-xxl { padding-bottom: 3rem !important; }

/* Left padding */
.has-padding-left-0 { padding-left: 0 !important; }
.has-padding-left-xs { padding-left: 0.25rem !important; }
.has-padding-left-sm { padding-left: 0.5rem !important; }
.has-padding-left-md { padding-left: 1rem !important; }
.has-padding-left-lg { padding-left: 1.5rem !important; }
.has-padding-left-xl { padding-left: 2rem !important; }
.has-padding-left-xxl { padding-left: 3rem !important; }

/* Right padding */
.has-padding-right-0 { padding-right: 0 !important; }
.has-padding-right-xs { padding-right: 0.25rem !important; }
.has-padding-right-sm { padding-right: 0.5rem !important; }
.has-padding-right-md { padding-right: 1rem !important; }
.has-padding-right-lg { padding-right: 1.5rem !important; }
.has-padding-right-xl { padding-right: 2rem !important; }
.has-padding-right-xxl { padding-right: 3rem !important; }

/* Block gap support */
.wp-block-group .has-block-gap-xs { gap: 0.25rem !important; }
.wp-block-group .has-block-gap-sm { gap: 0.5rem !important; }
.wp-block-group .has-block-gap-md { gap: 1rem !important; }
.wp-block-group .has-block-gap-lg { gap: 1.5rem !important; }
.wp-block-group .has-block-gap-xl { gap: 2rem !important; }
.wp-block-group .has-block-gap-xxl { gap: 3rem !important; }

/* Custom spacing for specific values (WordPress generates these automatically) */
/* These handle arbitrary values like "20px" or "2em" */
[style*="margin"] { /* Allows WordPress-generated inline margin styles */ }
[style*="padding"] { /* Allows WordPress-generated inline padding styles */ }

/* Ensure individual columns can have custom margins */
.wp-block-column {
  /* Allow WordPress margin controls to override default flex behavior */
  box-sizing: border-box;
}

/* Columns container should respect individual column margins */
.wp-block-columns {
  /* Allow individual columns to have custom margins */
  align-items: flex-start; /* Prevents columns from stretching if they have different margins */
}

/* Font Family Classes for Frontend */
.has-dm-sans-font-family {
  font-family: 'DM Sans', Arial, sans-serif !important;
}

.has-jost-font-family {
  font-family: 'Jost', Arial, sans-serif !important;
}

.has-roboto-condensed-font-family {
  font-family: 'Roboto Condensed', Arial, sans-serif !important;
}}

.wp-block-details summary::marker {
	content: none;
}

.wp-block-details summary::after {
	content: " +";
	float: right;
	text-align: right;
	color: #000;
	font-family: "Roboto";
	font-weight: 200;
}

.wp-block-details[open] summary::after {
	content: " −";
	color: #000;
	font-family: "Roboto";
	font-weight: 200;
}

.icon-bg {
	position: absolute;
	z-index: 0;
}