/*
 * ONE100 Auto SEO – blog components.
 * Colours and fonts come from CSS variables printed from the detected brand
 * (see ONE100_Brand::css_vars). Fallbacks keep everything readable if they're missing.
 */

:root {
	--one100-tint: color-mix(in srgb, var(--one100-primary, #2563eb) 7%, var(--one100-bg, #fff));
	--one100-tint-strong: color-mix(in srgb, var(--one100-primary, #2563eb) 14%, var(--one100-bg, #fff));
	--one100-accent-tint: color-mix(in srgb, var(--one100-accent, #f59e0b) 12%, var(--one100-bg, #fff));
	--one100-gap: 1.25rem;
}

/* Block editor: themes built with Elementor don't style the editor, so use the brand fonts there. */
.editor-styles-wrapper {
	font-family: var(--one100-font-body, inherit);
	color: var(--one100-text, inherit);
}
.editor-styles-wrapper :is(h1, h2, h3, h4) {
	font-family: var(--one100-font-heading, inherit);
	color: var(--one100-heading, inherit);
}

/* Shared box look */
.is-style-one100-takeaways,
.is-style-one100-toc,
.is-style-one100-tip,
.is-style-one100-warning,
.is-style-one100-cta {
	box-sizing: border-box;
	border-radius: var(--one100-radius, 12px);
	padding: clamp(1.1rem, 3vw, 1.75rem) !important;
	margin-block: 2rem !important;
}
.is-style-one100-takeaways > :first-child,
.is-style-one100-toc > :first-child,
.is-style-one100-tip > :first-child,
.is-style-one100-warning > :first-child,
.is-style-one100-cta > :first-child { margin-top: 0; }
.is-style-one100-takeaways > :last-child,
.is-style-one100-toc > :last-child,
.is-style-one100-tip > :last-child,
.is-style-one100-warning > :last-child,
.is-style-one100-cta > :last-child { margin-bottom: 0; }

/* Key takeaways */
.is-style-one100-takeaways {
	background: var(--one100-tint);
	border: 1px solid var(--one100-tint-strong);
	border-left: 5px solid var(--one100-primary, #2563eb);
}
.is-style-one100-takeaways :is(h2, h3, p:first-child strong) {
	font-family: var(--one100-font-heading, inherit);
	color: var(--one100-heading, inherit);
	font-size: 1.15rem;
	letter-spacing: .01em;
	margin-bottom: .75rem;
}
.is-style-one100-takeaways ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.is-style-one100-takeaways li {
	position: relative;
	padding-left: 1.9rem;
	margin: .55rem 0;
}
.is-style-one100-takeaways li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--one100-primary, #2563eb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Table of contents */
.is-style-one100-toc {
	border: 1px solid var(--one100-border, #e5e7eb);
	background: var(--one100-bg, #fff);
}
.is-style-one100-toc p:first-child {
	font-family: var(--one100-font-heading, inherit);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--one100-primary, #2563eb);
	margin-bottom: .5rem;
}
.is-style-one100-toc ol {
	margin: 0;
	padding-left: 1.25rem;
	columns: 2 16rem;
	column-gap: 2rem;
}
.is-style-one100-toc li { margin: .3rem 0; break-inside: avoid; }
.is-style-one100-toc a {
	color: var(--one100-text, inherit);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.is-style-one100-toc a:hover { color: var(--one100-primary, #2563eb); border-color: currentColor; }

/* Tip / warning callouts */
.is-style-one100-tip,
.is-style-one100-warning {
	position: relative;
	padding-left: clamp(3.2rem, 7vw, 3.75rem) !important;
}
.is-style-one100-tip { background: var(--one100-tint); }
.is-style-one100-warning { background: var(--one100-accent-tint); }
.is-style-one100-tip::before,
.is-style-one100-warning::before {
	position: absolute;
	left: clamp(1rem, 2.5vw, 1.25rem);
	top: clamp(1.1rem, 3vw, 1.75rem);
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: 700 .95rem/1 system-ui, sans-serif;
}
.is-style-one100-tip::before { content: "i"; background: var(--one100-primary, #2563eb); color: var(--one100-on-primary, #fff); }
.is-style-one100-warning::before { content: "!"; background: var(--one100-accent, #f59e0b); color: var(--one100-on-accent, #111); }

/* Numbered steps */
ol.is-style-one100-steps {
	list-style: none;
	counter-reset: one100-step;
	padding-left: 0;
	margin-block: 1.5rem;
}
ol.is-style-one100-steps > li {
	counter-increment: one100-step;
	position: relative;
	padding: .15rem 0 1.1rem 3.1rem;
	min-height: 2.2rem;
}
ol.is-style-one100-steps > li::before {
	content: counter(one100-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--one100-primary, #2563eb);
	color: var(--one100-on-primary, #fff);
	font: 700 .95rem/1 var(--one100-font-heading, system-ui), sans-serif;
}
ol.is-style-one100-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.03rem;
	top: 2.3rem;
	bottom: .2rem;
	width: 2px;
	background: var(--one100-tint-strong);
}

/* Checklist */
ul.is-style-one100-checklist { list-style: none; padding-left: 0; }
ul.is-style-one100-checklist > li { position: relative; padding-left: 1.9rem; margin: .5rem 0; }
ul.is-style-one100-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 6px;
	background: var(--one100-tint-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='.65' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Brand table */
.is-style-one100-table { margin-block: 1.75rem; overflow-x: auto; }
.is-style-one100-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--one100-border, #e5e7eb);
	border-radius: var(--one100-radius, 12px);
	overflow: hidden;
	font-size: .95em;
}
.is-style-one100-table :is(th, td) {
	padding: .8rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--one100-border, #e5e7eb);
	text-align: left;
	vertical-align: top;
}
.is-style-one100-table thead th {
	background: var(--one100-primary, #2563eb);
	color: var(--one100-on-primary, #fff) !important;
	font-family: var(--one100-font-heading, inherit);
	font-weight: 600;
}
.is-style-one100-table tbody tr:nth-child(odd) > td,
.is-style-one100-table tbody tr:nth-child(odd):hover > td { background: var(--one100-bg, #fff); }
.is-style-one100-table tbody tr:nth-child(even) > td,
.is-style-one100-table tbody tr:nth-child(even):hover > td { background: var(--one100-tint); }
.is-style-one100-table tbody tr:last-child td { border-bottom: 0; }

/* Highlight quote */
.wp-block-quote.is-style-one100-highlight {
	border: 0;
	margin: 2rem 0;
	padding: 1.25rem 0 1.25rem 1.5rem;
	border-left: 4px solid var(--one100-accent, #f59e0b);
	font-family: var(--one100-font-heading, inherit);
	font-size: clamp(1.15rem, 2.4vw, 1.4rem);
	line-height: 1.45;
	color: var(--one100-heading, inherit);
}
.wp-block-quote.is-style-one100-highlight p { margin: 0; }

/* FAQ accordion */
.wp-block-details.is-style-one100-faq {
	border: 1px solid var(--one100-border, #e5e7eb);
	border-radius: var(--one100-radius, 12px);
	background: var(--one100-bg, #fff);
	padding: 0;
	margin: .75rem 0 !important;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.wp-block-details.is-style-one100-faq[open] {
	border-color: var(--one100-tint-strong);
	box-shadow: 0 6px 24px -12px color-mix(in srgb, var(--one100-primary, #2563eb) 45%, transparent);
}
.wp-block-details.is-style-one100-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 3rem 1rem 1.25rem;
	position: relative;
	font-family: var(--one100-font-heading, inherit);
	font-weight: 600;
	color: var(--one100-heading, inherit);
}
.wp-block-details.is-style-one100-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-one100-faq summary::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--one100-tint);
	color: var(--one100-primary, #2563eb);
	font: 600 1.1rem/1 system-ui, sans-serif;
	transition: transform .2s ease;
}
.wp-block-details.is-style-one100-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details.is-style-one100-faq > :not(summary) { margin: 0; padding: 0 1.25rem 1.1rem; }

/* Call to action */
.is-style-one100-cta {
	background: linear-gradient(135deg, var(--one100-primary, #2563eb), color-mix(in srgb, var(--one100-primary, #2563eb) 55%, var(--one100-secondary, #0f172a)));
	color: var(--one100-on-primary, #fff);
	text-align: center;
	padding: clamp(1.75rem, 5vw, 2.75rem) !important;
}
.is-style-one100-cta :is(h2, h3, p) { color: inherit !important; }
.is-style-one100-cta :is(h2, h3) {
	font-family: var(--one100-font-heading, inherit);
	margin-bottom: .5rem;
}
.is-style-one100-cta p { opacity: .92; max-width: 38rem; margin-inline: auto; }
.is-style-one100-cta .wp-block-buttons { justify-content: center; margin-top: 1.25rem; }
.is-style-one100-cta .wp-block-button__link {
	background: var(--one100-accent, #f59e0b) !important;
	color: var(--one100-on-accent, #111) !important;
	border-radius: calc(var(--one100-radius, 12px) * .75);
	padding: .85rem 1.6rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.is-style-one100-cta .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
}

/* Inline image with photo credit */
.wp-block-post-content .wp-block-image figcaption,
.entry-content .wp-block-image figcaption,
.elementor-widget-theme-post-content .wp-block-image figcaption {
	font-size: .78rem;
	opacity: .7;
	text-align: center;
}
.wp-block-image.size-large img { border-radius: var(--one100-radius, 12px); }

@media (prefers-reduced-motion: reduce) {
	.is-style-one100-toc a,
	.wp-block-details.is-style-one100-faq,
	.wp-block-details.is-style-one100-faq summary::after,
	.is-style-one100-cta .wp-block-button__link { transition: none; }
}

/* Contact details (added after the closing call-to-action) */
.one100-contact {
	box-sizing: border-box;
	margin-block: 2rem;
	padding: clamp(1.1rem, 3vw, 1.75rem);
	border: 1px solid var(--one100-border, #e5e7eb);
	border-top: 4px solid var(--one100-primary, #2563eb);
	border-radius: var(--one100-radius, 12px);
	background: var(--one100-bg, #fff);
	color: var(--one100-text, inherit);
	font-family: var(--one100-font-body, inherit);
}
.one100-contact .one100-contact-title {
	margin: 0 0 .35rem;
	font-family: var(--one100-font-heading, inherit);
	color: var(--one100-heading, inherit);
	font-size: 1.35rem;
}
.one100-contact .one100-contact-intro { margin: 0 0 1rem; opacity: .85; }
.one100-contact a { color: var(--one100-primary, #2563eb) !important; text-decoration: none !important; overflow-wrap: anywhere; }
.one100-contact a:hover { text-decoration: underline !important; }
.one100-contact .one100-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: .75rem;
	margin: 1rem 0 0;
}
.one100-contact .one100-contact-grid > div,
.one100-contact .one100-contact-branch {
	padding: .8rem 1rem;
	border-radius: calc(var(--one100-radius, 12px) * .75);
	background: var(--one100-tint);
	min-width: 0;
}
.one100-contact dt {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--one100-primary, #2563eb);
	margin: 0 0 .2rem;
}
.one100-contact dd { margin: 0; line-height: 1.5; }
.one100-contact .one100-contact-branches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: .75rem;
	margin-top: .75rem;
}
.one100-contact .one100-contact-branch { display: flex; flex-direction: column; gap: .2rem; line-height: 1.5; }
.one100-contact .one100-contact-branch strong { font-family: var(--one100-font-heading, inherit); color: var(--one100-heading, inherit); }
.one100-contact .one100-contact-social {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}
.one100-contact .one100-contact-social li { margin: 0; }
.one100-contact .one100-contact-social a {
	display: inline-block;
	padding: .4rem .9rem;
	border-radius: 999px;
	border: 1px solid var(--one100-tint-strong);
	background: var(--one100-tint);
	font-size: .88rem;
	font-weight: 600;
}
.one100-contact .one100-contact-social a:hover { background: var(--one100-primary, #2563eb); color: var(--one100-on-primary, #fff) !important; text-decoration: none !important; }