/*
 * American Concierge - Shared Block Styles
 * These variables and base styles are shared across all amercon blocks.
 * When migrating to the EHD theme, these move into the PostCSS pipeline.
 */

:root {
	/* WordPress spacing presets — Disable Gutenberg strips the global styles that define these */
	--wp--preset--spacing--20: 0.5rem;
	--wp--preset--spacing--30: 0.75rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.5rem;
	--wp--preset--spacing--70: 4rem;
	--wp--preset--spacing--80: 6rem;

	/* Colors */
	--amercon-green: #2E5949;
	--amercon-green-hover: #234538;
	--amercon-navy: rgb(17 24 39);
	--amercon-offwhite: #f8f8f6;
	--amercon-cream: rgb(254 243 199);
	--amercon-dark-slate: rgb(30 41 59);
	--amercon-border: #e7e5e4;
	--amercon-white: #fff;

	/* Typography */
	--amercon-font-serif: 'Crimson Text', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--amercon-font-display: 'Playfair Display', serif;
	--amercon-font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;

	/* Spacing */
	--amercon-section-py: 4rem;
	--amercon-container-max: 1170px;
	--amercon-container-px: 15px;
	--amercon-gap: 2rem;
	--amercon-radius: 0.75rem;
}

/*
 * Color theming — when a background color is applied,
 * auto-set a contrasting foreground color.
 * Follows the EHD headstart pattern: --amercon-theme-bg / --amercon-theme-fg
 */
:root {
	--amercon-theme-bg: var(--amercon-white);
	--amercon-theme-fg: var(--amercon-navy);
}

.has-background.has-amercon-green-background-color {
	--amercon-theme-bg: #2E5949;
	--amercon-theme-fg: #fff;
	background-color: var(--amercon-theme-bg) !important;
	color: var(--amercon-theme-fg);
}

.has-background.has-amercon-navy-background-color {
	--amercon-theme-bg: rgb(17 24 39);
	--amercon-theme-fg: #fff;
	background-color: var(--amercon-theme-bg) !important;
	color: var(--amercon-theme-fg);
}

.has-background.has-amercon-offwhite-background-color {
	--amercon-theme-bg: #f8f8f6;
	--amercon-theme-fg: rgb(17 24 39);
	background-color: var(--amercon-theme-bg) !important;
	color: var(--amercon-theme-fg);
}

.has-background.has-amercon-dark-slate-background-color {
	--amercon-theme-bg: rgb(30 41 59);
	--amercon-theme-fg: #fff;
	background-color: var(--amercon-theme-bg) !important;
	color: var(--amercon-theme-fg);
}

.has-background.has-amercon-cream-background-color {
	--amercon-theme-bg: #fef3c7;
	--amercon-theme-fg: rgb(17 24 39);
	background-color: var(--amercon-theme-bg) !important;
	color: var(--amercon-theme-fg);
}

.has-background.has-amercon-white-background-color {
	--amercon-theme-bg: #fff;
	--amercon-theme-fg: rgb(17 24 39);
	background-color: var(--amercon-theme-bg) !important;
	color: var(--amercon-theme-fg);
}

.has-background.has-amercon-purple-background-color {
	--amercon-theme-bg: #7c187c;
	--amercon-theme-fg: #fff;
	background-color: var(--amercon-theme-bg) !important;
	color: var(--amercon-theme-fg);
}

/* Propagate theme colors to child elements */
.has-background h1,
.has-background h2,
.has-background h3,
.has-background h4,
.has-background h5,
.has-background h6,
.has-background p,
.has-background li,
.has-background span {
	color: inherit;
}

