/*
Theme Name: Galveston Queens Child
Theme URI: https://www.galvestonqueens.com
Description: Child theme for Galveston Queens. Thin, terminal-edited, optimized for safe change.
Author: Galveston Queens
Template: generatepress
Version: 1.0.0
Text Domain: gq-child
*/

/* ==========================================================================
   1. COLOR SYSTEM (synced with theme.json)
   ========================================================================== */
:root {
	--gq-black: #0D0D0D;
	--gq-magenta: #E6007A;
	--gq-gold: #D4AF37;
	--gq-teal: #0A6C6D;
	--gq-coral: #FF6B4A;
	--gq-offwhite: #F5F0E8;
	--gq-dark: #1A1A1A;
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
body {
	background-color: var(--gq-black);
	color: var(--gq-offwhite);
}

a {
	color: var(--gq-magenta);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover, a:focus {
	color: var(--gq-gold);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.gq-btn-primary, .gq-btn-secondary {
	padding: 12px 28px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: inline-block;
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: 2px;
	text-align: center;
}

.gq-btn-primary {
	background-color: var(--gq-magenta);
	color: var(--gq-offwhite);
	border: 2px solid var(--gq-magenta);
}

.gq-btn-primary:hover, .gq-btn-primary:focus {
	background-color: var(--gq-gold);
	border-color: var(--gq-gold);
	color: var(--gq-black);
	outline: 2px solid var(--gq-offwhite);
	outline-offset: 2px;
}

.gq-btn-secondary {
	background-color: transparent;
	color: var(--gq-gold);
	border: 2px solid var(--gq-gold);
}

.gq-btn-secondary:hover, .gq-btn-secondary:focus {
	background-color: var(--gq-gold);
	color: var(--gq-black);
	outline: 2px solid var(--gq-offwhite);
	outline-offset: 2px;
}

/* ==========================================================================
   4. UTILITY CLASSES
   ========================================================================== */
.gq-bg-black    { background-color: var(--gq-black); }
.gq-bg-magenta  { background-color: var(--gq-magenta); }
.gq-bg-gold     { background-color: var(--gq-gold); }
.gq-bg-teal     { background-color: var(--gq-teal); }
.gq-bg-coral    { background-color: var(--gq-coral); }
.gq-bg-offwhite { background-color: var(--gq-offwhite); }

.gq-text-offwhite { color: var(--gq-offwhite); }
.gq-text-gold     { color: var(--gq-gold); }
.gq-text-magenta  { color: var(--gq-magenta); }
.gq-text-dark     { color: var(--gq-dark); }

/* ==========================================================================
   5. RESPONSIVE CONTAINER & FLUID HEADLINES
   ========================================================================== */
.gq-container {
	max-width: 1100px;
	margin: 0 auto;
}

.gq-hero-h1 {
	font-size: clamp(28px, 5vw, 44px);
	line-height: 1.25;
}

/* ==========================================================================
   6. FULL-BLEED FIX — GeneratePress wrappers default to white background
   and add side padding; this forces them black and edge-to-edge on mobile.
   ========================================================================== */
body, .site, .site-content, #primary, .content-area, .inside-article, .entry-content, .site-main {
	background-color: var(--gq-black);
}

@media (max-width: 768px) {
	.entry-content, .inside-article, .grid-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ==========================================================================
   7. PHONE LINK — tappable, high-contrast, scales up on mobile
   ========================================================================== */
.gq-phone-link {
	display: inline-block;
	color: var(--gq-offwhite);
	font-size: clamp(18px, 5vw, 22px);
	font-weight: 600;
	text-decoration: none;
	padding: 14px 20px;
	margin-top: 12px;
}

/* ==========================================================================
   8. TYPOGRAPHY SYSTEM — one scale, reused site-wide. No page-specific sizes.
   ========================================================================== */
.gq-h1 {
	font-family: 'Oswald', sans-serif;
	font-size: clamp(44px, 6vw, 58px);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.15;
}

.gq-h2 {
	font-family: 'Oswald', sans-serif;
	font-size: clamp(30px, 4vw, 40px);
	font-weight: 600;
}

.gq-intro {
	font-size: clamp(18px, 3vw, 22px);
	font-weight: 500;
	line-height: 1.5;
	max-width: 65ch;
	margin-left: auto;
	margin-right: auto;
}

.gq-body {
	font-size: 19px;
	line-height: 1.72;
	max-width: 68ch;
}

.gq-phone-block {
	display: inline-block;
	text-decoration: none;
	color: var(--gq-offwhite);
	text-align: center;
	padding: 16px 24px;
}

.gq-phone-label {
	display: block;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.03em;
	opacity: 0.85;
}

.gq-phone-number {
	display: block;
	font-size: clamp(24px, 5vw, 28px);
	font-weight: 600;
	margin-top: 4px;
}

/* ==========================================================================
   9. REFINEMENT PASS — section titles heavier, phone number larger
   ========================================================================== */
.gq-section-label {
	font-family: 'Oswald', sans-serif;
	font-size: clamp(38px, 4.5vw, 48px);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.1;
	margin-bottom: 0.7em;
}

.gq-phone-number {
	font-size: clamp(26px, 5vw, 34px) !important;
	font-weight: 650;
	line-height: 1.15;
}