/**
 * Mobile Responsiveness - Additional Styles
 * 
 * Breakpoints:
 * - Mobile: max-width: 768px
 * - Tablet: 769px - 1024px
 * - Desktop: min-width: 1025px
 *
 * @package Together_Job_Board
 */

/* ============================================
   Global Mobile Adjustments
   ============================================ */

@media (max-width: 768px) {
	/* Ensure all containers have proper padding */
	.together-page,
	.tjb-page-content {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Improve touch targets */
	button,
	a,
	input[type="button"],
	input[type="submit"],
	.tjb-button {
		min-height: 44px; /* Minimum touch target size */
		min-width: 44px;
	}

	/* Better font sizes for readability */
	body {
		font-size: 16px; /* Prevents zoom on iOS */
	}

	/* Improve form inputs */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px; /* Prevents zoom on iOS */
		min-height: 44px;
	}
}

/* ============================================
   Job Listings Page - Additional Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	/* Category Filter Buttons */
	.tjb-category-filters-wrapper {
		padding: 15px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tjb-category-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 5px;
		-webkit-overflow-scrolling: touch;
	}

	.tjb-category-filter-tab {
		font-size: 13px;
		padding: 8px 20px;
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Job List Header Actions */
	.tjb-jobs-list-actions {
		flex-wrap: wrap;
		gap: 10px;
		width: 100%;
	}

	.tjb-filter-toggle-button,
	.tjb-sort-button,
	.tjb-create-alert-button-header {
		flex: 1 1 auto;
		min-width: calc(50% - 5px);
		justify-content: center;
		font-size: 13px;
		padding: 12px 16px;
	}

	.tjb-jobs-list-title {
		font-size: 1.5rem;
	}

	.tjb-jobs-count-badge {
		font-size: 0.75rem;
		padding: 3px 10px;
	}

	/* Job Card Title Wrapper */
	.tjb-job-card-title-wrapper {
		flex-wrap: wrap;
		gap: 12px;
	}

	.tjb-job-company-logo-placeholder {
		width: 50px;
		height: 50px;
	}

	.tjb-company-logo-letter {
		font-size: 20px;
	}

	.tjb-job-title-section {
		flex: 1 1 100%;
		min-width: 0;
	}

	.tjb-job-card-title {
		font-size: 16px;
		width: 100%;
	}

	.tjb-featured-badge {
		font-size: 10px;
		padding: 3px 8px;
	}

	.tjb-job-bookmark-top {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	/* Job Card Meta Info */
	.tjb-job-card-meta-info {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.tjb-job-meta-item {
		font-size: 13px;
	}

	/* Job Cards */
	.tjb-job-card {
		padding: 20px 15px;
	}

	.tjb-job-card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tjb-job-card-title {
		font-size: 1.125rem;
		line-height: 1.4;
	}

	.tjb-job-card-meta {
		font-size: 0.875rem;
	}

	.tjb-job-card-tags {
		flex-wrap: wrap;
		gap: 8px;
	}

	.tjb-job-tag {
		font-size: 0.75rem;
		padding: 4px 10px;
	}

	.tjb-apply-now-button {
		width: 100%;
		padding: 12px;
		font-size: 0.9375rem;
	}

	/* Job Details Column */
	.tjb-job-details-column {
		position: static !important;
		width: 100% !important;
		padding: 0;
		margin-top: 30px;
	}

	.tjb-job-detail-section {
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.tjb-job-detail-section-title {
		font-size: 1rem;
		margin-bottom: 12px;
	}

	.tjb-job-detail-actions {
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.tjb-apply-button {
		width: 100%;
		padding: 14px;
		font-size: 1rem;
	}
}

/* ============================================
   Filter Sidebar - Mobile Styles
   ============================================ */

@media (max-width: 1024px) {
	.tjb-filter-sidebar {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		max-width: 400px;
		height: 100vh;
		background: #fff;
		z-index: 9999;
		transition: right 0.3s ease;
		overflow-y: auto;
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	}

	.tjb-filter-sidebar.active {
		right: 0;
	}

	.tjb-filter-sidebar-overlay {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9998;
	}

	body.tjb-filter-sidebar-open {
		overflow: hidden;
	}
}

@media (max-width: 768px) {
	.tjb-filter-sidebar {
		max-width: 100%;
		width: 100%;
	}

	.tjb-filter-sidebar-header {
		padding: 20px 15px;
	}

	.tjb-filter-section {
		padding: 15px;
	}

	.tjb-filter-section-title {
		font-size: 1rem;
	}

	.tjb-filter-option {
		font-size: 0.9375rem;
		padding: 12px;
	}
}

/* ============================================
   Candidates Listing - Mobile Styles
   ============================================ */

@media (max-width: 992px) {
	.tjb-listings-container {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px 15px;
	}

	.tjb-listings-sidebar {
		position: static;
		width: 100%;
		max-width: 100%;
	}

	.tjb-candidates-listing .tjb-listings-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}
}

@media (max-width: 768px) {
	.tjb-candidate-card-horizontal {
		padding: 20px 15px;
	}

	.tjb-candidate-card-horizontal .tjb-candidate-card-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 15px;
	}

	.tjb-card-avatar-wrapper {
		margin-bottom: 0;
	}

	.tjb-card-avatar-circular {
		width: 100px;
		height: 100px;
	}

	.tjb-card-header-info,
	.tjb-card-field,
	.tjb-card-details {
		text-align: center;
		width: 100%;
	}

	.tjb-card-detail-item {
		justify-content: center;
	}

	.tjb-view-profile-button {
		width: 100%;
		padding: 14px;
		font-size: 1rem;
	}

	.tjb-listings-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.tjb-listings-count {
		font-size: 0.9375rem;
	}
}

/* ============================================
   Dashboard - Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	.tjb-dashboard-stat-card {
		padding: 20px 15px;
	}

	.tjb-dashboard-stat-value {
		font-size: 2rem;
	}

	.tjb-dashboard-stat-label {
		font-size: 0.875rem;
	}

	.tjb-quick-action-card {
		padding: 20px 15px;
	}

	.tjb-table {
		font-size: 0.875rem;
	}

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

	/* Hide less important columns on mobile */
	.tjb-table .tjb-table-col-date {
		display: none;
	}

	/* Make tables scrollable */
	.tjb-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================
   Forms - Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	.tjb-form-group {
		margin-bottom: 20px;
	}

	.tjb-form-label {
		font-size: 0.9375rem;
		margin-bottom: 8px;
		display: block;
	}

	.tjb-form-input,
	.tjb-form-textarea,
	.tjb-form-select {
		width: 100%;
		font-size: 16px; /* Prevents zoom on iOS */
		padding: 12px;
		min-height: 44px;
	}

	.tjb-form-row {
		flex-direction: column;
		gap: 20px;
	}

	.tjb-form-row .tjb-form-group {
		flex: 1 1 100%;
		width: 100%;
	}

	.tjb-form-actions {
		flex-direction: column;
		gap: 15px;
	}

	.tjb-form-actions .tjb-button {
		width: 100%;
		padding: 14px;
		font-size: 1rem;
	}
}

/* ============================================
   Submit Job Form - Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	.tjb-submit-job-form {
		padding: 20px 15px;
	}

	.tjb-form-section {
		margin-bottom: 30px;
		padding: 20px 15px;
	}

	.tjb-form-section-title {
		font-size: 1.25rem;
		margin-bottom: 20px;
	}

	/* Rich text editor adjustments */
	.wp-editor-container {
		font-size: 16px;
	}

	/* File upload buttons */
	.tjb-file-upload-button {
		width: 100%;
		padding: 14px;
		font-size: 0.9375rem;
	}
}

