/*
Theme Name: SCI-LENS
Theme URI: https://sci-lens.com
Author: LtForce Technologies LTD
Description: Dark, cinematic block theme for SCI-LENS Media. Brand purple #631384 with lilac accents and a sparing gold highlight (#FFD700), Syne and Manrope (bundled). Works with the SCI-LENS Studio OS plugin (booking form, My bookings, services, payments). Edit everything in Appearance → Editor.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.2.5
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sci-lens
*/

/* Brand tokens handed to the plugin (booking form, My bookings, service packages): dark mode. */
:root {
	--sclens-color-accent: #C99CF0;
	--sclens-color-on-accent: #1A0A24;
	--sclens-color-text: #F4EFE8;
	--sclens-color-muted: #B3A9BC;
	--sclens-color-surface: #16111B;
	--sclens-color-surface-2: #1F1726;
	--sclens-color-border: #3A2E44;
	--sclens-radius: 14px;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #631384; color: #fff; }
.skip-link.screen-reader-text:focus { background: #F4EFE8; color: #0D0A10; padding: .75rem 1rem; z-index: 100000; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid #C99CF0; outline-offset: 3px; }

/* Eyebrow labels ("01 — The studio") */
.sl-eyebrow { display: flex; align-items: center; gap: .75rem; font-size: .8125rem !important; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: #C99CF0; margin: 0 0 1.25rem; }
.sl-eyebrow.sl-line::before { content: ""; width: 2.25rem; height: 2px; background: #FFD700; }

/* Header: solid on inner pages, floating over the hero on the home page */
.sl-header { position: relative; z-index: 20; }
.sl-header .sl-logo img { height: 34px; width: auto; display: block; }
.home .sl-header { position: absolute; top: 0; left: 0; right: 0; background: transparent !important; border: 0 !important; }
.sl-header .wp-block-navigation a { min-height: 44px; display: inline-flex; align-items: center; }
.sl-header .wp-block-navigation .sl-nav-cta a { background: #631384; color: #fff; border-radius: 999px; padding: .55rem 1.35rem; font-weight: 600; }
.sl-header .wp-block-navigation .sl-nav-cta a:hover { background: #7A1FA2; }
.sl-header .wp-block-navigation__responsive-container.is-menu-open { background: #0D0A10; color: #F4EFE8; }

/* Hero */
.sl-hero.wp-block-cover { min-height: min(92vh, 900px) !important; align-items: flex-end; padding-top: 9rem !important; }
.sl-hero .wp-block-cover__inner-container { width: 100%; max-width: 1280px; margin: 0 auto; }
.sl-hero h1 { font-size: clamp(2.75rem, 4.6vw, 5.5rem) !important; white-space: nowrap; }
.sl-hero .sl-hero-lede { max-width: 34rem; color: #D9D1E0; font-size: 1.1875rem; }
.sl-hero-row { display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
.sl-hero-row > .wp-block-group:first-child { flex: 1 1 0; min-width: 0; margin: 0; }
.sl-hero-row > .sl-steps-card { flex: 0 0 330px; margin: 0 0 .5rem; }
@media (max-width: 1100px) {
	.sl-hero-row { flex-wrap: wrap; }
	.sl-hero-row > .wp-block-group:first-child { flex-basis: 100%; }
	.sl-hero h1 { white-space: normal; }
}
.sl-steps-card { width: 330px; padding: 1.5rem; border-radius: 20px; background: rgba(22,17,27,.84); border: 1px solid #3A2E44; display: flex; flex-direction: column; gap: .9rem; }
.sl-steps-card p { margin: 0; }
.sl-steps-card .sl-step { display: flex; align-items: center; gap: .9rem; font-size: .9375rem; }
.sl-steps-card .sl-step span:first-child { flex: none; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font: 700 .875rem Syne, sans-serif; background: #2A2131; border: 1px solid #4A3B55; }
.sl-steps-card .sl-step:first-of-type span:first-child { background: #631384; border-color: #631384; }

/* Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 1px solid rgba(244,239,232,.4); color: #F4EFE8; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #F4EFE8; background: rgba(244,239,232,.06); }
.wp-block-button__link { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.sl-arrow > .wp-block-button__link::after { content: "→"; font-weight: 400; }

/* Purple service band */
.sl-band { overflow: hidden; }
.sl-band p { white-space: nowrap; margin: 0; display: flex; gap: 2.1rem; align-items: center; font: 700 1.875rem/1 Syne, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.sl-band p span.sl-star { color: #FFD700; }
@media (prefers-reduced-motion: no-preference) {
	.sl-band p { animation: sl-marquee 38s linear infinite; }
	@keyframes sl-marquee { from { transform: translateX(0); } to { transform: translateX(-40%); } }
}

/* Cards */
.sl-card { border-radius: 22px; background: #16111B; border: 1px solid #2C2333; overflow: hidden; }
.sl-feature { padding: 1.15rem !important; border-radius: 16px; background: #16111B; border: 1px solid #2C2333; }
.sl-feature p { margin: .75rem 0 0; font-weight: 600; font-size: .9375rem; }
.sl-feature svg { display: block; }

/* Services from the catalogue */
.sl-services .wp-block-post { display: flex; flex-direction: column; border-radius: 22px; background: #16111B; border: 1px solid #2C2333; overflow: hidden; height: 100%; transition: border-color .2s, transform .2s; }
.sl-services .wp-block-post:hover { border-color: #FFD700; transform: translateY(-3px); }
.sl-services .wp-block-post-featured-image { margin: 0; }
.sl-services .wp-block-post-featured-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.sl-services .wp-block-post-featured-image:empty, .sl-services .wp-block-post-featured-image:not(:has(img)) { aspect-ratio: 4 / 5; background: #241B2B; }
.sl-services .wp-block-post-title { margin: 1.4rem 1.5rem 0; font-size: 1.625rem; }
.sl-services .wp-block-post-title a { color: #F4EFE8; }
.sl-services .wp-block-post-excerpt { margin: .5rem 1.5rem 0; color: #B3A9BC; font-size: .9375rem; }
.sl-services .wp-block-post-excerpt__more-text { margin-top: .75rem; }
.sl-services .wp-block-post-excerpt__more-link { font-weight: 600; }
.sl-services .sclens-from { margin: auto 1.5rem 1.5rem; padding-top: 1rem; font-weight: 700; }

/* Photo placeholders (Cover blocks): label only until a photo is added, and only for signed-in editors */
.sl-photo.wp-block-cover { border-radius: 20px; overflow: hidden; align-items: flex-end; justify-content: flex-start; padding: 1.25rem !important; }
.sl-photo .sl-photo-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #B3A9BC; margin: 0; }


/* Portfolio grid */
.sl-folio { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 14px !important; }
.sl-folio > * { margin: 0 !important; min-height: 0 !important; height: 100%; }
.sl-folio > :nth-child(1) { grid-column: span 7; grid-row: span 4; }
.sl-folio > :nth-child(2), .sl-folio > :nth-child(3) { grid-column: span 5; grid-row: span 2; }
.sl-folio > :nth-child(n+4) { grid-column: span 4; grid-row: span 3; }
.sl-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sl-chips a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 1.1rem; border-radius: 999px; border: 1px solid #3A2E44; color: #F4EFE8; font-weight: 600; font-size: .875rem; }
.sl-chips a:first-child { background: #F4EFE8; color: #0D0A10; border-color: #F4EFE8; }

/* Booking steps */
.sl-step-row { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid #2C2333; }
.sl-step-row:last-child { border-bottom: 1px solid #2C2333; }
.sl-step-row .sl-num { font: 800 2.5rem/1 Syne, sans-serif; color: #FFD700; min-width: 5.25rem; flex: none; white-space: nowrap; }
.sl-step-row h3 { font-family: Manrope, sans-serif; font-size: 1.25rem; letter-spacing: 0; margin: 0 0 .35rem; }
.sl-step-row p { margin: 0; color: #B3A9BC; }

/* Booking form preview (links to the real form) */
.sl-mock { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.75rem; border-radius: 28px; background: #16111B; border: 1px solid #2C2333; color: #F4EFE8; text-decoration: none; }
.sl-mock:hover { border-color: #631384; color: #F4EFE8; }
.sl-mock .sl-mock-head { display: flex; justify-content: space-between; align-items: center; }
.sl-mock .sl-mock-head strong { font: 700 1.25rem Syne, sans-serif; }
.sl-mock small { color: #B3A9BC; font-size: .8125rem; }
.sl-mock .sl-bar { height: 4px; border-radius: 999px; background: #2C2333; }
.sl-mock .sl-bar i { display: block; width: 50%; height: 4px; border-radius: 999px; background: #C99CF0; }
.sl-mock .sl-pick { display: flex; justify-content: space-between; padding: 1rem; border-radius: 16px; border: 1px solid #C99CF0; background: #1F1726; }
.sl-mock .sl-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: .875rem; }
.sl-mock .sl-days span { padding: .6rem 0; border-radius: 10px; background: #1F1726; }
.sl-mock .sl-days span.on { background: #631384; font-weight: 700; }
.sl-mock .sl-days span.dow { background: none; color: #9A8FA6; padding: .3rem 0; }
.sl-mock .sl-times { display: flex; flex-wrap: wrap; gap: .5rem; font-weight: 600; font-size: .875rem; }
.sl-mock .sl-times span { padding: .6rem .9rem; border-radius: 999px; border: 1px solid #3A2E44; }
.sl-mock .sl-times span.on { background: #F4EFE8; color: #0D0A10; border-color: #F4EFE8; }
.sl-mock .sl-go { display: flex; justify-content: center; align-items: center; min-height: 52px; border-radius: 999px; background: #631384; font-weight: 700; }

/* Testimonials */
.sl-quote p { font: 600 clamp(1.9rem, 3.4vw, 3.1rem)/1.2 Syne, sans-serif !important; letter-spacing: -.015em; }
.sl-quote cite { font-style: normal; color: #B3A9BC; display: block; margin-top: 1.5rem; }

/* Footer */
.sl-footer a { color: #F4EFE8; }
.sl-footer a:hover { color: #FFD700; }
.sl-footer .sl-logo-white img { width: 190px; height: auto; }
.sl-footer .sclens-business p { margin: 0 0 .5rem; }
.sl-footer h2 { font-family: Manrope, sans-serif !important; font-size: .8125rem !important; letter-spacing: .18em !important; text-transform: uppercase; color: #9A8FA6 !important; margin: 0 0 1rem; }
.sl-social { display: flex; gap: .6rem; }
.sl-social a { width: 44px; height: 44px; border-radius: 999px; border: 1px solid #3A2E44; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s; }
.sl-social a:hover { border-color: #FFD700; color: #FFD700; }
.sl-mock:hover { border-color: #FFD700; }
.sl-legal a { color: #B3A9BC; }

/* Inner pages: the plugin's pages sit on raised cards */
.sclens-bk, .sclens-pt { --sclens-bk-surface: #16111B; }
.wp-block-post-content > .sclens-bk, .wp-block-post-content > .sclens-pt { margin-top: 1rem; }

/* Phones */
@media (max-width: 860px) {
	.sl-hide-sm { display: none !important; }
	.sl-header .sl-logo img { height: 26px; }
	.sl-folio { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
	.sl-folio > * { grid-column: span 1 !important; grid-row: span 1 !important; }
	.sl-folio > :nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
	.sl-band p { font-size: 1.375rem; }
	.sl-hero.wp-block-cover { padding-top: 7rem !important; }
	.sl-step-row .sl-num { font-size: 2rem; min-width: 4rem; }
}

/* Hero: a scrim keeps text readable once a photo is added; placeholder tone until then */
.sl-hero { background: #241B2B; }
.sl-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13,10,16,.55) 0%, rgba(13,10,16,0) 30%, rgba(13,10,16,0) 50%, rgba(13,10,16,.92) 100%); }
.sl-hero .wp-block-cover__inner-container { position: relative; z-index: 1; }
.sl-hero.wp-block-cover { padding-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.admin-bar.home .sl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar.home .sl-header { top: 46px; } }
.sl-hero-hint { position: absolute; top: -5rem; right: 0; max-width: 22rem; text-align: right; }
.sl-hero:has(.wp-block-cover__image-background) .sl-hero-hint { display: none; }
.sl-photo { background: #241B2B; }
.sl-folio > :nth-child(3n) { background: #2E2335; }
.sl-folio > :nth-child(3n+1) { background: #2A2030; }
.sl-photo:has(.wp-block-cover__image-background) .sl-photo-label { display: none; }
.sl-services .wp-block-post:not(:has(.wp-block-post-featured-image))::before { content: ""; display: block; aspect-ratio: 4 / 5; background: #241B2B; }