/**
 * BOfferly Responsive Styles
 *
 * Mobile-first responsive adjustments for all screen sizes.
 * Breakpoints:
 * - Mobile Small: up to 480px
 * - Mobile Large: 481px - 767px
 * - Tablet: 768px - 1023px
 * - Desktop Small: 1024px - 1279px
 * - Desktop Large: 1280px - 1439px
 * - Desktop XL: 1440px and up
 *
 * @package BOfferly
 * @since   1.0.0
 */

/* ============================================
   DESKTOP XL (1440px and up)
   ============================================ */
@media screen and (min-width: 1440px) {
	.container {
		max-width: 1360px;
	}

	.hero-title {
		font-size: 4.5rem;
	}

	.hero-description {
		font-size: 1.3rem;
	}

	.cards-grid.four-columns {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================
   DESKTOP LARGE (1280px - 1439px)
   ============================================ */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
	.container {
		max-width: 1220px;
	}
}

/* ============================================
   DESKTOP SMALL / LAPTOP (1024px - 1279px)
   ============================================ */
@media screen and (max-width: 1279px) {
	.container {
		padding: 0 1.15rem;
	}

	.content-area,
	.content-area.with-sidebar {
		grid-template-columns: 1fr 280px;
		gap: 2rem;
	}

	.donation-cta-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.donation-pattern {
		right: -150px;
		opacity: 0.5;
	}

	.mega-panel {
		width: 95vw;
	}
}

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */
@media screen and (max-width: 1023px) {
	/* Container */
	.container {
		padding: 0 1rem;
	}

	/* Typography */
	h1 { font-size: 2.25rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.35rem; }

	/* Header - Hide desktop navigation, show mobile toggle */
	.desktop-navigation {
		display: none;
	}

	.mobile-menu-toggle {
		display: inline-flex;
	}

	.header-inner {
		gap: 1rem;
	}

	.site-branding {
		flex: 1;
	}

	/* Hero */
	.hero-section {
		min-height: auto;
		padding: 5rem 0 4rem;
	}

	.hero-title {
		font-size: 2.75rem;
	}

	.hero-description {
		font-size: 1.05rem;
	}

	.hero-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}

	.hero-scroll-indicator {
		display: none;
	}

	/* Sections */
	.home-section {
		padding: 3.5rem 0;
	}

	.section-header.with-view-all {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Layout - Stack sidebar below content */
	.content-area,
	.content-area.with-sidebar {
		grid-template-columns: 1fr;
	}

	.site-sidebar {
		position: static;
		margin-top: 2rem;
	}

	/* Grids */
	.cards-grid.three-columns {
		grid-template-columns: repeat(2, 1fr);
	}

	.cards-grid.four-columns {
		grid-template-columns: repeat(2, 1fr);
	}

	.tools-grid,
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Donation */
	.donation-cta-wrapper {
		padding: 2.5rem;
	}

	.donation-pattern {
		display: none;
	}

	.donation-amounts {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Membership */
	.membership-tier-card.tier-highlighted {
		transform: none;
	}

	/* Profile */
	.profile-header-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0 1.5rem 2rem;
		margin-top: -60px;
	}

	.profile-info {
		align-items: center;
		padding-bottom: 0;
	}

	.profile-badges {
		justify-content: center;
	}

	.profile-actions {
		margin-left: 0;
		margin-top: 1rem;
	}

	/* Dashboard */
	.dashboard-header,
	.settings-header,
	.bookmarks-header,
	.notes-header,
	.history-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.dashboard-actions {
		width: 100%;
	}

	/* Search overlay */
	.search-overlay-inner {
		padding: 1.5rem;
	}

	.search-overlay-content {
		padding: 2rem 0;
	}

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

	/* Footer */
	.footer-widgets-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Settings */
	.form-grid.two-columns {
		grid-template-columns: 1fr;
	}

	/* Notes toolbar */
	.notes-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.notes-search-form {
		max-width: none;
	}

	/* History items */
	.history-item-inner,
	.continue-reading-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.history-thumbnail,
	.continue-thumbnail {
		width: 100%;
		height: 180px;
	}

	/* Auth */
	.auth-card {
		padding: 2rem;
	}
}

/* ============================================
   MOBILE LARGE (481px - 767px)
   ============================================ */
@media screen and (max-width: 767px) {
	/* Container */
	.container {
		padding: 0 0.85rem;
	}

	/* Typography */
	h1 { font-size: 1.85rem; }
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.2rem; }

	body {
		font-size: 15px;
	}

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

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

	.logo-tagline {
		display: none;
	}

	.header-actions {
		gap: 0.25rem;
	}

	/* Top bar */
	.top-bar {
		font-size: 0.75rem;
		padding: 0.4rem 0;
	}

	.top-bar-inner {
		flex-direction: column;
		gap: 0.5rem;
	}

	.top-bar-left,
	.top-bar-right {
		width: 100%;
		justify-content: center;
	}

	/* Hero */
	.hero-section {
		padding: 3.5rem 0 3rem;
	}

	.hero-title {
		font-size: 2rem;
	}

	.hero-description {
		font-size: 0.95rem;
	}

	.hero-badge {
		font-size: 0.75rem;
		padding: 0.4rem 0.85rem;
	}

	.hero-search-input-group {
		flex-direction: column;
		align-items: stretch;
		padding: 0.5rem;
		gap: 0.5rem;
	}

	.hero-search-icon {
		display: none;
	}

	.hero-search-input {
		padding: 0.75rem 1rem;
	}

	.hero-search-submit {
		width: 100%;
	}

	.hero-cta-buttons {
		flex-direction: column;
		width: 100%;
	}

	.hero-cta-buttons .btn {
		width: 100%;
	}

	.hero-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		padding-top: 1.5rem;
	}

	.stat-number {
		font-size: 1.35rem;
	}

	.stat-label {
		font-size: 0.75rem;
	}

	/* Sections */
	.home-section {
		padding: 3rem 0;
	}

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

	.section-description {
		font-size: 0.9rem;
	}

	/* All grids - single column */
	.cards-grid.two-columns,
	.cards-grid.three-columns,
	.cards-grid.four-columns,
	.tools-grid,
	.feature-grid,
	.related-content-grid,
	.related-grid,
	.bookmarks-grid,
	.notes-grid,
	.profile-details-grid,
	.daily-feed-grid,
	.membership-tiers-grid {
		grid-template-columns: 1fr;
	}

	/* Cards */
	.card-body {
		padding: 1.25rem;
	}

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

	/* Islamic content */
	.ayah-arabic-text,
	.dua-arabic-text {
		font-size: 1.35rem;
		padding: 1.25rem;
	}

	.hadith-arabic-text {
		font-size: 1.15rem;
		padding: 1rem;
	}

	.ayah-card,
	.dua-card,
	.hadith-card {
		padding: 1.25rem;
	}

	.ayah-card-footer,
	.dua-card-footer,
	.hadith-card-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.ayah-actions,
	.dua-actions,
	.hadith-actions {
		width: 100%;
	}

	.ayah-action-button,
	.dua-action-button,
	.hadith-action-button {
		flex: 1;
		justify-content: center;
	}

	.read-full-link {
		justify-content: center;
		padding-top: 0.75rem;
		border-top: 1px solid var(--bofferly-border);
	}

	/* Prayer times */
	.prayer-times-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.prayer-times-widget {
		padding: 1.25rem;
	}

	.prayer-times-location {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Donation */
	.donation-cta-wrapper {
		padding: 1.75rem;
	}

	.donation-cta-buttons {
		flex-direction: column;
	}

	.donation-cta-buttons .btn {
		width: 100%;
	}

	.donation-trust {
		flex-direction: column;
		gap: 0.5rem;
	}

	.donation-amounts {
		grid-template-columns: repeat(2, 1fr);
	}

	.donation-card {
		padding: 1.5rem;
	}

	/* Membership */
	.membership-tier-card {
		padding: 1.75rem;
	}

	.price-amount {
		font-size: 2.5rem;
	}

	/* Newsletter */
	.newsletter-section .newsletter-wrapper {
		padding: 2rem 1.5rem;
	}

	.newsletter-input-group {
		flex-direction: column;
	}

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

	/* Footer */
	.footer-widgets-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.footer-widgets-area {
		padding: 2rem 0;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}

	.footer-menu {
		justify-content: center;
		gap: 1rem;
	}

	/* Breadcrumbs */
	.bofferly-breadcrumbs {
		padding: 0.75rem 0;
	}

	.breadcrumb-item {
		font-size: 0.75rem;
	}

	/* Pagination */
	.pagination-list {
		gap: 0.25rem;
	}

	.pagination-item a,
	.pagination-item span {
		min-width: 36px;
		height: 36px;
		font-size: 0.85rem;
		padding: 0 0.5rem;
	}

	.pagination-item.is-prev .nav-text,
	.pagination-item.is-next .nav-text {
		display: none;
	}

	/* Single article */
	.article-title {
		font-size: 1.5rem;
	}

	.article-meta {
		gap: 0.75rem;
		font-size: 0.85rem;
	}

	.article-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.5rem;
	}

	.author-info {
		text-align: center;
	}

	.post-nav-links {
		grid-template-columns: 1fr;
	}

	.post-nav-next {
		text-align: left;
	}

	/* Search */
	.search-result-inner {
		flex-direction: column;
		gap: 1rem;
	}

	.search-result-thumbnail {
		width: 100%;
		height: 180px;
	}

	.search-filters {
		padding: 1rem;
	}

	/* Popular hadith */
	.hadith-item-inner {
		flex-direction: column;
		gap: 1rem;
	}

	.hadith-rank {
		width: 40px;
		height: 40px;
	}

	.rank-number {
		font-size: 1.1rem;
	}

	/* Dashboard */
	.bofferly-dashboard-wrapper,
	.bofferly-profile-wrapper,
	.bofferly-bookmarks-wrapper,
	.bofferly-notes-wrapper,
	.bofferly-history-wrapper,
	.bofferly-settings-wrapper {
		padding: 1.5rem 1rem;
		gap: 1.5rem;
	}

	.dashboard-welcome {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.welcome-meta {
		justify-content: center;
	}

	.dashboard-actions {
		flex-direction: column;
	}

	.dashboard-actions .btn {
		width: 100%;
	}

	.dashboard-nav,
	.settings-tabs-nav,
	.bookmarks-filter-nav,
	.notes-filter-nav,
	.history-filter-nav {
		padding: 0.35rem;
	}

	.dashboard-nav-link,
	.tab-link,
	.filter-link {
		padding: 0.6rem 0.85rem;
		font-size: 0.85rem;
	}

	.dashboard-stats-grid,
	.profile-stats-grid,
	.history-stats-summary {
		grid-template-columns: 1fr;
	}

	.quick-actions-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Settings */
	.panel-inner {
		padding: 1.5rem;
	}

	/* Profile */
	.profile-avatar {
		width: 100px;
		height: 100px;
	}

	.profile-name {
		font-size: 1.35rem;
	}

	/* Modals */
	.modal-content {
		width: 95%;
		max-width: none;
		max-height: 95vh;
		margin: 0 auto;
	}

	.modal-header,
	.modal-body,
	.modal-footer {
		padding: 1rem 1.25rem;
	}

	.modal-footer {
		flex-direction: column-reverse;
	}

	.modal-footer .btn {
		width: 100%;
	}

	/* Auth */
	.bofferly-auth-wrapper {
		padding: 1rem;
		min-height: auto;
	}

	.auth-card {
		padding: 1.75rem 1.5rem;
	}

	.auth-title {
		font-size: 1.35rem;
	}

	.social-login-btn {
		font-size: 0.9rem;
		padding: 0.75rem 1rem;
	}

	/* Back to top */
	.bofferly-back-to-top {
		width: 42px;
		height: 42px;
		bottom: 1.25rem;
		right: 1.25rem;
	}

	.bofferly-back-to-top.position-bottom-left {
		left: 1.25rem;
		right: auto;
	}

	.continue-reading-btn {
		bottom: 4.5rem;
		right: 1.25rem;
		padding: 0.5rem 1rem;
		font-size: 0.8rem;
	}

	/* Reading progress */
	.reading-progress-info {
		top: 8px;
		right: 12px;
		padding: 0.25rem 0.6rem;
		font-size: 0.7rem;
	}

	/* Notes toolbar */
	.notes-search-submit {
		padding: 0.5rem 0.85rem;
	}

	/* Empty states */
	.empty-title,
	.no-results h2 {
		font-size: 1.25rem;
	}

	.empty-actions,
	.no-results .search-form {
		flex-direction: column;
		width: 100%;
		max-width: 300px;
	}

	.empty-actions .btn {
		width: 100%;
	}

	/* Related content */
	.related-body {
		padding: 1rem;
	}

	.related-card-title {
		font-size: 1rem;
	}

	/* Filter groups */
	.filter-group {
		flex-direction: column;
		align-items: flex-start;
	}

	.filter-terms {
		width: 100%;
	}
}

