/* =============================================================================
   Ratiom CRO — Mobile App Refinements
   Layered on top of theme.css. Upgrades feel from "responsive website"
   to "app-like UI" on mobile: spacing system, rhythm, touch targets,
   component polish. Does not alter colors, fonts, or visual identity.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Global Design Tokens
   --------------------------------------------------------------------------- */

:root {
	--container-gutter: 16px;
	--section-gap: 80px;
	--grid-unit: 8px;
}

/* ---------------------------------------------------------------------------
   Global — Transitions on Interactive Elements
   --------------------------------------------------------------------------- */

a,
button,
[role="button"],
summary,
input,
select,
textarea {
	transition: all 0.2s ease-in-out;
}

/* ---------------------------------------------------------------------------
   Mobile — Section Vertical Rhythm (50% reduction)
   Desktop section padding is 80px (--space-7). Halved to 40px on mobile for
   tighter scroll flow. Carousel uses its own padding-block so overridden
   separately. All values kept on the 8px grid.
     80px → 40px (.ratiom-section via --space-7)
     40px → 24px (.ratiom-carousel-section, nearest on-grid half)
   Horizontal gutters are untouched.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--space-7: 40px;
		--section-gap: 40px;
	}

	.section-container {
		padding-inline: var(--container-gutter);
	}

	.ratiom-carousel-section {
		padding-block: 24px;
	}
}

/* ---------------------------------------------------------------------------
   Typography — Mobile
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	h1 {
		line-height: 1.08;
		letter-spacing: -0.03em;
		text-align: left;
	}

	h2 {
		line-height: 1.1;
		letter-spacing: -0.03em;
		text-align: left;
	}

	p {
		font-size: 1rem;
		line-height: 1.6;
	}

	/* Section header blocks — left-aligned on mobile */
	.ratiom-section-header {
		text-align: left;
		margin-inline: 0;
		margin-bottom: 24px;
	}

	.ratiom-section-sub {
		text-align: left;
	}

	/* Hero — override centered alignment */
	.ratiom-hero-headline {
		text-align: center;
	}

	.ratiom-hero-sub {
		text-align: center;
	}

	.ratiom-hero-support {
		text-align: center;
	}

	.ratiom-hero-disclaimer {
		text-align: center;
	}

	.ratiom-hero-actions {
		justify-content: center;
	}

	/* Eyebrow labels */
	.ratiom-label {
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}
}

/* ---------------------------------------------------------------------------
   Cards — Feature / Benefit
   Enforce consistent padding, radius, and icon alignment.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ratiom-card {
		padding: 24px;
		border-radius: 12px;
	}

	.ratiom-offer-card {
		padding: 24px;
	}

	/* Icons stay top-aligned with first line of heading */
	.ratiom-problem-icon-wrap,
	.ratiom-deliverable-icon,
	.ratiom-fit-icon,
	.ratiom-offer-number {
		align-self: flex-start;
		flex-shrink: 0;
	}
}

/* ---------------------------------------------------------------------------
   Check / List Items — Grid Alignment
   Grid enforces icon-column lock: icon never drifts when text wraps.
   --------------------------------------------------------------------------- */

.ratiom-check-item {
	display: grid;
	grid-template-columns: 24px 1fr;
	align-items: start;
	gap: 0;
	column-gap: 10px;
}

.ratiom-check-icon {
	margin-top: 3px;
	align-self: start;
}

/* Hero bullet overrides inherit the grid */
.ratiom-hero-bullets .ratiom-check-item {
	column-gap: 16px;
}

