/*
Theme Name: Ann Arbor Dumpster Man
Theme URI: https://annarbordumpstermanrental.us
Author: Right Now Marketing Group
Author URI: https://annarbordumpstermanrental.us
Description: Standalone, plugin-free WordPress theme that builds a complete 5-page roll-off dumpster rental website for Ann Arbor and Washtenaw County (Home, About, Services, Dumpster Sizes, Contact) on activation using core Gutenberg blocks. Business details resolve at render time through a {{token}} system driven by the theme settings page.
Version: 1.0.2
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: annarbor-dumpster
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	/* Palette - forest + cream, amber for action */
	--aad-forest:      #1d3a2f;
	--aad-forest-900:  #12251e;
	--aad-forest-700:  #2f5d4a;
	--aad-forest-500:  #3f7a60;
	--aad-sage:        #e3ebdf;
	--aad-sage-200:    #cfdccb;

	--aad-amber:       #b45309;   /* buttons / links - 5:1 on white */
	--aad-amber-700:   #8f3f06;   /* hover */
	--aad-amber-300:   #f2b552;   /* accents on dark surfaces */
	--aad-amber-tint:  #fbefdc;

	--aad-ink:         #16201b;
	--aad-body:        #3b4640;
	--aad-muted:       #66716a;
	--aad-line:        #e2ddd0;

	--aad-bg:          #ffffff;
	--aad-cream:       #f7f3ea;
	--aad-sand:        #efe7d6;

	/* Type */
	--aad-font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--aad-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--aad-h1:   clamp(2.5rem, 1.6rem + 3.9vw, 4.4rem);
	--aad-h2:   clamp(1.9rem, 1.4rem + 2vw, 3rem);
	--aad-h3:   clamp(1.18rem, 1.08rem + 0.4vw, 1.4rem);
	--aad-lead: clamp(1.06rem, 1rem + 0.35vw, 1.24rem);

	/* Layout */
	--aad-wrap:    1200px;
	--aad-narrow:  760px;
	--aad-gutter:  clamp(1rem, 0.5rem + 2.2vw, 2.25rem);
	--aad-section: clamp(4rem, 2.6rem + 6vw, 7.5rem);
	--aad-header-h: 76px;

	/* Shape */
	--aad-r-sm: 12px;
	--aad-r:    20px;
	--aad-r-lg: 32px;
	--aad-pill: 999px;

	--aad-shadow-sm: 0 1px 2px rgba(18, 37, 30, .06), 0 2px 6px rgba(18, 37, 30, .05);
	--aad-shadow:    0 6px 18px -6px rgba(18, 37, 30, .14), 0 2px 6px rgba(18, 37, 30, .05);
	--aad-shadow-lg: 0 30px 60px -24px rgba(18, 37, 30, .32);

	--aad-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--aad-header-h) + 16px);
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	font-family: var(--aad-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--aad-body);
	background: var(--aad-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--aad-font-head);
	color: var(--aad-ink);
	line-height: 1.08;
	letter-spacing: -0.025em;
	font-weight: 700;
	margin: 0 0 .55em;
	text-wrap: balance;
}
h1 { font-size: var(--aad-h1); font-weight: 800; }
h2 { font-size: var(--aad-h2); }
h3 { font-size: var(--aad-h3); line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--aad-amber);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .18s var(--aad-ease);
}
a:hover { color: var(--aad-amber-700); }

strong { color: var(--aad-ink); font-weight: 700; }

:focus-visible {
	outline: 3px solid var(--aad-amber-300);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--aad-amber-300); color: var(--aad-ink); }

.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 1000;
	background: var(--aad-forest);
	color: #fff;
	padding: .75rem 1.1rem;
	border-radius: var(--aad-r-sm);
	font-weight: 700;
	text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ============================================================
   CONTENT FLOW + ALIGNFULL BREAKOUT
   ============================================================ */
.aad-main { display: block; }