/* ============================================
   MOBILE SMALL (up to 480px)
   ============================================ */
@media screen and (max-width: 480px) {
	/* Container */
	.container {
		padding: 0 0.75rem;
	}

	/* Typography */
	h1 { font-size: 1.6rem; }
	h2 { font-size: 1.35rem; }
	h3 { font-size: 1.1rem; }

	body {
		font-size: 14px;
	}

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

	.logo-icon svg {
		width: 32px;
		height: 32px;
	}

	.logo-title {
		font-size: 1.1rem;
	}

	.header-actions {
		gap: 0.15rem;
	}

	.search-toggle,
	.mobile-menu-toggle,
	.bofferly-dark-mode-toggle {
		width: 34px;
		height: 34px;
	}

	/* Hero */
	.hero-section {
		padding: 2.5rem 0 2rem;
	}

	.hero-title {
		font-size: 1.65rem;
	}

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

	.hero-badge {
		font-size: 0.7rem;
		padding: 0.3rem 0.7rem;
	}

	.hero-stats {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.stat-number {
		font-size: 1.15rem;
	}

	.stat-label {
		font-size: 0.7rem;
	}

	/* Sections */
	.home-section {
		padding: 2.5rem 0;
	}

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

	.section-badge {
		font-size: 0.7rem;
		padding: 0.25rem 0.7rem;
	}

	/* Cards */
	.card-body {
		padding: 1rem;
	}

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

	/* Islamic content */
	.ayah-arabic-text,
	.dua-arabic-text {
		font-size: 1.2rem;
		padding: 1rem;
	}

	.hadith-arabic-text {
		font-size: 1.05rem;
	}

	.ayah-card,
	.dua-card,
	.hadith-card {
		padding: 1rem;
	}

	.ayah-action-button span,
	.dua-action-button span,
	.hadith-action-button span {
		display: none;
	}

	.ayah-action-button,
	.dua-action-button,
	.hadith-action-button {
		min-width: 42px;
		padding: 0.5rem;
	}

	/* Prayer times */
	.prayer-times-grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.prayer-time-card {
		padding: 1rem 0.75rem;
	}

	.prayer-time {
		font-size: 1.15rem;
	}

	.prayer-name {
		font-size: 0.7rem;
	}

	/* Tools & Features */
	.tools-grid,
	.feature-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.tool-card,
	.feature-card {
		padding: 1.25rem;
	}

	.tool-icon,
	.feature-icon {
		width: 48px;
		height: 48px;
	}

	/* Donation */
	.donation-cta-wrapper {
		padding: 1.25rem;
	}

	.donation-title {
		font-size: 1.35rem;
	}

	.donation-amounts {
		grid-template-columns: 1fr 1fr;
	}

	.donation-amount-btn {
		padding: 0.6rem;
		font-size: 0.9rem;
	}

	/* Membership */
	.membership-tier-card {
		padding: 1.5rem;
	}

	.tier-name {
		font-size: 1.35rem;
	}

	.price-amount {
		font-size: 2rem;
	}

	.tier-feature-item {
		font-size: 0.85rem;
	}

	/* Newsletter */
	.newsletter-title {
		font-size: 1.35rem;
	}

	.newsletter-icon {
		width: 64px;
		height: 64px;
	}

	/* Quick actions */
	.quick-actions-grid {
		grid-template-columns: 1fr;
	}

	.quick-action-card {
		flex-direction: row;
		text-align: left;
		padding: 1rem;
		gap: 1rem;
	}

	.quick-action-icon {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
	}

	/* Auth */
	.auth-card {
		padding: 1.5rem 1.25rem;
	}

	.auth-title {
		font-size: 1.2rem;
	}

	.social-login-btn {
		font-size: 0.85rem;
		padding: 0.7rem 0.9rem;
	}

	.social-login-btn svg {
		width: 16px;
		height: 16px;
	}

	/* Dashboard */
	.bofferly-dashboard-wrapper,
	.bofferly-profile-wrapper,
	.bofferly-bookmarks-wrapper,
	.bofferly-notes-wrapper,
	.bofferly-history-wrapper,
	.bofferly-settings-wrapper {
		padding: 1.25rem 0.75rem;
	}

	.welcome-avatar img {
		width: 48px;
		height: 48px;
	}

	.welcome-title {
		font-size: 1.2rem;
	}

	/* Profile */
	.profile-header-content {
		padding: 0 1rem 1.5rem;
		margin-top: -50px;
	}

	.profile-avatar {
		width: 90px;
		height: 90px;
	}

	.profile-name {
		font-size: 1.2rem;
	}

	/* Settings */
	.panel-inner {
		padding: 1.25rem;
	}

	.form-section-title {
		font-size: 1.1rem;
	}

	.membership-info {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Modals */
	.modal-content {
		width: 100%;
		max-width: none;
		border-radius: var(--bofferly-radius-lg) var(--bofferly-radius-lg) 0 0;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: none;
		max-height: 85vh;
	}

	.modal-content-small {
		max-width: none;
	}

	/* Back to top */
	.bofferly-back-to-top {
		width: 40px;
		height: 40px;
		bottom: 1rem;
		right: 1rem;
	}

	.bofferly-back-to-top.position-bottom-left {
		left: 1rem;
	}

	.continue-reading-btn {
		bottom: 4rem;
		right: 1rem;
	}

	/* Reading progress */
	.reading-progress-info {
		display: none;
	}

	/* History items */
	.history-thumbnail,
	.continue-thumbnail {
		height: 140px;
	}

	/* Notes */
	.note-text {
		padding: 0.75rem;
		font-size: 0.9rem;
	}

	/* Pagination - Show fewer items */
	.pagination-item:not(.is-active):not(.is-prev):not(.is-next) {
		display: none;
	}

	.pagination-list {
		justify-content: center;
	}

	/* Footer */
	.footer-widgets-area {
		padding: 1.5rem 0;
	}

	.footer-social-links .social-link {
		padding: 0.35rem 0.75rem;
		font-size: 0.75rem;
	}

	/* Print hidden on mobile */
	.bofferly-reading-progress,
	.continue-reading-btn {
		display: none;
	}
}

/* ============================================
   TOUCH DEVICE ADJUSTMENTS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
	/* Larger tap targets */
	.btn {
		min-height: 44px;
	}

	.mobile-menu-toggle,
	.search-toggle,
	.bofferly-dark-mode-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	/* Remove hover-only effects */
	.content-card:hover {
		transform: none;
	}

	.card-image:hover {
		transform: none;
	}

	/* Remove hover dropdowns on mobile */
	.primary-menu > li:hover .sub-menu {
		opacity: 0;
		visibility: hidden;
	}
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
	.hero-section {
		min-height: auto;
		padding: 3rem 0 2rem;
	}

	.hero-stats {
		padding-top: 1rem;
	}

	.hero-scroll-indicator {
		display: none;
	}

	.mobile-navigation-inner {
		padding: 1rem;
	}

	.mobile-menu li a {
		padding: 0.75rem 0;
	}
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
	/* Hide navigation, footers, and interactive elements */
	.site-header,
	.top-bar,
	.site-footer,
	.site-sidebar,
	.bofferly-back-to-top,
	.bofferly-reading-progress,
	.continue-reading-btn,
	.dark-mode-toggle,
	.search-toggle,
	.mobile-menu-toggle,
	.bofferly-social-share,
	.bofferly-bookmark-button,
	.bofferly-note-button,
	.bofferly-dark-mode-toggle,
	.related-content-section,
	.comments-area,
	.hero-3d-container,
	.mega-panel,
	.sub-menu {
		display: none !important;
	}

	/* Print-friendly layout */
	body {
		background: #FFFFFF !important;
		color: #000000 !important;
		font-size: 12pt;
		line-height: 1.5;
	}

	.container {
		max-width: 100%;
		padding: 0;
	}

	.article-content {
		font-size: 12pt;
	}

	.article-title {
		font-size: 20pt;
	}

	h2 { font-size: 16pt; }
	h3 { font-size: 14pt; }

	/* Show link URLs */
	.article-content a::after {
		content: ' (' attr(href) ')';
		font-size: 10pt;
		color: #666666;
	}

	/* Expand content cards */
	.cards-grid {
		grid-template-columns: 1fr;
	}

	.content-card {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #CCCCCC;
	}

	/* Arabic text */
	.ayah-arabic-text,
	.hadith-arabic-text,
	.dua-arabic-text {
		color: #000000;
		background: #F5F5F5;
	}

	/* Page breaks */
	.article-content h2,
	.article-content h3 {
		break-after: avoid;
	}

	.article-content img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: more) {
	:root {
		--bofferly-border: rgba(255, 255, 255, 0.3);
		--bofferly-text-muted: #D0D5DD;
		--bofferly-text-dim: #9CA3AF;
	}

	body.bofferly-light {
		--bofferly-border: rgba(0, 0, 0, 0.3);
		--bofferly-text-muted: #374151;
		--bofferly-text-dim: #4B5563;
	}

	.btn,
	.card,
	.content-card {
		border-width: 2px;
	}
}

/* ============================================
   DARK PREFERENCE FORCED (no JS)
   ============================================ */
@media (prefers-color-scheme: dark) {
	body:not(.bofferly-light) {
		/* Ensures dark mode is applied if user's system is dark and no explicit preference */
	}
}

/* ============================================
   LIGHT PREFERENCE FORCED
   ============================================ */
@media (prefers-color-scheme: light) {
	body:not(.bofferly-dark):not(.bofferly-light) {
		/* Optional: Allow system preference to influence initial state */
	}
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@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;
	}

	.hero-scroll-indicator {
		animation: none;
	}

	.content-card:hover {
		transform: none;
	}
}

