/* ==========================================================================
   Kaylie Staging Site — WordPress integration layer

   paragon.css holds the design and stays faithful to the static build.
   This file only adds what WordPress needs and what the static build lacks.
   Bump KAYLIE_STAGING_SITE_VERSION in functions.php after edits.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sticky header

   paragon.css sticks the gold bar, the nav, and the second gold bar
   independently, each with its own hardcoded top offset derived from
   --nav-h. Any change to nav height — or the admin bar — desyncs them and
   the gold border drifts while scrolling.

   Instead: one sticky wrapper, children static. Offsets can't disagree
   because there is only one of them.
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 300;
}

.site-header .gold-bar,
.site-header nav,
.site-header nav + .gold-bar {
	position: static;
	top: auto;
	box-shadow: none;
}

.site-header nav { box-shadow: 0 2px 20px rgba(0,0,0,.2); }

/* Height of the whole header, for anything that needs to sit below it. */
:root { --kss-header-h: calc(var(--nav-h) + 6px); }

body { scroll-padding-top: calc(var(--nav-h) + 12px); }

/* Admin bar: offset the wrapper only. */
body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

/* --------------------------------------------------------------------------
   2. Secondary sticky bars — sub-nav and industries jump nav
   -------------------------------------------------------------------------- */
.sub-nav,
.ind-jumpnav {
	top: var(--kss-header-h);
	z-index: 140;
}

