/* Additions for the Skanae landing page. Loaded after main.css (the template CSS is not edited). */

/* QR code: desktop with a real pointer only, no JavaScript needed */
.qr-desktop { display: none; text-align: center; }
@media (min-width: 768px) and (hover: hover) {
	.qr-desktop { display: block; }
}

/* Features */
.features-section { color: #3a3a3a; }
.features-section h2, .features-section h3 { color: #12315f; }
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5em;
	margin: 0 0 2em 0;
}
.feature-card {
	background: #f4f8fd;
	border-radius: 12px;
	padding: 1.5em;
}
.feature-card h3 { font-size: 1.15em; line-height: 1.3em; margin: 0 0 0.5em 0; }
.feature-card p { margin: 0; font-size: 0.95em; line-height: 1.5em; }
.feature-card .icon-wrap { font-size: 1.5em; color: #0C5CAB; margin-bottom: 0.5em; display: block; }
.feature-card .plan {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.55em;
	border-radius: 10px;
	font-size: 0.7em;
	font-weight: 700;
	vertical-align: middle;
	background: #0C5CAB;
	color: #ffffff;
}
.feature-card .plan.free { background: #2e8b57; }
.feature-card img { display: block; width: 100%; height: auto; border-radius: 8px; margin-top: 1em; }
.feature-note { text-align: center; font-size: 0.9em; color: #555555; margin: 0 0 2em 0; }

/* Screenshots strip */
.shots-section { color: #3a3a3a; }
.shots {
	display: flex;
	gap: 1em;
	overflow-x: auto;
	padding: 0.5em 0.5em 1.5em 0.5em;
	scroll-snap-type: x proximity;
	justify-content: safe center;
	margin: 0;
	list-style: none;
}
.shots li { flex: 0 0 auto; scroll-snap-align: center; margin: 0; padding: 0; }
.shots img {
	display: block;
	width: 220px;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}

/* CTA blocks */
.cta-block { text-align: center; margin: 2em 0; }
.cta-block p { margin: 1em 0 0 0; font-size: 0.9em; color: #555555; }

/* FAQ */
.faq-section { color: #3a3a3a; }
.faq-section h2 { color: #12315f; }
.faq-list { max-width: 44em; margin: 0 auto; }
.faq-list details {
	background: #ffffff;
	border: 1px solid #dfe6ee;
	border-radius: 10px;
	margin: 0 0 0.8em 0;
	padding: 0 1.2em;
}
.faq-list summary {
	cursor: pointer;
	padding: 1em 0;
	font-weight: 700;
	color: #12315f;
	line-height: 1.4em;
}
.faq-list details[open] summary { border-bottom: 1px solid #eef2f7; margin-bottom: 0.8em; }
.faq-list details p { margin: 0 0 1em 0; line-height: 1.6em; color: #3a3a3a; }
.faq-list details a { color: #0C5CAB; text-decoration: underline; border-bottom: none; }

/* Footer link list */
#footer .footer-links { margin: 0 0 1em 0; line-height: 2em; }
#footer .footer-links a { color: #0C5CAB; }
#footer .copyright { margin-bottom: 0; }

/* Footer language switcher */
#footer .footer-langs { margin: 0 0 1em 0; line-height: 2em; font-size: 0.85em; }
#footer .footer-langs a { color: #0C5CAB; white-space: nowrap; unicode-bidi: isolate; }
#footer .footer-langs a[aria-current="page"] { color: inherit; font-weight: 600; text-decoration: none; }

/* Right-to-left pages (Arabic) */
[dir="rtl"] ul:not([class]), [dir="rtl"] ul.align-left { padding-left: 0; padding-right: 1em; }
[dir="rtl"] .align-left, [dir="rtl"] .feature-group { text-align: right; }
[dir="rtl"] .button.icon:before { margin-right: 0; margin-left: 0.5em; }
[dir="rtl"] li span[style*="margin-left"] { margin-left: 0 !important; margin-right: 0.5em; unicode-bidi: isolate; display: inline-block; }

/* Mobile sticky App Store bar. Hidden on larger screens. */
.sticky-cta { display: none; }
@media screen and (max-width: 736px) {
	.sticky-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.8em;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		padding: 0.6em 1em calc(0.6em + env(safe-area-inset-bottom)) 1em;
		background: rgba(0, 12, 41, 0.95);
		color: #ffffff;
		font-size: 0.9em;
		font-weight: 600;
	}
	.sticky-cta a { border-bottom: none; display: block; }
	.sticky-cta img { display: block; height: 40px; width: auto; }
	/* keep the footer links clear of the bar */
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Template's circular spotlight images: width/height attributes must not stretch them */
.spotlight .image img {
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* In-page anchors clear the sticky nav */
#header, #how-it-works, #features, #faq, #guides { scroll-margin-top: 56px; }

/* Feature groups and figure */
.feature-group { font-size: 1.3em; margin: 1.5em 0 1em 0; text-align: left; }
.feature-figure { margin: 0 auto 2em auto; max-width: 340px; text-align: center; }
.feature-figure img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.feature-figure figcaption { font-size: 0.85em; color: #555555; margin-top: 0.6em; }

/* Phone first screen: headline, subhead and install badge visible without scrolling */
@media screen and (max-width: 736px) {
	.site-nav .nav-cta { display: none; }
	#header {
		height: auto !important;
		min-height: 0 !important;
		flex-direction: column;
		padding: 1.2em 0 1.5em 0 !important;
	}
	#header .logo-container { margin-bottom: 0.4em !important; }
	#header .logo-container img { max-width: 56px !important; }
	#header h1 { font-size: 1.9em !important; margin-bottom: 0.3em !important; }
	#header .content > p { margin: 0.3em 0 1em 0 !important; font-size: 1em !important; }
	#header .qr-desktop { display: none !important; }
	#header .actions { margin-bottom: 0; }
	#header .inner img { width: 190px !important; height: auto; }
	#header .inner { padding-top: 0.5em; }
}

/* Guides on the homepage */
.home-guides .feature-card h3 a { color: #0C5CAB; border-bottom: none; text-decoration: underline; text-underline-offset: 0.15em; }
.home-guides .feature-card h3 a:hover { color: #12315f; }
.home-guides .inner > p { text-align: center; margin-top: 1.5em; }