/* Text color utilities from theme.json palette */
.has-amercon-green-color { color: #2E5949 !important; }
.has-amercon-navy-color { color: rgb(17 24 39) !important; }
.has-amercon-offwhite-color { color: #f8f8f6 !important; }
.has-amercon-dark-slate-color { color: rgb(30 41 59) !important; }
.has-amercon-cream-color { color: #fef3c7 !important; }
.has-amercon-white-color { color: #fff !important; }

/*
 * Core block support classes — ensure they work in this classic theme.
 * WordPress generates these but Bootstrap 3 may override them.
 */
html:has(#amercon-block-content) {
	scroll-behavior: smooth;
}

#amercon-block-content .has-text-align-center {
	text-align: center;
}
#amercon-block-content .has-text-align-left {
	text-align: left;
}
#amercon-block-content .has-text-align-right {
	text-align: right;
}
#amercon-block-content .has-background {
	padding: 1.25em 2.375em;
}
#amercon-block-content .alignwide {
	max-width: var(--amercon-container-max);
	margin-left: auto;
	margin-right: auto;
}
#amercon-block-content .alignfull {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Constrain core blocks within the block content area */
#amercon-block-content > .wp-block-heading,
#amercon-block-content > .wp-block-paragraph,
#amercon-block-content > .wp-block-buttons,
#amercon-block-content > .wp-block-list,
#amercon-block-content > .wp-block-image {
	max-width: var(--amercon-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--amercon-container-px);
	padding-right: var(--amercon-container-px);
}

/* Shared container for blocks outside Bootstrap grid */
.amercon-block .amercon-container {
	max-width: var(--amercon-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--amercon-container-px);
	padding-right: var(--amercon-container-px);
}

/* Section spacing — handled by the wrapping Group block's padding.
   Custom blocks no longer carry their own section padding. */
.amercon-block {
	padding-top: 0;
	padding-bottom: 0;
}

/* Section headings */
.amercon-block .amercon-section-headline {
	font-family: var(--amercon-font-display);
	color: var(--amercon-navy);
	font-size: 2rem;
	line-height: 1.2;
	margin-bottom: 0.5rem;
	text-align: center;
}

.amercon-block .amercon-section-subhead {
	font-family: var(--amercon-font-serif);
	color: var(--amercon-navy);
	font-size: 1.25rem;
	margin: 0 auto 3rem;
	text-align: center;
	max-width: 48rem;
}

/* Buttons */
.amercon-block .amercon-btn {
	display: inline-block;
	border-radius: 6px;
	white-space: nowrap;
	font-weight: 600;
	font-family: var(--amercon-font-serif);
	border: 1px solid transparent;
	font-size: 0.875rem;
	text-transform: capitalize;
	padding: 10px 20px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.amercon-block .amercon-btn-green {
	background: var(--amercon-green);
	color: var(--amercon-white);
	border-color: var(--amercon-green);
}

.amercon-block .amercon-btn-green:hover {
	background: var(--amercon-white);
	color: var(--amercon-navy);
}

.amercon-block .amercon-btn-white {
	background: var(--amercon-white);
	color: var(--amercon-navy);
	border-color: var(--amercon-white);
}

.amercon-block .amercon-btn-white:hover {
	background: var(--amercon-green);
	color: var(--amercon-white);
}

/* Core Accordion block */
div.wp-block-accordion-item {
	border: 1px solid var(--amercon-navy);
	padding: 1rem;
	color: var(--amercon-navy);
	border-radius: 4px;
	transition: border-color 0.3s ease;
	cursor: pointer;
}

div.wp-block-accordion-item:hover {
	border-color: var(--amercon-green);
}

.wp-block-accordion-heading {
	margin-bottom: 0;
}

#amercon-block-content h3.wp-block-accordion-heading {
	font-size: 1.25rem !important;
	transition: color 0.3s ease;
}

.wp-block-accordion-heading button.wp-block-accordion-heading__toggle {
	padding: 0;
	margin: 0;
}

.wp-block-accordion-heading button.wp-block-accordion-heading__toggle:hover {
	padding: 0;
	margin: 0;
}

