/*
Theme Name:        Gutter Clean Pro
Theme URI:         https://rightnowmarketinggroup.com
Author:            Right Now Marketing Group LLC
Description:       Complete standalone WordPress theme for gutter cleaning companies. Activates and instantly builds a fully-editable Gutenberg website — no plugins required. Pages: Home, About, Services + 7 individual service pages, Gallery, Contact, plus unlimited city landing pages. Dynamic {{tag}} system, LocalBusiness schema, WP-CLI. Color palette: Blue / White.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      7.0
Requires PHP:      8.0
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       gutter-clean
Tags:              block-editor, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   CSS Custom Properties — Blue / White Palette
   ============================================================ */
:root {
	/* Primary Blues */
	--gc-blue:          #1565c0;   /* mid blue — white text 5.8:1 WCAG AA ✅ */
	--gc-blue-dark:     #0d47a1;   /* deep navy blue */
	--gc-blue-darker:   #0a2f6b;   /* darkest navy */
	--gc-blue-mid:      #1976d2;   /* medium blue */
	--gc-blue-light:    #e3f0ff;   /* very light blue tint */
	--gc-blue-accent:   #2196f3;   /* bright accent blue */

	/* Whites & Greys */
	--gc-white:         #ffffff;
	--gc-off-white:     #f8faff;   /* slightly blue-tinted white */
	--gc-grey-light:    #f0f4f8;
	--gc-grey-mid:      #dde4ed;
	--gc-grey-text:     #64748b;
	--gc-grey-dark:     #334155;

	/* Text */
	--gc-text:          #1e293b;   /* very dark blue-grey */
	--gc-border:        #dde4ed;

	/* Shape */
	--gc-radius:        6px;
	--gc-radius-lg:     10px;
	--gc-shadow:        0 2px 8px rgba(21,101,192,.1);
	--gc-shadow-md:     0 4px 16px rgba(21,101,192,.15);
	--gc-shadow-lg:     0 8px 32px rgba(21,101,192,.18);
	--gc-max-w:         1200px;
}

/* ============================================================
   Base Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
	font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--gc-text);
	background: var(--gc-white);
	-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gc-blue-mid); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--gc-blue-mid); outline-offset: 3px; border-radius: 2px; }

h1,h2,h3,h4,h5,h6 {
	font-weight: 700; line-height: 1.2;
	color: var(--gc-blue-dark); margin-bottom: .75em;
}
h1 { font-size: clamp(1.875rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.375rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: .35rem; }

/* ============================================================
   CRITICAL — Full-width block breakout
   ============================================================ */
.site-content { overflow-x: hidden; }

.wp-block-group.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}
.wp-block-group.alignfull > * {
	max-width: var(--gc-max-w);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.wp-block-group.alignfull > .wp-block-heading,
.wp-block-group.alignfull > .wp-block-paragraph,
.wp-block-group.alignfull > .wp-block-buttons,
.wp-block-group.alignfull > .wp-block-query,
.wp-block-group.alignfull > .wp-block-group {
	width: 100%; max-width: 100%;
	padding-left: 0; padding-right: 0;
}

/* ============================================================
   CARD GRID SYSTEM — Pure CSS Grid, no wp:columns
   Cards use raw HTML divs inside wp:html blocks
   This avoids ALL WordPress column block quirks
   ============================================================ */

/* 3-column card grid */
.gc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	width: 100%;
}
/* 2-column grid */
.gc-grid--2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	width: 100%;
}
/* 4-column grid */
.gc-grid--4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	width: 100%;
}
/* Auto-fit for trust bar items */
.gc-grid--auto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	width: 100%;
}

/* Feature card — white bg, blue top border */
.gc-card {
	background: var(--gc-white);
	border: 1px solid var(--gc-border);
	border-top: 4px solid var(--gc-blue);
	border-radius: var(--gc-radius);
	padding: 1.75rem;
	box-shadow: var(--gc-shadow);
	transition: box-shadow .2s, transform .15s;
}
.gc-card:hover {
	box-shadow: var(--gc-shadow-md);
	transform: translateY(-2px);
}
.gc-card__icon { font-size: 2.25rem; margin-bottom: .875rem; display: block; }
.gc-card h3 { color: var(--gc-blue-dark); font-size: 1.1rem; margin-bottom: .5rem; }
.gc-card p  { color: var(--gc-grey-text); font-size: .9375rem; margin: 0; }
.gc-card a  { color: var(--gc-blue-mid); font-weight: 600; font-size: .875rem; }