.entry-content > *:not(.alignfull):not(.alignwide) {
	max-width: var(--aad-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--aad-gutter);
	padding-right: var(--aad-gutter);
}
.entry-content > .alignwide {
	max-width: calc(var(--aad-wrap) + 200px);
	margin-left: auto;
	margin-right: auto;
}
.entry-content > .alignfull,
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.entry-content > .alignfull { margin-top: 0; margin-bottom: 0; }

/* Constrained-layout groups: keep inner content inside the wrap with gutters */
.aad-section > *,
.aad-wrap {
	max-width: var(--aad-wrap);
	margin-left: auto !important;
	margin-right: auto !important;
}
.aad-wrap { padding-left: var(--aad-gutter); padding-right: var(--aad-gutter); }
.aad-section {
	padding: var(--aad-section) var(--aad-gutter);
	position: relative;
}
.aad-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--aad-wrap);
}
.aad-section > .aad-narrow,
.aad-section.aad-section--narrow > * { max-width: var(--aad-narrow); }

/* Standard page/single fallback content */
.aad-page:not(.aad-builder) .entry-content,
.aad-single .entry-content,
.aad-index {
	padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.aad-single .entry-header {
	max-width: var(--aad-narrow);
	margin: 0 auto;
	padding: clamp(3rem, 2rem + 4vw, 5rem) var(--aad-gutter) 0;
}
.aad-single .entry-content > * { max-width: var(--aad-narrow) !important; }

/* ============================================================
   BUTTONS - one system for block buttons and PHP buttons
   ============================================================ */
.wp-block-buttons { gap: .75rem; }

.aad-btn,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 52px;
	padding: .85rem 1.6rem;
	border-radius: var(--aad-pill);
	border: 2px solid transparent;
	font-family: var(--aad-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s var(--aad-ease), background-color .18s var(--aad-ease), color .18s var(--aad-ease), border-color .18s var(--aad-ease), box-shadow .18s var(--aad-ease);
}
.aad-btn:hover,
.wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); }
.aad-btn:active,
.wp-block-button .wp-block-button__link:active { transform: translateY(0); }

/* default + primary: amber */
.aad-btn.aad-btn--primary,
.wp-block-button .wp-block-button__link,
.wp-block-button.aad-btn--primary .wp-block-button__link {
	background: var(--aad-amber);
	color: #fff;
	box-shadow: 0 10px 22px -12px rgba(180, 83, 9, .7);
}
.aad-btn.aad-btn--primary:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.aad-btn--primary .wp-block-button__link:hover {
	background: var(--aad-amber-700);
	color: #fff;
}

/* forest solid */
.aad-btn.aad-btn--forest,
.wp-block-button.aad-btn--forest .wp-block-button__link {
	background: var(--aad-forest);
	color: #fff;
	box-shadow: none;
}
.aad-btn.aad-btn--forest:hover,
.wp-block-button.aad-btn--forest .wp-block-button__link:hover {
	background: var(--aad-forest-900);
	color: #fff;
}

/* outline on light surfaces */
.aad-btn.aad-btn--ghost,
.wp-block-button.aad-btn--ghost .wp-block-button__link {
	background: transparent;
	color: var(--aad-forest);
	border-color: var(--aad-forest);
	box-shadow: none;
}
.aad-btn.aad-btn--ghost:hover,
.wp-block-button.aad-btn--ghost .wp-block-button__link:hover {
	background: var(--aad-forest);
	color: #fff;
}

/* outline on dark surfaces */
.aad-btn.aad-btn--light,
.wp-block-button.aad-btn--light .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
	box-shadow: none;
}
.aad-btn.aad-btn--light:hover,
.wp-block-button.aad-btn--light .wp-block-button__link:hover {
	background: #fff;
	color: var(--aad-forest);
	border-color: #fff;
}

/* phone icon prefix */
.aad-btn--call .wp-block-button__link::before,
.aad-btn.aad-btn--call::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--aad-i-phone) center / contain no-repeat;
	mask: var(--aad-i-phone) center / contain no-repeat;
}

