/*
Template Name: roxien
Version: 2.0

=========================================================================
Treat for Mayor — 2026 restyle (red / white / blue campaign look)
Loaded AFTER style.css / responsive.css so everything here overrides the
theme without editing it. To revert, remove the custom.css <link> in
index.php. Bold patriotic ticket: deep navy + campaign red, Oswald display
headings, reworked hero, stronger cards & buttons. Layout/content unchanged.
=========================================================================
*/

:root {
	--navy:      #12294d; /* primary dark — sections, headings, nav   */
	--navy-deep: #0d1e3a; /* deeper navy for gradients                */
	--red:       #c8102e; /* campaign red — buttons, accents, links   */
	--red-dark:  #a50d26; /* red hover                                */
	--paper:     #f5f7fb; /* cool off-white section background        */
	--line:      #e2e6f0; /* soft card borders                        */
	--ink:       #1b2536; /* body heading ink                         */
}

html { scroll-behavior: smooth; }
#about, #why, #blueprint, #contact { scroll-margin-top: 110px; }

/* -------------------------------------------------------------------
   1. Typography — Oswald display headings (condensed, campaign-poster)
   ------------------------------------------------------------------- */
.em-slider-sub-title,
.witr_about_title h2, .witr_about_title h3,
.witr_section_title_inner h2, .witr_section_title_inner h3,
.witr_single_service_3d h3,
.service-item h3,
.em-service-title h3 {
	font-family: "Oswald", "Sofia Pro", sans-serif;
	letter-spacing: .5px;
}

/* Eyebrow label (the small heading above each title) — red, uppercase */
.witr_section_title_inner h2,
.witr_about_title h2 {
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 600;
	font-size: 15px;
}

/* Main section title (the large heading) — heavy navy + red underline */
.witr_section_title_inner h3,
.witr_about_title h3 {
	color: var(--navy);
	font-weight: 700;
	position: relative;
	padding-bottom: 20px;
	margin-top: 6px;
}
.witr_section_title_inner h3::after,
.witr_about_title h3::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 68px; height: 5px; border-radius: 3px; background: var(--red);
}
.text-center .witr_section_title_inner h3::after { left: 50%; transform: translateX(-50%); }

/* -------------------------------------------------------------------
   2. Navigation — navy bar, white links, red hover + red donate button
   ------------------------------------------------------------------- */
