/*
Theme Name: Agile Base
Theme URI: https://github.com/Arisch24/Agile-Base
Author: Arischvaran Puvanesvaran
Author URI: https://github.com/Arisch24
Description: A fast block theme for business and client sites, with ready-made sections, pages and starter homepages. Rebrand it with color and font presets in the Site Editor. No page builder, no theme JavaScript.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agile-base
Tags: blog, portfolio, one-column, wide-blocks, accessibility-ready, block-patterns, block-styles, custom-colors, custom-logo, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, threaded-comments, translation-ready
*/

/*
 * Most styling is handled by theme.json and core block supports.
 * This file only covers the few things blocks cannot express on their own.
 * Colors come only from palette presets and fonts from the role tokens, so
 * color and font presets and a client's brand change everything. Logical
 * properties keep it right-to-left ready.
 */

/* Accessible visually-hidden text (used by skip link, search labels, etc.). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--paper);
	clip: auto;
	clip-path: none;
	color: var(--wp--preset--color--ink);
	display: block;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* The ring contrasts with the surrounding surface, even when a button inverts.
   Include native details and keyboard-scrollable tables, plus core search fields. */
:root {
	--agile-base-focus-color: var(--wp--preset--color--ink);
}

.has-paper-background-color:where(:not(a, button, input, select, textarea, summary)),
.has-surface-background-color:where(:not(a, button, input, select, textarea, summary)),
.is-style-section-ruled {
	--agile-base-focus-color: var(--wp--preset--color--ink);
}

.has-ink-background-color:where(:not(a, button, input, select, textarea, summary)),
.is-style-section-ink {
	--agile-base-focus-color: var(--wp--preset--color--paper);
}

.has-primary-background-color:where(:not(a, button, input, select, textarea, summary)),
.agile-base-field,
.is-style-section-field {
	--agile-base-focus-color: var(--wp--preset--color--on-primary);
}

:root :is(a, button, input, select, textarea, summary, [tabindex], .wp-block-table):focus-visible {
	outline: 3px solid var(--agile-base-focus-color);
	outline-offset: 3px;
}

/* Keep phone prefixes and email punctuation in reading order inside RTL text. */
:where(a[href^="tel:"], a[href^="mailto:"]) {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Browser surfaces: the parts the browser draws, themed from the palette. */
::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

:root {
	accent-color: var(--wp--preset--color--ink);
	caret-color: var(--wp--preset--color--accent);
	interpolate-size: allow-keywords;
}

/* Numbers in tables and meta line up in columns. */
table,
.agile-base-stat-number {
	font-variant-numeric: tabular-nums;
}

/* Form fields (spec D14): any form plugin's markup inherits them. :where() keeps the
   specificity at zero, so a plugin's own styles still win. */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"], [type="range"], [type="color"], [type="file"]), select, textarea) {
	box-sizing: border-box;
	max-width: 100%;
	inline-size: 100%;
	padding: 0.7em 0.9em;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--bar);
}

:where(textarea) {
	min-height: 8em;
}

:where(input, select, textarea)::placeholder {
	color: color-mix(in srgb, currentColor 72%, transparent);
	opacity: 1;
}

:where(input, select, textarea):hover {
	background-color: var(--wp--preset--color--surface);
}

:where(input, select, textarea):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

:where(input, select, textarea):user-invalid {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 0;
}

:where(input, select, textarea):disabled {
	background-color: var(--wp--preset--color--surface);
	cursor: not-allowed;
	opacity: 0.65;
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--ink);
}

:where(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"]) {
	padding: 0.75em 1em;
	font: inherit;
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--one);
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--bar);
	cursor: pointer;
}

:where(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"]):hover,
:where(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"]):focus-visible {
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
}

:where(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"]):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Post cards in the query loop: a ruled box that fills with the surface color on hover. */
.post-card {
	height: 100%;
	padding: var(--wp--preset--spacing--small);
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	transition: background-color var(--wp--custom--motion--base) ease;
}

.post-card:hover {
	background-color: var(--wp--preset--color--surface);
}

@media (prefers-reduced-motion: reduce) {
	.post-card {
		transition: none;
	}
}

/* FAQ: a native <details> accordion, set as ruled lines with a chevron that rotates
   on open and a smooth height transition where the browser supports it. */
.agile-base-faq {
	border-block: 2px solid currentColor;
}

.agile-base-faq .wp-block-details {
	border-block-end: 1px solid currentColor;
}

.agile-base-faq .wp-block-details:last-child {
	border-block-end: 0;
}

.agile-base-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1.05em 0;
	font-weight: var(--wp--custom--font-weight--semi-bold);
	transition: background-color var(--wp--custom--motion--base) ease;
}

.agile-base-faq summary::-webkit-details-marker {
	display: none;
}

.agile-base-faq summary:hover {
	background-color: color-mix(in srgb, currentColor 6%, transparent);
}

.agile-base-faq summary:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

/* Chevron, drawn with borders so it inherits the text color. */
.agile-base-faq summary::after {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--wp--custom--motion--slow) ease;
}

