/* ==========================================================================
   Shauri Consulting – theme styles (Brand Guidelines v3 · Dark Orchid)
   Colours and type for page content are Elementor globals (Site Settings);
   this file styles the header, footer, contact form and the small brand
   components the page layouts use through CSS classes (Advanced › CSS Classes).
   ========================================================================== */

:root {
	--sh-orchid: #843ED2;
	--sh-orchid-light: #A268E4;
	--sh-orchid-deep: #7636BA;
	--sh-menthol: #BBFF88;
	--sh-midnight: #1E0B33;
	--sh-midnight-2: #2E1450;
	--sh-platinum-light: #F4F4F4;
	--sh-platinum: #E5E5E5;
	--sh-platinum-dark: #C8C8C8;
	--sh-grey: #4A3D5C;
	--sh-white: #FFFFFF;
	--sh-sans: "Shauri Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sh-serif: "Careny", Georgia, serif;
	--sh-gutter: 12px;
	--sh-radius-xl: 28px;
}

body.shauri {
	position: relative;
	margin: 0;
	background: var(--sh-platinum-light);
	color: var(--sh-midnight);
	font-family: var(--sh-sans);
	-webkit-font-smoothing: antialiased;
}

.shauri a { color: inherit; }
.shauri a:focus-visible,
.shauri button:focus-visible,
.shauri input:focus-visible,
.shauri select:focus-visible,
.shauri textarea:focus-visible {
	outline: 2px solid var(--sh-orchid);
	outline-offset: 2px;
}

.sh-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sh-skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 100;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--sh-menthol);
	color: var(--sh-midnight) !important;
	font-weight: 700;
	text-decoration: none;
}
.sh-skip-link:focus { top: 16px; }

/* Placeholder facts still to confirm: [like this] */
.sh-fill { border-bottom: 1px dashed currentColor; }

/* Page gutter: every section sits 12px in from the window, like the design. */
.sh-content { padding: 0 var(--sh-gutter); }
.shauri-overlay-header .sh-content { padding-top: var(--sh-gutter); }
.sh-content:focus { outline: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.sh-header {
	position: relative;
	z-index: 50;
	margin: var(--sh-gutter);
	border-radius: var(--sh-radius-xl);
	background: var(--sh-midnight);
	color: var(--sh-platinum-light);
}
.shauri-overlay-header .sh-header {
	position: absolute;
	top: var(--sh-gutter);
	left: var(--sh-gutter);
	right: var(--sh-gutter);
	margin: 0;
	background: transparent;
}
.sh-header__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px clamp(16px, 4vw, 48px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.sh-lockup {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--sh-platinum-light) !important;
	text-decoration: none;
}
.sh-lockup svg { flex-shrink: 0; }
.sh-lockup__words { display: flex; flex-direction: column; }
.sh-lockup__name { font-family: var(--sh-serif); font-size: 32px; line-height: 0.95; }
.sh-lockup__sub { font-family: var(--sh-serif); font-size: 15px; line-height: 1; }
.sh-header .custom-logo { max-height: 56px; width: auto; }

.sh-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border-radius: 999px;
	background: rgba(244, 244, 244, 0.1);
	border: 1px solid rgba(244, 244, 244, 0.18);
}
.sh-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sh-menu a {
	display: block;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--sh-platinum-light) !important;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.sh-menu a:hover { background: rgba(244, 244, 244, 0.1); }
.sh-menu .current-menu-item > a,
.sh-menu .current_page_item > a { background: rgba(244, 244, 244, 0.16); }
.sh-nav__cta {
	display: block;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--sh-menthol);
	color: var(--sh-midnight) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
