/**
 * Responsive Styles for Tribal Edge Theme
 *
 * @package Tribal_Edge
 */

/* ============================================
   Tablet Styles (768px - 1023px)
   ============================================ */
@media screen and (max-width: 1023px) {
	.hero-section {
		height: 640px; /* Slightly smaller but maintain column proportions */
	}

	/* Ensure columns match hero height exactly */
	.hero-column-left img,
	.hero-column-right img {
		height: 100% !important;
		width: auto !important;
	}

	/* Calculate column width: (276/682) * 640 = ~259px */
	.hero-overlay {
		padding-left: calc(2rem + 259px); /* Column width proportional to height */
		padding-right: calc(2rem + 259px);
	}

	.hero-tagline-image img {
		width: 62vw;
		max-width: 90%;
	}

	.hero-headline {
		font-size: 2.5rem;
	}

	.hero-subheadline {
		font-size: 1.2rem;
	}

	.about-text {
		width: 60%;
		padding: 2.5rem;
	}

	.featured-products-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 1.5rem;
	}

	/* Footer - Tablet */
	.footer-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
		max-width: 800px;
	}
}

/* ============================================
   Mobile Styles (max-width: 767px)
   ============================================ */
@media screen and (max-width: 767px) {
	html {
		font-size: 14px;
	}

	/* Header */
	.site-header {
		padding: 1rem 0;
	}

	.logo-section {
		padding: 1rem 0;
	}

	.logo-container {
		padding: 0 1rem;
	}

	.nav-container {
		padding: 0 1rem;
	}

	.site-logo {
		max-width: 280px;
	}

	/* Hero Section */
	.hero-section {
		height: 500px; /* Smaller but maintain aspect ratio */
	}

	.hero-tagline-image img {
		width: 62vw;
		max-width: 85%;
	}

	/* Keep columns visible on mobile - they will scale proportionally with height */
	.hero-column-left img,
	.hero-column-right img {
		height: 100% !important; /* Match hero section height exactly */
		width: auto !important; /* Width scales proportionally */
	}

	/* Calculate column width based on aspect ratio: 276px width at 682px height */
	/* At 500px height: (276/682) * 500 = ~202px */
	.hero-overlay {
		padding: 2rem 1rem !important;
		padding-left: calc(1rem + 202px) !important; /* Account for column width at 500px height */
		padding-right: calc(1rem + 202px) !important;
	}

	.site-title {
		font-size: 1.5rem;
	}

	.menu-toggle {
		display: block;
		order: -1;
		align-self: flex-end;
	}

	.main-navigation {
		width: 100%;
		justify-content: center;
	}

	.nav-menu {
		flex-direction: column;
		width: 100%;
		gap: 0;
		display: none;
	}

	.nav-menu.active {
		display: flex;
	}

	.nav-menu li {
		width: 100%;
		border-bottom: 1px solid rgba(184, 134, 11, 0.3);
	}

	.nav-menu a {
		display: block;
		padding: 1rem;
		text-align: center;
	}

	.nav-menu a::after {
		display: none;
	}

	/* Hero Section */
	.hero-section {
		min-height: 60vh;
	}

	.hero-overlay {
		padding: 2rem 1rem;
	}

	.hero-frames {
		flex-direction: column;
		gap: 1rem;
	}

	.hero-frame-left,
	.hero-frame-right {
		display: none;
	}

	.hero-headline {
		font-size: 1.8rem;
		letter-spacing: 1px;
		line-height: 1.3;
	}

	.hero-subheadline {
		font-size: 1rem;
	}

	.hero-cta-button {
		min-width: 380px; /* Slightly smaller but maintain aspect ratio */
		max-width: 550px; /* Consistent max width */
		padding: 0.75rem 2.5rem;
		font-size: 0.95rem; /* Keep font size consistent */
		background-size: 100% 100%; /* Maintain aspect ratio */
		aspect-ratio: 700 / 245; /* Maintain banner aspect ratio */
	}

	/* Featured Work */
	.featured-work-section,
	.about-section,
	.facebook-feed-section {
		padding: 3rem 1rem;
	}

	/* Facebook Feed */
	.facebook-feed-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.section-title {
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}

	.featured-products-grid,
	.facebook-feed-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Workshops Section */
	.workshops-section {
		padding: 3rem 1rem;
	}

	.workshops-video-wrapper {
		margin: 2rem auto 3rem;
	}

	.workshops-paragraph {
		font-size: 1rem;
		margin-bottom: 1.25rem;
	}

	.workshops-cta-button {
		min-width: 380px;
		font-size: 0.95rem;
	}

	/* About Section */
	.about-text {
		position: relative;
		width: 100%;
		height: auto;
		padding: 2rem;
		background: rgba(244, 232, 208, 0.95);
		border-radius: 10px;
		margin-top: 1rem;
	}

	.about-text .section-title {
		text-align: center;
	}

	.about-description {
		font-size: 1rem;
	}

	/* Footer */
	.site-footer {
		padding: 2rem 1rem 1rem;
	}

	.footer-columns {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}

	.footer-title {
		font-size: 1rem;
		text-align: center;
	}

	.social-media-links {
		justify-content: center;
	}

	.newsletter-form {
		flex-direction: row;
		max-width: 300px;
		margin: 0 auto;
	}

	.newsletter-form input[type="email"] {
		width: 100%;
	}

	.newsletter-submit {
		flex-shrink: 0;
	}

	/* Typography */
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	h4 { font-size: 1.25rem; }
	h5 { font-size: 1.1rem; }
	h6 { font-size: 1rem; }

	/* Content */
	.site-main {
		padding: 1rem 0;
	}

	.container {
		padding: 0 1rem;
	}
}

/* ============================================
   Small Mobile Styles (max-width: 480px)
   ============================================ */
@media screen and (max-width: 480px) {
	.hero-headline {
		font-size: 1.5rem;
		letter-spacing: 0.5px;
	}

	.hero-subheadline {
		font-size: 0.9rem;
	}

	.section-title {
		font-size: 1.5rem;
	}

	.product-title {
		font-size: 1.1rem;
		padding: 1rem;
	}

	.footer-title {
		font-size: 1rem;
	}

	.hero-cta-button {
		min-width: 320px; /* Minimum width, maintain aspect ratio */
		max-width: 90vw; /* Don't exceed viewport */
		padding: 0.7rem 2rem;
		font-size: 0.9rem; /* Keep font size consistent */
		background-size: 100% 100%; /* Maintain aspect ratio */
		aspect-ratio: 700 / 245; /* Maintain banner aspect ratio */
	}

	/* Workshops Section */
	.workshops-section {
		padding: 2rem 1rem;
	}

	.workshops-video-wrapper {
		margin: 1.5rem auto 2rem;
	}

	.workshops-paragraph {
		font-size: 0.95rem;
		margin-bottom: 1rem;
	}

	.workshops-cta-button {
		min-width: 320px;
		max-width: 90vw;
		font-size: 0.9rem;
	}

	/* Hide columns only on super small mobile */
	.hero-column-left,
	.hero-column-right {
		display: none;
	}

	.hero-overlay {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
	.site-header,
	.site-footer,
	.hero-section,
	.menu-toggle {
		display: none;
	}

	body {
		background: white;
		color: black;
	}

	a {
		color: black;
		text-decoration: underline;
	}
}

/* ============================================
   Accessibility Improvements
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}