/*--------------------------------------------------------------
# AZ Tile & Grout Care — Oro Valley Landing (2026)
# Base CSS: brand tokens + shared utilities used by every
# aztile2026-* block. Load this BEFORE the block CSS files.
#
# Namespaced with `aztile2026-` so it cannot collide with any
# rule that already exists in the active theme.
--------------------------------------------------------------*/

:root {
	--aztile2026-tan:           #A49166;
	--aztile2026-tan-dark:      #847650;
	--aztile2026-tan-light:     #c4b48d;
	--aztile2026-black:         #151515;
	--aztile2026-ink:           #1D1F32;
	--aztile2026-subheading:    #3A3A3B;
	--aztile2026-body:          #5B5F6D;
	--aztile2026-gray-mid:      #4F505B;
	--aztile2026-accent-blue:   #84AAC9;
	--aztile2026-bg-light:      #E5E5E9;
	--aztile2026-cream:         #F9F6F0;
	--aztile2026-border:        #DDD8D0;
	--aztile2026-white:         #FFFFFF;

	--aztile2026-font-sans:     'Raleway', system-ui, sans-serif;
	--aztile2026-font-serif:    'Playfair Display', Georgia, serif;

	--aztile2026-radius:        4px;
	--aztile2026-radius-lg:     8px;
	--aztile2026-shadow:        0 4px 24px rgba(26, 31, 50, 0.08);
	--aztile2026-shadow-lg:     0 12px 40px rgba(26, 31, 50, 0.16);

	--aztile2026-content-max:   1200px;
	--aztile2026-gutter:        40px;
	--aztile2026-gutter-mobile: 20px;
}

/* Scoped font + body color defaults for every AZ Tile block.
   Targets .lp-block (every aztile2026-* block has this class) so it
   does not leak into the rest of the active theme. */
.lp-block {
	font-family: var(--aztile2026-font-sans);
	color: var(--aztile2026-body);
	font-weight: 500;
	line-height: 1.6;
}
/* Headers inside AZ Tile blocks use the serif. Color is decided by the
   surface utility below (dark → white, light → ink) so per-block CSS does
   not need to repeat it. */
.lp-block h1,
.lp-block h2,
.lp-block h3 {
	font-family: var(--aztile2026-font-serif);
}

.lp-block.aztile2026-surface-dark h1,
.lp-block.aztile2026-surface-dark h2,
.lp-block.aztile2026-surface-dark h3,
.aztile2026-surface-dark h1,
.aztile2026-surface-dark h2,
.aztile2026-surface-dark h3 {
	color: var(--aztile2026-white);
}

.lp-block.aztile2026-surface-light h1,
.lp-block.aztile2026-surface-light h2,
.lp-block.aztile2026-surface-light h3,
.aztile2026-surface-light h1,
.aztile2026-surface-light h2,
.aztile2026-surface-light h3 {
	color: var(--aztile2026-ink);
}

/* Container shell — max-width with responsive gutters. */
.aztile2026-shell {
	max-width: var(--aztile2026-content-max);
	margin-inline: auto;
	padding-inline: var(--aztile2026-gutter);
	width: 100%;
}
@media (max-width: 768px) {
	.aztile2026-shell {
		padding-inline: var(--aztile2026-gutter-mobile);
	}
}

/* ---------------------------------------------------------------------------
 * Full-bleed integration with az_tile_grout_care theme.
 *
 * The theme caps every direct child of .entry-content with this rule:
 *     .entry-content > *:not(.acf-block) {
 *         max-width: var(--max-width);
 *         margin-inline: auto;
 *         padding-inline: clamp(...);
 *     }
 * Our blocks have classes `lp-block aztile2026-*` but not `.acf-block`,
 * so they were getting boxed in. The override below releases them so
 * they expand to the full viewport. Inner centering stays handled by
 * .aztile2026-shell.
 * ------------------------------------------------------------------------- */