.sh-nav__cta:hover { background: #9CFB5B; }

.sh-nav-toggle {
	display: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(244, 244, 244, 0.25) !important;
	border-radius: 50% !important;
	background: rgba(244, 244, 244, 0.1) !important;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.sh-nav-toggle__bars,
.sh-nav-toggle__bars::before,
.sh-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--sh-platinum-light);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.sh-nav-toggle__bars { position: relative; }
.sh-nav-toggle__bars::before,
.sh-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.sh-nav-toggle__bars::before { top: -6px; }
.sh-nav-toggle__bars::after { top: 6px; }
.sh-header.is-open .sh-nav-toggle__bars { background: transparent; }
.sh-header.is-open .sh-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.sh-header.is-open .sh-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
	.sh-nav-toggle { display: inline-flex; }
	.sh-nav {
		display: none;
		position: absolute;
		top: calc(100% - 8px);
		left: 12px;
		right: 12px;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 12px;
		border-radius: 24px;
		background: var(--sh-midnight);
		border: 1px solid rgba(244, 244, 244, 0.14);
		box-shadow: 0 24px 48px rgba(30, 11, 51, 0.35);
	}
	.sh-header.is-open .sh-nav { display: flex; }
	.sh-menu { flex-direction: column; align-items: stretch; }
	.sh-menu a { padding: 14px 18px; font-size: 16px; }
	.sh-nav__cta { padding: 14px 18px; text-align: center; font-size: 16px; }
	.sh-lockup__name { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sh-footer {
	margin: var(--sh-gutter);
	border-radius: var(--sh-radius-xl);
	background: var(--sh-orchid-deep);
	color: var(--sh-platinum);
}
.sh-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 72px clamp(16px, 4vw, 48px) 28px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.sh-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
}
.sh-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.55; }
.sh-footer__col p { margin: 0; }
.sh-footer__about { gap: 20px; }
.sh-footer__heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sh-menthol);
}
.sh-footer__small { font-size: 13px; }
.sh-footer a { color: var(--sh-platinum-light) !important; text-decoration: none; }
.sh-footer a:hover { text-decoration: underline; }
.sh-footer .sh-fill { border-bottom-color: var(--sh-menthol); }
.sh-footer__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sh-footer__links a,
.sh-footer .sh-menu a { padding: 0; font-size: 15px; background: none !important; }
.sh-footer .sh-menu { flex-direction: column; align-items: flex-start; gap: 12px; }
.sh-footer__social {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: rgba(244, 244, 244, 0.12);
	font-size: 14px;
}
.sh-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgba(229, 229, 229, 0.25);
	font-size: 13px;
}

/* Floating WhatsApp button (shown when a WhatsApp number is set) */
.sh-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--sh-midnight);
	color: var(--sh-menthol) !important;
	box-shadow: 0 12px 32px rgba(30, 11, 51, 0.3);
}

/* --------------------------------------------------------------------------
   Brand components used by the Elementor layouts (Advanced › CSS Classes)
   -------------------------------------------------------------------------- */

/* Hero: Bloom gradient + tone-on-tone pattern. Add a photo under
   Style › Background and it replaces this; the dark overlay keeps text legible. */
.sh-hero {
	background-color: var(--sh-midnight);
	background-image: url("../img/pattern-orchid.svg"), linear-gradient(135deg, #1E0B33 0%, #843ED2 60%, #A268E4 100%);
	background-repeat: repeat, no-repeat;
	background-size: 176px 154px, cover;
	background-position: right top, center;
}

/* Photo slots: replace by setting Style › Background › Image on the card. */
.sh-photo {
	background-color: var(--sh-platinum-dark);
	background-image: url("../img/camera.svg");
	background-repeat: no-repeat;
	background-position: center 42%;
	background-size: 56px 56px;
}
.sh-photo--portrait {
	background-image: url("../img/person.svg");
	background-position: center bottom;
	background-size: 70% auto;
}
.sh-photo--dark {
	background-color: var(--sh-midnight-2);
	background-image: url("../img/person-dark.svg");
	background-position: center bottom;
	background-size: 64% auto;
}
.sh-photo--duotone {
	background-color: var(--sh-midnight);
	background-image: url("../img/pattern-orchid.svg"), linear-gradient(160deg, #843ED2 0%, #1E0B33 100%);
	background-repeat: repeat, no-repeat;
	background-size: 132px 116px, cover;
	background-position: right top, center;
}
.sh-pattern-orchid {
	background-image: url("../img/symbol-orchid-deep.svg");
	background-repeat: no-repeat;
	background-size: 380px 380px;
	background-position: calc(100% + 80px) -80px;
}

/* Photo-brief chips: delete once the real photo is in place. */
.sh-chip .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(244, 244, 244, 0.92);
	color: var(--sh-midnight);
	font-family: var(--sh-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}
.sh-chip .elementor-heading-title::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background: url("../img/camera-small.svg") center / 14px no-repeat;
}
.sh-chip--dark .elementor-heading-title {
	background: rgba(244, 244, 244, 0.1);
	border: 1px dashed rgba(244, 244, 244, 0.35);
	color: var(--sh-platinum);
}
.sh-chip--dark .elementor-heading-title::before { background-image: url("../img/camera-small-light.svg"); }

/* Pills and badges */
.sh-pill .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--sh-sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sh-pill--glass .elementor-heading-title {
	padding: 8px 16px;
	background: rgba(244, 244, 244, 0.1);
	border: 1px solid rgba(244, 244, 244, 0.18);
	color: var(--sh-platinum-light);
}
.sh-pill--glass .elementor-heading-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sh-menthol);
}
.sh-pill--soft .elementor-heading-title { background: var(--sh-platinum); color: var(--sh-orchid); }
.sh-pill--midnight .elementor-heading-title { background: var(--sh-midnight); color: var(--sh-menthol); }
.sh-pill--onorchid .elementor-heading-title { background: rgba(244, 244, 244, 0.16); color: var(--sh-platinum-light); }
.sh-pill--num .elementor-heading-title { letter-spacing: 0; padding: 4px 10px; }

