/**
 * Teal Horizon — Astra integration.
 *
 * Astra derives most of its output from nine global colour variables and its
 * own container widths. Rather than fighting that with per-selector overrides,
 * this file re-points those variables at the Teal Horizon tokens so anything
 * Astra renders (blog, archives, comments, WooCommerce) inherits the system.
 *
 * This stylesheet is enqueued after `astra-theme-css`, so it wins on the
 * :root cascade without needing !important.
 */

:root,
body {
	--ast-global-color-0: var(--glc-primary);
	--ast-global-color-1: var(--glc-surface-tint);
	--ast-global-color-2: var(--glc-on-background);
	--ast-global-color-3: var(--glc-on-background);
	--ast-global-color-4: var(--glc-background);
	--ast-global-color-5: var(--glc-surface-container-lowest);
	--ast-global-color-6: var(--glc-outline-variant);
	--ast-global-color-7: var(--glc-secondary);
	--ast-global-color-8: var(--glc-primary-container);

	--ast-border-color: color-mix(in srgb, var(--glc-outline-variant) 40%, transparent);
	--ast-comment-inputs-background: var(--glc-surface-container-lowest);
}

/* ---------------------------------------------------------------------------
 * Containers
 * ------------------------------------------------------------------------ */

.ast-container,
.ast-container-fluid {
	max-width: var(--glc-container);
	margin-inline: auto;
	padding-inline: var(--glc-gutter-sm);
}

@media (min-width: 768px) {
	.ast-container,
	.ast-container-fluid {
		padding-inline: var(--glc-gutter);
	}
}

#content.site-content {
	padding-block: clamp(3rem, 1.5rem + 6vw, 5rem);
}

/* Full-width page templates should not inherit the gutter twice. */
.ast-page-builder-template #content.site-content > .ast-container {
	max-width: none;
	padding-inline: 0;
}

/* ---------------------------------------------------------------------------
 * Entry content
 * ------------------------------------------------------------------------ */

.entry-title,
.entry-title a {
	font-family: var(--glc-font-headline);
	letter-spacing: var(--glc-tracking-tight);
	color: var(--glc-on-background);
}

.entry-content > * + * {
	margin-top: 1.5rem;
}

.entry-content :is(h2, h3, h4) {
	margin-top: 3rem;
}

.entry-meta,
.entry-meta * {
	font-size: var(--glc-text-xs);
	font-weight: var(--glc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--glc-tracking-wider);
	color: var(--glc-secondary);
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comments-area,
.ast-separate-container .ast-comment-list li.depth-1 {
	background-color: var(--glc-surface-container-lowest);
	border: 0;
	border-radius: var(--glc-radius-xl);
	box-shadow: var(--glc-shadow-editorial-soft);
}

.ast-separate-container .ast-comment-list li.depth-1 {
	padding: 2rem;
}

/* ---------------------------------------------------------------------------
 * Buttons and forms
 * ------------------------------------------------------------------------ */

.ast-button,
.ast-custom-button,
button:not(.glc-nav__toggle):not(.glc-scheme-toggle):not(.glc-button):not(.glc-offer-banner__close),
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link {
	background-color: var(--glc-primary);
	color: var(--glc-on-primary);
	border: 0;
	border-radius: var(--glc-radius-xl);
	padding: 0.75rem 2rem;
	font-family: var(--glc-font-label);
	font-weight: var(--glc-weight-semibold);
	box-shadow: var(--glc-shadow-sm);
	transition: opacity var(--glc-duration) var(--glc-ease), transform 100ms var(--glc-ease);
}

.ast-button:hover,
.ast-custom-button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--glc-primary);
	color: var(--glc-on-primary);
	opacity: 0.9;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--glc-primary);
	box-shadow: none;
	border: 2px solid var(--glc-primary);
}

