/* SRF Designs – WordPress additions on top of the original compiled styles (app.css). */

[hidden] { display: none !important; }

/* Sticky header sits below the WordPress admin bar when logged in. */
.admin-bar #srf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #srf-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar #srf-header { top: 0; } }

/* Reveal-on-scroll (mirrors the original framer-motion fade-up). */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0s), transform .6s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .srf-hero-in { animation: srf-hero-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes srf-hero-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.js .srf-hero-in { animation: none; }
}

/* Quick-contact menu items */
#srf-quick-items:not(.hidden) { animation: srf-pop .2s ease-out both; }
@keyframes srf-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Choice buttons in the quote form */
.srf-choice[aria-checked="true"] { border-color: #0055FF; background-color: rgb(224 235 255 / .7); }
.srf-choice[aria-checked="true"]:hover { border-color: #0055FF; }

/* Native select styled like the original */
.srf-select {
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .6rem center; padding-right: 2rem;
}
.srf-field-error { border-color: #dc2626 !important; }

/* Honeypot */
.srf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Testimonials carousel */
.srf-carousel-viewport { overflow: hidden; }
.srf-carousel-track { display: flex; margin-left: -1rem; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.srf-carousel-slide { flex: 0 0 100%; min-width: 0; padding-left: 1rem; }
@media (min-width: 768px) { .srf-carousel-slide { flex-basis: 50%; } }
@media (min-width: 1024px) { .srf-carousel-slide { flex-basis: 33.3333%; } }
.srf-carousel-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 2.75rem; width: 2.75rem; border-radius: .125rem;
	border: 1px solid #cbd5e1; background: #fff; color: #0B0F19;
	box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: background-color .2s;
}
.srf-carousel-btn:hover { background: #f1f5f9; }
.srf-carousel-btn:disabled { opacity: .5; pointer-events: none; }

/* Project lightbox */
.srf-lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.srf-lightbox-overlay { position: absolute; inset: 0; background: rgb(0 0 0 / .8); animation: srf-fade .2s ease-out; }
.srf-lightbox-panel {
	position: relative; width: calc(100% - 1.5rem); max-width: 64rem; max-height: 92vh; overflow-y: auto;
	background: hsl(var(--background)); box-shadow: 0 10px 40px rgb(0 0 0 / .3); animation: srf-zoom .2s ease-out;
}
@media (min-width: 640px) { .srf-lightbox-panel { border-radius: .5rem; } }
.srf-lightbox-close {
	position: absolute; right: 1rem; top: 1rem; z-index: 2; height: 2rem; width: 2rem;
	display: grid; place-items: center; border-radius: .125rem; background: rgb(255 255 255 / .9); color: #0B0F19; opacity: .8;
}
.srf-lightbox-close:hover { opacity: 1; }
@keyframes srf-fade { from { opacity: 0; } }
@keyframes srf-zoom { from { opacity: 0; transform: scale(.95); } }
body.srf-locked { overflow: hidden; }

/* Content written in the WordPress editor */
.srf-prose { color: #334155; line-height: 1.7; }
.srf-prose > * + * { margin-top: 1rem; }
.srf-prose h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; font-size: 2.25rem; line-height: 1; color: #0B0F19; margin-top: 2.5rem; }
.srf-prose h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.5rem; color: #0B0F19; margin-top: 2rem; }
.srf-prose a { color: #0055FF; font-weight: 600; }
.srf-prose a:hover { text-decoration: underline; }
.srf-prose ul { list-style: disc; padding-left: 1.25rem; }
.srf-prose ol { list-style: decimal; padding-left: 1.25rem; }
.srf-prose img { height: auto; border-radius: .125rem; }
.srf-prose blockquote { border-left: 4px solid #0055FF; padding-left: 1rem; font-style: italic; }
.srf-prose .nav-links { display: flex; gap: .5rem; }
.srf-prose .page-numbers { padding: .4rem .8rem; border: 1px solid #cbd5e1; border-radius: .125rem; }
.srf-prose .page-numbers.current { background: #0055FF; color: #fff; border-color: #0055FF; }