/* Link chips (services row on the home page) */
.sh-chiplink .elementor-heading-title {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--sh-white);
	color: var(--sh-midnight);
	font-family: var(--sh-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}
.sh-chiplink--active .elementor-heading-title { background: var(--sh-midnight); color: var(--sh-platinum-light); }
.sh-chiplink a { text-decoration: none; }

/* On-page jump links (services hero) */
.sh-jump .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 16px 6px 6px;
	border-radius: 999px;
	background: rgba(244, 244, 244, 0.12);
	color: var(--sh-platinum-light);
	font-family: var(--sh-sans);
	font-size: 14px;
	font-weight: 400;
}
.sh-jump a { text-decoration: none; }
.sh-jump .sh-jump__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(244, 244, 244, 0.16);
	color: var(--sh-menthol);
	font-size: 12px;
	font-weight: 700;
}

/* Numbered circles and arrow circles (service lists) */
.sh-num .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--sh-platinum-dark);
	color: var(--sh-orchid);
	font-family: var(--sh-sans);
	font-size: 13px;
	font-weight: 700;
}
.sh-num--filled .elementor-heading-title { border-color: var(--sh-orchid); background: var(--sh-orchid); color: var(--sh-platinum-light); }
.sh-arrowcircle .elementor-heading-title {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sh-platinum-dark);
	background: url("../img/arrow-orchid.svg") center / 16px no-repeat;
	font-size: 0;
	line-height: 0;
	color: transparent;
}
.sh-arrowcircle a { display: block; width: 100%; height: 100%; }

/* Buttons with the round arrow (design's primary buttons) */
.sh-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.sh-btn .elementor-button:hover { opacity: 0.92; }
.sh-arrow .elementor-button-content-wrapper { align-items: center; gap: 12px; }
.sh-arrow .elementor-button-content-wrapper::after {
	content: "";
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sh-menthol) url("../img/arrow-midnight.svg") center / 16px no-repeat;
}
.sh-arrow--midnight .elementor-button-content-wrapper::after {
	background-color: var(--sh-midnight);
	background-image: url("../img/arrow-menthol.svg");
}

/* "What we do" tiles (Icon List widget) */
.sh-tiles .elementor-icon-list-items { display: flex; flex-direction: column; gap: 8px; }
.sh-tiles .elementor-icon-list-items .elementor-icon-list-item {
	margin: 0 !important;
	padding: 14px 18px !important;
	border-radius: 14px;
	background: var(--sh-platinum-light);
	align-items: center;
}
.sh-tiles .elementor-icon-list-item::after { display: none !important; }
.sh-tiles--dark .elementor-icon-list-items .elementor-icon-list-item { background: var(--sh-midnight-2); }
.sh-tiles--grid .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
}
.sh-tiles--grid .elementor-icon-list-items .elementor-icon-list-item { padding: 18px !important; border-radius: 16px; align-items: flex-start; }