/**
 * Inputs are filled, not outlined: a surface-container-low fill instead of a
 * white box with a border. Focus lifts the fill to the lowest tier and adds a
 * 2px ghost border, per the "no opaque boundaries" rule.
 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	background-color: var(--glc-surface-container-low);
	color: var(--glc-on-surface);
	border: 0;
	border-radius: var(--glc-radius-xl);
	padding: 0.75rem 1rem;
	font-family: var(--glc-font-body);
	transition: background-color var(--glc-duration) var(--glc-ease), box-shadow var(--glc-duration) var(--glc-ease);
}

input:focus,
select:focus,
textarea:focus {
	background-color: var(--glc-surface-container-lowest);
	box-shadow: 0 0 0 2px var(--glc-primary);
	outline: none;
}

::placeholder {
	color: var(--glc-secondary);
	opacity: 0.7;
}

/* Contact Form 7 sits on most GLC pages, so give it the panel treatment. */
.wpcf7 form .wpcf7-response-output {
	border-width: 0;
	border-left: 3px solid var(--glc-primary);
	border-radius: var(--glc-radius-lg);
	background-color: var(--glc-surface-container-low);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-left-color: var(--glc-error);
	background-color: var(--glc-error-container);
	color: var(--glc-on-error-container);
}

.wpcf7-not-valid-tip {
	color: var(--glc-error);
	font-size: var(--glc-text-xs);
	font-weight: var(--glc-weight-semibold);
}

/* ---------------------------------------------------------------------------
 * Blocks
 * ------------------------------------------------------------------------ */

.wp-block-quote,
.wp-block-pullquote {
	border-left: 3px solid var(--glc-primary-fixed-dim);
	padding-left: var(--glc-gutter);
	color: var(--glc-secondary);
	font-style: italic;
}

.wp-block-separator {
	border: 0;
	height: 1px;
	background-color: color-mix(in srgb, var(--glc-outline-variant) 30%, transparent);
}

.wp-block-image img,
.wp-block-cover,
.wp-block-media-text__media img {
	border-radius: var(--glc-radius-xl);
}

.wp-block-table :is(td, th) {
	border-color: color-mix(in srgb, var(--glc-outline-variant) 40%, transparent);
}

.wp-block-table th {
	background-color: var(--glc-surface-container-high);
	font-family: var(--glc-font-headline);
}

.wp-block-code,
pre {
	background-color: var(--glc-inverse-surface);
	color: var(--glc-inverse-on-surface);
	border-radius: var(--glc-radius-xl);
	padding: 1.5rem;
	overflow-x: auto;
}

/* ---------------------------------------------------------------------------
 * Sidebar, pagination, misc
 * ------------------------------------------------------------------------ */

.widget-title,
.wp-block-heading.widget-title {
	font-family: var(--glc-font-headline);
	font-size: var(--glc-text-sm);
	font-weight: var(--glc-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--glc-tracking-wider);
	color: var(--glc-primary);
}

.ast-pagination .page-numbers {
	border-radius: var(--glc-radius-xl);
	color: var(--glc-secondary);
}

.ast-pagination .page-numbers.current {
	background-color: var(--glc-primary);
	color: var(--glc-on-primary);
}

.ast-scroll-top {
	background-color: var(--glc-primary);
	color: var(--glc-on-primary);
	border-radius: var(--glc-radius-xl);
}

.skip-link:focus {
	background-color: var(--glc-primary);
	color: var(--glc-on-primary);
	border-radius: var(--glc-radius-xl);
}

/* ---------------------------------------------------------------------------
 * Blog reading column and featured heroes
 * ------------------------------------------------------------------------ */

.single-post.ast-narrow-container,
.blog.ast-narrow-container,
.archive.ast-narrow-container,
.search.ast-narrow-container {
	--ast-narrow-container-width: 67.5rem;
	--wp--custom--ast-content-width-size: 67.5rem;
	--wp--custom--ast-wide-width-size: 67.5rem;
	--glc-measure: none;
}

@media (min-width: 922px) {
	.single-post.ast-narrow-container .site-content > .ast-container,
	.blog.ast-narrow-container .site-content > .ast-container,
	.archive.ast-narrow-container .site-content > .ast-container,
	.search.ast-narrow-container .site-content > .ast-container {
		max-width: 67.5rem;
	}
}

.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote {
	max-width: none;
}

.single-post .post-thumb-img-content,
.single-post .ast-single-post-featured-section {
	margin: 0 0 1.5rem;
	overflow: hidden;
	border-radius: var(--glc-radius-card);
	background: var(--glc-surface-container-high);
}

.single-post .post-thumb img,
.single-post .ast-single-post-featured-section img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	box-shadow: none;
}

.blog .post-thumb img,
.archive .post-thumb img {
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover;
	box-shadow: none;
}