/*
Theme Name: Solie Services
Theme URI: https://solieservices.example
Author: TechVie — Lutes Joseph
Author URI: https://techvie.example
Description: The storefront + counter theme for Solie Services. A sun-inspired identity (dusk navy and solar gold) that pairs with the CaisseVie POS plugin: a branded landing page, a full-screen register page, and a matching login. Trilingual-ready (English / French / Haitian Creole).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: solieservices
*/

:root {
	--ss-ink:      #0E1A2B; /* dusk navy   */
	--ss-sea:      #16283F; /* deep sea    */
	--ss-line:     #23374F;
	--ss-gold:     #E8A317; /* solar gold  */
	--ss-amber:    #F2C14E; /* sunrise     */
	--ss-sand:     #FBF6EC; /* warm paper  */
	--ss-text:     #1B2432; /* ink on sand */
	--ss-slate:    #6C7B8F; /* muted       */
	--ss-cloud:    #C9D4E2; /* muted on dark */

	--ss-radius: 16px;
	--ss-maxw: 1120px;
	--ss-shadow: 0 24px 60px rgba(9, 16, 28, .16);

	--ss-display: "Fraunces", Georgia, "Times New Roman", serif;
	--ss-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ss-mono: "Space Grotesk", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ss-body);
	color: var(--ss-text);
	background: var(--ss-sand);
	line-height: 1.65;
	font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ss-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.ss-wrap { max-width: var(--ss-maxw); margin-inline: auto; padding-inline: 24px; }
.ss-eyebrow {
	font-family: var(--ss-mono); text-transform: uppercase; letter-spacing: .28em;
	font-size: 12px; font-weight: 600; color: var(--ss-gold);
}

/* ---------------------------------------------------------------
   Full-bleed register page: strip every theme chrome element
   --------------------------------------------------------------- */
body.ss-pos-fullbleed { margin: 0; background: var(--ss-ink); overflow: hidden; }
body.ss-pos-fullbleed .ss-header,
body.ss-pos-fullbleed .ss-footer { display: none !important; }
body.ss-pos-fullbleed .ss-pos-main { margin: 0; padding: 0; max-width: none; }

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.ss-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(14, 26, 43, .88);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ss-header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.ss-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.ss-brand:hover { text-decoration: none; }
.ss-brand .ss-sun { width: 34px; height: 34px; flex: none; }
.ss-brand-name { font-family: var(--ss-display); font-weight: 600; font-size: 22px; letter-spacing: .2px; line-height: 1; }
.ss-brand-name span { color: var(--ss-gold); }
.ss-brand small { display: block; font-family: var(--ss-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ss-cloud); margin-top: 3px; }

.ss-nav { display: flex; align-items: center; gap: 6px; }
.ss-nav a { color: var(--ss-cloud); font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 10px; }
.ss-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.ss-btn {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--ss-body); font-weight: 700; font-size: 15px; cursor: pointer;
	padding: 11px 20px; border-radius: 999px; border: 0; text-decoration: none;
	transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.ss-btn:hover { text-decoration: none; }