/* ============================================
   FOLDABLE / NARROW DEVICES
   ============================================ */
@media screen and (max-width: 320px) {
	.container {
		padding: 0 0.5rem;
	}

	h1 { font-size: 1.4rem; }
	h2 { font-size: 1.2rem; }

	.hero-title {
		font-size: 1.4rem;
	}

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

	.prayer-times-grid {
		grid-template-columns: 1fr;
	}

	.donation-amounts {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   RESPONSIVE HARDENING
   Prevents mobile overflow and keeps controls usable
   across phones, tablets and small laptops.
   ============================================ */

@media screen and (max-width: 1023px) {
	.header-inner {
		gap: 0.75rem;
	}

	.site-branding {
		min-width: 0;
		flex: 1 1 auto;
	}

	.site-branding .custom-logo-link,
	.site-branding .site-logo-text {
		min-width: 0;
		max-width: 100%;
	}

	.logo-text {
		min-width: 0;
		overflow: hidden;
	}

	.logo-title {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.header-actions {
		flex: 0 0 auto;
	}
}

@media screen and (max-width: 767px) {
	.container,
	.container-fluid,
	.container-narrow {
		width: 100%;
		max-width: 100%;
	}

	.hero-section {
		min-height: auto;
		overflow: clip;
	}

	.hero-inner {
		width: 100%;
		gap: 1.35rem;
	}

	.hero-title {
		width: 100%;
		line-height: 1.15;
		text-wrap: balance;
	}

	.hero-description {
		width: 100%;
		margin-bottom: 0;
		line-height: 1.55;
	}

	.hero-badge {
		max-width: 100%;
		text-align: center;
		white-space: normal;
	}

	.hero-search-wrapper,
	.hero-search-form,
	.hero-search-input-group {
		width: 100%;
		max-width: 100%;
	}

	.hero-search-input-group {
		border-radius: 24px;
		padding: 0.6rem;
		gap: 0.55rem;
	}

	.hero-search-input {
		width: 100%;
		min-width: 0;
		font-size: 0.95rem;
	}

	.hero-search-submit {
		width: 100%;
		min-height: 44px;
		flex: 0 0 auto;
	}

	.hero-cta-buttons {
		width: 100%;
		max-width: 700px;
		gap: 0.75rem;
	}

	.hero-cta-buttons .btn {
		width: 100%;
		min-width: 0;
		white-space: normal;
		min-height: 48px;
		padding: 0.8rem 1rem;
	}

	.hero-stats {
		width: 100%;
		max-width: 100%;
	}

	.bofferly-search-toggle,
	.mobile-menu-toggle {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}

	.bofferly-search-toggle svg {
		width: 20px;
		height: 20px;
	}

	/* Prevent long words/URLs from creating horizontal overflow. */
	.card,
	.content-card,
	.widget,
	.article-content,
	.search-result-content,
	.profile-info,
	.dashboard-welcome,
	.panel-inner {
		min-width: 0;
		max-width: 100%;
	}

	.article-content,
	.article-content p,
	.article-content li,
	.article-content a,
	.search-result-title,
	.search-result-excerpt {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

@media screen and (max-width: 480px) {
	.header-inner {
		gap: 0.5rem;
	}

	.logo-title {
		font-size: 1.05rem;
	}

	.logo-icon svg {
		width: 32px;
		height: 32px;
	}

	.custom-logo-link,
	.site-logo-text {
		gap: 0.55rem;
	}

	.hero-section {
		padding-top: 2.75rem;
		padding-bottom: 2.5rem;
	}

	.hero-title {
		font-size: clamp(1.7rem, 8vw, 2.1rem);
	}

	.hero-description {
		font-size: 0.92rem;
	}

	.hero-badge {
		font-size: 0.72rem;
		line-height: 1.35;
		padding: 0.45rem 0.75rem;
	}

	.hero-search-input-group {
		border-radius: 20px;
	}

	.hero-search-input {
		padding: 0.7rem 0.65rem;
	}

	.hero-search-submit {
		font-size: 0.95rem;
	}

	.hero-cta-buttons .btn {
		font-size: 0.95rem;
	}
}

@media screen and (max-width: 360px) {
	.container {
		padding-left: 0.65rem;
		padding-right: 0.65rem;
	}

	.logo-title {
		font-size: 0.95rem;
	}

	.hero-title {
		font-size: 1.55rem;
	}

	.hero-description {
		font-size: 0.88rem;
	}

	.hero-search-input-group {
		padding: 0.5rem;
	}
}