/* Pricing features — left-align on mobile */
@media (max-width: 767px) {
	.ratiom-pricing-features .ratiom-check-item {
		justify-content: flex-start;
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
   Pricing / Founding Offer Card
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ratiom-pricing-card {
		padding: 24px;
	}

	/* Price ($997) — strong visual air above and below */
	.ratiom-pricing-tier-label {
		margin-bottom: 16px;
	}

	.ratiom-pricing-price-row {
		margin-block: 16px 24px;
	}

	.ratiom-pricing-price {
		font-size: 3.75rem;
	}

	.ratiom-pricing-desc {
		margin-bottom: 24px;
	}

	.ratiom-pricing-features {
		margin-bottom: 32px;
	}
}

/* ---------------------------------------------------------------------------
   CTA Buttons
   Target theme classes and native WordPress block button selectors.
   --------------------------------------------------------------------------- */

.ratiom-btn-primary,
.ratiom-btn-secondary,
.wp-block-button__link,
.button,
.ratiom-hero-cta-primary,
.ratiom-hero-cta-secondary,
.ratiom-pricing-cta,
.ratiom-cta-btn {
	min-height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	font-weight: 700;
}

/* Hero CTAs — full width on mobile for maximum tap affordance */
@media (max-width: 767px) {
	.ratiom-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ratiom-hero-actions .ratiom-btn-primary,
	.ratiom-hero-actions .ratiom-btn-secondary,
	.ratiom-hero-actions .ratiom-hero-cta-primary,
	.ratiom-hero-actions .ratiom-hero-cta-secondary {
		width: 100%;
		text-align: center;
	}

	/* Final CTA button — constrained max-width, centered */
	.ratiom-cta-btn {
		width: 100%;
		max-width: 420px;
	}
}

/* Pricing CTA always full width */
.ratiom-pricing-cta {
	width: 100%;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   FAQ / Accordion
   --------------------------------------------------------------------------- */

.ratiom-faq-item {
	border-bottom: 1px solid #222;
}

.ratiom-faq-item:first-child {
	border-top: 1px solid #222;
}

.ratiom-faq-question {
	min-height: 64px;
	padding-block: 20px;
	align-items: center;
}

/* Question text fills available space; chevron stays right-locked */
.ratiom-faq-question span {
	flex: 1;
}

.ratiom-faq-chevron {
	flex-shrink: 0;
	align-self: center;
}

/* Spacing between items already uses border — ensure gap is consistent */
@media (max-width: 767px) {
	.ratiom-faq-answer {
		padding-bottom: 24px;
	}

	.ratiom-faq-answer p {
		font-size: 1rem;
		line-height: 1.65;
	}
}

/* ---------------------------------------------------------------------------
   Touch Targets — Navigation
   All interactive nav elements meet 48px minimum tap target.
   --------------------------------------------------------------------------- */

.ratiom-nav-toggle {
	min-height: 48px;
	min-width: 48px;
}

.ratiom-nav-link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

/* Mobile nav drawer items — full-width tap areas */
@media (max-width: 767px) {
	.ratiom-nav-links.is-open .ratiom-nav-link {
		width: 100%;
		min-height: 56px;
		padding-inline: 16px;
		border-radius: 8px;
	}
}

/* Social icon tap targets */
.ratiom-social-link,
.ratiom-social-link--footer {
	min-height: 44px;
	min-width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Footer links tap area */
.ratiom-footer-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ---------------------------------------------------------------------------
   Navigation — Responsive CTA Label
   Desktop shows "Book Core Review Call"; mobile shows "Book Call".
   aria-label on the <a> always exposes the full string to screen readers,
   so both spans can safely carry aria-hidden="true".
   --------------------------------------------------------------------------- */

.ratiom-nav-cta-short {
	display: none;
}

/* ---------------------------------------------------------------------------
   Mobile — Navigation Header
   Compact CTA + larger logo + body offset calibrated to mobile header height.
   Banner (40px) + nav-wrapper (76px) = 116px total.
   Hero padding-top is already 0, so content begins right at the nav bottom.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Body offset: match actual mobile header height so zero dead space */
	body {
		padding-top: 116px;
	}

	/* Logo — larger for immediate readability in the mobile bar */
	.ratiom-nav-logo img {
		height: 40px;
	}

	/* Responsive CTA text: show compact version, hide long version */
	.ratiom-nav-cta-short {
		display: inline;
	}

	.ratiom-nav-cta-full {
		display: none;
	}

	/* CTA button — compact so it stops dominating the header.
	   Double-class specificity (0-2-0) beats the global min-height: 58px rule (0-1-0).
	   44px height keeps it comfortably tappable per WCAG 2.5.5. */
	.ratiom-btn-primary.ratiom-nav-cta {
		padding: 8px 14px;
		font-size: 0.8125rem;
		min-height: 44px;
	}
}