/* Base / accessible defaults */
a{color:var(--accent);text-decoration:none}
/* Theme variables */
:root{
	--max-width:1100px;
	--accent:#53b42d; /* green accent */
	--muted:#6b7280;
	--bg-start:#f6fbff;
	--bg-end:#eef6f8;
	--bg-dot: rgba(11,157,143,0.03);
	--surface:#ffffff;
	--card-shadow: 0 6px 18px rgba(12,38,60,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,Helvetica,sans-serif;line-height:1.6;color:#0f1724;overflow-x:hidden}
body{padding-top:72px;padding-bottom:84px}

/* Layered subtle textured background: gradient + soft dots */
html{background-color:var(--bg-start);background-image:radial-gradient(circle at 8% 12%, var(--bg-dot) 0, var(--bg-dot) 1px, transparent 1px), radial-gradient(circle at 92% 88%, rgba(11,157,143,0.02) 0, rgba(11,157,143,0.02) 1px, transparent 1px), linear-gradient(180deg,var(--bg-start),var(--bg-end));background-size:24px 24px,36px 36px,auto;background-repeat:repeat,repeat,no-repeat}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{max-width:var(--max-width);margin:0 auto;padding:0rem}

/* Make three-column containers span full viewport width with 10px side margins */
.container.three-col{max-width:100%;margin:0;padding:1rem 20px}
.three-col{width:100%}

/* Make two-column containers span full viewport width */
.container.two-col{max-width:100%;margin:0;padding:1rem 20px}
.two-col{width:100%}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--surface);border-bottom:1px solid rgba(14,20,30,0.04);box-shadow:0 1px 0 rgba(14,20,30,0.02)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;}
.header-tools{display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:0.6rem;font-weight:700;font-size:1.125rem;color:var(--accent);text-decoration:none}
.brand-logo{width: 50px;height: 50px;object-fit: contain;display: block;margin: 5px;}
.brand-text{color:var(--accent)}
.language-switcher{position:relative;display:inline-flex;align-items:center;color:#0f1724;font-size:0.9rem;font-weight:600}
.language-switcher-btn{border:none;background:#dff3d7;color:#2d5016;border-radius:8px;padding:0.5rem 0.7rem;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.language-switcher-btn .fa-globe{font-size:1rem}
.current-language-label{margin-left:0.45rem;font-size:0.88rem;line-height:1}
.language-switcher:hover .language-switcher-btn,
.language-switcher.is-open .language-switcher-btn{background:#53b42d;color:#fff}
.language-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:860px;background:#fff;border:1px solid rgba(83,180,45,0.25);border-radius:12px;box-shadow:0 10px 28px rgba(12,38,60,0.14);padding:0.8rem;display:none;z-index:1200}
.language-switcher.is-open .language-menu{display:block}
.language-menu-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0.75rem}
.language-col{display:flex;flex-direction:column;gap:0.35rem}
.language-option{border:none;background:rgba(83,180,45,0.08);color:#0f1724;border-radius:8px;padding:0.45rem 0.6rem;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.language-option:hover,.language-option.is-active{background:#53b42d;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.nav a{color:#0f1724;padding:.5rem .25rem;border-radius:4px}
.nav a:hover,.nav a:focus{background:rgba(11,102,85,.06);outline:none}

/* Hero */
.hero{padding:3rem 0;text-align:center;background:linear-gradient(180deg,rgba(11,157,143,0.06),rgba(238,246,248,0.6))}
.hero .lead{color:var(--muted);max-width:none;margin:0;padding:0;text-align:left;width:100%}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:8px}

/* Make the ABOUT (hero) area span full width */
.hero .container{max-width:100%;margin:0;padding:2.25rem 20px}

/* Three-column layout */
.three-col{display:grid;grid-template-columns:minmax(0,20%) minmax(0,60%) minmax(0,20%);gap:1.25rem;align-items:start}
.three-col .left{background:var(--surface);border:1px solid #eef2f6;padding:1rem;border-radius:10px;box-shadow:var(--card-shadow)}
.three-col .center,.three-col .right{background:var(--surface);border:1px solid rgba(14,20,30,0.04);padding:1rem;border-radius:10px;box-shadow:var(--card-shadow)}
.three-col .center{min-width:0}

/* Two-column layout */
.two-col{display:grid;grid-template-columns:minmax(0,20%) minmax(0,80%);gap:1.25rem;align-items:start}
.two-col .left{background:var(--surface);border:1px solid #eef2f6;padding:1rem;border-radius:10px;box-shadow:var(--card-shadow)}
.two-col .center{background:var(--surface);border:1px solid rgba(14,20,30,0.04);padding:1rem;border-radius:10px;box-shadow:var(--card-shadow);min-width:0}

.left ul{list-style:none;padding:0;margin:0}
.left a{display:block;padding:.35rem 0;color:#0f1724}

/* Sidebar list styling */
.sidebar-list{list-style:none;padding:0;margin:0}
.sidebar-list li{padding:0.5rem 0.5rem;display:flex;align-items:center;border-radius:6px;transition:background-color 0.2s ease}
.left .sidebar-list li{border-bottom:1px solid rgba(14,20,30,0.08)}
.left .sidebar-list li:last-child{border-bottom:none}
.sidebar-list li:hover{background-color:rgba(83,180,45,0.12)}
.sidebar-list i{color:var(--accent);margin-right:8px;min-width:20px}
.sidebar-list a{color:#0f1724}

/* Widget list styling */
.widget-list{list-style:none;padding:0;margin:0.5rem 0}
.widget-list li{padding:0.35rem 0.5rem;display:block;border-radius:6px;transition:background-color 0.2s ease}
.right .widget-list li{border-bottom:1px solid rgba(14,20,30,0.08)}
.right .widget-list li:last-child{border-bottom:none}
.widget-list li:hover{background-color:rgba(83,180,45,0.12)}
.widget-list a{color:#000000;display:block}
.widget-list a.now-playing{font-weight:700;background:linear-gradient(90deg,rgba(83,180,45,0.2),transparent);padding:0.25rem 0.5rem;margin:-0.25rem -0.5rem;border-radius:4px}

/* Tabs styling */
.tabs{display:flex;gap:0.25rem;margin:0.75rem 0 0.5rem}
.tab-btn{background:transparent;border:none;padding:0.5rem 0.75rem;cursor:pointer;color:#000000;font-size:0.875rem;font-weight:500;border-bottom:2px solid transparent;transition:all 0.2s ease;border-radius:4px 4px 0 0}
.tab-btn:hover{background:rgba(83,180,45,0.08);color:#000000}
.tab-btn.active{color:#000000;border-bottom-color:var(--accent);font-weight:600;background:rgba(83,180,45,0.08)}
.tab-content{display:none}
.tab-content.active{display:block}

.left .widget{background:#fff;border:1px solid #eef2f6;padding:1rem;border-radius:10px}
.right .widget{background:#fff;border:1px solid #eef2f6;padding:1rem;border-radius:10px}
.right input[type="email"]{width:100%;padding:.5rem;margin-top:.5rem;border:1px solid #d1d5db;border-radius:6px}
.right button{margin-top:.5rem;padding:.5rem .75rem;background:var(--accent);color:#000000;border:none;border-radius:6px}

/* Content */
.content{padding:2rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;list-style:none;margin:0;padding:0}

/* Center area: use exactly 2 columns on wider screens, fall back to 1 on small screens */
.center .cards{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid rgba(14,20,30,0.04);padding:1rem;border-radius:10px;box-shadow:0 4px 12px rgba(12,38,60,0.04)}
/* Language list inside cards */
.card .lang-list{list-style:none;margin:.5rem 0 0;padding:0}
.card .lang-list li{padding:.18rem 0;display:block}
.card .reciter-list{list-style:none;margin:.5rem 0 0;padding:0}
.card .reciter-list li{padding:.18rem 0;display:block}
.center .lang-list li a,
.center .reciter-list li a{display:block;padding:.28rem .55rem;border-radius:8px;color:#0f1724;background:rgba(83,180,45,.09);border:1px solid rgba(83,180,45,.14);transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.center .lang-list li a:hover,
.center .reciter-list li a:hover{background:rgba(83,180,45,.18);color:#2d5016;transform:translateX(3px);box-shadow:0 2px 8px rgba(83,180,45,.18)}
@media (max-width:600px){.card .lang-list{columns:1}}
/* Alphabet letter headings inside language list */
.card .lang-list li.letter, .card .reciter-list li.letter{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	background: rgba(7, 179, 16, 0.36);
	margin-left: 10px;
	width: 40px;
	height: 40px;
	line-height: 1;
	text-align: center;
	color: #000000;
	font-weight: 700;
	font-size: .9rem;
	-webkit-border-radius:20px !important;
	-webkit-border-bottom-right-radius:0 !important;
	-moz-border-radius:10px;
	border-radius:20px;
	margin-top:10px;
}

/* Slight spacing for language items */
.card .lang-list li{padding-left:6px}
.card h3{margin:.25rem 0}
.read-more{display:inline-block;margin-top:.5rem;font-weight:600}

/* Right column list (Arabic page) */
.right-col-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem}
.right-col-list li{background:rgba(83,180,45,0.12);border:1px solid rgba(83,180,45,0.28);border-radius:10px;padding:.4rem;text-align:left;font-weight:400;padding-left: 10px;display:flex;gap:0.5rem;align-items:center;}
.right-col-list .li-actions{margin-left:auto;display:flex;align-items:center;gap:0.35rem}
.right-col-list a{color:#67c24a;display:block}
.right-col-list li > a:not(.download-btn):hover{background:transparent;padding:0;color:#4b4359}
.right-col-list li:hover{background:rgba(83,180,45,0.12)}
.right-col-list .share-row{display:flex;align-items:center;margin-top:0}
.right-col-list .share-icon{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.85rem;background:transparent;border:none;padding:0.2rem 0.5rem;border-radius:999px;cursor:pointer;color:#67c24a}
.right-col-list .play-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:#67c24a;cursor:pointer;padding:0.2rem 0.5rem;border-radius:999px}
.right-col-list .download-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:#67c24a;cursor:pointer;padding:0.2rem 0.5rem;border-radius:999px;text-decoration:none}
.right-col-list .report-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:#e53935;cursor:pointer;padding:0.2rem 0.5rem;border-radius:999px;margin-left:auto}
.right-col-list .share-icon:hover,
.right-col-list .play-btn:hover,
.right-col-list .download-btn:hover{color:inherit;background:transparent}
.right-col-list .report-btn:hover{color:inherit;background:transparent}

/* Share modal */
.share-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.share-modal.is-open{display:flex}
.share-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,36,0.45)}
.share-modal-card{position:relative;background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(12,38,60,0.18);padding:1rem;min-width:280px;max-width:340px;width:90%}
.share-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.share-modal-header h3{margin:0;font-size:1rem}
.share-close{border:none;background:transparent;color:#6b7280;font-size:1rem;cursor:pointer}
.share-modal-body{display:flex;flex-direction:column;gap:0.6rem}
.share-option{display:flex;align-items:center;gap:0.6rem;padding:0.5rem 0.75rem;border-radius:10px;border:1px solid rgba(83,180,45,0.25);background:rgba(83,180,45,0.08);color:#0f1724;font-weight:600}
.share-option:hover{background:rgba(83,180,45,0.18)}

/* Report modal */
.report-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.report-modal.is-open{display:flex}
.report-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,36,0.45)}
.report-modal-card{position:relative;background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(12,38,60,0.18);padding:1rem;min-width:280px;max-width:420px;width:92%}
.report-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.report-modal-header h3{margin:0;font-size:1rem}
.report-close{border:none;background:transparent;color:#6b7280;font-size:1rem;cursor:pointer}
.report-form{display:flex;flex-direction:column;gap:0.75rem}
.report-form label{display:flex;flex-direction:column;gap:0.35rem;font-weight:600;color:#0f1724}
.report-form input,.report-form textarea{border:1px solid rgba(14,20,30,0.15);border-radius:10px;padding:0.6rem 0.75rem;font-size:0.95rem;font-family:inherit}
.report-submit{align-self:flex-start;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:0.6rem 1rem;font-weight:600;cursor:pointer}
.report-submit:hover{background:#46a426}

@media (max-width:600px){
	.right-col-list{grid-template-columns:1fr}
}

/* About page application icons */
.app-icons{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.75rem}
.app-icons li{display:flex;align-items:center;gap:0.6rem;padding:0.65rem 0.75rem;border-radius:10px;background:rgba(83,180,45,0.08);border:1px solid rgba(83,180,45,0.18);font-weight:600;color:#0f1724}
.app-icons i{color:var(--accent);font-size:1.1rem}

/* Arabic Quran page */
.arabic-page{padding-bottom:2rem}
.arabic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-bottom:1.5rem}
.arabic-info p{color:var(--muted)}
.arabic-features{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:0.65rem}
.arabic-features li{display:flex;align-items:center;gap:0.6rem;color:#0f1724;font-weight:600}
.arabic-features i{color:var(--accent)}
.arabic-stats .stat-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.stat-number{margin:0;font-size:1.4rem;font-weight:700;color:#0f1724}
.stat-label{margin:0;color:var(--muted);font-size:0.9rem}
.arabic-note,.arabic-help{color:var(--muted);font-size:0.9rem;margin:0.75rem 0 0}
.arabic-search .search-row{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:0.75rem}
.arabic-search input[type="search"]{flex:1;min-width:220px;padding:0.65rem 0.85rem;border-radius:10px;border:1px solid rgba(14,20,30,0.12);font-size:0.95rem}
.table-wrap{overflow-x:auto}
.surah-table{width:100%;border-collapse:collapse;min-width:520px}
.surah-table th,.surah-table td{padding:0.85rem 0.75rem;text-align:left;border-bottom:1px solid rgba(14,20,30,0.08)}
.surah-table th{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:0.35rem;padding:0.3rem 0.6rem;border-radius:999px;background:rgba(83,180,45,0.12);color:#2d5016;font-size:0.85rem;font-weight:600}

@media (max-width:900px){
	.arabic-grid{grid-template-columns:1fr}
	.arabic-stats .stat-list{grid-template-columns:1fr}
}

@media (max-width:900px){
	.two-col{grid-template-columns:1fr}
	.site-header .container{flex-wrap:nowrap;justify-content:space-between;align-items:center}
	.header-tools{width:auto;flex-direction:row;align-items:center}
	.language-menu{right:auto;left:50%;transform:translateX(-50%);min-width:92vw;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
	.language-menu-grid{grid-template-columns:1fr}
}

/* Arabic page four-column layout */
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.four-col{max-width:100%;margin:0;padding:1rem 20px}
.four-col .col{background:var(--surface);border:1px solid rgba(14,20,30,0.04);padding:1rem;border-radius:10px;box-shadow:var(--card-shadow)}
.number-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0.4rem}
.number-list li{background:#fff;border:1px solid rgba(14,20,30,0.08);border-radius:6px;padding:0.35rem 0.5rem;text-align:left;font-weight:600;color:#0f1724}
.name-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0.4rem}
.name-list li{background:#fff;border:1px solid rgba(14,20,30,0.08);border-radius:6px;padding:0.35rem 0.5rem;text-align:left;color:#0f1724}
.download-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0.4rem}
.download-list li{background:#fff;border:1px solid rgba(14,20,30,0.08);border-radius:6px;padding:0.35rem 0.5rem;text-align:left}
.download-list a{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:0.4rem}
h1{font-size: 25px;font-weight: 500;}
h2{font-size: 20px;font-weight: 500;}
h3{font-size: 20px;font-weight: 500;}
h4{font-size: 18px;font-weight: 500;}
@media (max-width:900px){
	.four-col{grid-template-columns:1fr}
}

/* Footer */
.site-footer{position:fixed;bottom:0;left:0;right:0;z-index:1000;padding:0.9rem 0;background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(255,255,255,1));border-top:1px solid rgba(14,20,30,0.08);backdrop-filter:blur(12px);box-shadow:0 -4px 16px rgba(12,38,60,0.10),0 -1px 4px rgba(12,38,60,0.06)}
.site-footer .container{display:flex;flex-direction:column;gap:0.75rem}
.site-footer p{text-align:center;margin:0;font-size:0.875rem;color:var(--muted)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-copy{text-align:left;font-size:0.875rem;color:var(--muted)}
.footer-copy a{color:var(--accent);font-weight:600}
.footer-divider{display:inline-block;margin:0 0.5rem;color:rgba(14,20,30,0.3)}
.footer-social{display:flex;justify-content:center;gap:0.75rem;align-items:center}
.footer-social a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(83,180,45,0.1);color:var(--accent);border:1px solid rgba(83,180,45,0.25);transition:transform 0.2s ease,background 0.2s ease,box-shadow 0.2s ease}
.footer-social a:hover{background:rgba(83,180,45,0.2);transform:translateY(-2px);box-shadow:0 6px 14px rgba(83,180,45,0.2)}

/* Audio Player Styling */
.audio-player-wrapper{display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,#f4fff7 0%,#e7fbe9 50%,#d1f4dc 100%);padding:0.85rem 1.25rem;border-radius:18px;box-shadow:0 10px 26px rgba(12,38,60,0.12),0 2px 6px rgba(12,38,60,0.08);border:1px solid rgba(83,180,45,0.18);position:relative;overflow:hidden}
.audio-player-wrapper::before{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(circle at 15% 50%,rgba(83,180,45,0.08),transparent 55%),radial-gradient(circle at 85% 50%,rgba(83,180,45,0.06),transparent 60%);pointer-events:none}
.audio-player-wrapper::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:shimmer 3s infinite;pointer-events:none}
@keyframes shimmer{0%,100%{opacity:0.25} 50%{opacity:0.85}}
.audio-info{display:flex;align-items:center;gap:0.5rem;padding:0.45rem 0.75rem;background:rgba(255,255,255,0.8);border:1px solid rgba(83,180,45,0.2);border-radius:12px;color:#2d5016;font-weight:600;min-width:200px;max-width:320px;box-shadow:0 2px 8px rgba(12,38,60,0.08)}
.audio-info i{color:var(--accent);font-size:1rem}
#current-track{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-controls{display:flex;gap:0.6rem;align-items:center;flex-shrink:0}
.player-controls,.audio-info,#quran-player{position:relative;z-index:2}
.control-btn{background:linear-gradient(135deg,#53b42d,#3f8f24);color:#fff;border:none;border-radius:12px;padding:0.6rem 0.85rem;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;font-size:1rem;box-shadow:0 4px 10px rgba(83,180,45,0.35),inset 0 1px 0 rgba(255,255,255,0.25);position:relative;overflow:hidden}
.control-btn:hover{background:linear-gradient(135deg,#46a426,#32751c);transform:translateY(-1px);box-shadow:0 8px 18px rgba(83,180,45,0.4),inset 0 1px 0 rgba(255,255,255,0.3)}
.control-btn:active{transform:translateY(0) scale(0.98);box-shadow:0 3px 8px rgba(83,180,45,0.35)}
.control-btn.is-active{background:linear-gradient(135deg,#2f6f1a,#245712);box-shadow:0 8px 18px rgba(47,111,26,0.4),inset 0 1px 0 rgba(255,255,255,0.25)}
.control-btn i{position:relative;z-index:1}
#quran-player{flex:1;min-width:220px;height:44px;border-radius:12px;outline:none;box-shadow:0 2px 12px rgba(12,38,60,0.12);background:rgba(255,255,255,0.95);border:1px solid rgba(83,180,45,0.15)}
#quran-player::-webkit-media-controls-panel{background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(250,250,250,0.96));border-radius:12px;padding:0 10px}
#quran-player::-webkit-media-controls-play-button{background-color:var(--accent);border-radius:50%;filter:none;width:32px;height:32px}
#quran-player::-webkit-media-controls-current-time-display,#quran-player::-webkit-media-controls-time-remaining-display{color:#2d5016;font-weight:600;text-shadow:0 1px 2px rgba(255,255,255,0.8)}
#quran-player::-webkit-media-controls-timeline{border-radius:8px;background:rgba(83,180,45,0.2);height:6px}
#quran-player::-webkit-media-controls-volume-slider{border-radius:8px;background:rgba(83,180,45,0.2)}
#quran-player::-webkit-media-controls-mute-button{filter:grayscale(0.2) sepia(0.25) hue-rotate(60deg)}

@media (max-width:720px){
	.site-footer{padding:0.6rem 0 max(0.6rem, env(safe-area-inset-bottom))}
	.audio-player-wrapper{display:block;padding:0.65rem 0.8rem;overflow:visible}
	.player-controls{display:none}
	.audio-info{display:none}
	#quran-player{display:block !important;width:100% !important;min-height:48px;max-width:100%;visibility:visible;opacity:1}
}

.footer-nav{list-style:none;padding:0;margin:.5rem 0 0;display:flex;gap:1rem;justify-content:center}

/* Quran Radio page */
.radio-hero{padding:2rem 0 1rem;background:linear-gradient(180deg,rgba(83,180,45,0.08),rgba(255,255,255,0))}
.radio-hero-card{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--surface);border:1px solid rgba(14,20,30,0.06);border-radius:16px;padding:1.5rem 1.75rem;box-shadow:var(--card-shadow)}
.arabic-hero .container{max-width:100%;padding:0 20px}
.arabic-hero .radio-hero-card{width:100%}
.radio-hero h1{margin:0 0 0.35rem;font-size:1.8rem}
.radio-eyebrow{margin:0 0 0.35rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;font-size:0.75rem}
.radio-subtitle{margin:0;color:var(--muted)}
.arabic-hero .radio-subtitle{font-size:1.05rem}
.radio-hero-icon{width:64px;height:64px;border-radius:16px;background:rgba(83,180,45,0.12);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.6rem}

.radio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem}
.radio-player{display:flex;flex-direction:column;gap:0.75rem}
.radio-current{margin:0;color:#2d5016;font-weight:600}
.radio-status{margin:-0.35rem 0 0;color:var(--muted);font-size:0.9rem;min-height:1.2em}
.radio-controls{display:flex;gap:0.75rem;flex-wrap:wrap}
.radio-btn{background:linear-gradient(135deg,#53b42d,#3f8f24);color:#fff;border:none;border-radius:10px;padding:0.5rem 0.9rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem}
.radio-btn:hover{background:linear-gradient(135deg,#46a426,#32751c)}

.radio-stations h2{margin-top:0}
.radio-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.75rem}
.radio-station{width:100%;text-align:left;border:1px solid rgba(83,180,45,0.2);background:rgba(83,180,45,0.06);border-radius:12px;padding:0.75rem 1rem;cursor:pointer;display:flex;flex-direction:column;gap:0.2rem;transition:all 0.2s ease}
.radio-station:hover{background:rgba(83,180,45,0.12);transform:translateY(-1px)}
.radio-station.is-active{background:rgba(83,180,45,0.18);border-color:rgba(83,180,45,0.35);box-shadow:0 6px 14px rgba(83,180,45,0.18)}
.radio-name{font-weight:700;color:#0f1724}
.radio-meta{color:var(--muted);font-size:0.9rem}
.radio-note{margin:0.75rem 0 0;color:var(--muted);font-size:0.9rem}

@media (max-width:900px){
	.radio-grid{grid-template-columns:1fr}
	.radio-hero-card{flex-direction:column;align-items:flex-start}
	.footer-inner{flex-direction:column;align-items:center;text-align:center}
	.footer-copy{text-align:center}
}

/* Accessibility */
a:focus{outline:3px solid rgba(11,102,85,.12);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none;transition:none}}

/* Responsive tweaks */
@media (max-width:600px){.hero{padding:2rem 0}.brand{font-size:1rem}.nav{gap:.5rem;font-size:.95rem}}

@media (max-width:900px){
	.three-col{grid-template-columns:1fr;}
	.left,.right{order:2}
	.center{order:1}
	.three-col .left,.three-col .right{padding:0}

	/* Collapse center cards to single column on medium/smaller screens */
	.center .cards{grid-template-columns:1fr}
}

/* Utility */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Cairo font metric overrides — calibrates the system fallback font dimensions
   to match Cairo so there is no layout shift when Cairo finishes loading.
   Works alongside font-display:swap already set via the Google Fonts URL. */
@font-face {
	font-family: "Cairo Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("sans-serif");
	size-adjust: 107%;
	ascent-override: 91%;
	descent-override: 22%;
	line-gap-override: 0%;
	font-display: swap;
}

/* RTL / Arabic text — Cairo with metric-matched fallback */
html[dir="rtl"],
[dir="rtl"],
:lang(ar) {
	font-family: "Cairo", "Cairo Fallback", sans-serif;
}

/* LTR — system font stack, no extra network request */
html[dir="ltr"],
[dir="ltr"] {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}