/* =========================================================================
   Small Town Restoration — frontend styles (v2, full-bleed + extravagant)
   Signature: the illuminated dome/sunrise from the logo, the storefront
   color band as section dividers, gold hairlines, glass panels.
   ========================================================================= */

:root {
	--str-sky:    #2BB3E0;
	--str-sky-dk: #1E94BD;
	--str-coral:  #E0533D;
	--str-navy:   #16223C;
	--str-navy-2: #1F3157;
	--str-green:  #2E5E4E;
	--str-gold:   #D9B45B;
	--str-gold-dk:#B5913E;
	--str-cream:  #F7F3EA;
	--str-ink:    #20262E;
	--str-muted:  #5C6672;
	--str-line:   #E4DED1;

	--str-font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
	--str-font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--str-maxw: 1180px;
	--str-radius: 16px;
	--str-shadow: 0 30px 70px rgba(12,20,38,.35);
}

/* ---- full-bleed: break out of any Elementor container to viewport width ---- */
.str-hero,
.str-section,
.str-contact {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	font-family: var(--str-font-body);
	color: var(--str-ink);
	line-height: 1.65;
	position: relative;
	overflow: hidden;
}
.str-wrap { max-width: var(--str-maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }

/* ---- shared type ---- */
.str-eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font: 700 13px/1 var(--str-font-body);
	letter-spacing: .28em; text-transform: uppercase;
	color: var(--str-gold-dk); margin: 0 0 18px;
}
.str-eyebrow::before { content: ""; width: 34px; height: 2px; background: currentColor; display: inline-block; }
.str-eyebrow--light { color: var(--str-gold); }

