/*
Theme Name:   Shotgun Messenger
Theme URI:    https://shotgunmessengermusic.com
Description:  Child theme of Hello Elementor for Shotgun Messenger. Americana blues out of Nashville.
Author:       David Avant
Template:     hello-elementor
Version:      0.1.0
Text Domain:  shotgun-child
*/

:root {
	--csa-ink:    #0E0E0D;
	--csa-char:   #14140F;
	--csa-panel:  #171714;
	--csa-line:   #22221E;
	--csa-mid:    #6E665A;
	--csa-muted:  #9A9182;
	--csa-dirty:  #C6BEB0;
	--csa-bone:   #E4DFD4;
	--csa-paper:  #E4DFD4;
	--csa-rule:   #C6BEAC;
}

body.csa-home {
	margin: 0;
	background: var(--csa-ink);
	color: var(--csa-dirty);
	font-family: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.csa-home a { color: var(--csa-dirty); text-decoration: none; }
body.csa-home a:hover { color: var(--csa-bone); }

.csa-serif { font-family: 'Bodoni Moda', Didot, 'Times New Roman', serif; font-weight: 400; }

.csa-lbl {
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	font-weight: 500;
}

/* Full-bleed shell; each band centres its own content so backgrounds
   (hero photo, booking panel) span the whole viewport on wide screens. */
.csa-wrap { width: 100%; }
.csa-wrap *, .csa-wrap *::before, .csa-wrap *::after { box-sizing: border-box; }

.csa-nav,
.csa-sec,
.csa-foot,
.csa-hero__inner,
.csa-book__grid { max-width: 1440px; margin-left: auto; margin-right: auto; }

/* Hello Elementor wraps content in a padded, max-width container and prints a
   page title. The design is full-bleed, so neutralise both on the front page. */
body.csa-home .site-header,
body.csa-home .page-header,
body.csa-home .site-footer { display: none; }

body.csa-home .site-main,
body.csa-home main.site-main,
body.csa-home .page-content {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* ---------- nav ---------- */
.csa-nav {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; padding: 22px 56px; position: relative; z-index: 2;
}
.csa-nav__mark { font-size: 20px; color: var(--csa-bone); letter-spacing: 0.09em; }
/* The hero already carries the name at full size, so the nav wordmark is a
   duplicate on the front page. Keep it for inner pages. */
body.csa-home .csa-nav__mark { visibility: hidden; }
.csa-nav__links { display: flex; gap: 26px; color: var(--csa-muted); flex-wrap: wrap; }

/* ---------- hero ---------- */
.csa-hero {
	position: relative; min-height: 760px; margin-top: -74px;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; background: var(--csa-char);
}
.csa-hero__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 50%;
	filter: grayscale(0.55) contrast(1.08) brightness(0.72);
}
.csa-hero__veil {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(14,14,13,0.88) 0%, rgba(14,14,13,0.45) 42%, rgba(14,14,13,0.92) 100%),
		radial-gradient(rgba(198,190,176,0.05) 1px, transparent 1px);
	background-size: auto, 3px 3px;
}
.csa-hero__inner {
	position: relative; display: flex; flex-direction: column; align-items: center;
	gap: 52px; padding: 90px 24px 60px; text-align: center;
}
.csa-hero__name { font-size: 52px; line-height: 1; color: var(--csa-bone); letter-spacing: 0.06em; margin: 0; }
.csa-hero__sub { font-size: 11px; letter-spacing: 0.42em; color: var(--csa-muted); margin-top: 14px; }
.csa-rule { width: 64px; height: 1px; background: rgba(198,190,176,0.3); }
#csa-doors { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.csa-door {
	display: inline-block; font-size: 48px; line-height: 1; color: var(--csa-bone);
	letter-spacing: 0.02em; border-bottom: 1px solid rgba(228,223,212,0.55); padding-bottom: 6px;
}
.csa-door:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- sections ---------- */
.csa-sec { padding: 0 56px 96px; }
.csa-sec--top { padding-top: 96px; border-top: 1px solid var(--csa-line); }
#head-listen, #head-shows, #head-store {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--csa-line);
}
.csa-head__t { font-size: 34px; color: var(--csa-bone); }

