/*
Theme Name: Topline
Theme URI: https://example.com/themes/topline
Author: Redtech Digital
Author URI: https://example.com
Description: A high-conversion WordPress block theme for marketing, growth and creative agencies. Indigo and lime palette with a free-audit banner, a services grid with published retainer pricing, industries covered, case results with real before-and-after metrics, engagement models and a first-90-days plan. Two home page layouts — a full-bleed photographic hero and a split hero. Full Site Editing — no page builder required. Ships 15 demo pages, 41 block patterns and 4 style variations.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: topline
Tags: full-site-editing, block-patterns, style-variations, business, portfolio, blog, one-column, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-styles, wide-blocks, accessibility-ready, translation-ready
*/

/*
 * Topline keeps its design system in theme.json so every style variation
 * controls every value. Only rules that theme.json genuinely cannot express
 * live here, and each one uses preset custom properties so variations stay
 * coherent. Keep this file short — every line added here is debt.
 */

/* --------------------------------------------------------------
 * 1. Accessibility — visible focus on every interactive element
 * ------------------------------------------------------------ */

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Core prints the block-template skip link; make it match the theme. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	z-index: 100000;
}

/* --------------------------------------------------------------
 * 2. Block style: Card — lifts on hover, used by services/areas grids
 * ------------------------------------------------------------ */

.is-style-topline-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-style-topline-card:hover,
.is-style-topline-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/*
 * Block style: Eyebrow label.
 *
 * These small uppercase labels above a section heading are decorative, not
 * headings. Marking them up as <h6> looked right but broke the document
 * outline — a screen reader announced a level-6 heading after a level-2, and
 * Lighthouse flags it as "heading elements not in sequentially-descending
 * order". They are paragraphs now, styled to match.
 */
.is-style-topline-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Block style: Plain list — link lists in footers and coverage columns. */
.wp-block-list.is-style-topline-plain {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

/* --------------------------------------------------------------
 * 3. Block style: Outline button — secondary CTA next to the accent one
 * ------------------------------------------------------------ */

.wp-block-button.is-style-topline-outline > .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	color: inherit;
}

.wp-block-button.is-style-topline-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-topline-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------
 * 4. Block style: Signal dot — the "we're available now" pulse
 *    on the free-audit banner
 * ------------------------------------------------------------ */

.is-style-topline-signal {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.is-style-topline-signal::before {
	content: "";
	flex: 0 0 auto;
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	animation: topline-pulse 2.4s ease-out infinite;
}

/*
 * The ring colour is derived from the accent preset with color-mix so every
 * style variation pulses in its own accent. If color-mix is unsupported the
 * box-shadow is simply dropped and the dot stays static — no visual break.
 */
@keyframes topline-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent); }
	70%  { box-shadow: 0 0 0 0.75em color-mix(in srgb, var(--wp--preset--color--accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 0%, transparent); }
}

/* --------------------------------------------------------------
 * 5. Block style: Before / After — captioned pair, no JavaScript
 * ------------------------------------------------------------ */

.is-style-topline-before-after figcaption {
	position: absolute;
	inset: auto auto 0.75rem 0.75rem;
	margin: 0;
	padding: 0.35em 0.75em;
	border-radius: 4px;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.is-style-topline-before-after .wp-block-image {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

.is-style-topline-before-after .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.is-style-topline-before-after .wp-block-image:hover img {
	transform: scale(1.04);
}

/* --------------------------------------------------------------
 * Header call-to-action — the booking button must never wrap
 * ------------------------------------------------------------ */

header.wp-block-template-part .wp-block-button__link {
	white-space: nowrap;
}

/*
 * Below 600px the masthead has to hold the site title, the navigation
 * toggle and the booking button. Trimming the button lets the two header
 * groups wrap onto separate rows cleanly instead of crushing together.
 */
@media (max-width: 600px) {
	header.wp-block-template-part .wp-block-button__link {
		padding-inline: 1.1rem;
		font-size: var(--wp--preset--font-size--x-small);
	}

	header.wp-block-template-part .wp-block-site-title {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* --------------------------------------------------------------
 * 6. Sticky header — sits above content, keeps the call CTA reachable
 * ------------------------------------------------------------ */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* --------------------------------------------------------------
 * 7. Navigation underline — theme.json cannot target the ::after
 * ------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation:not(.has-modal-open) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.wp-block-navigation:not(.has-modal-open) .wp-block-navigation-item__content:hover::after,
.wp-block-navigation:not(.has-modal-open) .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------
 * 8. Editorial details — table zebra striping and sticky post flag
 * ------------------------------------------------------------ */

.wp-block-table tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--subtle);
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--subtle);
	padding: 0.75em 1em;
}

/* --------------------------------------------------------------
 * 9. Respect reduced-motion preferences
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}