.agile-base-faq .wp-block-details[open] summary::after {
	transform: translateY(0.05em) rotate(225deg);
}

.agile-base-faq .wp-block-details > :not(summary) {
	margin: -0.25em 0 1.25em;
	max-width: 60ch;
}

@media (prefers-reduced-motion: no-preference) {
	.agile-base-faq .wp-block-details::details-content {
		height: 0;
		overflow: hidden;
		transition: height var(--wp--custom--motion--slower) ease, content-visibility var(--wp--custom--motion--slower) allow-discrete;
	}

	.agile-base-faq .wp-block-details[open]::details-content {
		height: auto;
	}
}

/* Stat numbers: they match the heading style without being headings; they are
   data points, not document-outline headings. */
.agile-base-stat-number {
	font-family: var(--wp--custom--font--display);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1.04;
	letter-spacing: -0.03em;
	margin: 0;
}

/* Testimonial: the carbon-copy sheet (secondary color) with a ruled top and an oversized quotation mark
   behind the quote text. */
.agile-base-testimonial {
	color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--secondary);
	border-block-start: 2px solid currentColor;
	border-radius: var(--wp--custom--radius--panel);
}

@media (max-width: 600px) {
	.agile-base-testimonial {
		padding: var(--wp--preset--spacing--small);
	}
}

.agile-base-quote {
	position: relative;
	font-family: var(--wp--custom--font--display);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: -0.02em;
	line-height: 1.15;
	word-spacing: 0.08em;
	padding-block-start: 1.1em;
}

.agile-base-quote::before {
	content: "\201C";
	position: absolute;
	inset-block-start: -0.3em;
	inset-inline-start: -0.06em;
	font-size: 4.5em;
	line-height: 1;
	color: currentColor;
}

/* Post meta row: mono, as measurement, slightly muted. */
.agile-base-meta {
	font-family: var(--wp--custom--font--mono);
	color: color-mix(in srgb, currentColor 72%, transparent);
}

.agile-base-meta a {
	font-family: inherit;
	color: inherit;
}

/* Author archive header: avatar beside the name and bio, wrapping under the
   avatar when there is no room for both (phones, long names). */
.agile-base-author .wp-block-avatar {
	flex: none;
}

.agile-base-author__text {
	flex: 1 1 20rem;
	min-width: 0;
	overflow-wrap: break-word;
}

.agile-base-author__bio {
	max-width: 60ch;
	color: color-mix(in srgb, currentColor 78%, transparent);
}

/* Single-post previous/next navigation. */
.agile-base-postnav {
	margin-block-start: var(--wp--preset--spacing--large);
	padding-block-start: var(--wp--preset--spacing--small);
	border-block-start: 1px solid currentColor;
}

.agile-base-postnav .wp-block-post-navigation-link {
	font-family: var(--wp--custom--font--display);
	font-weight: var(--wp--custom--font-weight--semi-bold);
	letter-spacing: -0.01em;
}

.agile-base-postnav .wp-block-post-navigation-link a {
	display: block;
	padding: 0.75em 1em;
	text-decoration: none;
	border: 2px solid currentColor;
	border-radius: var(--wp--custom--radius--bar);
	transition: background-color var(--wp--custom--motion--base) ease, color var(--wp--custom--motion--base) ease;
}

.agile-base-postnav .wp-block-post-navigation-link a:hover,
.agile-base-postnav .wp-block-post-navigation-link a:focus-visible {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
}

.agile-base-postnav .post-navigation-link-next {
	text-align: end;
}

/* Subtle full-bleed section band that adapts to the active color preset. */
.agile-base-band {
	background-color: var(--wp--preset--color--surface);
}

/* Existing 1.x labels stay legible; new surfaces open with the heading. */
.agile-base-eyebrow {
	font-family: var(--wp--custom--font--body);
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
}

/* Marker highlight: a swipe of the primary color behind a single word. */
.agile-base-mark {
	color: inherit;
	background-color: transparent;
	background-image: linear-gradient(transparent 54%, color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent) 54%);
	padding-inline: 0.1em;
}

