/**
 * Minimal Theme - Responsive Fixes
 *
 * Global responsive adjustments for mobile, tablet, and desktop
 *
 * @package Minimal Theme
 */

/* ========================================
   GLOBAL RESPONSIVE BASE
   ======================================== */

/* Responsive Images */
img {
	max-width: 100%;
	height: auto;
}

/* Prevent horizontal scroll on mobile */
body {
	overflow-x: hidden;
}

/* ========================================
   STANDARD BREAKPOINTS
   ======================================== */

/* Desktop Large (1200px+) */
@media (min-width: 1200px) {
	.scp-container,
	.scp-archive-wrapper,
	.site-footer__container,
	.scp-hero-inner,
	.scp-exam-hero-inner {
		max-width: 1200px;
	}
}

/* Tablet (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
	.scp-container,
	.scp-archive-wrapper,
	.site-footer__container {
		padding: 0 20px;
	}
}

/* Tablet Landscape (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
	.scp-hero-inner {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	.scp-hero-visual {
		order: -1;
	}
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
	.scp-container,
	.scp-archive-wrapper,
	.site-footer__container {
		padding: 0 20px;
		max-width: 100%;
	}

	/* Fix badge z-index on tablet to appear above header */
	.scp-cert-badge-float {
		z-index: 1000 !important;
	}

	.scp-cert-badge-verified {
		top: -12px;
		right: -12px;
	}

	.scp-cert-badge-rating {
		bottom: -12px;
		left: -12px;
	}

	/* Stats bar - tablet adjustments */
	.scp-stats-inner {
		padding: 0 20px;
	}

	.scp-stat-item {
		padding: 28px 16px;
	}

	.scp-stat-num {
		font-size: clamp(28px, 4vw, 32px);
	}

	.scp-stat-lbl {
		font-size: clamp(13px, 2.5vw, 14px);
	}

	/* Typography scaling */
	h1, .scp-hero h1, .scp-archive-hero h1, .verification-hero h1, .scp-hero-title-global {
		font-size: clamp(24px, 5vw, 32px);
	}

	h2, .scp-section-title {
		font-size: clamp(20px, 4vw, 28px);
	}

	h3 {
		font-size: clamp(18px, 3.5vw, 24px);
	}

	p, .scp-hero-sub, .scp-hero p {
		font-size: clamp(14px, 2.5vw, 16px);
	}

	/* Grid adjustments */
	.scp-cat-grid,
	.scp-testi-grid,
	.scp-difficulty-grid,
	.scp-archive-grid {
		grid-template-columns: 1fr;
	}

	.scp-activity-grid,
	.scp-cert-preview-inner {
		grid-template-columns: 1fr;
	}

	.scp-pricing-grid {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
}

