/**
 * Santorini Catamaran Tour — design system layer.
 * Palette: deep Aegean navy / warm sand / restrained gold. Serif display
 * (Cormorant Garamond) over geometric sans (Inter). Loaded after theme +
 * Elementor styles so overrides stay shallow and predictable.
 */

/* ---------- Tokens ---------- */
:root {
	--scx-navy: #0B1F3A;
	--scx-navy-deep: #071528;
	--scx-navy-soft: #14304F;
	--scx-sand: #F6F1E7;
	--scx-warm-white: #FBF9F4;
	--scx-gold: #C6A45C;
	--scx-gold-deep: #A9853D;
	--scx-ink: #182230;
	--scx-muted: #5C6B7A;
	--scx-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--scx-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--scx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/cormorant-garamond-var.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	/* Decorative script used by the theme ("Welcome to Santorini", hero kicker). */
	font-family: 'Great Vibes';
	src: url('../fonts/great-vibes.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Typography ---------- */
h1, h2, h3,
.elementor-heading-title,
.ovabrw_title,
.header_title,
.product_title {
	font-family: var(--scx-serif);
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.12;
	color: var(--scx-ink);
}
h1, .header_title { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

body,
p, li,
.elementor-widget-text-editor,
.elementor-product-description {
	font-family: var(--scx-sans);
}
.elementor-product-description p,
.elementor-widget-text-editor p {
	line-height: 1.75;
}
.elementor-product-description p {
	color: var(--scx-ink);
}
.elementor-product-description { max-width: 72ch; }
.elementor-product-description h2 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
}
.elementor-product-description ul { line-height: 1.7; }
.elementor-product-description a {
	color: var(--scx-navy);
	text-decoration: underline;
	text-decoration-color: var(--scx-gold);
	text-underline-offset: 3px;
	transition: color 160ms var(--scx-ease);
}
.elementor-product-description a:hover { color: var(--scx-gold-deep); }

/* ---------- Buttons ---------- */
.elementor-button,
a.button, button.button,
.woocommerce a.button,
input[type='submit'] {
	border-radius: 999px;
	transition: background-color 220ms var(--scx-ease), color 220ms var(--scx-ease),
		box-shadow 220ms var(--scx-ease), transform 220ms var(--scx-ease);
}
.elementor-button:hover,
a.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(11, 31, 58, 0.18);
}
/* Every booking CTA (external booking engine) becomes the gold primary. */
a[href*='greecesailing.travelotopos.com'],
a[href*='greecesailing.travelotopos.com'].elementor-button,
.woocommerce a.button[href*='greecesailing'] {
	background-color: var(--scx-gold) !important;
	border-color: var(--scx-gold) !important;
	border-radius: 999px;
	color: var(--scx-navy-deep) !important;
	font-family: var(--scx-sans);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
a[href*='greecesailing.travelotopos.com']:hover {
	background-color: var(--scx-gold-deep) !important;
	border-color: var(--scx-gold-deep) !important;
	color: #ffffff !important;
}

/* ---------- Facts strip (At a glance) ---------- */
.scx-facts {
	background: var(--scx-sand);
	border-left: 3px solid var(--scx-gold);
	padding: 1.05rem 1.4rem;
	margin: 0 0 2rem;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--scx-ink);
	border-radius: 0 6px 6px 0;
}
.scx-facts strong {
	display: block;
	font-family: var(--scx-serif);
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--scx-navy);
	margin-bottom: 0.25rem;
	letter-spacing: 0.02em;
}

/* ---------- FAQ accordion ---------- */
.scx-faq { margin: 2.5rem 0 1rem; max-width: 72ch; }
.scx-faq > h2 { margin-bottom: 0.9rem; }
.scx-faq-item {
	border-bottom: 1px solid rgba(11, 31, 58, 0.14);
	padding: 0.15rem 0;
}
.scx-faq-item summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 0.95rem 2.2rem 0.95rem 0;
	font-family: var(--scx-sans);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--scx-navy);
	transition: color 180ms var(--scx-ease);
}
.scx-faq-item summary::-webkit-details-marker { display: none; }
.scx-faq-item summary::after {
	content: '+';
	position: absolute;
	right: 0.2rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--scx-serif);
	font-size: 1.5rem;
	color: var(--scx-gold);
	transition: transform 240ms var(--scx-ease);
}
.scx-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.scx-faq-item summary:hover { color: var(--scx-gold-deep); }
.scx-faq-item > p {
	margin: 0 0 1.1rem;
	color: var(--scx-ink);
	line-height: 1.7;
	max-width: 66ch;
}