.csa-voice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.csa-voice__lead { font-size: 44px; line-height: 1.15; color: var(--csa-bone); margin: 0; }
.csa-voice__body { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.csa-voice__body p { font-size: 17px; line-height: 1.65; color: var(--csa-muted); margin: 0; }

.csa-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding-top: 30px; }
.csa-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-top: 30px; }

.csa-card { display: flex; flex-direction: column; gap: 14px; }
.csa-card__art {
	height: 250px; display: flex; align-items: center; justify-content: center;
	background-color: var(--csa-panel); border: 1px solid var(--csa-line);
	background-image: radial-gradient(rgba(198,190,176,0.05) 1px, transparent 1px);
	background-size: 3px 3px;
}
.csa-card__t { font-size: 21px; color: var(--csa-bone); }
.csa-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.csa-show {
	display: grid; grid-template-columns: 120px 1fr 1fr 120px; gap: 26px;
	align-items: center; padding: 22px 0; border-bottom: 1px solid var(--csa-line);
}
.csa-show__v { font-size: 24px; color: var(--csa-bone); }

/* ---------- booking ---------- */
.csa-book { background: var(--csa-paper); color: var(--csa-char); padding: 96px 56px; }
.csa-book__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.csa-book__t { font-size: 52px; line-height: 1.1; margin: 16px 0 0; }
.csa-book__p { font-size: 17px; line-height: 1.65; color: #4A443C; margin-top: 22px; max-width: 520px; }
.csa-setups { display: flex; gap: 40px; margin-top: 34px; flex-wrap: wrap; }
.csa-setup { display: flex; flex-direction: column; gap: 7px; }
.csa-setup__n { font-size: 24px; }
.csa-btn {
	display: inline-block; margin-top: 40px; background: var(--csa-char);
	color: var(--csa-bone); padding: 19px 40px;
}
.csa-btn:hover { background: #000; color: #fff; }
.csa-book__art {
	height: 400px; display: flex; align-items: center; justify-content: center;
	background: #C9C2B4; border: 1px solid #C0B8A8;
	background-image: radial-gradient(rgba(20,20,15,0.28) 1.2px, transparent 1.3px);
	background-size: 5px 5px;
}

/* ---------- footer ---------- */
.csa-foot {
	padding: 52px 56px; display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--csa-line);
}
.csa-foot__mark { font-size: 17px; color: #4A443C; letter-spacing: 0.09em; }
.csa-foot__links { display: flex; gap: 24px; color: #4A443C; flex-wrap: wrap; }

/* ================================================================
   Elementor build
   The page is built from Elementor containers carrying these classes,
   so the look lives here and the layout stays editable in the builder.
   ================================================================ */

body { background: var(--csa-ink); color: var(--csa-dirty); font-family: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body a { color: var(--csa-dirty); text-decoration: none; }
body a:hover { color: var(--csa-bone); }

/* header / footer templates */
#csa-nav { padding: 22px 56px !important; position: relative; z-index: 5; }
#csa-foot { padding: 52px 56px !important; border-top: 1px solid var(--csa-line); }
#csa-foot .csa-foot__links a, #csa-foot .csa-foot__links span { color: #4A443C; }
#csa-foot .csa-foot__links { display: flex; gap: 24px; flex-wrap: wrap; }
.csa-nav__links { display: flex; gap: 26px; flex-wrap: wrap; }
.csa-nav__links a { color: var(--csa-muted); }
.csa-nav__links a:hover { color: var(--csa-bone); }

/* hero */
#csa-hero { position: relative; min-height: 760px; margin-top: -80px; padding: 0 !important; overflow: hidden; }
/* Lift every direct child above the veil, whatever Elementor names it. */
#csa-hero > * { position: relative; z-index: 2; }
#csa-hero > .csa-hero__img-el { z-index: 0; }
#csa-hero > .e-con-inner { position: relative; z-index: 2; }
.csa-hero__img-el { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0; }
.csa-hero__img-el img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
	filter: grayscale(0.55) contrast(1.08) brightness(0.7); display: block; }
#csa-hero::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(14,14,13,0.88) 0%, rgba(14,14,13,0.42) 42%, rgba(14,14,13,0.94) 100%),
		radial-gradient(rgba(198,190,176,0.05) 1px, transparent 1px);
	background-size: auto, 3px 3px;
}
#csa-hero .csa-hero__inner { position: relative; z-index: 2; padding: 120px 24px 70px !important; text-align: center; }
#csa-hero .csa-hero__name .elementor-heading-title { font-size: 52px; line-height: 1; color: var(--csa-bone); letter-spacing: 0.06em; }
#csa-hero .csa-hero__sub .elementor-heading-title { font-size: 11px; letter-spacing: 0.42em; color: var(--csa-muted); text-transform: uppercase; }
.csa-el-rule { width: 64px; }
.csa-el-rule .elementor-divider-separator { border-top: 1px solid rgba(198,190,176,0.3) !important; }
#csa-doors .csa-door .elementor-heading-title { font-size: 48px; line-height: 1; color: var(--csa-bone); letter-spacing: 0.02em; }
#csa-doors .csa-door .elementor-heading-title a { border-bottom: 1px solid rgba(228,223,212,0.55); padding-bottom: 6px; display: inline-block; }
#csa-doors .csa-door .elementor-heading-title a:hover { color: #fff; border-bottom-color: #fff; }

/* sections */
#listen, #shows, #store { padding: 90px 56px !important; }
#csa-voice { padding: 96px 56px !important; border-top: 1px solid var(--csa-line); }
#csa-voice .csa-voice__lead .elementor-heading-title { font-size: 44px; line-height: 1.15; color: var(--csa-bone); }
#csa-voice .csa-voice__body p { font-size: 17px; line-height: 1.65; color: var(--csa-muted); margin: 0; }
#head-listen, #head-shows, #head-store { padding-bottom: 22px !important; border-bottom: 1px solid var(--csa-line); margin-bottom: 30px; }
#head-listen, #head-shows, #head-store .csa-head__t .elementor-heading-title { font-size: 34px; color: var(--csa-bone); }
#head-listen, #head-shows, #head-store .csa-head__note .elementor-heading-title { color: var(--csa-mid); text-transform: uppercase; }
.csa-empty { font-size: 17px; line-height: 1.65; color: var(--csa-muted); margin: 0; max-width: 620px; }
.csa-empty a { border-bottom: 1px solid rgba(198,190,176,0.4); }

/* cards */
.csa-card .csa-card__t .elementor-heading-title { font-size: 21px; color: var(--csa-bone); }
.csa-card .csa-card__meta .elementor-heading-title { color: var(--csa-mid); text-transform: uppercase; }
.csa-card__vid .elementor-wrapper { border: 1px solid var(--csa-line); }

/* booking */
#booking { background-color: var(--csa-paper) !important; color: var(--csa-char); padding: 96px 56px !important; }
#booking .csa-book__kicker .elementor-heading-title { color: var(--csa-mid) !important; text-transform: uppercase; }
#booking .csa-book__t .elementor-heading-title { font-size: 52px; line-height: 1.1; color: var(--csa-char) !important; }
#booking .csa-book__p p { font-size: 17px; line-height: 1.65; color: #4A443C; margin: 0; max-width: 520px; }
#booking .csa-setup__n .elementor-heading-title { font-size: 24px; color: var(--csa-char) !important; }
#booking .csa-setup__note .elementor-heading-title { color: var(--csa-mid) !important; text-transform: uppercase; }
#booking .csa-book__p p { color: #4A443C !important; }
.csa-el-btn .elementor-button {
	background: var(--csa-char); color: var(--csa-bone); border-radius: 0;
	padding: 19px 40px; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500;
}
.csa-el-btn .elementor-button:hover { background: #000; color: #fff; }
.csa-book__art {
	height: 400px; display: flex; align-items: center; justify-content: center;
	background: #C9C2B4; border: 1px solid #C0B8A8;
	background-image: radial-gradient(rgba(20,20,15,0.28) 1.2px, transparent 1.3px); background-size: 5px 5px;
}
.csa-book__art .csa-lbl { color: var(--csa-mid); }

/* Two-column bands: Elementor containers size to content unless told
   otherwise, so give the halves explicit proportions. */
#csa-voice > .e-con-inner > *:first-child { flex: 1 1 46%; }
#csa-voice > .e-con-inner > *:last-child  { flex: 1 1 54%; }
#booking  > .e-con-inner > *:first-child { flex: 1 1 55%; }
#booking  > .e-con-inner > *:last-child  { flex: 1 1 45%; align-self: stretch; }
#booking  > .e-con-inner > *:last-child .csa-book__art { height: 100%; min-height: 400px; }
#head-listen, #head-shows, #head-store > .e-con-inner { align-items: flex-end; }

@media (max-width: 767px) {
	#csa-voice > .e-con-inner > *,
	#booking  > .e-con-inner > * { flex: 1 1 100%; }
	#csa-hero { min-height: 600px; margin-top: 0; }
	#csa-hero .csa-hero__name .elementor-heading-title { font-size: 28px; }
	#csa-doors .csa-door .elementor-heading-title { font-size: 27px; }
	#csa-nav, #listen, #shows, #store, #csa-voice, #booking, #csa-foot { padding-left: 24px !important; padding-right: 24px !important; }
	#csa-voice .csa-voice__lead .elementor-heading-title,
	#booking .csa-book__t .elementor-heading-title { font-size: 28px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.csa-voice, .csa-book__grid { grid-template-columns: 1fr; gap: 40px; }
	.csa-grid-3, .csa-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.csa-hero__name { font-size: 40px; }
	.csa-door { font-size: 38px; }
	.csa-voice__lead, .csa-book__t { font-size: 34px; }
}

@media (max-width: 680px) {
	.csa-nav { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 24px; }
	.csa-hero { margin-top: 0; min-height: 600px; }
	.csa-hero__inner { padding: 60px 20px; gap: 38px; }
	.csa-hero__name { font-size: 28px; letter-spacing: 0.04em; }
	.csa-hero__sub { font-size: 10px; letter-spacing: 0.3em; }
	.csa-door { font-size: 27px; }
	#csa-doors { gap: 24px; }
	.csa-sec { padding: 0 24px 64px; }
	.csa-sec--top { padding-top: 64px; }
	.csa-grid-3, .csa-grid-4 { grid-template-columns: 1fr; }
	.csa-voice__lead, .csa-book__t { font-size: 28px; }
	.csa-show { grid-template-columns: 1fr; gap: 8px; }
	.csa-book { padding: 64px 24px; }
	.csa-foot { padding: 40px 24px; }
}

/* ---------- hero: text right-justified so his eyeline leads into it ---------- */
#csa-hero #csa-hero-inner {
	align-items: flex-end !important;
	text-align: right;
}
#csa-hero #csa-hero-inner > .e-con-inner { align-items: flex-end; }
#csa-doors { align-items: flex-end !important; }
#csa-hero .csa-hero__name .elementor-heading-title,
#csa-hero .csa-hero__sub .elementor-heading-title,
#csa-hero .csa-door .elementor-heading-title { text-align: right; }
#csa-hero .csa-el-rule .elementor-divider { justify-content: flex-end; }
/* pull the block off the right edge without shrinking the photo */
#csa-hero #csa-hero-inner { padding-right: 90px !important; }

@media (max-width: 767px) {
	#csa-hero #csa-hero-inner { align-items: center !important; text-align: center; padding-right: 24px !important; }
	#csa-hero #csa-hero-inner > .e-con-inner { align-items: center; }
	#csa-doors { align-items: center !important; }
	#csa-hero .csa-hero__name .elementor-heading-title,
	#csa-hero .csa-hero__sub .elementor-heading-title,
	#csa-hero .csa-door .elementor-heading-title { text-align: center; }
	#csa-hero .csa-el-rule .elementor-divider { justify-content: center; }
}

/* clear the fixed nav now that the name sits top-right under it */
#csa-hero #csa-hero-inner { padding-top: 190px !important; }
@media (max-width: 767px) {
	#csa-hero #csa-hero-inner { padding-top: 90px !important; }
}