/* Mobile Small (575px and below) */
@media (max-width: 575px) {
	.scp-container,
	.scp-archive-wrapper,
	.site-footer__container {
		padding: 0 16px;
	}


	/* Verification page specific fixes */
	.verification-search {
		margin: 0 16px 30px;
	}

	.verification-search-card {
		flex-direction: column;
		padding: 12px;
		border-radius: 16px;
	}

	.verification-search .search-form {
		flex-direction: column;
		width: 100%;
	}

	.verification-search .search-input {
		width: 100%;
		padding: 14px 16px;
	}

	.verification-search .search-btn {
		width: 100%;
		padding: 14px 20px;
		margin-top: 8px;
	}

	.verification-main {
		margin: 0 16px;
	}

	.verification-result {
		padding: 32px 20px;
	}

	/* Certificate info mobile improvements */
	.certificate-info {
		gap: 16px;
		width: 100%;
	}

	.info-row {
		padding: 16px 20px;
		max-width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.info-row .label {
		font-size: 12px;
	}

	.info-row .value {
		font-size: 16px;
	}

	.info-row .value.passed {
		font-size: 18px;
	}

	/* Hide floating badges on mobile to prevent header clipping */
	.scp-cert-badge-float {
		display: none;
	}

	/* Stats bar - stack vertically on mobile */
	.scp-stats-inner {
		flex-direction: column;
		padding: 0 16px;
	}

	.scp-stat-item {
		padding: 24px 16px;
		border-right: none;
		border-bottom: 1px solid var(--gray-200);
	}

	.scp-stat-item:last-child {
		border-bottom: none;
	}

	.scp-stat-num {
		font-size: clamp(24px, 5vw, 32px);
	}

	.scp-stat-lbl {
		font-size: clamp(12px, 2.5vw, 14px);
	}

	/* Hero sections padding reduction */
	/* Certificate card sizing */
	.scp-cert-card {
		max-width: 100%;
	}

	/* Info rows stack vertically */
	.info-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* Buttons full width on mobile */
	.scp-btn,
	.scp-hero-ctas .scp-btn,
	.verification-actions .back-btn,
	.verification-actions .print-btn {
		width: 100%;
		justify-content: center;
	}

	/* Sidebar full width */
	.scp-sidebar {
		width: 100%;
		margin-top: 24px;
	}

	.scp-card-sidebar {
		position: static;
	}
}

/* ========================================
   SPECIFIC FIXES FOR FIXED WIDTHS
   ======================================== */

/* Verification page blobs - make responsive */
@media (max-width: 575px) {
	.verification-hero-blob1,
	.verification-hero-blob2,
	.scp-hub-blob1,
	.scp-hub-blob2,
	.scp-difficulty-blob1,
	.scp-difficulty-blob2 {
		width: 300px;
		height: 300px;
	}
}

/* Question page blobs */
@media (max-width: 575px) {
	.scp-archive-blob1,
	.scp-archive-blob2,
	.scp-single-blob1,
	.scp-single-blob2 {
		width: 200px;
		height: 200px;
	}
}

/* ========================================
   TYPOGRAPHY IMPROVEMENTS
   ======================================== */

/* Use relative units for better scaling */
@media (max-width: 767px) {
	.scp-card-title {
		font-size: clamp(14px, 3vw, 16px);
	}

	.scp-card-content {
		font-size: clamp(13px, 2.5vw, 15px);
	}

	.scp-stat-num {
		font-size: clamp(24px, 5vw, 32px);
	}

	.scp-stat-lbl {
		font-size: clamp(12px, 2.5vw, 14px);
	}

	.login-modal__title {
		font-size: clamp(20px, 4vw, 24px);
	}

	.login-modal__subtitle {
		font-size: clamp(14px, 2.5vw, 16px);
	}
}

/* ========================================
   FORM & INPUT RESPONSIVENESS
   ======================================== */

@media (max-width: 575px) {
	.scp-search-box-global {
		flex-direction: column;
		padding: 12px;
		border-radius: 16px;
	}

	.scp-search-input-global {
		width: 100%;
		padding: 14px 16px;
	}

	.scp-search-btn {
		width: 100%;
		padding: 14px 20px;
	}

	.scp-clear-search {
		width: 100%;
	}

	/* Modal inputs */
	.login-modal__input {
		padding: 14px 16px;
		font-size: 16px; /* Prevents zoom on iOS */
	}
}

/* ========================================
   NAVIGATION IMPROVEMENTS
   ======================================== */

@media (max-width: 575px) {
	.site-header__inner {
		padding: 0 16px;
	}

	.mobile-menu {
		padding: 16px;
	}

	.mobile-menu__link {
		padding: 16px;
		font-size: 16px;
	}

	.mobile-menu__auth {
		flex-direction: column;
	}

	.mobile-menu__auth .btn {
		width: 100%;
	}
}

/* ========================================
   TABLE RESPONSIVENESS
   ======================================== */

@media (max-width: 767px) {
	.data-table,
	.scp-table {
		font-size: 14px;
	}

	.data-table th,
	.data-table td,
	.scp-table th,
	.scp-table td {
		padding: 12px 8px;
	}

	/* Allow horizontal scroll for tables on mobile */
	.data-table-wrapper,
	.scp-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ========================================
   FOOTER RESPONSIVENESS
   ======================================== */

@media (max-width: 575px) {
	.site-footer {
		padding: 48px 0 24px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}

	.site-footer__brand {
		grid-column: 1;
	}

	.site-footer__logo {
		justify-content: center;
	}

	.site-footer__social {
		justify-content: center;
	}

	.site-footer__col {
		align-items: center;
	}

	.site-footer__desc {
		margin: 0 auto 20px;
		text-align: center;
	}

	.site-footer__bottom {
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}
}

/* ========================================
   PLUGIN COMPATIBILITY
   ======================================== */

/* Ensure plugin exam runner is responsive */
body.exam-runner-page .scp-exam-container {
	padding: 0 16px 40px;
}

@media (max-width: 767px) {
	body.exam-runner-page .scp-exam-hero {
		padding: 60px 0 20px;
	}

	body.exam-runner-page .scp-exam-hero h1 {
		font-size: clamp(24px, 5vw, 32px);
	}

	body.exam-runner-page .scp-exam-hero p {
		font-size: clamp(14px, 2.5vw, 16px);
	}

	body.exam-runner-page .scp-exam-main .scp-card {
		padding: 24px 16px;
	}

	#question-title {
		font-size: clamp(18px, 4vw, 22px);
	}

	#options button {
		padding: 16px;
		font-size: 15px;
	}

	#next {
		width: 100%;
		padding: 16px 24px;
	}
}

/* Certificate page responsive */
@media (max-width: 767px) {
	.certificate-container {
		padding: 20px;
	}

	.certificate-content {
		padding: 24px 20px;
	}

	.certificate-border {
		border-width: 4px;
	}

	.certificate-title h2 {
		font-size: clamp(20px, 5vw, 28px);
	}

	.recipient-name,
	.premium-name {
		font-size: clamp(20px, 5vw, 26px);
	}
}

/* Payment page responsive */
@media (max-width: 767px) {
	.payment-page {
		padding: 20px 16px;
	}

	.payment-card {
		padding: 24px 20px;
	}

	.payment-header h1 {
		font-size: clamp(24px, 5vw, 32px);
	}

	.order-summary {
		padding: 16px;
	}

	.pay-btn {
		padding: 16px 24px;
		font-size: 16px;
	}
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.scp-card,
	.scp-btn,
	.scp-badge {
		border-width: 2px;
	}
}