/* Benefit card — left blue border */
.gc-benefit {
	background: var(--gc-white);
	border: 1px solid var(--gc-border);
	border-left: 4px solid var(--gc-blue);
	border-radius: 0 var(--gc-radius) var(--gc-radius) 0;
	padding: 1.25rem 1.25rem 1.25rem 1.5rem;
}
.gc-benefit__title { color: var(--gc-blue-dark); font-weight: 700; margin-bottom: .25rem; font-size: .9375rem; }
.gc-benefit__desc  { color: var(--gc-grey-text); font-size: .875rem; margin: 0; }

/* Step card — numbered */
.gc-step {
	background: var(--gc-white);
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-radius);
	padding: 1.75rem;
	text-align: center;
	box-shadow: var(--gc-shadow);
}
.gc-step__num {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 3rem; height: 3rem;
	background: var(--gc-blue);
	color: var(--gc-white);
	border-radius: 50%;
	font-weight: 800; font-size: 1.25rem;
	margin: 0 auto 1rem;
}
.gc-step h3 { color: var(--gc-blue-dark); font-size: 1rem; margin-bottom: .5rem; }
.gc-step p  { color: var(--gc-grey-text); font-size: .875rem; margin: 0; }

/* Trust item */
.gc-trust {
	background: rgba(255,255,255,.15);
	border-radius: var(--gc-radius);
	padding: .875rem 1rem;
	text-align: center;
	color: var(--gc-white);
	font-weight: 700;
	font-size: .875rem;
}

/* Warning signs list */
.gc-signs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .875rem;
}
.gc-sign-item {
	background: var(--gc-white);
	border: 1px solid var(--gc-border);
	border-left: 3px solid #ef5350;
	border-radius: 0 var(--gc-radius) var(--gc-radius) 0;
	padding: .875rem 1rem;
	color: var(--gc-text);
	font-size: .9375rem;
}

/* Tips list */
.gc-tips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .875rem;
}
.gc-tip-item {
	background: var(--gc-blue-light);
	border-radius: var(--gc-radius);
	padding: .875rem 1rem;
	color: var(--gc-blue-dark);
	font-size: .9375rem;
	font-weight: 500;
}

/* ============================================================
   Buttons
   ============================================================ */
.wp-block-button__link {
	border-radius: var(--gc-radius) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: filter .15s, transform .1s !important;
	cursor: pointer; line-height: 1.2 !important;
}
.wp-block-button__link:hover { filter: brightness(.9); transform: translateY(-1px); }
.wp-block-buttons { gap: 1rem !important; flex-wrap: wrap; }

/* ============================================================
   FAQ Accordion
   ============================================================ */
.wp-block-details {
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-radius);
	margin-bottom: .875rem;
	overflow: hidden;
}
.wp-block-details summary {
	padding: 1.125rem 1.375rem;
	background: var(--gc-off-white);
	cursor: pointer; font-weight: 600;
	color: var(--gc-blue-dark); list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; flex-shrink: 0; color: var(--gc-blue); }
.wp-block-details[open] summary { background: var(--gc-blue-light); }
.wp-block-details[open] summary::after { content: '−'; }
.wp-block-details > *:not(summary) { padding: 1.125rem 1.375rem; }

/* ============================================================
   Query Loop grids
   ============================================================ */
.wp-block-post-template.is-layout-grid { display: grid !important; gap: 1.5rem !important; }
.wp-block-post-template.columns-3.is-layout-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.wp-block-post-template.columns-2.is-layout-grid { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }

/* ============================================================
   Responsive — card grids stack on mobile
   ============================================================ */
@media (max-width: 900px) {
	.gc-grid        { grid-template-columns: repeat(2, 1fr); }
	.gc-grid--4     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.gc-grid        { grid-template-columns: 1fr; }
	.gc-grid--2     { grid-template-columns: 1fr; }
	.gc-grid--4     { grid-template-columns: 1fr; }
	.gc-grid--auto  { grid-template-columns: 1fr 1fr; }
	.gc-signs       { grid-template-columns: 1fr; }
	.gc-tips        { grid-template-columns: 1fr; }
	.wp-block-group.alignfull > * { padding-left: 1rem; padding-right: 1rem; }
}

/* ============================================================
   Accessibility
   ============================================================ */
.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;
}
.skip-link {
	background: var(--gc-blue-dark); color: var(--gc-white); font-weight: 700;
	left: 1rem; padding: .625rem 1.25rem; position: absolute; top: -999px;
	z-index: 999999; border-radius: 0 0 var(--gc-radius) var(--gc-radius);
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	html { scroll-behavior: auto; }
}