/**
 * DentraFix Responsive Utilities
 *
 * Mobile-first breakpoints:
 * - 768px  tablet
 * - 1024px small desktop
 * - 1200px large desktop
 *
 * @package DentraFix_Child
 */

/* --------------------------------------------------------------------------
   Container widths
   -------------------------------------------------------------------------- */

.df-container {
	width: min(100% - 1.5rem, 100%);
}

@media (min-width: 768px) {
	.df-container {
		width: min(100% - 2.5rem, 44rem);
	}
}

@media (min-width: 1024px) {
	.df-container {
		width: min(100% - 3rem, 60rem);
	}
}

@media (min-width: 1200px) {
	.df-container {
		width: min(100% - 3rem, var(--df-container-max, 72rem));
	}
}

/* --------------------------------------------------------------------------
   Section spacing
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.df-section {
		padding-block: clamp(3.5rem, 5vw, 4.5rem);
	}
}

@media (min-width: 1200px) {
	.df-section {
		padding-block: clamp(4rem, 6vw, 5rem);
	}
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.df-site-header__inner {
		flex-wrap: nowrap;
	}

	.df-menu-toggle {
		margin-inline-start: auto;
	}

	.df-site-header__desktop {
		display: none;
	}
}

@media (min-width: 1024px) {
	.df-menu-toggle {
		display: none;
	}

	.df-mobile-drawer {
		display: none !important;
	}

	.df-site-header__inner {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: var(--df-space-xl);
	}

	.df-site-header__desktop {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--df-space-lg);
		min-width: 0;
	}

	.df-site-header__menu {
		justify-content: center;
		flex: 1 1 auto;
	}

	.df-site-header__actions {
		justify-content: flex-end;
		flex-shrink: 0;
	}

	html.df-lang-ur .df-hero__content {
		text-align: right;
	}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.df-site-footer__col--brand {
		align-items: center;
		text-align: center;
	}

	.df-site-footer__col--brand .df-logo,
	.df-site-footer__col--brand .df-logo__link {
		justify-content: center;
	}

	.df-site-footer__intro,
	.df-site-footer__trust {
		max-width: 26rem;
	}

	.df-site-footer__whatsapp-btn {
		width: 100%;
		justify-content: center;
	}

	html.df-lang-ur .df-site-footer__col--brand {
		align-items: flex-end;
		text-align: right;
	}

	html.df-lang-ur .df-site-footer__col--brand .df-logo,
	html.df-lang-ur .df-site-footer__col--brand .df-logo__link {
		justify-content: flex-start;
	}

	html.df-lang-ur .df-site-footer__whatsapp-btn {
		align-self: stretch;
	}
}

@media (min-width: 768px) {
	.df-site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1.5rem, 3vw, 2.25rem);
		align-items: start;
	}

	.df-site-footer .df-logo img,
	.df-site-footer .df-logo .custom-logo,
	.df-site-footer .df-logo__image {
		max-width: 280px;
	}
}

@media (min-width: 1024px) {
	.df-site-footer__grid {
		grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
		gap: clamp(1.75rem, 2.5vw, 2.5rem);
	}
}

@media (min-width: 1024px) {
	.df-announcement__text {
		font-size: 0.875rem;
	}
}

/* --------------------------------------------------------------------------
   Coming soon layout
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.df-coming-soon__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
		gap: var(--df-space-3xl);
	}

	.df-coming-soon__visual {
		justify-self: end;
		max-width: 28rem;
	}
}

/* --------------------------------------------------------------------------
   Button stacking on mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.df-btn-group {
		width: 100%;
	}

	.df-btn-group .df-btn {
		width: 100%;
	}

	.df-site-header__actions {
		flex-direction: column;
		width: 100%;
	}

	.df-site-header__actions .df-btn {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.df-btn-group {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.df-coming-soon__actions .df-btn {
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   Visibility utilities
   -------------------------------------------------------------------------- */