.str-h2 {
	font: 700 clamp(32px, 5vw, 56px)/1.04 var(--str-font-display);
	color: var(--str-navy); margin: 0 0 20px; letter-spacing: -.01em;
}
.str-h3 { font: 700 clamp(24px, 3vw, 34px)/1.1 var(--str-font-display); color: var(--str-navy); margin: 0 0 16px; }
.str-onlight .str-h2, .str-onlight .str-h3 { color: var(--str-navy); }
.str-ondark .str-h2, .str-ondark .str-h3 { color: #fff; }
.str-ondark p { color: #D7DEEA; }

/* ---- buttons ---- */
.str-btn {
	display: inline-flex; align-items: center; gap: 10px;
	font: 700 15px/1 var(--str-font-body); letter-spacing: .02em;
	padding: 16px 30px; border-radius: 999px; text-decoration: none;
	border: 2px solid transparent; cursor: pointer; position: relative;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.str-btn__arrow { transition: transform .18s ease; }
.str-btn:hover .str-btn__arrow { transform: translateX(5px); }
.str-btn--coral { background: linear-gradient(135deg,#EC6450,#D4452F); color:#fff; box-shadow: 0 12px 30px rgba(212,69,47,.4); }
.str-btn--coral:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(212,69,47,.5); }
.str-btn--navy { background: var(--str-navy); color:#fff; }
.str-btn--navy:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(22,34,60,.45); }
.str-btn--gold { background: linear-gradient(135deg,#E7C66E,#C49A3F); color:#241a00; box-shadow: 0 12px 30px rgba(181,145,62,.45); }
.str-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(181,145,62,.6); }
.str-btn--ghost { background: transparent; color:#fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.str-btn--ghost:hover { background:#fff; color: var(--str-navy); border-color:#fff; }
.str-btn--ghost-dark { background: transparent; color: var(--str-navy); border-color: var(--str-navy); }
.str-btn--ghost-dark:hover { background: var(--str-navy); color:#fff; }
.str-btn--block { width: 100%; justify-content: center; }

/* ---- storefront signature band ---- */
.str-band { display:flex; height:8px; width:100%; position:relative; z-index:3; }
.str-band span { flex:1; }
.str-band--top { position:absolute; top:0; left:0; }

/* ---- dome / sunrise signature glow ---- */
.str-dome {
	position:absolute; left:50%; top:-10%; transform:translateX(-50%);
	width:min(1100px,120%); aspect-ratio:2/1;
	background: radial-gradient(ellipse at center 90%, rgba(255,255,255,.35), rgba(43,179,224,.12) 38%, transparent 66%);
	pointer-events:none; z-index:1;
}

/* ---- reveal on scroll ---- */
.str-reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.str-reveal.is-in { opacity:1; transform:none; }
.str-reveal.d1 { transition-delay:.08s; } .str-reveal.d2 { transition-delay:.16s; } .str-reveal.d3 { transition-delay:.24s; }

/* =========================================================================
   shared full-bg section scaffolding
   ========================================================================= */
.str-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.str-bg--fixed { background-attachment: fixed; }
.str-veil { position:absolute; inset:0; z-index:0; }

/* =========================================================================
   HERO
   ========================================================================= */
.str-hero { isolation:isolate; }
.str-hero .str-veil {
	background:
		radial-gradient(1200px 700px at 70% -10%, rgba(43,179,224,.35), transparent 60%),
		linear-gradient(105deg, rgba(11,18,34,.92) 0%, rgba(13,21,40,.7) 46%, rgba(13,21,40,.28) 100%);
}
.str-hero__inner {
	max-width: var(--str-maxw); margin:0 auto;
	padding: clamp(90px,13vw,170px) 28px clamp(96px,13vw,170px);
	display:grid; grid-template-columns:1.12fr .88fr; gap:54px; align-items:center;
	position:relative; z-index:2;
}
.str-hero__copy { color:#fff; max-width:600px; }
.str-hero__title {
	font: 700 clamp(46px,8vw,92px)/.98 var(--str-font-display);
	margin:0 0 20px; letter-spacing:-.02em;
	color: #2ea4cd;
	text-shadow: 0 4px 30px rgba(0,0,0,.45);
}
.str-hero__title em { font-style:normal; color: var(--str-gold);
	background: linear-gradient(180deg,#F0D483,#C49A3F); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.str-hero__sub { font-size: clamp(17px,1.7vw,20px); color:#E7EEF6; margin:0 0 32px; max-width:500px; }
.str-hero__actions { display:flex; gap:14px; flex-wrap:wrap; }

/* glass info card */
.str-hero__card {
	background: linear-gradient(160deg, rgba(43,179,224,.92), rgba(30,148,189,.92));
	border:1px solid rgba(255,255,255,.35);
	color:#fff; border-radius: var(--str-radius); padding:34px 30px;
	box-shadow: var(--str-shadow); backdrop-filter: blur(6px);
}
.str-hero__card-title { font:700 28px/1.05 var(--str-font-display); margin:0 0 4px; }
.str-hero__card-sub { margin:0 0 20px; color:#EAF7FC; font-size:15px; }

/* =========================================================================
   FORMS
   ========================================================================= */
.str-form input, .str-form textarea {
	width:100%; box-sizing:border-box; background:rgba(255,255,255,.97);
	border:1px solid rgba(255,255,255,.6); border-radius:10px;
	padding:14px 16px; margin-bottom:12px;
	font:400 15px/1.4 var(--str-font-body); color: var(--str-ink);
}
.str-form input::placeholder, .str-form textarea::placeholder { color:#7c8794; }
.str-form input:focus, .str-form textarea:focus { outline:3px solid rgba(255,255,255,.65); outline-offset:1px; }
.str-form textarea { resize:vertical; }
.str-alert { padding:12px 15px; border-radius:10px; font-size:14px; margin-bottom:14px; }
.str-alert--ok { background:#E7F6EC; color:#1c6b3a; } .str-alert--err { background:#FDECEA; color:#a3271a; }

/* =========================================================================
   GENERIC SECTION
   ========================================================================= */
.str-section { padding: clamp(72px,10vw,128px) 0; }
.str-section .str-veil--cream { background: linear-gradient(180deg, rgba(247,243,234,.93), rgba(247,243,234,.97)); }
.str-section .str-bg { mix-blend-mode:normal; opacity:.16; }
.str-section--dark .str-veil {
	background: linear-gradient(120deg, rgba(13,21,40,.94), rgba(31,49,87,.86));
}
.str-section--dark .str-bg { opacity:.4; }

.str-section__head { display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-bottom:46px; }
.str-section__head .str-h2 { margin:0; }

/* About preview (dark, dramatic) */
.str-about-preview { display:grid; grid-template-columns:.82fr 1.18fr; gap:60px; align-items:center; }
.str-about-preview__media {
	position:relative; border-radius:var(--str-radius); padding:44px;
	display:grid; place-items:center;
	background: radial-gradient(circle at 50% 35%, rgba(43,179,224,.25), transparent 65%);
}
.str-about-preview__media::after {
	content:""; position:absolute; inset:0; border-radius:var(--str-radius);
	border:1px solid rgba(217,180,91,.4);
	box-shadow: inset 0 0 60px rgba(43,179,224,.18);
}
.str-about-preview__media img { width:100%; max-width:320px; height:auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); }
.str-pillars { list-style:none; padding:0; margin:24px 0 30px; }
.str-pillars li { padding:12px 0 12px 24px; border-left:3px solid var(--str-gold); margin-bottom:8px; color:#C9D3E2; }
.str-pillars li strong { color:#fff; }

/* Mission / Vision / History */
.str-mvh { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:34px 0 70px; }
.str-mvh__card {
	background: rgba(255,255,255,.86); border:1px solid rgba(217,180,91,.35);
	border-radius:var(--str-radius); padding:38px 30px; backdrop-filter: blur(4px);
	border-top:5px solid var(--c,var(--str-sky));
	box-shadow: 0 20px 50px rgba(22,34,60,.1);
	transition: transform .2s ease, box-shadow .2s ease;
}
.str-mvh__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(22,34,60,.18); }
.str-mvh__icon { width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
	background: color-mix(in srgb, var(--c) 16%, #fff); color:var(--c); font-size:26px; margin-bottom:20px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.str-mvh__card h3 { font:700 24px/1 var(--str-font-display); color:var(--str-navy); margin:0 0 12px; }
.str-mvh__card p { color:var(--str-muted); margin:0; }

/* History split */
.str-history { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.str-history__media { position:relative; }
.str-history__media img { width:100%; height:auto; border-radius:var(--str-radius); display:block; box-shadow:var(--str-shadow); }
.str-history__media::before { content:"1754"; position:absolute; right:-14px; top:-22px;
	font:700 64px/1 var(--str-font-display); color:var(--str-gold); opacity:.85; text-shadow:0 2px 12px rgba(0,0,0,.2); }
.str-history__copy p { color:var(--str-muted); }

/* =========================================================================
   PROJECT GALLERY
   ========================================================================= */
.str-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.str-chip { font:700 14px/1 var(--str-font-body); padding:11px 20px; border-radius:999px;
	border:1px solid var(--str-line); background:rgba(255,255,255,.7); color:var(--str-muted); cursor:pointer; transition:all .16s ease; }
.str-chip:hover { border-color:var(--str-navy); color:var(--str-navy); }
.str-chip.is-active { background:var(--str-navy); border-color:var(--str-navy); color:#fff; box-shadow:0 8px 20px rgba(22,34,60,.25); }

.str-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.str-card { background:#fff; border:1px solid var(--str-line); border-radius:var(--str-radius);
	overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.str-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(22,34,60,.2); }
.str-card__media { position:relative; display:block; aspect-ratio:4/3; background:#eceae3; overflow:hidden; }
.str-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.str-card:hover .str-card__media img { transform:scale(1.07); }
.str-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(13,21,40,.45)); }
.str-card__placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#9aa2ad; font-size:14px; }
.str-card__status { position:absolute; top:14px; left:14px; z-index:2;
	font:700 12px/1 var(--str-font-body); letter-spacing:.05em; padding:8px 13px; border-radius:999px; color:#fff;
	background:var(--str-navy); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.str-status--completed { background:#2E7D55; } .str-status--in-progress { background:var(--str-sky-dk); } .str-status--planned { background:var(--str-gold-dk); }
.str-card__body { padding:24px 24px 26px; display:flex; flex-direction:column; gap:9px; flex:1; }
.str-card__title { font:700 22px/1.12 var(--str-font-display); margin:0; }
.str-card__title a { color:var(--str-navy); text-decoration:none; } .str-card__title a:hover { color:var(--str-coral); }
.str-card__meta { font:700 13px/1 var(--str-font-body); color:var(--str-gold-dk); letter-spacing:.04em; margin:0; }
.str-card__excerpt { color:var(--str-muted); font-size:15px; margin:0; flex:1; }
.str-card__link { color:var(--str-coral); font-weight:700; text-decoration:none; display:inline-flex; gap:8px; align-items:center; margin-top:8px; }
.str-card__link:hover { color:var(--str-sky-dk); }
.str-empty { background:rgba(255,255,255,.7); border:1px dashed var(--str-line); border-radius:var(--str-radius); padding:44px; text-align:center; color:var(--str-muted); }
.str-empty a, .str-empty strong { color:var(--str-navy); }

/* =========================================================================
   CONTACT
   ========================================================================= */
.str-contact { padding: clamp(72px,10vw,128px) 0; }
.str-contact .str-veil {
	background: linear-gradient(120deg, rgba(30,148,189,.95) 0%, rgba(22,34,60,.9) 100%);
}
.str-contact .str-bg { opacity:.28; }
.str-contact__inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.str-contact__title { font:700 clamp(32px,5vw,54px)/1.02 var(--str-font-display); color:#fff; margin:0 0 16px; }
.str-contact__sub { color:#EAF7FC; font-size:18px; margin:0 0 26px; max-width:440px; }
.str-contact__list { list-style:none; padding:0; margin:0; color:#fff; }
.str-contact__list li { padding:11px 0; font-size:16px; border-bottom:1px solid rgba(255,255,255,.22); }
.str-contact__formwrap { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
	padding:34px; border-radius:var(--str-radius); backdrop-filter:blur(8px); box-shadow:var(--str-shadow); }

/* =========================================================================
   DONATE shortcode (inline button, e.g. in nav)
   ========================================================================= */
.str-donate { display:inline-flex; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:920px) {
	.str-hero__inner, .str-about-preview, .str-history, .str-contact__inner { grid-template-columns:1fr; gap:40px; }
	.str-mvh { grid-template-columns:1fr; }
	.str-grid { grid-template-columns:repeat(2,1fr); }
	.str-bg--fixed { background-attachment:scroll; }
}
@media (max-width:600px) {
	.str-grid { grid-template-columns:1fr; }
	.str-section__head { flex-direction:column; align-items:flex-start; }
	.str-history__media::before { font-size:44px; right:-6px; top:-16px; }
}
@media (prefers-reduced-motion: reduce) {
	.str-btn, .str-card, .str-card__media img, .str-btn__arrow, .str-mvh__card, .str-reveal { transition:none; }
	.str-reveal { opacity:1; transform:none; }
	.str-bg--fixed { background-attachment:scroll; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.str-footer {
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	background: linear-gradient(180deg, #16223C 0%, #0d1528 100%);
	color: #C7D2E2; font-family: var(--str-font-body); position: relative; overflow: hidden;
}
.str-footer .str-wrap { padding-left: 28px; padding-right: 28px; }
.str-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; padding: 66px 0 42px; }
.str-footer__brand img { width: 180px; max-width: 100%; height: auto; margin-bottom: 18px; }
.str-footer__brand p { color: #93A4BC; max-width: 340px; margin: 0 0 22px; font-size: 15px; }
.str-footer__col h4 { font: 700 13px/1 var(--str-font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--str-gold); margin: 4px 0 18px; }
.str-footer__col ul { list-style: none; padding: 0; margin: 0; }
.str-footer__col li { padding: 8px 0; font-size: 15px; color: #93A4BC; }
.str-footer__col a { color: #C7D2E2; text-decoration: none; transition: color .15s ease; }
.str-footer__col a:hover { color: #fff; }
.str-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.12);
	padding: 22px 0; display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; font-size: 14px; color: #7E8FA8;
}
.str-footer__est { font-family: var(--str-font-display); font-style: italic; color: var(--str-gold); letter-spacing: .02em; }

@media (max-width: 920px) { .str-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; } .str-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .str-footer__grid { grid-template-columns: 1fr; } .str-footer__bottom { flex-direction: column; align-items: flex-start; } }

.str-ondark
 {
    color: #D7DEEA;
    padding-bottom: 15px !important;
}

/* =========================================================================
   THEME-HARDENING — keep form submit buttons on-brand even when a theme
   restyles button[type="submit"] (red border, uppercase, partial width, etc.)
   ========================================================================= */
.str-form button.str-btn {
	-webkit-appearance: none; appearance: none;
	border: 2px solid transparent !important;
	border-radius: 999px !important;
	text-transform: none !important;
	letter-spacing: .02em !important;
	width: 100% !important;
	min-height: 0 !important;
	font-family: var(--str-font-body) !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	cursor: pointer;
}
.str-form button.str-btn--navy { background: var(--str-navy) !important; color: #fff !important; }
.str-form button.str-btn--navy:hover { background: #0f1830 !important; transform: translateY(-2px); }
.str-form button.str-btn--navy:focus { outline: 3px solid rgba(255,255,255,.6) !important; outline-offset: 2px; }