.wp-block-accordion-heading button.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* Hover: heading and indicator go green */
div.wp-block-accordion-item:hover h3.wp-block-accordion-heading,
div.wp-block-accordion-item:hover .wp-block-accordion-heading__toggle-icon {
	color: var(--amercon-green);
}

.wp-block-accordion-panel {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid currentColor;
}

.wp-block-accordion-panel[inert] {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Core Button block — match paris101 style */
#amercon-block-content .wp-block-button__link,
.amercon-block .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
	border-radius: 6px;
	white-space: nowrap;
	font-weight: 600;
	font-family: var(--amercon-font-serif);
	border: 1px solid transparent;
	font-size: 0.875rem;
	text-transform: capitalize;
	padding: 12px 30px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1.4;
}

/* Green fill (default) */
#amercon-block-content .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.amercon-block .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--amercon-green);
	color: var(--amercon-white);
	border-color: var(--amercon-green);
}

/* Respect editor background-color picks on buttons */
#amercon-block-content .wp-block-button:not(.is-style-outline) .wp-block-button__link[class*="has-"][class*="-background-color"],
.amercon-block .wp-block-button:not(.is-style-outline) .wp-block-button__link[class*="has-"][class*="-background-color"],
.editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link[class*="has-"][class*="-background-color"] {
	background: var(--amercon-theme-bg);
	color: var(--amercon-theme-fg);
	border-color: var(--amercon-theme-bg);
}

#amercon-block-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.amercon-block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--amercon-white);
	color: var(--amercon-navy);
}

/* Outline style */
#amercon-block-content .wp-block-button.is-style-outline .wp-block-button__link,
.amercon-block .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--amercon-white);
	color: var(--amercon-navy);
	border-color: var(--amercon-white);
}

#amercon-block-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.amercon-block .wp-block-button.is-style-outline .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--amercon-green);
	color: var(--amercon-white);
}

/* Button icon support — inline SVG */
#amercon-block-content .wp-block-button__link svg,
.amercon-block .wp-block-button__link svg,
.amercon-block .amercon-btn svg,
.editor-styles-wrapper .wp-block-button__link svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Button icon support — uploaded SVG as <img> */
#amercon-block-content .wp-block-button__link img,
.amercon-block .wp-block-button__link img,
.amercon-block .amercon-btn img,
.editor-styles-wrapper .wp-block-button__link img {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	object-fit: contain;
	/* Inherit text color via CSS filter — white icons on dark bg */
	filter: brightness(0) invert(1);
	transition: filter 0.3s ease;
}

/* Swap icon color on hover when button inverts */
#amercon-block-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover img,
.amercon-block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover img,
.editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover img {
	filter: brightness(0);
}

#amercon-block-content .wp-block-button.is-style-outline .wp-block-button__link img,
.amercon-block .wp-block-button.is-style-outline .wp-block-button__link img,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link img {
	filter: brightness(0);
}

#amercon-block-content .wp-block-button.is-style-outline .wp-block-button__link:hover img,
.amercon-block .wp-block-button.is-style-outline .wp-block-button__link:hover img,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:hover img {
	filter: brightness(0) invert(1);
}

/* Serif body text — #amercon-block-content scope beats legacy style.css */
#amercon-block-content p,
#amercon-block-content li,
.amercon-block p,
.amercon-block li,
.editor-styles-wrapper p,
.editor-styles-wrapper li {
	font-family: var(--amercon-font-serif);
	font-size: 1.25rem;
	line-height: 1.7;
}

/* 3-column grid */
.amercon-block .amercon-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--amercon-gap);
}

@media (min-width: 768px) {
	.amercon-block .amercon-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.amercon-block .amercon-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 2-column grid */
.amercon-block .amercon-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--amercon-gap);
}

@media (min-width: 768px) {
	.amercon-block .amercon-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* CTA wrapper (centered button below content) */
.amercon-block .amercon-cta-wrap {
	text-align: center;
	margin-top: 2rem;
}