body.admin-bar .sub-nav,
body.admin-bar .ind-jumpnav {
	top: calc(var(--kss-header-h) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .sub-nav,
	body.admin-bar .ind-jumpnav {
		top: calc(var(--kss-header-h) + 46px);
	}
}

.ind-section {
	scroll-margin-top: calc(var(--kss-header-h) + 52px);
}

/* --------------------------------------------------------------------------
   3. Header spacing

   paragon.css sizes the nav for a shorter menu: a 1100px container, 2px
   between links, and 12px in the right group. With seven top-level items
   plus phone and CTA, that runs out of room and everything collides.
   -------------------------------------------------------------------------- */
:root { --nav-h: 88px; }

.nav-inner {
	max-width: 1360px;
	padding-inline: 32px;
	gap: 24px;
}

.nav-logo img { height: 54px; }

.nav-links { gap: 4px; }

/* Without this, long items wrap to two lines and blow out the bar height. */
.nav-links > a,
.nav-links .dropdown > a,
.nav-phone,
.nav-cta {
	white-space: nowrap;
}

.nav-links > a,
.nav-links .dropdown > a {
	padding: 10px 11px;
	font-size: .82rem;
}

.nav-right {
	gap: 22px;
	padding-left: 6px;
}

.nav-phone { font-size: .82rem; }

.nav-cta { padding: 11px 22px; }

/* Hairline between the menu and the phone/CTA group so they read as
   separate zones rather than one long run of links. */
.nav-right::before {
	content: '';
	align-self: center;
	width: 1px;
	height: 22px;
	background: rgba(255,255,255,.16);
	margin-right: 2px;
}

/* --------------------------------------------------------------------------
   4. Accessibility — skip link
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	z-index: 100000;
	width: auto; height: auto;
	clip: auto; margin: 0;
	padding: 12px 20px;
	background: var(--gold); color: var(--green);
	font-weight: 700; text-decoration: none;
	border-radius: 4px;
}

/* Visible focus rings — the static build has none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Logo
   WordPress outputs an <img> with width/height attributes; constrain it.
   -------------------------------------------------------------------------- */
.nav-logo img { height: 54px; width: auto; max-width: 260px; object-fit: contain; }.nav-logo-text {
	font-family: Georgia, serif; color: var(--gold);
	font-size: 1.4rem; text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Mobile navigation
   The static build hides .nav-links and .nav-right below 768px with no
   replacement — phones get no navigation at all. This adds a toggle.
   -------------------------------------------------------------------------- */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0;
	background: none; border: none; cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 24px; height: 2px;
	margin: 0 auto;
	background: #fff;
	transition: background .2s;
}

.nav-toggle[aria-expanded="true"] span { background: var(--gold); }

/* Below 1200px the seven-item menu can't fit alongside the phone and CTA,
   so switch to the toggle earlier than paragon.css's 768px breakpoint. */
@media (max-width: 1200px) {
	.nav-links,
	.nav-right { display: none; }

	.nav-toggle { display: flex; }

	.nav-inner { position: relative; flex-wrap: wrap; }

	/* Override paragon.css's display:none so the panel can be revealed. */
	.nav-inner.is-open .nav-links,
	.nav-inner.is-open .nav-right {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	.nav-inner.is-open {
		height: auto;
		padding-bottom: 16px;
	}

	.nav-inner.is-open .nav-links > a,
	.nav-inner.is-open .dropdown > a {
		padding: 13px 4px;
		border-bottom: 1px solid rgba(255,255,255,.09);
		font-size: .95rem;
	}

	/* Dropdowns become inline accordions rather than hover panels. */
	.nav-inner.is-open .dropdown-menu {
		display: none;
		position: static;
		min-width: 0;
		box-shadow: none;
		border-radius: 0;
		border-top: none;
		background: rgba(0,0,0,.18);
		animation: none;
	}

	.nav-inner.is-open .dropdown.is-open .dropdown-menu { display: block; }

	.nav-inner.is-open .nav-right {
		margin-top: 16px;
		gap: 12px;
	}

	.nav-inner.is-open .nav-cta { text-align: center; }
	.nav-inner.is-open .nav-phone { padding: 6px 4px; }

	/* The divider is desktop-only. */
	.nav-right::before { display: none; }
}

/* --------------------------------------------------------------------------
   6. Gravity Forms
   Maps Gravity Forms markup onto the design's .form-card styling so an
   embedded form inherits paragon.css instead of GF's default theme.
   -------------------------------------------------------------------------- */
.form-card .gform_wrapper { margin: 0; }
.form-card .gform_wrapper form { margin: 0; }

/* GF's own heading/description are redundant inside .form-card */
.form-card .gform_wrapper .gform_title,
.form-card .gform_wrapper .gform_description,
.form-card .gform_wrapper .gform_required_legend { display: none; }

.form-card .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 16px;
}

.form-card .gform_wrapper .gfield {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
	grid-column: span 1;
}

/* Full-width fields: textareas, selects, and anything marked large */
.form-card .gform_wrapper .gfield--width-full,
.form-card .gform_wrapper .gfield--type-textarea,
.form-card .gform_wrapper .gfield--type-select,
.form-card .gform_wrapper .gfield--type-honeypot { grid-column: 1 / -1; }

.form-card .gform_wrapper .gfield_label {
	font-size: .78rem;
	font-weight: 700;
	color: #444;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin: 0;
}

.form-card .gform_wrapper .gfield_required { color: #b32d00; }

.form-card .gform_wrapper input[type="text"],
.form-card .gform_wrapper input[type="email"],
.form-card .gform_wrapper input[type="tel"],
.form-card .gform_wrapper input[type="url"],
.form-card .gform_wrapper input[type="number"],
.form-card .gform_wrapper select,
.form-card .gform_wrapper textarea {
	width: 100%;
	border: 1.5px solid #e0dbd4;
	border-radius: 4px;
	padding: 11px 14px;
	font-size: .9rem;
	font-family: 'Plus Jakarta Sans', Arial, sans-serif;
	color: #222;
	background: #fdfcfb;
	transition: border-color .2s, box-shadow .2s;
}

.form-card .gform_wrapper input:focus,
.form-card .gform_wrapper select:focus,
.form-card .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(13,85,64,.1);
}

.form-card .gform_wrapper textarea { min-height: 120px; resize: vertical; }

.form-card .gform_wrapper .gform_footer {
	margin: 4px 0 0;
	padding: 0;
}

.form-card .gform_wrapper .gform_button {
	width: 100%;
	background: var(--green);
	color: #fff;
	border: none;
	padding: 15px;
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	border-radius: 4px;
	letter-spacing: .04em;
	font-family: 'Plus Jakarta Sans', Arial, sans-serif;
	transition: background .2s, transform .15s, box-shadow .2s;
}

.form-card .gform_wrapper .gform_button:hover {
	background: var(--dark-green);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(13,85,64,.25);
}

/* Validation and confirmation states */
.form-card .gform_wrapper .gfield_description.validation_message,
.form-card .gform_wrapper .validation_message {
	color: #b32d00;
	font-size: .82rem;
	line-height: 1.5;
	margin-top: 4px;
}

.form-card .gform_wrapper .gform_validation_errors {
	background: #fdf3f0;
	border: 1px solid #e8c4b8;
	border-radius: 4px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: .88rem;
	color: #8a2b00;
}

.form-card .gform_wrapper .gfield_error input,
.form-card .gform_wrapper .gfield_error select,
.form-card .gform_wrapper .gfield_error textarea { border-color: #b32d00; }

.form-card .gform_confirmation_message {
	background: rgba(13,85,64,.07);
	border-left: 4px solid var(--gold);
	border-radius: 0 6px 6px 0;
	padding: 20px 24px;
	font-size: .95rem;
	line-height: 1.7;
	color: #333;
}

@media (max-width: 768px) {
	.form-card .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
	.form-card .gform_wrapper .gfield { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   7. Block editor / classic content safety net
   Keeps pasted WordPress content readable when it isn't wrapped in the
   design's own section markup.
   -------------------------------------------------------------------------- */
#content > p,
#content > ul,
#content > ol,
#content > h2,
#content > h3,
#content > figure {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

#content > p { margin-bottom: 18px; line-height: 1.8; color: #444; }

.alignwide  { max-width: 1180px; margin-inline: auto; }
.alignfull  { max-width: none; }
.aligncenter { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Staging badge (remove with kaylie_staging_site_badge() in functions.php)
   -------------------------------------------------------------------------- */
.kss-staging-badge {
	position: fixed;
	bottom: 12px;
	left: 12px;
	z-index: 9999;
	padding: 4px 10px;
	border-radius: 3px;
	background: #b32d00;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
	opacity: 0.85;
}

@media print {
	.kss-staging-badge,
	nav,
	.gold-bar { display: none; }
}

/* --------------------------------------------------------------------------
   8. Client logo strip
   Used on the homepage and /industries/. Images are self-hosted in the
   media library — do not hotlink these to production.
   -------------------------------------------------------------------------- */
.logo-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 1px solid #e8e4dc;
	border-radius: 2px;
	overflow: hidden;
	background: #fff;
}

.logo-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 20px;
	border-right: 1px solid #e8e4dc;
}

.logo-cell:last-child { border-right: none; }

.logo-cell img {
	max-height: 40px;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .7;
	transition: filter .25s, opacity .25s;
}

.logo-cell:hover img { filter: grayscale(0); opacity: 1; }

.logo-cell span {
	font-size: .75rem;
	color: #888;
	text-align: center;
}

@media (max-width: 900px) {
	.logo-cell { border-bottom: 1px solid #e8e4dc; }
	.logo-cell:nth-child(even) { border-right: none; }
	.logo-cell:last-child { border-bottom: none; }
}

/* --------------------------------------------------------------------------
   10. Two-up locations grid
   .card-grid is a three-column layout. With the Edgewood office removed the
   locations sections have two cards, which otherwise sit left with an empty
   third column. Center them instead. Scoped to .loc-card so other two-card
   grids are unaffected.
   -------------------------------------------------------------------------- */
.card-grid:has(> .loc-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 420px));
	justify-content: center;
}

@media (max-width: 768px) {
	.card-grid:has(> .loc-card:nth-child(2):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   12. Dropdown hover bridge
   paragon.css reveals submenus with `.dropdown:hover .dropdown-menu`, and the
   menu sits below the nav item with a visual gap. Moving the pointer down into
   that gap leaves .dropdown, so the menu closes before it can be reached.
   The ::before spans the gap and is a descendant of .dropdown, which keeps
   :hover true while the pointer crosses. Purely a hit area — nothing visible.
   -------------------------------------------------------------------------- */
.dropdown > .dropdown-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 22px;
	background: transparent;
}

/* Widen the forgiving area horizontally too, so a diagonal move toward a lower
   item in the list doesn't slip off the side of the menu. */
.dropdown > .dropdown-menu {
	padding-top: 4px;
}

/* Keyboard access: tabbing into a submenu link should hold it open. */
.dropdown:focus-within .dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

/* --------------------------------------------------------------------------
   13. Related services
   Foot-of-page cross-links, replacing the sub-nav strip that used to sit under
   the main nav. Deliberately styled as content rather than navigation: it sits
   below the body copy, reads as a list of suggestions, and doesn't compete
   with the header.
   -------------------------------------------------------------------------- */
.related-services {
	background: #fff;
	border-top: 1px solid #e8e4dc;
	padding: 46px 0;
}

.related-services .rs-label {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gold);
	margin-bottom: 18px;
}

.related-services .rs-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.related-services .rs-links a {
	display: inline-block;
	padding: 11px 18px;
	border: 1px solid #e8e4dc;
	border-radius: 2px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--green);
	text-decoration: none;
	transition: border-color .2s, color .2s;
}

.related-services .rs-links a:hover {
	border-color: var(--gold);
	color: var(--gold);
}

@media (max-width: 600px) {
	.related-services .rs-links a { font-size: .8rem; padding: 10px 14px; }
}

/* --------------------------------------------------------------------------
   14. Four-up card grid
   .card-grid is three columns, so a four-card set orphans the last card on a
   row of its own with two empty columns beside it. This variant fits all four
   on one row and steps down cleanly.
   -------------------------------------------------------------------------- */
.card-grid.grid-4up {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1000px) {
	.card-grid.grid-4up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.card-grid.grid-4up { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   15. Top-tier card tint
   paragon.css renders .card-dark as solid green with light text, which reads
   as a heavy block against the two pale cards beside it. Tint it instead —
   same brand green at low opacity — and return the text to normal colours.
   Used for the highest tier on /ibmi-hosting/ and /ibmi-managed-services/.
   -------------------------------------------------------------------------- */
.card-dark {
	background: rgba(13, 85, 64, .08);
	color: #555;
}

.card-dark h3 {
	color: var(--green);
}

.card-dark p,
.card-dark span,
.card-dark li {
	color: #555;
}

/* Two-up variant, for four-item sets that would otherwise orphan a card. */
.card-grid.grid-2up {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
	.card-grid.grid-2up { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   16. Content container width
   paragon.css caps general page content (.container — used by .page-hero,
   .section, .check-band, .cta-band, .testimonial-band, etc.) at 1100px.
   The nav was widened to 1360px in section 3 above to fit the full menu,
   which left every page's content narrower than its own header — visible
   as excess whitespace down both sides of the page on wider screens.
   Match the two so content and header share the same edge.

   Fixed-width components with their own narrower cap (.article-wrap,
   .legal-body, .blog-grid, industries page sections, etc.) are unaffected —
   this only widens the shared .container.
   -------------------------------------------------------------------------- */
.container {
	max-width: 1360px;
}

/* --------------------------------------------------------------------------
   17. Shared carousel component
   A horizontally-scrolling card row with prev/next arrows. Originally built
   inline on /software-development/; promoted here so any page can use it by
   markup alone — no per-page <style>/<script>. JS lives in functions.php
   (kaylie_staging_site_carousel_script), enqueued site-wide, and finds every
   .kss-carousel-track on the page independently, so multiple carousels on
   one page work without extra wiring.
   -------------------------------------------------------------------------- */
.kss-carousel-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.kss-carousel-header h2 { margin-bottom: 0; }
.kss-carousel-controls { display: flex; gap: 10px; flex-shrink: 0; }
.kss-carousel-arrow {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--green); color: var(--gold); border: none;
	font-size: 1.4rem; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 3px 10px rgba(0,0,0,.12);
	transition: background .2s, transform .15s, opacity .2s;
}
.kss-carousel-arrow:hover:not(:disabled) { background: var(--dark-green); transform: translateY(-2px); }
.kss-carousel-arrow:disabled { opacity: .35; cursor: default; }
.kss-carousel-track {
	display: flex; gap: 24px; overflow-x: auto;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	padding-bottom: 6px; margin: 0 -4px;
}
.kss-carousel-track::-webkit-scrollbar { display: none; }
.kss-carousel-card { flex: 0 0 300px; scroll-snap-align: start; }
@media (max-width: 640px) {
	.kss-carousel-card { flex-basis: 80vw; }
	.kss-carousel-header { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.kss-carousel-track { scroll-behavior: auto; }
}

/* Large variant: bigger cards for factor/feature lists that need more visual
   weight than the default 300px card (e.g. pricing-factor breakdowns). */
.kss-carousel-card--lg {
	flex-basis: 360px;
	padding: 36px 30px;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.kss-carousel-card--lg .kss-num {
	font-family: Georgia, serif;
	font-size: 1.9rem;
	color: var(--gold);
	line-height: 1;
	margin-bottom: 14px;
}
.kss-carousel-card--lg h3 {
	font-size: 1.15rem;
	line-height: 1.35;
}
@media (max-width: 640px) {
	.kss-carousel-card--lg { flex-basis: 85vw; padding: 30px 24px; }
}

/* --------------------------------------------------------------------------
   18. Clickable cards
   .card / .card-dark are styled for <div> in paragon.css. Where a card links
   to another page, use <a class="card"> instead — grid children are
   blockified automatically, so layout is unaffected. This just strips the
   anchor defaults and adds a hover cue beyond the transform paragon.css
   already provides.
   -------------------------------------------------------------------------- */
a.card,
a.card-dark {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

a.card .card-link,
a.card-dark .card-link {
	display: inline-block;
	margin-top: 14px;
	color: var(--gold);
	font-size: .82rem;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.card:hover,
	.card-dark:hover,
	.blog-card:hover,
	.loc-card:hover,
	.btn-gold:hover,
	.btn-ghost:hover { transform: none; }
	.dropdown-menu { animation: none; }
	.logo-cell img { transition: none; }
	.related-services .rs-links a { transition: none; }
}