/*
Theme Name: AmeriBen
Author: Creative Circle
Author URI: https://www.creativecircle.com
Description: Custom theme for the AmeriBen website, based on the WordPress Twenty Twenty-Five theme.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ameriben
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/* Format header elements for mobile */
@media screen and (max-width: 600px) {
	.header-wrap {
		padding-left: 6vw !important;
		padding-right: 6vw !important;
	}

	.header-logo {
		max-width: 30%;
	}
}

/*
 * Add some transition effects to buttons.
*/
.wp-block-button__link {
	transition: background-color 100ms;
}

/*
 * Custom adjustments to built-in blocks and unique styles.
 * More complex styling is usually saved in WP patterns for ease of reuse.
*/

/* Float an element inside the parent at full width */
.floating {
	position: absolute;
	z-index: 10;
	width: 100%;
	left: 0;
	right: 0;
}

/* Remove the space above the footer */
footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Switch footer to column layout at narrow widths */
@media screen and (max-width: 767px) {
	.footer-row,
	.footer-row-links {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Align the "Annotation" style ("styles/blocks/03-annotation") with the text edge (ignored on mobile) */
/* NOTE: If the padding is fine-tuned on the element, the alignment may not be correct */
@media screen and (min-width: 601px) {
	.is-content-justification-left > .wp-block-heading.is-style-text-annotation,
	.is-content-justification-stretch > .wp-block-heading.is-style-text-annotation,
	.is-content-justification-left > p.is-style-text-annotation,
	.is-content-justification-stretch > p.is-style-text-annotation,
	.is-content-justification-left > .wp-block-heading.is-style-text-annotation-wide,
	.is-content-justification-stretch > .wp-block-heading.is-style-text-annotation-wide,
	.is-content-justification-left > p.is-style-text-annotation-wide,
	.is-content-justification-stretch > p.is-style-text-annotation-wide {
		position: relative;
		left: calc(var(--wp--preset--spacing--30) * -1);
	}

	.is-content-justification-rght > .wp-block-heading.is-style-text-annotation,
	.is-content-justification-stretch > .wp-block-heading.is-style-text-annotation,
	.is-content-justification-right > p.is-style-text-annotation,
	.is-content-justification-stretch > p.is-style-text-annotation,
	.is-content-justification-rigt > .wp-block-heading.is-style-text-annotation-wide,
	.is-content-justification-stretch > .wp-block-heading.is-style-text-annotation-wide,
	.is-content-justification-right > p.is-style-text-annotation-wide,
	.is-content-justification-stretch > p.is-style-text-annotation-wide {
		position: relative;
		right: calc(var(--wp--preset--spacing--30) * -1);
	}
}

/* Search block styling */
.wp-block-search__button {
	padding-top: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--40);
}

/* CSS loader */
.loader::before {
	content: '';
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin: 0 0.25em;
	vertical-align: text-top;
	background: url('/wp-content/themes/ameriben/assets/images/tube-spinner.svg');
}

/*
 * Patterns
 *
 * Name: "Media & Text (Right Overlap)"
 * CSS Class: "custom-pattern--media-text-right-overlap"
 * 
 * Name: "Media & Text (Left Overlap)"
 * CSS Class: "custom-pattern--media-text-left-overlap"
 *
 * In the patterns, the media column should always be first. The CSS will
 * rearrange the order. This keeps the left/right patterns more similar in
 * structure. Therefore, ":nth-child(1)" is always the media column and
 * ":nth-child(2)" is always the text column.
 */
.custom-pattern--media-text-right-overlap .wp-block-column:nth-child(1),
.custom-pattern--media-text-left-overlap .wp-block-column:nth-child(1) {
	position: relative;
	z-index: 1;
}

.custom-pattern--media-text-right-overlap .wp-block-column:nth-child(2),
.custom-pattern--media-text-left-overlap .wp-block-column:nth-child(2) {
	position: relative;
	z-index: 2;
}

/* Mobile only */
@media screen and (max-width: 781px) {
	.custom-pattern--media-text-right-overlap,
	.custom-pattern--media-text-left-overlap {
		margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
		margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	}

	.custom-pattern--media-text-right-overlap .wp-block-column:nth-child(1),
	.custom-pattern--media-text-left-overlap .wp-block-column:nth-child(1) {
		order: 1;
		height: 0;
		padding-bottom: 45%;
		margin-bottom: calc(var(--wp--preset--spacing--50) * -1);
	}

	.custom-pattern--media-text-right-overlap .wp-block-column:nth-child(2),
	.custom-pattern--media-text-left-overlap .wp-block-column:nth-child(2) {
		order: 2;
		margin-left: 10px;
		margin-right: 10px;
	}
}

/* Tablet and Desktop */
@media screen and (min-width: 782px) {
	.custom-pattern--media-text-right-overlap .wp-block-column:nth-child(1) {
		order: 2;
	}

	.custom-pattern--media-text-right-overlap .wp-block-column:nth-child(1) .wp-block-image {
		margin-left: -35%;
	}

	.custom-pattern--media-text-right-overlap .wp-block-column:nth-child(2) {
		order: 1;
	}

	.custom-pattern--media-text-left-overlap .wp-block-column:nth-child(1) {
		order: 1;
	}

	.custom-pattern--media-text-left-overlap .wp-block-column:nth-child(1) .wp-block-image {
		margin-right: -35%;
	}

	.custom-pattern--media-text-left-overlap .wp-block-column:nth-child(2) {
		order: 2;
	}
}