/* ============================================
   Packages Page - Mobile Styles
   ============================================ */

@media (max-width: 1024px) {
	.tjb-packages-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.tjb-packages-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.tjb-package-card {
		padding: 25px 20px;
	}

	.tjb-package-title {
		font-size: 1.5rem;
	}

	.tjb-package-price {
		font-size: 2rem;
	}

	.tjb-package-features {
		margin: 20px 0;
	}

	.tjb-package-feature {
		font-size: 0.9375rem;
		padding: 10px 0;
	}

	.tjb-package-button {
		width: 100%;
		padding: 14px;
		font-size: 1rem;
	}
}

/* ============================================
   Profile Pages - Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	.tjb-profile-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 20px;
		padding: 30px 20px;
	}

	.tjb-profile-avatar {
		width: 120px;
		height: 120px;
	}

	.tjb-profile-info {
		width: 100%;
	}

	.tjb-profile-name {
		font-size: 1.5rem;
	}

	.tjb-profile-tabs {
		flex-wrap: wrap;
		gap: 10px;
	}

	.tjb-profile-tab {
		flex: 1 1 auto;
		min-width: calc(50% - 5px);
		padding: 12px 16px;
		font-size: 0.9375rem;
	}

	.tjb-profile-content {
		padding: 20px 15px;
	}
}

/* ============================================
   Messages - Mobile Styles
   ============================================ */

@media (max-width: 1024px) {
	.tjb-messages-layout {
		grid-template-columns: 1fr;
	}

	.tjb-messages-list {
		border-right: none;
		border-bottom: 1px solid #e0e0e0;
		max-height: 400px;
		overflow-y: auto;
	}

	.tjb-message-conversation {
		height: auto;
		min-height: 500px;
	}
}

