/* ============================================================
   uxkat.co — custom overrides
   Loaded AFTER the theme's minified CSS (build/css/main*.min.css)
   so these rules win. Shared rules apply site-wide; page-specific
   rules are keyed by unique hero IDs so they coexist in one file.
   ============================================================ */

/* --- Global text color (near-black) --- */
body { color: #111111; padding-top: 80px; }
h1, h2, h3, h4, h5, h6, strong, b, input, select, textarea, p { color: #111111; }

/* --- Navigation: logo + links centered together, vertically + horizontally --- */
#headernavigation { display: flex !important; align-items: center !important; justify-content: center !important; height: 80px !important; line-height: normal !important; }
#headernavigation .inner { display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; }
#headernavigation .col-right,
#headernavigation .col-right nav { display: flex !important; align-items: center !important; }
#headernavigation .col-right nav a { line-height: normal !important; }
#headernavigation .left { float: none !important; display: flex !important; align-items: center !important; margin: 0 2em 0 0 !important; }
#headernavigation .left a { display: flex !important; align-items: center !important; line-height: normal !important; }
#headernavigation .left img { display: block !important; height: 52px !important; width: auto !important; }
#headernavigation a { color: inherit; }

/* --- Icons: teal ring matching the logo --- */
.icon.major:before { box-shadow: inset 0 0 0 2px #00ADB5; color: #00ADB5; }
#footer ul.icons a.icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5em; height: 2.5em; border-radius: 100%;
	background-color: #00ADB5; box-shadow: inset 0 0 0 2px #00ADB5; color: #ffffff;
	transition: background-color 0.2s ease, color 0.2s ease;
}
#footer ul.icons a.icon:hover { background-color: transparent !important; color: #00ADB5 !important; }

/* --- Buttons: black default; white w/ teal text + teal outline on hover --- */
input[type="submit"], input[type="reset"], input[type="button"],
button:not(.navPanelToggle), .button {
	background-color: #111111 !important; color: #ffffff !important; box-shadow: none !important;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover,
button:not(.navPanelToggle):hover, .button:hover {
	background-color: #ffffff !important; color: #00ADB5 !important; box-shadow: inset 0 0 0 2px #00ADB5 !important;
}
/* Contact "Send Message" button: teal text with a black outline on hover */
#footerform input[type="submit"]:hover {
	background-color: #ffffff !important; color: #00ADB5 !important; box-shadow: inset 0 0 0 2px #111111 !important;
}

/* --- Hero overlay text stays white over the background images --- */
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header p, #header a,
#headerabout h1, #headerabout h2, #headerabout h3, #headerabout h4, #headerabout h5, #headerabout h6, #headerabout p, #headerabout a,
#headerbloombox h1, #headerbloombox h2, #headerbloombox h3, #headerbloombox h4, #headerbloombox h5, #headerbloombox h6, #headerbloombox p, #headerbloombox a,
#headerfastfit h1, #headerfastfit h2, #headerfastfit h3, #headerfastfit h4, #headerfastfit h5, #headerfastfit h6, #headerfastfit p, #headerfastfit a,
#headerwanderlust h1, #headerwanderlust h2, #headerwanderlust h3, #headerwanderlust h4, #headerwanderlust h5, #headerwanderlust h6, #headerwanderlust p, #headerwanderlust a,
#headermazecraze h1, #headermazecraze h2, #headermazecraze h3, #headermazecraze h4, #headermazecraze h5, #headermazecraze h6, #headermazecraze p, #headermazecraze a { color: #ffffff; }

/* --- Hero background positioning (anchored to the bottom of the image) --- */
#header { background-position: bottom; }
#headerabout { background-position: bottom; background-attachment: scroll; }
#headerbloombox { background-position: bottom; }

/* --- Homepage hero: black headline + teal underline --- */
#header h1, #header > .inner > p { color: #111111 !important; }
#header h1 { border-bottom-color: #00ADB5 !important; }

/* --- Quote boxes (about + project pages) --- */
blockquote.about-quote {
	border-left: 4px solid #00ADB5;
	background: #f7fafa;
	margin: 1.5em 0;
	padding: 1.25em 1.75em;
	border-radius: 0 0.5em 0.5em 0;
	overflow: hidden;
}
blockquote.about-quote p {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: 1.35em;
	font-weight: 500;
	line-height: 1.6;
	color: #111;
	margin: 0 0 0.5em 0;
}
blockquote.about-quote cite {
	font-family: "Lato", Helvetica, sans-serif;
	font-style: normal;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #00ADB5;
}

/* --- Responsive nav: hide desktop links at tablet and below; hamburger takes over --- */
@media screen and (max-width: 980px) {
	#headernavigation .col-right { display: none !important; }
	#headernavigation { justify-content: flex-start; padding-left: 1.5em; }
}