/*
Theme Name: Sierra
Theme URI: https://sierrasoln.com/
Author: Sierra Business Solution
Description: Modern, bright block theme for Sierra Business Solution (2026 redesign, based on the Sierra design mockup). No page builder.
Version: 2.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: sierra
*/

/* ---------- tokens ---------- */
:root {
	--sb-navy: #0f2440; --sb-ink: #1b2b42; --sb-muted: #5d6e85; --sb-blue: #1b8fd3; --sb-sky: #2cb7ec;
	--sb-soft: #e9f6fd; --sb-soft-2: #d8effb; --sb-line: #dcebf5; --sb-mist: #f2f9fd;
	--sb-grad: linear-gradient(90deg, #2cb7ec, #1b8fd3);
	--sb-shadow: 0 18px 40px -22px rgba(27, 143, 211, .45);
	--sb-shadow-lg: 0 30px 60px -30px rgba(15, 36, 64, .35);
	--sb-radius: 20px;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--sb-ink); }
img { height: auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
::selection { background: var(--sb-sky); color: #fff; }
.wp-element-button, .wp-block-button__link { background: var(--sb-grad); box-shadow: 0 10px 22px -12px rgba(27,143,211,.8); transition: transform .2s ease, box-shadow .2s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(27,143,211,.9); }

/* ---------- header ---------- */
.sb-topbar { background: #fff; border-bottom: 1px solid var(--sb-line); }
.sb-topbar .sb-contact-line { font-size: .88rem; color: var(--sb-muted); display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.sb-topbar .sb-contact-line a { color: var(--sb-ink); text-decoration: none; }
.sb-topbar .sb-contact-line a:hover { color: var(--sb-blue); }
.sb-topbar .sb-contact-line svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: .35rem; color: var(--sb-blue); }
.sb-logo img { width: 200px; height: auto; display: block; }
.sb-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: saturate(160%) blur(10px);
	-webkit-backdrop-filter: saturate(160%) blur(10px); box-shadow: 0 6px 24px -18px rgba(15,36,64,.35); }
.sb-header .wp-block-navigation a { color: var(--sb-ink); text-decoration: none; }
.sb-header .wp-block-navigation-item > a:hover, .sb-header .current-menu-item > a { color: var(--sb-blue); }
.sb-header .wp-block-navigation__submenu-container { border: 1px solid var(--sb-line) !important; border-radius: 14px; padding: .4rem !important;
	box-shadow: var(--sb-shadow-lg); min-width: 260px !important; }
.sb-header .wp-block-navigation__submenu-container a { padding: .55rem .8rem !important; border-radius: 9px; }
.sb-header .wp-block-navigation__submenu-container a:hover { background: var(--sb-soft); color: var(--sb-blue); }

/* ---------- utilities ---------- */
.sb-eyebrow { font-size: .95rem !important; font-weight: 600; color: var(--sb-blue); margin-bottom: .35rem !important; letter-spacing: .01em; }
.sb-lead { font-size: var(--wp--preset--font-size--lead); color: var(--sb-muted); }
.sb-muted { color: var(--sb-muted); }
.sb-center { text-align: center; }
.sb-center .wp-block-buttons { justify-content: center; }
.sb-soft-bg { background: linear-gradient(180deg, #f4fbff 0%, var(--sb-soft) 100%); }
.sb-on-dark, .sb-on-dark p, .sb-on-dark li { color: #e4f2fb; }
.sb-on-dark h1, .sb-on-dark h2, .sb-on-dark h3 { color: #fff; }

/* ---------- decorative bubbles ---------- */
.sb-bubbles { position: relative; overflow: hidden; }
.sb-bubbles::before, .sb-bubbles::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.sb-bubbles::before { width: 120px; height: 120px; left: -30px; top: 30px; background: radial-gradient(circle at 35% 35%, #bfe8fb, #7fd0f3 70%); opacity: .55; }
.sb-bubbles::after { width: 260px; height: 260px; right: -90px; bottom: -110px; background: radial-gradient(circle at 40% 40%, #d9f1fc, #a6dff7 70%); opacity: .5; }
.sb-bubbles > * { position: relative; z-index: 1; }

/* ---------- hero ---------- */
.sb-hero { background: linear-gradient(180deg, #ffffff 0%, #f1f9fe 100%); }
.sb-hero h1 { color: var(--sb-navy); max-width: 16ch; }
.sb-hero h1 .sb-accent { color: var(--sb-blue); }
.sb-hero .sb-lead { max-width: 46ch; }
.sb-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sb-collage figure { margin: 0 !important; }
.sb-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; box-shadow: var(--sb-shadow); }
.sb-collage figure:nth-child(1) img { aspect-ratio: 4/5; }
.sb-collage figure:nth-child(2) img { aspect-ratio: 4/5; margin-top: 2.2rem; }
.sb-collage figure:nth-child(3) img { aspect-ratio: 4/3; margin-top: -2.2rem; }
.sb-collage figure:nth-child(4) img { aspect-ratio: 4/3; }

/* cut-out portrait on a soft blue blob */
.sb-portrait { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.sb-portrait::before { content: ""; position: absolute; inset: 12% 6% 0 6%; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
	background: radial-gradient(circle at 30% 30%, #e6f6fd, #a9e0f7 75%); z-index: 0; }
.sb-portrait figure { position: relative; z-index: 1; margin: 0 !important; }
.sb-portrait img { max-height: 520px; width: auto; display: block; }

/* page header (inner pages) */
.sb-page-hero { background: linear-gradient(180deg, #ffffff 0%, var(--sb-soft) 100%); }
.sb-page-hero h1 { color: var(--sb-navy); }
.sb-page-hero .sb-lead { color: var(--sb-muted); }
.sb-page-hero .sb-crumb { font-size: .85rem; color: var(--sb-blue); font-weight: 600; margin-bottom: .4rem; }
.sb-page-hero .sb-hero-img img { border-radius: 22px; box-shadow: var(--sb-shadow-lg); aspect-ratio: 16/10; object-fit: cover; width: 100%; }

/* ---------- cards ---------- */
.sb-card { background: #fff; border: 1px solid var(--sb-line); border-radius: var(--sb-radius); padding: 1.75rem; height: 100%;
	box-shadow: 0 14px 34px -26px rgba(15,36,64,.35); transition: transform .25s ease, box-shadow .25s ease; }
.sb-card:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow); }
.sb-card h3 { margin-top: .9rem; margin-bottom: .45rem; }
.sb-card p { color: var(--sb-muted); margin: 0; }
.sb-card .sb-more { margin-top: 1.1rem !important; }
.sb-card .sb-more a { display: inline-block; background: var(--sb-grad); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem;
	padding: .55rem 1.3rem; border-radius: 999px; box-shadow: 0 10px 20px -12px rgba(27,143,211,.9); }
.sb-card .sb-more a:hover { filter: brightness(1.06); }
.sb-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--sb-soft); color: var(--sb-blue); margin: 0 !important; }
.sb-icon svg { width: 27px; height: 27px; }
.sb-card-img { padding: 12px; overflow: hidden; }
.sb-card-img figure { margin: 0; }
.sb-card-img img { aspect-ratio: 16/11; object-fit: cover; width: 100%; display: block; border-radius: 14px; transition: transform .5s ease; }
.sb-card-img:hover img { transform: scale(1.03); }
.sb-card-img .sb-card-body { padding: .6rem .7rem .9rem; text-align: center; }
.sb-card-img .sb-card-body h3 { font-size: 1.12rem; }
.wp-block-columns.sb-equal > .wp-block-column { display: flex; }
.wp-block-columns.sb-equal > .wp-block-column > * { flex: 1; }

/* icon tiles (Why choose us) */
.sb-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sb-tile { background: #fff; border-radius: 16px; padding: 1.1rem .8rem; text-align: center; box-shadow: 0 12px 28px -22px rgba(15,36,64,.4); }
.sb-tile .sb-icon { margin: 0 auto .6rem !important; width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 2px solid var(--sb-soft-2); }
.sb-tile span { display: block; font-size: .86rem; font-weight: 600; color: var(--sb-ink); line-height: 1.3; }
.sb-panel { background: linear-gradient(135deg, #d6effb, #eaf7fd); border-radius: 26px; padding: 1.4rem; }

/* ---------- media / split ---------- */
.sb-photo img { border-radius: 22px; box-shadow: var(--sb-shadow-lg); width: 100%; object-fit: cover; }
.sb-photo.is-tall img { aspect-ratio: 4/5; }
.sb-photo.is-wide img { aspect-ratio: 4/3; }
.sb-check { list-style: none; padding-left: 0 !important; }
.sb-check li { position: relative; padding-left: 2rem; margin: .7rem 0; }
.sb-check li::before { content: ""; position: absolute; left: 0; top: .22rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--sb-grad); }
.sb-check li::after { content: ""; position: absolute; left: .42rem; top: .44rem; width: .38rem; height: .68rem; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ---------- process / steps ---------- */
.sb-steps { counter-reset: step; }
.sb-step { position: relative; padding-top: 3.6rem !important; }
.sb-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 1.4rem; left: 1.75rem;
	font-size: 1.05rem; font-weight: 700; color: #fff; background: var(--sb-grad); width: 2.4rem; height: 2.4rem; border-radius: 50%;
	display: grid; place-items: center; box-shadow: 0 10px 20px -12px rgba(27,143,211,.9); }
.sb-step h3 { font-size: 1.1rem; margin-top: 1.4rem; margin-bottom: .4rem; }
.sb-step p { color: var(--sb-muted); font-size: .97rem; margin: 0; }
.sb-steplist { list-style: none; padding: 0 !important; margin: 0; }
.sb-steplist li { display: flex; gap: 1rem; align-items: center; padding: .85rem 1rem; margin: .6rem 0; background: #fff; border-radius: 14px;
	box-shadow: 0 10px 26px -22px rgba(15,36,64,.45); font-weight: 600; color: var(--sb-ink); }
.sb-steplist li .sb-icon { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; }
.sb-steplist li .sb-icon svg { width: 22px; height: 22px; }

/* ---------- testimonials / cta ---------- */
.sb-quote { background: #fff; border-radius: var(--sb-radius); padding: 1.75rem; height: 100%; box-shadow: 0 16px 36px -26px rgba(15,36,64,.45); border: 1px solid var(--sb-line); }
.sb-quote p { color: var(--sb-ink); font-size: 1rem; }
.sb-quote cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 650; color: var(--sb-navy); font-size: .9rem; }
.sb-stars { color: #f5b301; letter-spacing: .12em; font-size: 1rem; margin: 0 0 .6rem !important; }
.sb-cta-photo { border-radius: 26px; overflow: hidden; }
.sb-cta-photo .wp-block-cover__inner-container h2 { color: #fff; }
.sb-band { border-radius: 26px; overflow: hidden; }

/* ---------- contact ---------- */
.sb-contact-item { display: flex; gap: .9rem; align-items: flex-start; margin: .9rem 0; }
.sb-contact-item p { margin: 0; }
.sb-contact-item strong { display: block; color: var(--sb-navy); }
.sb-form { background: #fff; border-radius: 24px; padding: 2rem; box-shadow: var(--sb-shadow-lg); border: 1px solid var(--sb-line); position: relative; }
.sb-form label { display: block; font-weight: 600; font-size: .9rem; color: var(--sb-navy); margin: 0 0 .35rem; }
.sb-form input, .sb-form select, .sb-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #cfe2ef; border-radius: 12px; padding: .8rem 1rem;
	font: inherit; background: #f8fcff; color: var(--sb-ink); margin-bottom: 1rem; }
.sb-form input:focus, .sb-form select:focus, .sb-form textarea:focus { outline: none; border-color: var(--sb-blue); box-shadow: 0 0 0 3px rgba(44,183,236,.2); background: #fff; }
.sb-form textarea { min-height: 140px; resize: vertical; }
.sb-form .sb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.sb-form button { border: 0; cursor: pointer; background: var(--sb-grad); color: #fff; font: inherit; font-weight: 600; padding: .85rem 2rem; border-radius: 999px;
	box-shadow: 0 10px 22px -12px rgba(27,143,211,.8); }
.sb-form .sb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sb-form .sb-ok { background: #e7f7ee; color: #17663a; border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem; }
.sb-form .sb-err { background: #fdecec; color: #8a1f1f; border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem; }

/* ---------- embeds (HRMS pages) ---------- */
.sb-embed { border: 1px solid var(--sb-line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--sb-shadow-lg); }
.sb-embed iframe { display: block; width: 100%; border: 0; min-height: 900px; }

/* ---------- prose ---------- */
.sb-prose h2 { margin-top: 2.4rem; font-size: 1.55rem; }
.sb-prose h3 { margin-top: 1.8rem; }
.sb-prose li { margin: .35rem 0; }
.sb-text-col { max-width: 760px; }
.sb-text-col > * { margin-left: 0 !important; margin-right: 0 !important; }
.sb-text-col > h2:first-child { margin-top: 0; }
.is-layout-constrained > .sb-text-col { margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }

/* outline buttons */
.is-style-outline .wp-block-button__link { background: #fff; color: var(--sb-blue); border: 1.5px solid var(--sb-blue); box-shadow: none; }
.is-style-outline .wp-block-button__link:hover { background: var(--sb-soft); color: var(--sb-blue); }
.sb-on-dark .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.sb-on-dark .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--sb-navy); }

/* ---------- footer ---------- */
.sb-subscribe { background: linear-gradient(90deg, #cdebfa, #e6f6fd); border-radius: 20px; }
.sb-subscribe h3 { margin: 0; font-size: 1.25rem; }
.sb-footer { background: var(--sb-mist); color: var(--sb-muted); border-top: 1px solid var(--sb-line); }
.sb-footer a { color: var(--sb-ink); text-decoration: none; }
.sb-footer a:hover { color: var(--sb-blue); }
.sb-footer h4 { color: var(--sb-navy); font-size: 1rem; margin-bottom: .9rem; }
.sb-footer ul { list-style: none; padding: 0; margin: 0; }
.sb-footer li { margin: .45rem 0; }
.sb-footer .sb-logo img { width: 210px; }
.sb-footer-bottom { border-top: 1px solid var(--sb-line); font-size: .85rem; }
.sb-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sb-grad); color: #fff !important; }
.sb-social svg { width: 18px; height: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) { .sb-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 781px) {
	.sb-hide-mobile { display: none !important; }
	.sb-logo img { width: 160px; }
	.sb-collage figure:nth-child(2) img, .sb-collage figure:nth-child(3) img { margin-top: 0; }
	.sb-portrait img { max-height: 380px; }
	.sb-form .sb-row { grid-template-columns: 1fr; }
	.sb-embed iframe { min-height: 700px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* numbered steps that aren't inside a card: badge sits above the title */
.sb-step:not(.sb-card) { padding-top: 3.2rem !important; }
.sb-step:not(.sb-card)::before { top: 0; left: 0; }
.sb-step:not(.sb-card) h3 { margin-top: 0; }
/* contact form field errors */
.sb-form .sb-field.has-error input, .sb-form .sb-field.has-error textarea { border-color: #d64545; background: #fff8f8; }
.sb-form .sb-field-err { color: #b42318; font-size: .85rem; margin: -.6rem 0 .9rem; }
/* ---------- home hero (11-08): one photo cut into 4 tiles with designer corners + bubbles/triangles/dots ---------- */
.sb-deco-host { position: relative; overflow: hidden; }
.sb-deco-host > * { position: relative; z-index: 1; }
.sb-deco-host > .wp-block-html:has(.sb-hero-deco) { position: static; margin: 0 !important; }
.sb-hero-deco { position: absolute !important; inset: 0; pointer-events: none; z-index: 0 !important; max-width: none !important; margin: 0 !important; }
.sb-hero-deco span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e3f6fe 0%, #a9e2f8 55%, #7fd0f3 100%); opacity: .85; }
.sb-hero-deco .b1 { width: 92px; height: 92px; left: 1.2%; top: -18px; }
.sb-hero-deco .b2 { width: 50px; height: 50px; left: 6.2%; top: 30px; }
.sb-hero-deco .b3 { width: 66px; height: 66px; left: 2.2%; top: 104px; }
.sb-hero-deco .b4 { width: 30px; height: 30px; left: 6.4%; top: 150px; }
.sb-hero-deco .b5 { width: 20px; height: 20px; left: 3.4%; top: 196px; }
.sb-hero-deco .b6 { width: 22px; height: 22px; left: 4.6%; top: 214px; }
.sb-hero-deco .sb-dots { position: absolute; width: 84px; height: 84px; left: 1.5%; bottom: 28px; }
.sb-split-wrap { position: relative; }
.sb-split { display: grid; grid-template-columns: 835fr 925fr; gap: 8px; position: relative; z-index: 1; }
.sb-split img { display: block; width: 100%; height: auto; }
.sb-split .sb-t1, .sb-split .sb-t4 { border-radius: 0 clamp(48px, 7vw, 96px) 0 clamp(48px, 7vw, 96px); }
.sb-split .sb-t2, .sb-split .sb-t3 { border-radius: clamp(48px, 7vw, 96px) 0 clamp(48px, 7vw, 96px) 0; }
.sb-split .sb-t3, .sb-split .sb-t4 { border-radius: clamp(32px, 4.5vw, 64px) 0 clamp(32px, 4.5vw, 64px) 0; }
.sb-split .sb-t4 { border-radius: 0 clamp(32px, 4.5vw, 64px) 0 clamp(32px, 4.5vw, 64px); }
.sb-tris { position: absolute; width: 210px; left: -150px; bottom: 14%; z-index: 0; }
@media (max-width: 900px) {
	.sb-hero-deco .b2, .sb-hero-deco .b3, .sb-hero-deco .b4, .sb-hero-deco .b5, .sb-hero-deco .b6, .sb-hero-deco .sb-dots, .sb-tris { display: none; }
	.sb-hero-deco .b1 { width: 64px; height: 64px; left: auto; right: -14px; top: -14px; }
}