@media (max-width: 768px) {
	.tjb-message-item {
		padding: 15px;
	}

	.tjb-message-avatar {
		width: 40px;
		height: 40px;
	}

	.tjb-message-content {
		margin-left: 50px;
	}

	.tjb-message-input-area {
		flex-direction: column;
		gap: 10px;
	}

	.tjb-message-input {
		width: 100%;
		min-height: 80px;
	}

	.tjb-message-send-button {
		width: 100%;
		padding: 14px;
	}
}

/* ============================================
   Applicants Page - Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	.tjb-applicant-card {
		padding: 20px 15px;
	}

	.tjb-applicant-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.tjb-applicant-avatar {
		width: 80px;
		height: 80px;
	}

	.tjb-applicant-actions {
		width: 100%;
		flex-direction: column;
		gap: 10px;
	}

	.tjb-applicant-action-button {
		width: 100%;
		padding: 12px;
		font-size: 0.9375rem;
	}
}

/* ============================================
   Header - Additional Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	.header-container {
		padding: 15px 20px;
	}

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

	.account-menu-trigger {
		padding: 8px 12px;
		font-size: 0.875rem;
	}

	.account-menu-trigger .account-avatar {
		width: 28px;
		height: 28px;
	}

	.nav-menu {
		width: 100%;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		padding: 20px;
	}

	.nav-menu a {
		padding: 15px 0;
		font-size: 1rem;
		border-bottom: 1px solid #f0f0f0;
	}
}

/* ============================================
   Footer - Additional Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	.together-footer {
		padding: 40px 0 20px;
	}

	.footer-cta-section {
		padding: 40px 20px;
	}

	.footer-cta-title {
		font-size: 1.75rem;
		margin-bottom: 15px;
	}

	.footer-cta-description {
		font-size: 0.9375rem;
		margin-bottom: 25px;
	}

	.footer-cta-buttons {
		flex-direction: column;
		gap: 15px;
	}

	.footer-cta-button {
		width: 100%;
		padding: 14px 24px;
		font-size: 0.9375rem;
	}

	.footer-column {
		margin-bottom: 30px;
	}

	.footer-column-title {
		font-size: 1.125rem;
		margin-bottom: 15px;
	}

	.footer-links li {
		margin-bottom: 10px;
	}

	.footer-links a {
		font-size: 0.9375rem;
		padding: 8px 0;
	}
}

/* ============================================
   Page Headers - Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	.page-header {
		padding: 40px 20px 30px !important;
	}

	.page-title {
		font-size: 1.75rem !important;
		line-height: 1.3;
	}

	.page-header-inner {
		padding: 0 15px;
	}
}

/* ============================================
   Homepage Sections - Additional Mobile Styles
   ============================================ */

@media (max-width: 768px) {
	/* What it is / What it isn't */
	.what-box {
		padding: 30px 20px;
		min-height: auto;
	}

	.what-box-title {
		font-size: 1.5rem;
		margin-bottom: 20px;
	}

	.what-box-item {
		font-size: 0.9375rem;
		padding: 10px 0;
	}

	/* Registration Cards */
	.registration-card {
		padding: 25px 20px;
	}

	.card-title {
		font-size: 1.125rem;
	}

	.card-description {
		font-size: 0.875rem;
	}

	/* How Access Works */
	.access-card {
		padding: 25px 20px;
	}

	.access-card-title {
		font-size: 1.25rem;
	}

	.access-card-item {
		font-size: 0.9375rem;
		padding: 10px 0;
	}

	/* Platform Snapshot */
	.snapshot-card {
		padding: 25px 20px;
	}

	.snapshot-card-value {
		font-size: 2rem;
	}

	.snapshot-card-label {
		font-size: 0.9375rem;
	}

	/* Testimonials */
	.testimonial-card {
		padding: 25px 20px;
	}

	.testimonial-quote {
		font-size: 1rem;
		line-height: 1.6;
	}

	.testimonial-author {
		font-size: 0.9375rem;
	}

	/* News/Blog Grid */
	.news-card {
		padding: 20px;
	}

	.news-card-title {
		font-size: 1.125rem;
	}

	.news-card-excerpt {
		font-size: 0.875rem;
	}
}

/* ============================================
   Utility Classes for Mobile
   ============================================ */

@media (max-width: 768px) {
	.mobile-hide {
		display: none !important;
	}

	.mobile-show {
		display: block !important;
	}

	.mobile-full-width {
		width: 100% !important;
		max-width: 100% !important;
	}

	.mobile-text-center {
		text-align: center !important;
	}

	.mobile-padding {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.mobile-no-padding {
		padding: 0 !important;
	}

	.mobile-margin-bottom {
		margin-bottom: 20px !important;
	}
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
	.tjb-filter-sidebar,
	.tjb-jobs-list-actions,
	.tjb-apply-button,
	button,
	.tjb-button {
		display: none !important;
	}

	.tjb-job-card,
	.tjb-job-details-column {
		page-break-inside: avoid;
	}
}