.df-hide-mobile {
	display: none;
}

.df-show-mobile {
	display: block;
}

@media (min-width: 768px) {
	.df-hide-mobile {
		display: block;
	}

	.df-show-mobile {
		display: none;
	}
}

@media (min-width: 1024px) {
	.df-grid-2 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--df-space-xl);
	}
}

@media (min-width: 1200px) {
	.df-grid-3 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--df-space-xl);
	}
}

/* ==========================================================================
   HERO SECTION — RESPONSIVE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base / mobile-first defaults — single column, content leads
   -------------------------------------------------------------------------- */

.df-hero__grid {
	grid-template-columns: 1fr;
}

.df-hero__content {
	order: 1;
	max-width: 100%;
}

.df-hero__visual {
	order: 2;
}

@media (max-width: 767px) {
	.df-hero__heading {
		font-size: clamp(1.5rem, 6vw, 2rem);
	}

	.df-hero__actions-panel {
		padding: var(--df-space-sm);
	}

	.df-btn-group.df-hero__actions {
		flex-direction: column;
	}

	.df-btn-group.df-hero__actions .df-btn {
		width: 100%;
		justify-content: center;
	}

	.df-hero__chips {
		gap: var(--df-space-2xs) var(--df-space-xs);
	}

	.df-hero__trust {
		gap: var(--df-space-xs) var(--df-space-sm);
	}

	.df-hero__image-placeholder {
		min-height: clamp(14rem, 52vw, 18rem);
	}
}