/* Static feature strip used by the hero pattern. */
.agile-base-marquee {
	border-block: 2px solid currentColor;
	padding-block: 0.6rem;
}

.agile-base-marquee__track {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.75em;
	justify-content: center;
	font-family: var(--wp--custom--font--mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--small);
}

.agile-base-marquee__track span:not(:last-child)::after {
	color: currentColor;
	content: "\2014";
	margin-inline-start: 0.75em;
}

/* Buttons: they invert on hover and focus (set in theme.json); the outline style
   inverts too. */
.wp-block-button__link {
	transition: background-color var(--wp--custom--motion--base) ease, color var(--wp--custom--motion--base) ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(:disabled):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(:disabled):focus-visible {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
}

.wp-block-button__link:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}
}

/* Feature card icon: an outlined square that carries the icon. */
.agile-base-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-block-end: var(--wp--preset--spacing--x-small);
	border: 2px solid currentColor;
	border-radius: var(--wp--custom--radius--icon);
}

.agile-base-feature-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* Testimonial avatar: initials on a solid circle, no photo required. */
.agile-base-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	font-family: var(--wp--custom--font--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--round);
}

/* Style guide pattern: color swatches, type-scale rows and spacing bars. */
.agile-base-swatch-item {
	width: 6.5rem;
}

.agile-base-swatch {
	aspect-ratio: 1 / 1;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--card);
	margin-block-end: 0.5em;
}

.agile-base-swatch-label {
	font-family: var(--wp--custom--font--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: color-mix(in srgb, currentColor 72%, transparent);
}

.agile-base-type-scale {
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--panel);
	overflow: clip;
}

.agile-base-type-row {
	padding: 0.75em 1.25em;
	border-block-end: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.agile-base-type-row:last-child {
	border-block-end: 0;
}

.agile-base-scale-bar {
	height: 1.5rem;
	min-width: 0.25rem;
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--bar);
}

/* Archive (List) and 404 (Search First) designs: a ruled line between rows. */
.agile-base-list-item {
	border-block-end: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* Chrome: the header and footer are ruled, like the edge of a form. */
.site-header {
	border-block-end: 1px solid currentColor;
}

.site-footer {
	border-block-start: 2px solid currentColor;
}

/* Color field (hero, call to action): primary fills the band and everything on it takes
   Text on Primary (spec D16), so any brand color reads. Buttons are drawn in on-primary and
   invert on hover and focus, like every other button. The selectors match the theme's
   outline-button rule in weight, so they win inside a field. */
.agile-base-field .wp-block-button__link {
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--on-primary);
	border-color: var(--wp--preset--color--on-primary);
}

.agile-base-field .wp-block-button__link:not(:disabled):hover,
.agile-base-field .wp-block-button__link:not(:disabled):focus-visible,
.agile-base-field .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--on-primary);
	background-color: transparent;
}

.agile-base-field .wp-block-button.is-style-outline > .wp-block-button__link:not(:disabled):hover,
.agile-base-field .wp-block-button.is-style-outline > .wp-block-button__link:not(:disabled):focus-visible {
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--on-primary);
}

.agile-base-field :focus-visible {
	outline-color: var(--wp--preset--color--on-primary);
}

/* A ruled row (logos): hairlines above and below. */
.agile-base-ruled {
	border-block: 1px solid currentColor;
}

/* Services Grid card: a ruled box. */
.agile-base-service {
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--card);
}

/* Reasons (features): a heavy rule above each column. */
.agile-base-reason {
	border-block-start: 2px solid currentColor;
	padding-block-start: var(--wp--preset--spacing--x-small);
}

/* How It Works step: a heavy rule above the numbered step. */
.agile-base-step {
	border-block-start: 2px solid currentColor;
	padding-block-start: var(--wp--preset--spacing--x-small);
}

/* Post header meta row: ruled above and below, with a round avatar. */
.agile-base-postmeta {
	border-block: 1px solid currentColor;
}

.agile-base-meta .wp-block-avatar img,
.wp-block-comment-template .wp-block-avatar img {
	border-radius: var(--wp--custom--radius--round);
}

/* Comments: a ruled line between comments; the reply indent follows the text direction. */
.wp-block-comment-template > li {
	padding-block: var(--wp--preset--spacing--x-small);
	border-block-end: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.wp-block-comment-template > li:last-child {
	border-block-end: 0;
}

.wp-block-comment-template ol {
	padding-inline-start: var(--wp--preset--spacing--small);
}

.wp-block-comments-title,
.comment-reply-title {
	font-family: var(--wp--custom--font--display);
}

/* Wide content scrolls inside its own box instead of the page, whichever style is active. */
.wp-block-table,
.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
}