/* arrow suffix */
.aad-btn--arrow .wp-block-button__link::after,
.aad-btn.aad-btn--arrow::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--aad-i-arrow) center / contain no-repeat;
	mask: var(--aad-i-arrow) center / contain no-repeat;
	transition: transform .18s var(--aad-ease);
}
.aad-btn--arrow .wp-block-button__link:hover::after,
.aad-btn.aad-btn--arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   ICON SET - CSS masks (no icon library). Stroke icons, 24px grid.
   ============================================================ */
:root {
	--aad-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--aad-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--aad-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--aad-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	--aad-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	--aad-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	--aad-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--aad-i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
	--aad-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
	--aad-i-hammer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l6 6-3 3-6-6z'/%3E%3Cpath d='M11 7L3 15l3 3 8-8'/%3E%3Cpath d='M15 3l2-1 5 5-1 2'/%3E%3C/svg%3E");
	--aad-i-roof: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13L12 5l10 8'/%3E%3Cpath d='M6 10.5L12 6l6 4.5'/%3E%3Cpath d='M5 13v7h14v-7'/%3E%3Cpath d='M16 6V3h2v4.5'/%3E%3C/svg%3E");
	--aad-i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='18' rx='1'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v11H15'/%3E%3Cpath d='M8 7h3M8 11h3M8 15h3'/%3E%3C/svg%3E");
	--aad-i-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-9 6-14 15-14 0 9-5 15-14 15'/%3E%3Cpath d='M5 19l8-8'/%3E%3C/svg%3E");
	--aad-i-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
	--aad-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2z'/%3E%3Cpath d='M13 9h4l4 4v3h-8'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
	--aad-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
	--aad-i-dumpster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20l-2 10H4z'/%3E%3Cpath d='M9 8v10M15 8v10'/%3E%3Ccircle cx='7' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E");
	--aad-i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E");
	--aad-i-handshake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17l2 2a1.5 1.5 0 0 0 2-2'/%3E%3Cpath d='M14 14l2.5 2.5a1.5 1.5 0 0 0 2-2L15 11'/%3E%3Cpath d='M3 12l4-4 5 1 3-2 6 5-2 2'/%3E%3Cpath d='M3 12l5 5 2-2'/%3E%3C/svg%3E");
	--aad-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5L15.5 10'/%3E%3C/svg%3E");
}

.aad-ico {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--aad-sage);
	color: var(--aad-forest);
	flex: none;
}
.aad-ico::before {
	content: "";
	width: 26px;
	height: 26px;
	background: currentColor;
	-webkit-mask: var(--aad-i, var(--aad-i-dumpster)) center / contain no-repeat;
	mask: var(--aad-i, var(--aad-i-dumpster)) center / contain no-repeat;
}
.aad-ico--phone     { --aad-i: var(--aad-i-phone); }
.aad-ico--mail      { --aad-i: var(--aad-i-mail); }
.aad-ico--pin       { --aad-i: var(--aad-i-pin); }
.aad-ico--clock     { --aad-i: var(--aad-i-clock); }
.aad-ico--chat      { --aad-i: var(--aad-i-chat); }
.aad-ico--home      { --aad-i: var(--aad-i-home); }
.aad-ico--hammer    { --aad-i: var(--aad-i-hammer); }
.aad-ico--roof      { --aad-i: var(--aad-i-roof); }
.aad-ico--building  { --aad-i: var(--aad-i-building); }
.aad-ico--leaf      { --aad-i: var(--aad-i-leaf); }
.aad-ico--box       { --aad-i: var(--aad-i-box); }
.aad-ico--truck     { --aad-i: var(--aad-i-truck); }
.aad-ico--calendar  { --aad-i: var(--aad-i-calendar); }
.aad-ico--dumpster  { --aad-i: var(--aad-i-dumpster); }
.aad-ico--tag       { --aad-i: var(--aad-i-tag); }
.aad-ico--handshake { --aad-i: var(--aad-i-handshake); }
.aad-ico--shield    { --aad-i: var(--aad-i-shield); }
.aad-ico--amber     { background: var(--aad-amber-tint); color: var(--aad-amber-700); }