/* ==========================================================================
   Graedyn design system — global tokens, base reset, and shared component
   classes. Hand-authored static CSS (no build step). Enqueued on the front end
   via inc/enqueue.php and in the block editor via add_editor_style() in
   inc/setup.php. Per-block .scss files consume the --gl-* custom properties.
   Source of truth: designs/graedyn-landscaping/index.html (Tailwind config +
   custom CSS), translated here into semantic tokens + classes.
   ========================================================================== */

:root {
	/* Stone (paper / surfaces) */
	--gl-stone-50:  #faf9f6;
	--gl-stone-100: #f5f4ef;
	--gl-stone-200: #ebe9dd;
	--gl-stone-300: #dad7c7;

	/* Forest (brand green) */
	--gl-forest:       #2e4232;
	--gl-forest-light: #465b47;
	--gl-forest-dark:  #1f2c22;

	/* Clay (accent / CTAs) */
	--gl-clay:       #bc6f4d;
	--gl-clay-hover: #a55d3e;
	--gl-clay-soft:  #e6c9b6;

	/* Ink */
	--gl-coal:  #383d33;
	--gl-white: #ffffff;

	/* Lines / effects */
	--gl-line:        #ebe9dd;            /* stone-200 */
	--gl-shadow:      0 18px 44px -26px rgba(31, 44, 34, .35);
	--gl-shadow-lg:   0 30px 60px -24px rgba(31, 44, 34, .45);

	--gl-r:         18px;
	--gl-r-sm:      12px;
	--gl-pill:      100px;
	--gl-container: 1280px;               /* max-w-7xl */
	--gl-pad:       clamp(20px, 5vw, 48px);
	/* Real measured height of .gl-header__row: 18px padding-block + 52px logo.
	   Anything that must clear the fixed header derives from this token. */
	--gl-header-h:  88px;
	/* Vertical scrollbar width, set by theme.js. Lets 100vw-based math line up
	   with .gl-container, which is sized by % and so excludes the scrollbar. */
	--gl-sbw:       0px;

	--gl-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--gl-font-sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gl-font-hand:  "Caveat", "Segoe Script", cursive;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
/* Border-box everywhere. The design was ported from a Tailwind mockup (which
   applies border-box globally), and the layout helpers below rely on it:
   `.gl-container` is `width:100%` + `padding-inline`, which under the default
   content-box overflows the viewport by 2×padding (previously only masked by
   `body{overflow-x:hidden}`, which clipped content like the footer nav). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--gl-font-sans);
	background: var(--gl-stone-100);
	color: var(--gl-coal);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Form controls don't inherit font-family by default — make them follow the
   body stack so unstyled buttons/inputs (e.g. the FAQ question buttons) use
   DM Sans instead of the browser default. */
button,
input,
select,
textarea,
optgroup {
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.gl-container,
.graedyn-container {
	width: 100%;
	max-width: var(--gl-container);
	margin-inline: auto;
	padding-inline: var(--gl-pad);
}

.gl-section {
	padding-block: clamp(64px, 10vw, 144px);
	position: relative;
}

/* Section header that sits directly above its own content rows (e.g. the
   wall-types intro above the feature rows): top padding only. */
.gl-section--tight {
	padding-block: clamp(48px, 7vw, 96px) 0;
}

/* --------------------------------------------------------------------------
   Shared text helpers
   -------------------------------------------------------------------------- */
.gl-eyebrow {
	display: inline-block;
	font-family: var(--gl-font-sans);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(46, 66, 50, .7);   /* forest/70 */
	margin: 0 0 20px;
}

.gl-h2 {
	font-family: var(--gl-font-serif);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.01em;
	font-size: clamp(34px, 5vw, 60px);
	color: var(--gl-coal);
	margin: 0;
}

.gl-lead {
	color: rgba(56, 61, 51, .8);   /* coal/80 */
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.7;
	max-width: 56ch;
}

.gl-hand {
	font-family: var(--gl-font-hand);
	color: var(--gl-clay);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.gl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--gl-font-sans);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	padding: 16px 30px;
	border-radius: var(--gl-pill);
	border: 0;
	cursor: pointer;
	text-decoration: none;
	background: var(--gl-clay);
	color: #fff;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
	box-shadow: 0 14px 26px -14px rgba(188, 111, 77, .5);
}
.gl-btn svg { width: 16px; height: 16px; }
.gl-btn:hover {
	transform: translateY(-2px);
	background: var(--gl-clay-hover);
}
.gl-btn--lg { padding: 18px 34px; font-size: 17px; }

.gl-btn--ghost {
	background: transparent;
	color: var(--gl-forest);
	border: 1.5px solid rgba(46, 66, 50, .25);
	box-shadow: none;
}
.gl-btn--ghost:hover { background: var(--gl-stone-200); border-color: var(--gl-forest); }

.gl-btn--block { width: 100%; }

/* Reusable comparison table — graedyn/table block + embedded in faq answers.
   Lives here (not in a single block) so it is styled in every context:
   standalone, embedded, frontend and the editor canvas. */
.gl-table { margin: 0; }
.gl-table__frame {
	border: 1px solid var(--gl-stone-200);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}
.gl-table__thead,
.gl-table__tr {
	display: grid;
	grid-template-columns: repeat(var(--gl-table-cols, 3), 1fr);
}
.gl-table__thead { background: var(--gl-forest); color: #fff; }
.gl-table__th {
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.3;
}
.gl-table__tr { border-top: 1px solid var(--gl-stone-200); }
.gl-table__td {
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(56, 61, 51, .7);
}
.gl-table__td--label { font-weight: 600; color: var(--gl-coal); }
.gl-table__caption {
	margin: 12px 0 0;
	font-size: 12px;
	color: rgba(56, 61, 51, .6);
	text-align: center;
}
@media (max-width: 480px) {
	.gl-table__th,
	.gl-table__td { padding: 8px 10px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Classic page content (blockless pages: Privacy Policy, Terms, etc.)

   `the_content()` on a plain page emits raw h1–h6 / p / lists with no wrapper,
   so without this it renders full-bleed in browser-default styling. Constrain
   it to the same max-width the block sections use (--gl-container), center a
   comfortable reading measure inside that frame, add vertical rhythm, and pin
   every element to the theme font stack so the type matches the rest of the
   site (serif display headings + DM Sans body) instead of UA defaults.

   SCOPED to `.graedyn-site-main--plain` (set in header.php for singular pages
   that DON'T lead with a graedyn/* block). page.php wraps every singular page —
   block-built AND plain — in `.entry-content`, so an unscoped rule here also
   clamps the full-bleed designed pages to the container width and a 72ch
   measure. That is exactly what "affected every single page"; the --plain gate
   keeps designed pages untouched.
   -------------------------------------------------------------------------- */
.graedyn-site-main--plain .entry-content {
	max-width: var(--gl-container);      /* match the block container width */
	margin-inline: auto;
	padding: clamp(40px, 6vw, 72px) var(--gl-pad) clamp(64px, 9vw, 120px);
	font-family: var(--gl-font-sans);
	color: var(--gl-coal);
	font-size: clamp(16px, 1.05vw, 18px);
	line-height: 1.75;
}

/* Keep running prose to a readable measure, centered within the wide frame.
   Wide/full aligned classic content opts out below. */
.graedyn-site-main--plain .entry-content > * {
	max-width: 72ch;
	margin-inline: auto;
}
.graedyn-site-main--plain .entry-content > .alignwide { max-width: 1040px; }
.graedyn-site-main--plain .entry-content > .alignfull { max-width: none; }

.graedyn-site-main--plain .entry-content > :first-child { margin-top: 0; }
.graedyn-site-main--plain .entry-content > :last-child { margin-bottom: 0; }

.graedyn-site-main--plain .entry-content p { margin: 0 0 1.35em; }

/* Display headings use the serif face, like the block sections' .gl-h2. */
.graedyn-site-main--plain .entry-content h1,
.graedyn-site-main--plain .entry-content h2,
.graedyn-site-main--plain .entry-content h3 {
	font-family: var(--gl-font-serif);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--gl-coal);
}
.graedyn-site-main--plain .entry-content h1 { font-size: clamp(32px, 4.5vw, 52px); margin: 0 0 .5em; }
.graedyn-site-main--plain .entry-content h2 { font-size: clamp(26px, 3vw, 38px); margin: 1.6em 0 .5em; }
.graedyn-site-main--plain .entry-content h3 { font-size: clamp(21px, 2vw, 27px); margin: 1.5em 0 .4em; }
.graedyn-site-main--plain .entry-content h4,
.graedyn-site-main--plain .entry-content h5,
.graedyn-site-main--plain .entry-content h6 {
	font-family: var(--gl-font-sans);
	font-weight: 600;
	line-height: 1.3;
	color: var(--gl-coal);
	margin: 1.4em 0 .4em;
}
.graedyn-site-main--plain .entry-content h4 { font-size: 18px; }
.graedyn-site-main--plain .entry-content h5,
.graedyn-site-main--plain .entry-content h6 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: rgba(56, 61, 51, .7); }

.graedyn-site-main--plain .entry-content a {
	color: var(--gl-clay);
	text-decoration: underline;
	text-decoration-color: rgba(188, 111, 77, .4);
	text-underline-offset: 2px;
	transition: text-decoration-color .2s ease, color .2s ease;
}
.graedyn-site-main--plain .entry-content a:hover { color: var(--gl-clay-hover); text-decoration-color: var(--gl-clay); }

.graedyn-site-main--plain .entry-content strong { font-weight: 600; color: var(--gl-coal); }

.graedyn-site-main--plain .entry-content ul,
.graedyn-site-main--plain .entry-content ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.graedyn-site-main--plain .entry-content li { margin: 0 0 .5em; padding-left: .2em; }
.graedyn-site-main--plain .entry-content li::marker { color: var(--gl-clay); }

.graedyn-site-main--plain .entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--gl-clay);
	color: rgba(56, 61, 51, .8);
	font-style: italic;
}

.graedyn-site-main--plain .entry-content hr {
	border: 0;
	border-top: 1px solid var(--gl-stone-200);
	margin: 2.4em auto;
}

.graedyn-site-main--plain .entry-content img { max-width: 100%; height: auto; border-radius: var(--gl-r-sm); }

.graedyn-site-main--plain .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: 15px;
}
.graedyn-site-main--plain .entry-content th,
.graedyn-site-main--plain .entry-content td {
	border: 1px solid var(--gl-stone-200);
	padding: 10px 12px;
	text-align: left;
}
.graedyn-site-main--plain .entry-content th { background: var(--gl-stone-100); font-weight: 600; }