/* Captions keep the text color of their surroundings (WordPress's default grey fails on dark). */
.wp-element-caption,
.wp-block-table figcaption {
	color: inherit;
}

/* A very long word breaks instead of widening the page. */
.wp-block-post-content,
.wp-block-query-title,
.wp-block-post-title,
.wp-block-post-excerpt,
.wp-block-comment-content {
	overflow-wrap: anywhere;
}

.wp-block-table table {
	min-width: 32rem;
}

/* Full-width sections sit edge to edge, in post content and in a template's main (the
   homepage). Content that opens with one meets the header, and one that ends the page
   meets the footer (the Landing Page template): no white sliver beside a color field.
   A template that sets margins on its main keeps them. */
:is(main, .wp-block-post-content) > .alignfull + .alignfull,
.wp-site-blocks > main:has(> .wp-block-post-content > .alignfull:first-child),
.wp-site-blocks > main > .wp-block-post-content:has(> .alignfull:first-child),
.wp-site-blocks > main:has(> .alignfull:not(.wp-block-post-content):last-child, > .wp-block-post-content:last-child > .alignfull:last-child) + * {
	margin-block-start: 0;
}

/* Chrome variants preserve the compact ruled header and footer. */
.site-header .wp-block-site-title {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.site-header .wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-inline-size: var(--wp--preset--spacing--small);
	min-block-size: var(--wp--preset--spacing--small);
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding-block: var(--wp--preset--spacing--small);
	padding-inline: var(--wp--preset--spacing--small);
}

/* The open mobile menu: WordPress's white-and-black default selectors, so the palette
   wins and a menu given its own overlay colors keeps them. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--paper);
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	color: var(--wp--preset--color--ink);
}

/* Submenus: the same selectors as WordPress's white default, so the palette wins and a
   menu the owner colors keeps its colors. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid currentColor;
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-navigation :is(a, button):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.agile-base-header-cta > .wp-block-group > .wp-block-group {
	min-inline-size: 0;
	max-inline-size: 100%;
}

.agile-base-header-actions .wp-block-button__link {
	overflow-wrap: anywhere;
}

/* WordPress skips a social link with no URL but keeps the list: hide a list left empty. */
.wp-block-social-links:not(:has(li)) {
	display: none;
}

@media (max-width: 599px) {
	.agile-base-header-actions {
		flex-basis: 100%;
		justify-content: space-between;
	}
}

/* The optional author bio uses the archive's wrapping composition. */
.agile-base-author-bio {
	padding-block: var(--wp--preset--spacing--small);
	border-block: 1px solid currentColor;
}

.agile-base-author-bio > .wp-block-avatar {
	flex: none;
}

.agile-base-author-bio > .wp-block-group {
	flex: 1 1 20rem;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.agile-base-author-bio .wp-block-post-author-name {
	font-family: var(--wp--custom--font--mono);
}

.agile-base-author-bio .wp-block-post-author-biography {
	max-inline-size: 65ch;
}

/* Saved 1.x color fields paired white with primary. The semantic foreground keeps
   that published content readable when a client swaps the primary palette color. */
:where(.wp-block-group, .wp-block-cover, .wp-block-columns).has-primary-background-color.has-white-color {
	color: var(--wp--preset--color--on-primary) !important;
}

/* Visible plugin-form labels sit with their fields; wrapped choice labels stay inline. */
:where(form label[for]) {
	display: block;
	margin-block-end: 0.35em;
}

:where(fieldset) {
	padding: var(--wp--preset--spacing--x-small);
	border: 1px solid currentColor;
}

:where(legend) {
	padding-inline: 0.35em;
}

/* Optional media: keep the copy complete before an owner chooses an image. */
.agile-base-media:not(:has(> .wp-block-media-text__media :is(img, video))) {
	display: block;
}

.agile-base-media > .wp-block-media-text__content {
	padding-inline: var(--wp--preset--spacing--small);
}

/* Core fixes the grid direction; text follows the document independently. */
.agile-base-media:dir(rtl) > .wp-block-media-text__content {
	direction: rtl;
}

.agile-base-media:not(:has(> .wp-block-media-text__media :is(img, video))) > .wp-block-media-text__content {
	padding-inline: 0;
}

/* A single news item uses the row rather than sitting beside empty grid tracks. */
.agile-base-posts-grid > .wp-block-post-template > :only-child {
	grid-column: 1 / -1;
}