/* ---------- Imagery ---------- */
.product .ovabrw-img-product,
.ovabrw_product_img,
.post .post-thumbnail,
.elementor-widget-image .elementor-widget-container {
	overflow: hidden;
}
.product .ovabrw-img-product img,
.ovabrw_product_img img,
.post .post-thumbnail img {
	transition: transform 380ms var(--scx-ease);
}
.product .ovabrw-img-product:hover img,
.ovabrw_product_img:hover img,
.post .post-thumbnail:hover img {
	transform: scale(1.045);
}

/* ---------- Sticky header ---------- */
.scx-header-sticky {
	position: sticky;
	top: 0;
	z-index: 980;
	transition: background-color 260ms var(--scx-ease), box-shadow 260ms var(--scx-ease);
}
body.scx-scrolled .scx-header-sticky {
	background-color: rgba(7, 21, 40, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 2px 18px rgba(7, 21, 40, 0.35);
}

/* ---------- Scroll reveal ---------- */
.scx-anim {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 340ms var(--scx-ease), transform 340ms var(--scx-ease);
	will-change: opacity, transform;
}
.scx-anim.scx-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.scx-anim { opacity: 1; transform: none; transition: none; }
	.scx-faq-item summary::after { transition: none; }
	.product .ovabrw-img-product img { transition: none; }
	* { scroll-behavior: auto !important; }
}