/* Contact detail rows */
.sh-detail-row a { text-decoration: none; }

/* Map */
.sh-map iframe { display: block; border-radius: 24px; filter: grayscale(0.2); }

/* --------------------------------------------------------------------------
   Contact Form 7 (Shauri enquiry form)
   -------------------------------------------------------------------------- */
.sh-form .wpcf7 form { display: flex; flex-direction: column; gap: 18px; }
.sh-form .wpcf7 p { margin: 0; }
.sh-form .wpcf7 br { display: none; }
.sh-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.sh-form label { display: block; font-size: 14px; font-weight: 700; color: var(--sh-midnight); }
.sh-form label .sh-opt { font-weight: 400; color: var(--sh-grey); }
.sh-form .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.sh-form input[type="text"],
.sh-form input[type="email"],
.sh-form input[type="tel"],
.sh-form select,
.sh-form textarea {
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--sh-platinum);
	border-radius: 14px;
	background: var(--sh-platinum-light);
	color: var(--sh-midnight);
	font-family: var(--sh-sans);
	font-size: 16px;
	line-height: 1.4;
	box-sizing: border-box;
}
.sh-form textarea { min-height: 160px; resize: vertical; }
.sh-form .sh-consent {
	padding: 16px;
	border-radius: 16px;
	background: var(--sh-platinum-light);
	font-size: 14px;
	line-height: 1.55;
	color: var(--sh-grey);
}
.sh-form .sh-consent label { font-weight: 400; color: var(--sh-grey); }
.sh-form .sh-consent .wpcf7-form-control-wrap { display: inline; margin: 0; }
.sh-form .sh-consent input[type="checkbox"] { width: 20px; height: 20px; margin: 0 10px 0 0; vertical-align: -4px; accent-color: var(--sh-orchid); }
.sh-form .sh-consent a { color: var(--sh-orchid); text-decoration: underline; }
.sh-form .sh-submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.sh-form .sh-required-note { font-size: 13px; color: var(--sh-grey); }
.shauri .sh-form .wpcf7-submit {
	appearance: none;
	min-height: 52px;
	padding: 0 62px 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--sh-orchid) url("../img/btn-circle-menthol.svg") right 6px center / 40px 40px no-repeat;
	color: var(--sh-platinum-light);
	font-family: var(--sh-sans);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.shauri .sh-form .wpcf7-submit:hover { background-color: var(--sh-orchid-deep); }
.sh-form .wpcf7-not-valid-tip { margin-top: 6px; color: #B3261E; font-size: 13px; }
.sh-form .wpcf7 form .wpcf7-response-output {
	margin: 4px 0 0;
	padding: 20px 24px;
	border: 0;
	border-radius: 18px;
	background: var(--sh-midnight);
	color: var(--sh-platinum-light);
	font-size: 15px;
	line-height: 1.55;
}
.sh-form .wpcf7 form.sent .wpcf7-response-output {
	background: var(--sh-orchid);
	font-size: 18px;
}

/* --------------------------------------------------------------------------
   Pages not built with Elementor (Privacy Policy, posts)
   -------------------------------------------------------------------------- */
.shauri .site-main {
	max-width: 900px;
	margin: 40px auto 64px;
	padding: clamp(24px, 4vw, 56px);
	border-radius: var(--sh-radius-xl);
	background: var(--sh-white);
}
.shauri .site-main .entry-title,
.shauri .site-main h1 {
	font-family: var(--sh-serif);
	font-weight: 400;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.05;
	color: var(--sh-midnight);
}
.shauri .site-main h2 { font-family: var(--sh-serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); color: var(--sh-midnight); }
.shauri .site-main p,
.shauri .site-main li { font-size: 16px; line-height: 1.65; color: var(--sh-grey); }
.shauri .site-main a { color: var(--sh-orchid); }

@media (prefers-reduced-motion: reduce) {
	.shauri * { transition: none !important; }
}