/**
 * LosaLaw — Mobile polish layer
 *
 * Loaded LAST in the cascade so it wins specificity ties without `!important`.
 * Centralises every cross-cutting mobile fix in one file so we never have to
 * hunt through 8 stylesheets again. Desktop (≥1024px) is intentionally
 * untouched.
 *
 * Sections:
 *   1. Global safeguards (overflow, viewport, smooth scrolling, tap)
 *   2. Container & gutter
 *   3. Typography scale
 *   4. Homepage hero (.hp-hero) + interior heroes (.*-hero-cinematic)
 *   5. Section padding rhythm
 *   6. Buttons, links, touch targets
 *   7. Forms (iOS zoom fix, full-width inputs)
 *   8. Cards, grids, lists
 *   9. Footer
 *  10. Media (img / video / iframe / table)
 *  11. Sticky header offset & safe-area
 *  12. Reduced-motion polish
 *
 * @package LosaLaw
 * @since 1.0.0
 */

/* ============================================================
   1. Global safeguards
   ============================================================ */

/* Keep the page rigid horizontally on phones. `body` already has
   overflow-x:hidden in main.css; we mirror it on html and on the page
   wrapper so a stray translated element can't introduce a sideways
   scroll on iOS Safari. */
@media (max-width: 1023px) {
	html,
	#page.site {
		overflow-x: hidden;
		max-width: 100vw;
	}

	html {
		/* Honour iOS Safari's notch/home-bar safe area. */
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	/* Friendlier tap highlight — copper at 18% instead of the default
	   blue/black box that looks broken on a navy hero. */
	a,
	button,
	[role="button"],
	.hp-btn,
	.cta-button,
	.header-cta-button,
	.btn,
	input[type="submit"] {
		-webkit-tap-highlight-color: rgba(var(--brand-copper-rgb), 0.18);
	}

	/* Stop momentum scrolling from chopping fixed elements. */
	body {
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================================
   2. Container & gutter
   ============================================================ */
@media (max-width: 600px) {
	.container,
	.hp-container,
	.about-container,
	.services-container,
	.contact-container,
	.landing-container,
	.sl-container {
		padding-left: 18px;
		padding-right: 18px;
	}
}

@media (max-width: 380px) {
	.container,
	.hp-container,
	.about-container,
	.services-container,
	.contact-container,
	.landing-container,
	.sl-container {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* ============================================================
   3. Typography scale
   ============================================================ */

/* Stay at 16px root so iOS Safari does NOT zoom focused form fields. */
@media (max-width: 768px) {
	h1 { font-size: 32px; line-height: 1.15; }
	h2 { font-size: 26px; line-height: 1.2; }
	h3 { font-size: 22px; line-height: 1.25; }
	h4 { font-size: 19px; line-height: 1.3; }
	h5 { font-size: 17px; }
	h6 { font-size: 15px; }

	.entry-title { font-size: 32px; }
	.entry-content h2 { font-size: 26px; margin-top: 2rem; }
	.entry-content h3 { font-size: 22px; margin-top: 1.75rem; }

	p { line-height: 1.6; }
}

@media (max-width: 380px) {
	h1 { font-size: 28px; }
	h2 { font-size: 23px; }
	h3 { font-size: 20px; }
	.entry-title { font-size: 28px; }
}

/* ============================================================
   4. Heroes (homepage + interior cinematic heroes)
   ============================================================ */

/* Homepage hero
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.hp-hero {
		min-height: auto;
	}

	.hp-hero__inner {
		padding-top: 110px;
		padding-bottom: 56px;
	}

	.hp-hero__eyebrow {
		font-size: 11px;
		letter-spacing: 1.5px;
		margin-bottom: 1rem;
	}

	/* Original was clamp(3.8rem, 9.5vw, 8.5rem) — the 3.8rem MIN was
	   locking the title at ~61px on a 360px screen which broke into 3
	   awkward lines. Cap the floor at 2.25rem so it can actually shrink. */
	.hp-hero__title {
		font-size: clamp(2.25rem, 9.5vw, 3.8rem);
		letter-spacing: -1.5px;
		margin-bottom: 1.25rem;
	}

	.hp-hero__sub {
		font-size: 0.9rem;
		letter-spacing: 0.8px;
		margin-bottom: 1.75rem;
		max-width: 100%;
	}

	.hp-hero__ctas {
		gap: 0.75rem;
	}

	.hp-hero__ctas .hp-btn {
		width: 100%;
		min-height: 52px;
		font-size: 15px;
	}
}

@media (max-width: 380px) {
	.hp-hero__inner {
		padding-top: 96px;
		padding-bottom: 44px;
	}

	.hp-hero__title {
		font-size: clamp(2rem, 10vw, 3rem);
		letter-spacing: -1px;
	}

	.hp-hero__sub {
		font-size: 0.85rem;
	}
}

/* Interior cinematic heroes (About / Services / Contact)
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.about-hero-cinematic,
	.services-hero-cinematic,
	.contact-hero-cinematic {
		padding: 100px 0 60px;
		min-height: auto;
	}

	.about-hero-title,
	.services-hero-title,
	.contact-hero-title,
	.landing-hero-title {
		font-size: clamp(2.25rem, 8.5vw, 3.25rem);
		line-height: 1.1;
		letter-spacing: -1px;
	}

	.about-hero-subtitle,
	.services-hero-subtitle,
	.contact-hero-subtitle,
	.landing-hero-subtitle {
		font-size: 15px;
		line-height: 1.55;
	}

	/* Scroll indicators are noisy on a short mobile hero. */
	.about-hero-cinematic .scroll-indicator,
	.services-hero-cinematic .scroll-indicator,
	.contact-hero-cinematic .scroll-indicator {
		display: none;
	}
}

@media (max-width: 380px) {
	.about-hero-cinematic,
	.services-hero-cinematic,
	.contact-hero-cinematic {
		padding: 88px 0 48px;
	}

	.about-hero-title,
	.services-hero-title,
	.contact-hero-title,
	.landing-hero-title {
		font-size: clamp(1.85rem, 9vw, 2.6rem);
	}
}

/* ============================================================
   5. Section padding rhythm
   ============================================================ */
@media (max-width: 768px) {
	.hp-principles,
	.hp-practice,
	.hp-about,
	.hp-cases,
	.hp-testimonials,
	.hp-process,
	.hp-contact,
	.who-we-are-section,
	.mission-values-section,
	.practice-areas-about,
	.why-choose-us-section,
	.team-culture-section,
	.vision-future-section,
	.cta-premium,
	.sl-band-orange,
	.sl-surface-cream,
	.results-showcase {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.site-main {
		padding: 32px 0;
	}
}

@media (max-width: 380px) {
	.hp-principles,
	.hp-practice,
	.hp-about,
	.hp-cases,
	.hp-testimonials,
	.hp-process,
	.hp-contact,
	.who-we-are-section,
	.mission-values-section,
	.practice-areas-about,
	.why-choose-us-section,
	.team-culture-section,
	.vision-future-section,
	.cta-premium,
	.sl-band-orange,
	.sl-surface-cream,
	.results-showcase {
		padding-top: 44px;
		padding-bottom: 44px;
	}
}

/* ============================================================
   6. Buttons, links, touch targets
   ============================================================ */
@media (max-width: 768px) {
	/* Guarantee 44px minimum hit area on every button-ish element. */
	.hp-btn,
	.cta-button,
	.btn,
	.button,
	.wp-block-button__link,
	input[type="submit"],
	input[type="button"],
	button:not(.menu-toggle):not(.search-toggle):not(.search-close):not(.announcement-close):not(.back-to-top) {
		min-height: 48px;
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 15px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Make primary CTAs span the column width — easier to hit, looks
	   intentional rather than orphaned. */
	.hp-hero__ctas .hp-btn,
	.cta-premium .cta-button,
	.cta-actions .cta-button,
	.hero-cta-group .btn,
	.about-hero-cta .btn,
	.services-hero-cta .btn,
	.contact-hero-cta .btn,
	.landing-hero-cta .btn {
		width: 100%;
	}

	.hero-cta-group,
	.about-hero-cta,
	.services-hero-cta,
	.contact-hero-cta,
	.landing-hero-cta,
	.cta-actions {
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}

	/* Bigger tap area for inline text links inside content. */
	.entry-content p a,
	.entry-content li a {
		padding: 2px 0;
	}
}

/* ============================================================
   7. Forms (iOS zoom fix, full-width inputs)
   ============================================================ */
@media (max-width: 768px) {
	/* iOS Safari zooms on focus when font-size < 16px. Lock to 16px. */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
		min-height: 48px;
		width: 100%;
		padding: 12px 14px;
		border-radius: 8px;
	}

	textarea {
		min-height: 120px;
		line-height: 1.5;
	}

	.hp-form__row,
	.contact-form-row,
	.form-row {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.hp-form__group,
	.form-group {
		width: 100%;
	}

	/* Submit buttons full-width on phones. */
	.hp-form button[type="submit"],
	.contact-form button[type="submit"],
	.wpcf7-submit,
	form .submit-button {
		width: 100%;
	}
}

/* ============================================================
   8. Cards, grids, lists
   ============================================================ */
@media (max-width: 768px) {
	/* Most grids already collapse to 1col at 767px in their own files;
	   we cover the lingering 2-col cases. */
	.hp-principles__grid,
	.hp-practice__grid,
	.hp-cases__grid,
	.hp-testimonials__grid,
	.hp-process__steps,
	.practice-areas-grid,
	.vision-grid,
	.mission-grid,
	.values-grid,
	.why-choose-grid,
	.team-grid,
	.services-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Tighten card padding so they don't feel chunky on a small screen. */
	.hp-principles__card,
	.hp-practice__card,
	.hp-cases__card,
	.hp-testimonials__card,
	.hp-process__step,
	.practice-card,
	.value-card,
	.team-card,
	.service-card,
	.sl-case-spotlight {
		padding: 1.5rem 1.25rem;
		border-radius: 14px;
	}

	/* Stat counters — wrap nicely instead of squashing. */
	.hp-about__stats,
	.stats-grid,
	.stat-row {
		gap: 1.25rem;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.hp-about__stats > *,
	.stats-grid > *,
	.stat-row > * {
		flex: 1 1 calc(50% - 1.25rem);
		min-width: 130px;
	}
}

/* ============================================================
   9. Footer
   ============================================================ */
@media (max-width: 768px) {
	.site-footer .footer-widgets {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-widget {
		text-align: left;
	}

	.footer-bottom-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 14px;
		padding: 24px 0;
	}

	.footer-legal {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 14px;
		font-size: 13px;
	}

	.footer-legal a {
		padding: 6px 0;
	}

	/* Newsletter on phones: column layout with full-width controls. */
	.newsletter-form .form-group {
		flex-direction: column;
		gap: 8px;
	}

	.newsletter-form input,
	.newsletter-form button {
		width: 100%;
	}
}

/* ============================================================
   10. Media (img / video / iframe / table)
   ============================================================ */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

@media (max-width: 768px) {
	/* Wrap wide tables so they scroll horizontally instead of breaking
	   the page layout. */
	.entry-content table,
	table.wide {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	figure,
	.wp-block-image {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ============================================================
   11. Sticky header offset & safe-area
   ============================================================ */
@media (max-width: 992px) {
	/* When the user lands on an anchor (e.g. #contact), keep the target
	   below the sticky header instead of hidden behind it. */
	[id] {
		scroll-margin-top: 80px;
	}
}

/* Honour bottom safe-area (iOS home-indicator) so the back-to-top button
   and footer aren't sitting under the home bar. */
@media (max-width: 768px) {
	.back-to-top {
		bottom: calc(20px + env(safe-area-inset-bottom));
		right: calc(16px + env(safe-area-inset-right));
		width: 44px;
		height: 44px;
	}

	.site-footer {
		padding-bottom: env(safe-area-inset-bottom);
	}
}

/* ============================================================
   12. Reduced-motion polish
   ============================================================ */
@media (max-width: 768px) {
	/* On phones, kill the heavy hover transforms — they fire on touch
	   and feel laggy. */
	.hp-principles__card:hover,
	.hp-practice__card:hover,
	.hp-cases__card:hover,
	.service-card:hover,
	.practice-card:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}