.roxien_nav_area {
	background: var(--navy) !important;
	transition: box-shadow .25s ease;
}
.roxien_nav_area.postfix, .scroll_fixed.postfix {
	box-shadow: 0 4px 18px rgba(13, 30, 58, .28);
}
.roxien_menu .sub-menu > li > a { color: #fff; font-weight: 500; }
.roxien_menu .sub-menu > li > a:hover,
.roxien_menu .sub-menu > li.current > a { color: #ff5a6e; }
/* wider nav bar on large screens so all menu items + Donate fit on one line */
@media (min-width: 1200px) {
	.roxien_nav_area .container { width: 1500px; max-width: 96%; }
}

/* -------------------------------------------------------------------
   3. Buttons — solid campaign red, uppercase Oswald, hover lift
   ------------------------------------------------------------------- */
.dtbtn,
.donate-btn-header .dtbtn,
a.dtbtn.venobox {
	background: var(--red) !important;
	border: none !important;
	border-radius: 6px !important;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	box-shadow: 0 6px 16px rgba(200, 16, 46, .30);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.dtbtn:hover,
.donate-btn-header .dtbtn:hover,
a.dtbtn.venobox:hover {
	background: var(--red-dark) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(200, 16, 46, .40);
}

/* -------------------------------------------------------------------
   4. Section backgrounds & rhythm
   ------------------------------------------------------------------- */
.roxien_about_area   { background: #fff;         padding: 110px 0 110px; }
.roxien_service_area { background-color: var(--paper); }
.roxien_member_area  { background: #fff;         padding: 100px 0 80px; }

/* Dark "Why Chris?" testimonial band — deep navy with a red top accent */
.roxien_choose_us_area::before {
	background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%) !important;
}
.roxien_choose_us_area { border-top: 6px solid var(--red); }
.roxien_choose_us_area blockquote {
	border-left: 5px solid var(--red);
	background: rgba(255, 255, 255, .06);
	border-radius: 0 10px 10px 0;
	padding: 18px 22px;
}

/* -------------------------------------------------------------------
   5. Cards — bold white tiles with a red top bar; hover lifts
   ------------------------------------------------------------------- */

/* "Hear it from Chris himself" video tiles (inline bg/border/min-height) */
.roxien_service_area .service_top > [class*="col-"] > div {
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-top: 4px solid var(--red) !important;
	border-radius: 10px !important;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(13, 30, 58, .08);
	transition: transform .25s ease, box-shadow .25s ease;
}
.roxien_service_area .service_top > [class*="col-"] > div:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(13, 30, 58, .16);
}
.witr_single_service_3d img[style],
.witr_single_service_3d img { border: none !important; width: 100%; display: block; }
.witr_single_service_3d h3 { color: var(--navy); font-weight: 600; text-transform: uppercase; }

/* Testimonial video posters (dark "Why Chris?" section) */
.service-item img[style],
.service-item img {
	border: 3px solid rgba(255, 255, 255, .12) !important;
	border-radius: 10px !important;
	width: 100%; display: block;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-item a:hover img {
	transform: translateY(-5px);
	border-color: var(--red) !important;
	box-shadow: 0 16px 32px rgba(0, 0, 0, .40);
}
.service-item h3 { text-transform: uppercase; font-weight: 600; }

/* Blueprint gallery pages */
.roxien_member_area .testomonial img {
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(13, 30, 58, .12);
	transition: transform .25s ease, box-shadow .25s ease;
}
.roxien_member_area .testomonial a:hover img {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(13, 30, 58, .20);
}

/* -------------------------------------------------------------------
   6. Contact buttons — three separated navy cards, red icon badge,
   icon + label centered on one row. (Rebuilt: the theme's .sleft cards
   float the icon and strip column gutters, which merged all three into
   one bar with clipped icons — this overrides that layout cleanly.)
   ------------------------------------------------------------------- */
.roxien_address_area { padding-top: 60px; }
.roxien_address_area .row { display: flex; flex-wrap: wrap; }
.roxien_address_area [class*="col-"] { display: flex; margin-bottom: 20px; }
.roxien_address_area [class*="col-"].pdlf { padding-left: 12px !important; padding-right: 12px !important; }

.roxien_address_area .em-service2.sleft.all_color_service {
	width: 100%;
	min-height: 0 !important;
	background: var(--navy) !important;
	border-radius: 12px;
	padding: 26px 28px !important;
	box-shadow: 0 10px 26px rgba(13, 30, 58, .18);
	display: flex; align-items: center;
	transition: transform .25s ease, box-shadow .25s ease;
}
.roxien_address_area .em-service2.sleft.all_color_service:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 38px rgba(13, 30, 58, .30);
}
.roxien_address_area .em_service_content,
.roxien_address_area .em_single_service_text { width: 100%; }
.roxien_address_area .service_top_image { display: none; }

/* icon + label on one centered row */
.roxien_address_area .text_box { display: flex; align-items: center; gap: 18px; }
.roxien_address_area .service_top_text { flex: 0 0 auto; }
.roxien_address_area .em-service-inner { flex: 1 1 auto; }

/* red circular icon badge (override the theme's floated translucent circle) */
.roxien_address_area .em-service-icon { float: none !important; margin: 0 !important; }
.roxien_address_area .em-service-icon i {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--red) !important; color: #fff !important;
	font-size: 22px !important; padding: 0 !important;
	box-shadow: 0 6px 14px rgba(200, 16, 46, .35);
}
.roxien_address_area .em-service-title h3 {
	margin: 0 !important; color: #fff;
	text-transform: uppercase; font-weight: 600; font-size: 19px; line-height: 1.15;
}
.roxien_address_area .em-service-title a:hover h3 { color: #ff5a6e; }

/* Non-contact accent icons (about/services) pick up the red */
.service-item i, .witr_section_title_inner p span,
.witr_section_title_inner p span a { color: var(--red); }

/* -------------------------------------------------------------------
   7. Hero — single static image, headline anchored bottom, red stripe
   ------------------------------------------------------------------- */
.main-slider-area { position: relative; border-bottom: 6px solid var(--red); overflow: hidden; }
.hero-static { position: relative; line-height: 0; }
.hero-static-img { width: 100%; height: auto; display: block; }
.main-slider-area::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 55%; pointer-events: none; z-index: 8;
	background: linear-gradient(to top, rgba(13, 30, 58, .55), rgba(13, 30, 58, 0));
}
/* Headline sits at the BOTTOM of the image (off the subject's face),
   inside the dark scrim for legibility. */
.hero-static-caption {
	position: absolute; left: 0; right: 0; bottom: 7%;
	z-index: 9; line-height: 1.05;
}
.em-slider-sub-title {
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.05;
	margin: 0 !important;
}
.nivo-directionNav a { opacity: .9; }

/* About portrait — floats right so the letter wraps around it */
.roxien_about_area .witr_about_thumb {
	float: right;
	width: 42%;
	margin: 6px 0 24px 40px;
	shape-outside: margin-box;
}
.witr_about_thumb img {
	border-radius: 12px;
	box-shadow: 0 16px 36px rgba(13, 30, 58, .16);
}
/* clear the float so the section doesn't collapse */
.roxien_about_area .witr_section_title_inner::after {
	content: "";
	display: block;
	clear: both;
}
/* stack on tablet/phone — full-width photo above the copy */
@media (max-width: 767px) {
	.roxien_about_area .witr_about_thumb {
		float: none;
		width: 100%;
		margin: 0 0 24px;
	}
}

/* -------------------------------------------------------------------
   8. Donate page — dedicated Donorbox widget layout
   ------------------------------------------------------------------- */
.donate-page {
	padding-top: 170px; /* clear the fixed top nav */
	padding-bottom: 90px;
	background: #fff;
}
.donate-widget-wrap {
	margin: 30px auto 0;
	float: none;
	background: #fff;
	border-radius: 14px;
	border: 1px solid #e6e9f0;
	box-shadow: 0 16px 36px rgba(13, 30, 58, .12);
	padding: 22px;
	text-align: center;
}
.donate-widget-wrap dbox-widget {
	display: block;
	width: 100%;
	max-width: 570px;
	margin: 0 auto;
}
.donate-widget-wrap dbox-widget iframe {
	width: 100% !important;
	margin: 0 auto !important;
	display: block !important;
}
@media (max-width: 767px) {
	.donate-page { padding-top: 120px; }
	.donate-widget-wrap { padding: 12px; }
}

/* -------------------------------------------------------------------
   9. Footer — red top accent + gentle social hover
   ------------------------------------------------------------------- */
.witrfm_area { border-top: 5px solid var(--red); }
.copy-right-text a i { transition: transform .2s ease, opacity .2s ease; }
.copy-right-text a:hover i { transform: translateY(-3px); opacity: .85; }

/* -------------------------------------------------------------------
   10. Social feed — navy background section
   ------------------------------------------------------------------- */
.social_feed_area { background: var(--navy); }