/* --------------------------------------------------------------------------
   Tablet (768px – 1023px) — centred single column, card constrained
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.df-hero__grid {
		max-width: 44rem;
		margin-inline: auto;
	}

	.df-btn-group.df-hero__actions {
		flex-direction: row;
	}

	.df-btn-group.df-hero__actions .df-btn {
		width: auto;
	}

	.df-hero__visual {
		max-width: 36rem;
		margin-inline: auto;
	}

	.df-hero__image-placeholder {
		min-height: 16rem;
	}
}

/* --------------------------------------------------------------------------
   Desktop (>= 1024px) — two-column layout
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.df-hero__grid {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--df-space-3xl);
		max-width: none;
		margin-inline: 0;
	}

	.df-hero__content {
		order: 1;
	}

	.df-hero__visual {
		order: 2;
		max-width: none;
		margin-inline: 0;
	}

	.df-btn-group.df-hero__actions {
		flex-direction: row;
	}

	.df-btn-group.df-hero__actions .df-btn {
		width: auto;
	}

	.df-hero__image-placeholder {
		min-height: 18rem;
	}
}

/* --------------------------------------------------------------------------
   Large desktop (>= 1200px) — extra breathing room
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.df-hero__grid {
		gap: calc(var(--df-space-3xl) + var(--df-space-lg));
	}

	.df-hero__heading {
		font-size: 3rem;
	}

	.df-hero__image-placeholder {
		min-height: 20rem;
	}
}

/* ==========================================================================
   PROBLEMS SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-problems__intro {
		text-align: left;
	}

	html.df-lang-ur .df-problems__intro {
		text-align: right;
	}

	.df-problems__bridge {
		flex-direction: column;
		padding: var(--df-space-lg);
	}

	.df-problems__bridge .df-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (min-width: 640px) {
	.df-problems__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.df-problems__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--df-gap-card);
	}

	.df-problems__card--featured {
		grid-column: span 2;
	}

	.df-problems__card--accent {
		grid-column: span 2;
	}

	.df-problems__footer {
		grid-template-columns: 1.4fr 0.8fr;
		gap: var(--df-space-xl);
	}
}

@media (min-width: 1200px) {
	.df-problems__card-inner {
		padding: var(--df-space-xl) var(--df-space-xl) var(--df-space-xl) var(--df-space-lg);
	}
}

/* ==========================================================================
   INTRO SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-intro__content {
		max-width: 100%;
	}

	.df-intro__cta {
		width: 100%;
		justify-content: center;
	}

	.df-intro__image-placeholder {
		min-height: 12rem;
	}
}

@media (min-width: 768px) {
	.df-intro__grid {
		max-width: 44rem;
		margin-inline: auto;
	}
}

@media (min-width: 1024px) {
	.df-intro__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--df-space-3xl);
		max-width: none;
		margin-inline: 0;
		align-items: center;
	}

	.df-intro__content {
		max-width: none;
	}

	html.df-lang-ur .df-intro__content {
		text-align: right;
	}
}

/* ==========================================================================
   BENEFITS SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-benefits__cta {
		flex-direction: column;
		padding: var(--df-space-lg);
	}

	.df-benefits__cta .df-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (min-width: 640px) {
	.df-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--df-space-lg);
	}
}

@media (min-width: 1024px) {
	.df-benefits__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.df-benefits__card--featured {
		grid-column: span 2;
	}

	.df-benefits__card--featured .df-benefits__card-inner {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto 1fr auto;
		column-gap: var(--df-space-lg);
		align-items: start;
	}

	.df-benefits__card--featured .df-benefits__card-top {
		grid-column: 1;
		grid-row: 1 / span 2;
		flex-direction: column;
		align-items: flex-start;
	}

	.df-benefits__card--featured .df-benefits__featured-label {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		width: fit-content;
	}

	.df-benefits__card--featured .df-benefits__card-body {
		grid-column: 2;
		grid-row: 2;
	}

	.df-benefits__card--featured .df-benefits__tag {
		grid-column: 2;
		grid-row: 3;
		justify-self: start;
		width: fit-content;
	}
}

/* --------------------------------------------------------------------------
   Admin notice — stack on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.df-admin-notice {
		left: 0.5rem;
		bottom: 0.5rem;
		padding: 0.25rem 0.4375rem;
		font-size: 0.625rem;
	}

	.df-admin-notice:hover,
	.df-admin-notice:focus-within {
		padding: 0.4375rem 0.5625rem;
		max-width: calc(100vw - 1rem);
	}

	.df-admin-notice:hover .df-admin-notice__expand,
	.df-admin-notice:focus-within .df-admin-notice__expand {
		max-width: calc(100vw - 2.5rem);
	}

	.df-admin-notice__text {
		white-space: normal;
		font-size: 0.625rem;
	}

	.df-admin-notice__btn {
		padding: 0.25rem 0.5rem;
		font-size: 0.625rem;
	}
}

/* Safe spacing above fixed admin notice on landing pages */
@media (max-width: 767px) {
	body.logged-in .df-landing {
		padding-bottom: clamp(2.5rem, 6vh, 3.25rem);
	}
}