.entry-content > section.lp-block {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

/* Also wipe the gray "tile-cleaning-in-oro-valley" entry-header strip
   the theme prints on every singular page, but only on pages that hold
   an AZ Tile hero block. */
body.page:has(section.lp-block.aztile2026-hero) .entry-header,
body.single:has(section.lp-block.aztile2026-hero) .entry-header {
	display: none;
}

/* And the WP "Edit" footer + the empty article margin. */
body.page:has(section.lp-block.aztile2026-hero) .entry-footer,
body.single:has(section.lp-block.aztile2026-hero) .entry-footer {
	display: none;
}
body.page:has(section.lp-block.aztile2026-hero) article.page,
body.single:has(section.lp-block.aztile2026-hero) article.post {
	margin: 0;
}

/* Surface link colors. Buttons are excluded via :not(.aztile2026-btn)
   so they keep their own brand colors regardless of context. */
.aztile2026-surface-dark a:not(.aztile2026-btn),
.aztile2026-surface-dark a:not(.aztile2026-btn):visited {
	color: var(--aztile2026-white);
	text-decoration-color: rgba(255, 255, 255, 0.45);
}
.aztile2026-surface-dark a:not(.aztile2026-btn):hover,
.aztile2026-surface-dark a:not(.aztile2026-btn):focus,
.aztile2026-surface-dark a:not(.aztile2026-btn):active {
	color: var(--aztile2026-tan-light);
}

.aztile2026-surface-light a:not(.aztile2026-btn),
.aztile2026-surface-light a:not(.aztile2026-btn):visited {
	color: var(--aztile2026-tan-dark);
}
.aztile2026-surface-light a:not(.aztile2026-btn):hover,
.aztile2026-surface-light a:not(.aztile2026-btn):focus,
.aztile2026-surface-light a:not(.aztile2026-btn):active {
	color: var(--aztile2026-tan);
}

/* Button base — color reset so links never inherit the surface link color. */
a.aztile2026-btn,
a.aztile2026-btn:visited,
a.aztile2026-btn:hover,
a.aztile2026-btn:focus,
a.aztile2026-btn:active,
button.aztile2026-btn {
	text-decoration: none;
	color: var(--aztile2026-white);
}

.aztile2026-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--aztile2026-font-sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 12px 26px;
	border-radius: var(--aztile2026-radius);
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.aztile2026-btn:hover {
	transform: translateY(-1px);
}

/* Variants use the same a./button. specificity as the global color reset
   so they win the cascade without needing !important. */
a.aztile2026-btn--tan,
a.aztile2026-btn--tan:visited,
a.aztile2026-btn--tan:hover,
a.aztile2026-btn--tan:focus,
button.aztile2026-btn--tan {
	background: var(--aztile2026-tan);
	color: var(--aztile2026-white);
}
a.aztile2026-btn--tan:hover,
a.aztile2026-btn--tan:focus,
button.aztile2026-btn--tan:hover,
button.aztile2026-btn--tan:focus {
	background: var(--aztile2026-tan-dark);
}

a.aztile2026-btn--outline-light,
a.aztile2026-btn--outline-light:visited,
a.aztile2026-btn--outline-light:hover,
a.aztile2026-btn--outline-light:focus,
button.aztile2026-btn--outline-light {
	background: transparent;
	color: var(--aztile2026-white);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
}
a.aztile2026-btn--outline-light:hover,
a.aztile2026-btn--outline-light:focus,
button.aztile2026-btn--outline-light:hover,
button.aztile2026-btn--outline-light:focus {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.9);
}

a.aztile2026-btn--outline-dark,
a.aztile2026-btn--outline-dark:visited,
a.aztile2026-btn--outline-dark:hover,
a.aztile2026-btn--outline-dark:focus,
button.aztile2026-btn--outline-dark {
	background: transparent;
	color: var(--aztile2026-ink);
	border: 1.5px solid var(--aztile2026-border);
}
a.aztile2026-btn--outline-dark:hover,
a.aztile2026-btn--outline-dark:focus,
button.aztile2026-btn--outline-dark:hover,
button.aztile2026-btn--outline-dark:focus {
	background: var(--aztile2026-bg-light);
	border-color: var(--aztile2026-tan);
	color: var(--aztile2026-ink);
}

a.aztile2026-btn--white,
a.aztile2026-btn--white:visited,
a.aztile2026-btn--white:hover,
a.aztile2026-btn--white:focus,
button.aztile2026-btn--white {
	background: var(--aztile2026-white);
	color: var(--aztile2026-ink);
}
a.aztile2026-btn--white:hover,
a.aztile2026-btn--white:focus,
button.aztile2026-btn--white:hover,
button.aztile2026-btn--white:focus {
	background: var(--aztile2026-cream);
	color: var(--aztile2026-ink);
}