/* ---------- Accessibility & correctness patches ---------- */
/* Logo was displayed with a squished aspect ratio (fixed height + squeezed width). */
img.logo_desktop, img.logo_mobile { height: auto !important; max-width: 100%; }
/* Former href="#" anchors keep their affordance as role=button. */
a[role='button'] { cursor: pointer; }
/* Contrast: top-bar contact links and footer links were below 4.5:1 on navy. */
.ova-contact-info ul.info li a,
ul.info > li.item .ova-link a,
ul.info > li.item .ova-phone a { color: #F0D9A8 !important; }
/* Footer credit link was #3256C6 blue on near-black (2.5:1). */
.copyright a, .footer a[href*='groovygenie'] { color: #9DB8FF !important; }
/* Availability-calendar title and product prices were too light on white. */
.fc-toolbar-title { color: var(--scx-ink) !important; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.ovabrw-price-product, .price bdi { color: var(--scx-navy) !important; }
/* Blog/post chrome was below 4.5:1 on light backgrounds. */
#breadcrumbs ul.breadcrumb li,
#breadcrumbs ul.breadcrumb li a,
.post-meta ul.post-meta li,
.post-meta ul.post-meta li a { color: #55636F !important; }
body:not(.home) .primary-navigation li.current-menu-item > a,
body:not(.home) .primary-navigation li.current-menu-ancestor > a { color: #8A6A28 !important; }
/* Share icons: one calm navy instead of low-contrast brand colours. */
.share-social li a.share-ico { background-color: var(--scx-navy) !important; }
/* Theme header/footer social icons pointed at the theme vendor's profiles
   (twitter.com/ovathemes etc.). Hidden until the business's real profile
   URLs exist — then restore the links in the Elementor header/footer
   templates (posts 433/490) and remove this rule. */
.elementor-widget-social-icons { display: none !important; }
/* Post body links: underlined, high-contrast (axe link-in-text-block). */
.post-content a {
	color: var(--scx-navy);
	text-decoration: underline;
	text-decoration-color: var(--scx-gold);
	text-underline-offset: 3px;
}
.post-content a:hover { color: var(--scx-gold-deep); }
.post-content p { line-height: 1.75; }
.post-content { max-width: 76ch; }
.scx-page-title { margin: 0 0 1.6rem; }

/* ---------- Hero (Slider Revolution layers) ---------- */
/* Unify the hero display face with the site serif (slider inlines "Domine"). */
h1.sr7-layer,
.sr7-layer h1 {
	font-family: var(--scx-serif) !important;
	font-weight: 600 !important;
}
/* The hero's first slide is a video background; Slider Revolution loads no
   media for it on phones, leaving a flat grey box (also broken on the live
   site). Fall back to the slide's poster photo via CSS. */
@media (max-width: 767px) {
	#SR7_2_1 {
		background: url('../../../uploads/2022/04/revslider-home2-01-1024x427.jpg') center / cover no-repeat;
	}
}

/* The slider inlines font-size:34px which overflows narrow phones. */
@media (max-width: 480px) {
	h1.sr7-layer,
	.sr7-layer h1 {
		font-size: 26px !important;
		line-height: 1.25 !important;
		white-space: normal !important;
		max-width: 92vw;
	}
}

/* ---------- Mobile sticky booking bar ---------- */
.scx-bookbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	display: none;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
	background: rgba(7, 21, 40, 0.96);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 -4px 18px rgba(7, 21, 40, 0.35);
}
.scx-bookbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	border-radius: 999px;
	font-family: var(--scx-sans);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	letter-spacing: 0.03em;
}
.scx-bookbar .scx-book {
	flex: 1 1 auto;
	background: var(--scx-gold);
	color: var(--scx-navy-deep);
	text-transform: uppercase;
}
.scx-bookbar .scx-book:active { background: var(--scx-gold-deep); color: #fff; }
.scx-bookbar .scx-contact {
	flex: 0 0 46px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.15rem;
}
@media (max-width: 767px) {
	.scx-bookbar { display: flex; }
	body { padding-bottom: 64px; }
}

/* Keep third-party floating buttons (scroll-up, cookie revisit) clear of the
   mobile booking bar — they were landing exactly on the phone/WhatsApp icons. */
@media (max-width: 767px) {
	#scrollUp { bottom: 84px !important; }
	.cky-btn-revisit-wrapper { bottom: 84px !important; }
}

/* ---------- Third-party chrome, brought into the brand (2026-08) ----------
   The CookieYes banner and the theme scroll-top button shipped in default
   blues that undercut everything around them. Their colors arrive partly as
   inline styles, hence the !importants. Visual restyle only — behavior,
   wording and consent logic untouched. */
.cky-consent-container .cky-consent-bar {
	background: var(--scx-warm-white, #FBF9F4) !important;
	border: 1px solid rgba(198, 164, 92, 0.4) !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 30px 70px -18px rgba(7, 21, 40, 0.4) !important;
	font-family: var(--scx-sans, sans-serif) !important;
}
/* The 2025-era CookieYes update pads the bar and boxes the inner notice too —
   keep the inner element invisible so the banner reads as ONE plate. */
.cky-consent-container .cky-notice {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--scx-sans, sans-serif) !important;
}
.cky-consent-container .cky-title,
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p {
	color: var(--scx-ink, #182230) !important;
	font-family: var(--scx-sans, sans-serif) !important;
}
.cky-consent-container .cky-title {
	font-family: var(--scx-serif, serif) !important;
	color: var(--scx-navy, #0B1F3A) !important;
	font-size: 1.15rem !important;
}
.cky-consent-container .cky-btn {
	border-radius: 999px !important;
	font-family: var(--scx-sans, sans-serif) !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease !important;
}
.cky-consent-container .cky-btn-accept {
	background: linear-gradient(160deg, #D2B26B 0%, #C6A45C 55%, #BA954C 100%) !important;
	border: 1px solid transparent !important;
	color: var(--scx-navy-deep, #071528) !important;
}
.cky-consent-container .cky-btn-accept:hover {
	background: linear-gradient(160deg, #BA954C 0%, #A9853D 60%, #9C7A36 100%) !important;
	color: #fff !important;
}
.cky-consent-container .cky-btn-reject,
.cky-consent-container .cky-btn-customize {
	background: transparent !important;
	border: 1px solid rgba(11, 31, 58, 0.35) !important;
	color: var(--scx-navy, #0B1F3A) !important;
}
.cky-consent-container .cky-btn-reject:hover,
.cky-consent-container .cky-btn-customize:hover {
	border-color: var(--scx-gold, #C6A45C) !important;
	color: var(--scx-gold-deep, #A9853D) !important;
}
.cky-btn-revisit-wrapper {
	background: var(--scx-navy-deep, #071528) !important;
	border: 1px solid rgba(198, 164, 92, 0.55) !important;
}
/* CookieYes preference modal: keep it on-brand too */
.cky-modal .cky-preference-content-wrapper,
.cky-modal .cky-preference-body-wrapper,
.cky-modal .cky-preference-header,
.cky-modal .cky-footer-wrapper {
	background: var(--scx-warm-white, #FBF9F4) !important;
	color: var(--scx-ink, #182230) !important;
	font-family: var(--scx-sans, sans-serif) !important;
}
.cky-modal .cky-preference-title { font-family: var(--scx-serif, serif) !important; color: var(--scx-navy, #0B1F3A) !important; }

/* Theme scroll-top: navy pill with a gold ring instead of default blue */
a#scrollUp {
	background: var(--scx-navy-deep, #071528) !important;
	border: 1px solid rgba(198, 164, 92, 0.55) !important;
	border-radius: 999px !important;
	color: #fff !important;
	box-shadow: 0 10px 26px -10px rgba(7, 21, 40, 0.55) !important;
	transition: background-color 220ms ease, border-color 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a#scrollUp:hover {
	background: var(--scx-navy, #0B1F3A) !important;
	border-color: var(--scx-gold, #C6A45C) !important;
	transform: translateY(-2px);
}