.ss-btn-sun { background: linear-gradient(180deg, var(--ss-amber), var(--ss-gold)); color: #2B1E00; box-shadow: 0 10px 24px rgba(232, 163, 23, .34); }
.ss-btn-sun:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(232, 163, 23, .42); }
.ss-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .22); }
.ss-btn-ghost:hover { border-color: var(--ss-gold); color: var(--ss-amber); }
.ss-btn-dark { background: var(--ss-ink); color: #fff; }
.ss-btn-dark:hover { background: var(--ss-sea); transform: translateY(-1px); }

.ss-menu-toggle { display: none; }

/* ---------------------------------------------------------------
   Hero — the signature: a rising sun behind a dusk sky
   --------------------------------------------------------------- */
.ss-hero { position: relative; overflow: hidden; background: var(--ss-ink); color: #fff; isolation: isolate; }
.ss-hero::before { /* dusk gradient sky */
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(120% 90% at 50% 118%, rgba(242, 193, 78, .30) 0%, rgba(232, 163, 23, .12) 26%, transparent 55%),
		linear-gradient(180deg, #0B1626 0%, #12233A 60%, #16283F 100%);
}
.ss-sunrise { /* rotating ray disc rising from the bottom center */
	position: absolute; z-index: -1; left: 50%; bottom: -46%;
	width: 132vmax; height: 132vmax; translate: -50% 0;
	background: conic-gradient(from 0deg,
		rgba(242, 193, 78, .00) 0deg, rgba(242, 193, 78, .14) 6deg, rgba(242, 193, 78, 0) 12deg,
		rgba(242, 193, 78, 0) 18deg, rgba(242, 193, 78, .14) 24deg, rgba(242, 193, 78, 0) 30deg);
	-webkit-mask-image: radial-gradient(closest-side, transparent 30%, #000 46%, transparent 74%);
	mask-image: radial-gradient(closest-side, transparent 30%, #000 46%, transparent 74%);
	animation: ss-spin 90s linear infinite;
	opacity: .8;
}
.ss-sun-core { /* solid glowing disc on the horizon */
	position: absolute; z-index: -1; left: 50%; bottom: -13vmax;
	width: 34vmax; height: 34vmax; translate: -50% 0; border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, var(--ss-amber) 0%, var(--ss-gold) 46%, rgba(232, 163, 23, 0) 72%);
	filter: blur(2px); opacity: .9;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

.ss-hero-in { position: relative; padding-block: clamp(84px, 13vw, 150px); text-align: center; }
.ss-hero h1 {
	font-family: var(--ss-display); font-weight: 600;
	font-size: clamp(38px, 6.6vw, 74px); line-height: 1.03; letter-spacing: -.01em;
	margin: 18px auto 20px; max-width: 15ch;
	font-optical-sizing: auto;
}
.ss-hero h1 em { font-style: italic; color: var(--ss-amber); }
.ss-hero p.ss-lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--ss-cloud); max-width: 60ch; margin: 0 auto 34px; }
.ss-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ss-langs { margin-top: 30px; font-family: var(--ss-mono); font-size: 12px; letter-spacing: .18em; color: rgba(201, 212, 226, .7); text-transform: uppercase; }
.ss-langs b { color: var(--ss-amber); font-weight: 600; }

/* ---------------------------------------------------------------
   Services
   --------------------------------------------------------------- */
.ss-section { padding-block: clamp(64px, 9vw, 110px); }
.ss-section-head { max-width: 62ch; margin-bottom: 44px; }
.ss-section-head h2 { font-family: var(--ss-display); font-weight: 600; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; margin: 12px 0 10px; color: var(--ss-ink); }
.ss-section-head p { color: var(--ss-slate); font-size: 18px; margin: 0; }

.ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ss-card {
	background: #fff; border: 1px solid #EEE6D6; border-radius: var(--ss-radius);
	padding: 30px 26px; box-shadow: 0 8px 26px rgba(27, 36, 50, .05);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ss-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27, 36, 50, .10); border-color: var(--ss-amber); }
.ss-card .ss-ray {
	width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px;
	background: radial-gradient(circle at 50% 35%, var(--ss-amber), var(--ss-gold));
	color: #2B1E00;
}
.ss-card h3 { font-family: var(--ss-display); font-weight: 600; font-size: 22px; margin: 0 0 8px; color: var(--ss-ink); }
.ss-card p { margin: 0; color: var(--ss-slate); font-size: 15.5px; }

/* ---------------------------------------------------------------
   Visit / hours band
   --------------------------------------------------------------- */
.ss-visit { background: var(--ss-ink); color: #fff; }
.ss-visit .ss-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-block: clamp(56px, 8vw, 96px); }
.ss-visit h2 { font-family: var(--ss-display); font-weight: 600; font-size: clamp(26px, 3.6vw, 40px); margin: 12px 0 14px; }
.ss-visit p { color: var(--ss-cloud); margin: 0 0 24px; max-width: 46ch; }
.ss-hours { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ss-line); }
.ss-hours li { display: flex; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid var(--ss-line); font-size: 15px; }
.ss-hours li span:first-child { color: var(--ss-cloud); }
.ss-hours li span:last-child { font-family: var(--ss-mono); color: #fff; font-weight: 500; }
.ss-hours li.is-today span:last-child { color: var(--ss-amber); }

/* ---------------------------------------------------------------
   Generic page + blog
   --------------------------------------------------------------- */
.ss-pos-main { max-width: 760px; margin-inline: auto; padding: clamp(48px, 7vw, 84px) 24px; }
.ss-page { background: #fff; border: 1px solid #EEE6D6; border-radius: var(--ss-radius); padding: clamp(28px, 5vw, 48px); box-shadow: 0 8px 26px rgba(27, 36, 50, .05); }
.ss-page h1, .ss-page h2, .ss-page h3 { font-family: var(--ss-display); color: var(--ss-ink); font-weight: 600; }
.ss-page h1 { font-size: clamp(28px, 4.5vw, 40px); margin-top: 0; }
.ss-page a { text-decoration: underline; }
.ss-post-title a { text-decoration: none; }
.ss-pagination { margin-top: 30px; display: flex; gap: 10px; }
.ss-pagination .page-numbers { padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid #EEE6D6; color: var(--ss-ink); }
.ss-pagination .current { background: var(--ss-gold); color: #2B1E00; border-color: var(--ss-gold); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.ss-footer { background: #0A1421; color: var(--ss-cloud); }
.ss-footer .ss-wrap { padding-block: 46px; }
.ss-footer-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.ss-footer .ss-brand-name { color: #fff; }
.ss-footer p { margin: 10px 0 0; font-size: 14px; max-width: 40ch; }
.ss-footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.ss-footer-links a { color: var(--ss-cloud); font-weight: 600; font-size: 14px; }
.ss-footer-links a:hover { color: var(--ss-amber); text-decoration: none; }
.ss-footer-base { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ss-footer-base a { color: var(--ss-amber); }

/* ---------------------------------------------------------------
   Responsive + a11y floor
   --------------------------------------------------------------- */
@media (max-width: 860px) {
	.ss-grid { grid-template-columns: 1fr; }
	.ss-visit .ss-wrap { grid-template-columns: 1fr; }
	.ss-nav { display: none; }
	.ss-nav.is-open { display: flex; position: absolute; top: 100%; right: 16px; left: 16px; flex-direction: column; background: var(--ss-sea); border: 1px solid var(--ss-line); border-radius: 14px; padding: 10px; gap: 4px; }
	.ss-menu-toggle { display: inline-flex; background: transparent; border: 1.5px solid rgba(255,255,255,.22); color: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; }
}
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ss-amber); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
	.ss-sunrise { animation: none; }
	html { scroll-behavior: auto; }
}