/* ==========================================================================
   REVIEWS SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-reviews__content {
		max-width: 100%;
	}

	.df-reviews__cta-wrap .df-btn {
		width: 100%;
		justify-content: center;
	}

	.df-reviews__slider-panel {
		order: 2;
	}

	.df-reviews__slider-track {
		animation: none;
		transform: none;
	}

	.df-reviews__slider-window {
		max-height: none;
		overflow: visible;
	}

	.df-reviews__slider-fade {
		display: none;
	}

	.df-reviews__slider-group[aria-hidden="true"] {
		display: none;
	}

	.df-reviews__content {
		order: 1;
	}
}

@media (min-width: 768px) {
	.df-reviews__grid {
		max-width: 44rem;
		margin-inline: auto;
	}
}

@media (min-width: 1024px) {
	.df-reviews__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: var(--df-space-3xl);
		max-width: none;
		margin-inline: 0;
		align-items: center;
	}

	.df-reviews__content {
		max-width: none;
	}

	html.df-lang-ur .df-reviews__content {
		text-align: right;
	}
}

/* ==========================================================================
   INGREDIENTS SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-ingredients__bridge {
		flex-direction: column;
		padding: var(--df-space-lg);
		text-align: center;
	}

	.df-ingredients__bridge .df-btn {
		width: 100%;
		justify-content: center;
	}

	.df-ingredients__feature-inner {
		padding: var(--df-space-lg);
	}

	.df-ingredients__safety {
		padding: var(--df-space-lg);
	}
}

@media (min-width: 480px) and (max-width: 1023px) {
	.df-ingredients__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--df-space-md);
	}

	.df-ingredients__card--wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.df-ingredients__layout {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: var(--df-space-xl);
		align-items: start;
	}

	.df-ingredients__feature {
		position: sticky;
		top: calc(var(--df-header-offset, 7.5rem) + var(--df-space-md));
	}

	.df-ingredients__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--df-space-lg);
	}

	.df-ingredients__card--wide {
		grid-column: 1 / -1;
	}

	.df-ingredients__card--wide .df-ingredients__card-inner {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr;
		column-gap: var(--df-space-lg);
		align-items: start;
	}

	.df-ingredients__card--wide .df-ingredients__card-top {
		grid-column: 1;
		grid-row: 1 / span 2;
		flex-direction: column;
		align-items: flex-start;
	}

	.df-ingredients__card--wide .df-ingredients__card-body {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* ==========================================================================
   HOW TO USE SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-how-to-use__bridge {
		flex-direction: column;
		padding: var(--df-space-lg);
		text-align: center;
	}

	.df-how-to-use__bridge .df-btn {
		width: 100%;
		justify-content: center;
	}

	.df-how-to-use__reminder {
		padding: var(--df-space-lg);
	}
}

@media (min-width: 640px) {
	.df-how-to-use__steps {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--df-space-lg);
		padding-inline-start: 0;
	}

	.df-how-to-use__steps::before,
	.df-how-to-use__step::before {
		display: none;
	}
}

@media (min-width: 1024px) {
	.df-how-to-use__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.38fr);
		gap: var(--df-space-xl);
		align-items: start;
	}

	.df-how-to-use__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--df-space-lg) var(--df-space-md);
		position: relative;
	}

	.df-how-to-use__steps::after {
		content: "";
		position: absolute;
		inset: 8% 5%;
		border: 1px dashed rgba(112, 162, 52, 0.18);
		border-radius: var(--df-radius-xl);
		pointer-events: none;
		z-index: 0;
	}

	.df-how-to-use__step {
		position: relative;
		z-index: 1;
	}

	.df-how-to-use__step:nth-child(3n + 2) {
		margin-top: var(--df-space-lg);
	}

	.df-how-to-use__step:nth-child(3n) {
		margin-top: calc(var(--df-space-lg) * 2);
	}

	.df-how-to-use__reminder {
		position: sticky;
		top: calc(var(--df-header-offset, 7.5rem) + var(--df-space-md));
	}
}

/* ==========================================================================
   TIMELINE SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-timeline__bridge {
		flex-direction: column;
		padding: var(--df-space-lg);
		text-align: center;
	}

	.df-timeline__bridge .df-btn {
		width: 100%;
		justify-content: center;
	}

	.df-timeline__note {
		padding: var(--df-space-lg);
	}
}

@media (min-width: 768px) {
	.df-timeline__milestones {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--df-space-lg);
		padding-inline-start: 0;
		padding-top: 2.25rem;
	}

	.df-timeline__milestones::before {
		inset-inline-start: 8%;
		inset-inline-end: 8%;
		top: 0.6875rem;
		bottom: auto;
		width: auto;
		height: 3px;
		background: linear-gradient(
			to inline-end,
			rgba(112, 162, 52, 0.3) 0%,
			rgba(112, 162, 52, 0.65) 50%,
			rgba(112, 162, 52, 0.9) 100%
		);
	}

	.df-timeline__milestone::before {
		inset-inline-start: 50%;
		top: -1.5625rem;
		margin-inline-start: -0.375rem;
	}
}

@media (min-width: 1024px) {
	.df-timeline__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.34fr);
		gap: var(--df-space-xl);
		align-items: start;
	}

	.df-timeline__note {
		position: sticky;
		top: calc(var(--df-header-offset, 7.5rem) + var(--df-space-md));
	}
}

/* ==========================================================================
   PRICING SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-pricing__card-inner {
		padding: var(--df-space-lg);
	}

	.df-pricing__trust {
		padding: var(--df-space-lg);
	}
}

@media (min-width: 768px) {
	.df-pricing__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--df-space-lg);
		align-items: center;
	}

	.df-pricing__card--featured {
		z-index: 2;
	}

	.df-pricing__card--featured .df-pricing__card-inner {
		padding-block: calc(var(--df-space-xl) + 0.5rem);
		transform: scale(1.04);
	}

	.df-pricing__trust-list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--df-space-md) var(--df-space-xl);
	}

	.df-pricing__trust-item:not(:last-child)::after {
		display: none;
	}

	.df-pricing__trust-item:not(:last-child) {
		padding-inline-end: var(--df-space-xl);
		border-inline-end: 1px solid rgba(112, 162, 52, 0.22);
	}
}

/* ==========================================================================
   TRUST SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-trust__story {
		padding: var(--df-space-lg);
	}

	.df-trust__confidence {
		flex-direction: column;
		padding: var(--df-space-lg);
		text-align: center;
	}

	.df-trust__confidence-actions {
		width: 100%;
		flex-direction: column;
	}

	.df-trust__confidence-actions .df-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (min-width: 480px) and (max-width: 1023px) {
	.df-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--df-space-md);
	}
}

@media (min-width: 1024px) {
	.df-trust__layout {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: var(--df-space-xl);
		align-items: start;
	}

	.df-trust__story {
		position: sticky;
		top: calc(var(--df-header-offset, 7.5rem) + var(--df-space-md));
	}

	.df-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--df-space-lg);
	}
}

/* ==========================================================================
   FINAL CTA SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-final-cta__content {
		padding: var(--df-space-lg);
	}

	.df-final-cta__visual {
		padding: 0 var(--df-space-lg) var(--df-space-lg);
	}

	.df-final-cta__actions {
		flex-direction: column;
		width: 100%;
	}

	.df-final-cta__actions .df-btn {
		width: 100%;
		justify-content: center;
	}

	html.df-lang-ur .df-final-cta__actions {
		align-items: stretch;
	}
}

@media (min-width: 1024px) {
	.df-final-cta__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 0;
		align-items: stretch;
	}

	.df-final-cta__content {
		padding: var(--df-space-2xl);
		justify-content: center;
	}

	.df-final-cta__visual {
		display: flex;
		align-items: center;
		padding: var(--df-space-2xl);
		padding-inline-start: 0;
	}

	.df-final-cta__visual-placeholder {
		width: 100%;
		min-height: 100%;
	}
}

/* ==========================================================================
   FAQ SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.df-faq__support {
		padding: var(--df-space-lg);
	}

	.df-faq__support-btn {
		width: 100%;
		justify-content: center;
		align-self: stretch;
	}

	html.df-lang-ur .df-faq__support-btn {
		align-self: stretch;
	}

	.df-faq__trigger {
		padding: var(--df-space-md) var(--df-space-lg);
	}

	.df-faq__item.is-open .df-faq__panel-inner {
		padding: 0 var(--df-space-lg) var(--df-space-md);
	}
}

@media (min-width: 1024px) {
	.df-faq__layout {
		display: grid;
		grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
		gap: var(--df-space-3xl);
		align-items: start;
	}

	.df-faq__sidebar {
		position: sticky;
		top: calc(var(--df-header-offset, 7.5rem) + var(--df-space-md));
	}
}