/*
Theme Name: TechDesk
Theme URI: https://example.com/techdesk
Author: TechDesk Team
Author URI: https://example.com
Description: A fast, SEO-first, mobile-first WordPress theme built for technology blogging, product reviews, and affiliate/AdSense monetization. Supports English and Bangla.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techdesk
Tags: blog, news, two-columns, right-sidebar, custom-menu, featured-images, translation-ready, theme-options, custom-logo, sticky-post
*/

:root {
  --color-ink: #14171C;
  --color-ink-soft: #4B5157;
  --color-ink-muted: #767C82;
  --color-paper: #F3F4F1;
  --color-surface: #FFFFFF;
  --color-border: #DFE0DB;

  --color-news: #2452FF;
  --color-news-dark: #17359E;
  --color-review: #E8960C;
  --color-review-dark: #8F5C06;
  --color-guide: #0E8A6D;
  --color-guide-dark: #0A5E4B;
  --color-danger: #C6412C;

  --font-display: "Archivo Narrow", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Noto Sans Bengali", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --fs-base: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  --fs-3xl: clamp(2.75rem, 2.2rem + 2.8vw, 4.5rem);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(20,23,28,0.06), 0 1px 1px rgba(20,23,28,0.04);
  --max-width: 1280px;
}

[data-theme="dark"] {
  --color-ink: #ECEDE9;
  --color-ink-soft: #B7BAB4;
  --color-ink-muted: #85887F;
  --color-paper: #14171A;
  --color-surface: #1D2024;
  --color-border: #2C3036;
  --color-news: #6E8DFF;
  --color-review: #F5B03A;
  --color-guide: #33C79E;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-paper);
  transition: background .2s ease, color .2s ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-news); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 var(--space-4); color: var(--color-ink); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--space-5); }
:focus-visible { outline: 2px solid var(--color-news); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-5); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) 0; position: relative; }
.site-logo { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--color-ink); text-decoration: none; }
.site-logo span { color: var(--color-news); }
.site-logo img { max-height: 44px; width: auto; }
.primary-nav { display: none; gap: var(--space-5); margin-left: var(--space-5); }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); }
.primary-nav a { color: var(--color-ink-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.primary-nav a:hover { color: var(--color-news); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.icon-btn { border: 1px solid var(--color-border); background: transparent; color: var(--color-ink); width: 38px; height: 38px; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.icon-btn:hover { border-color: var(--color-ink-muted); }
.lang-switch { border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; padding: 6px 10px; background: transparent; color: var(--color-ink-soft); cursor: pointer; text-decoration: none; }
@media (min-width: 768px) { .primary-nav { display: flex; } .menu-toggle { display: none !important; } }
.primary-nav[data-open="true"] { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-4); }
.primary-nav[data-open="true"] ul { flex-direction: column; gap: var(--space-3); }

.rail-news   { border-left: 3px solid var(--color-news); padding-left: var(--space-4); }
.rail-review { border-left: 3px solid var(--color-review); padding-left: var(--space-4); }
.rail-guide  { border-left: 3px solid var(--color-guide); padding-left: var(--space-4); }

.kicker { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.kicker--news   { color: var(--color-news); }
.kicker--review { color: var(--color-review-dark); }
.kicker--guide  { color: var(--color-guide-dark); }
[data-theme="dark"] .kicker--review { color: var(--color-review); }
[data-theme="dark"] .kicker--guide  { color: var(--color-guide); }

.hero { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.hero__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 2fr 1fr; } }
.hero__excerpt { color: var(--color-ink-soft); font-size: var(--fs-lg); }
.hero__side { display: flex; flex-direction: column; gap: var(--space-4); }
.hero__side-item h3 { font-size: var(--fs-base); margin-bottom: var(--space-1); }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-card); }
.post-card { display: flex; flex-direction: column; gap: var(--space-2); }
.post-card img { border-radius: var(--radius-sm); aspect-ratio: 16/10; object-fit: cover; }
.post-card h3 { font-size: var(--fs-lg); margin: var(--space-1) 0; }
.post-card__meta { font-size: var(--fs-xs); color: var(--color-ink-muted); }
.post-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-sm); padding: 10px 20px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.btn--primary { background: var(--color-news); color: #fff; }
.btn--primary:hover { background: var(--color-news-dark); color: #fff; }
.btn--cta { background: var(--color-review); color: #1A1200; }
.btn--cta:hover { background: var(--color-review-dark); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-ink); }

.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.badge--best { background: var(--color-review); color: #1A1200; }
.rating-box { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: color-mix(in srgb, var(--color-review) 10%, var(--color-surface)); border-radius: var(--radius-md); border: 1px solid var(--color-border); margin-bottom: var(--space-5); }
.rating-box__score { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--color-review-dark); }
.stars { color: var(--color-review); letter-spacing: 2px; }

.pros-cons { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin: var(--space-5) 0; }
@media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros-cons > div { padding: var(--space-4); border-radius: var(--radius-md); }
.pros { background: color-mix(in srgb, var(--color-guide) 10%, var(--color-surface)); }
.cons { background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface)); }
.pros h4 { color: var(--color-guide-dark); font-size: var(--fs-sm); }
.cons h4 { color: var(--color-danger); font-size: var(--fs-sm); }
.pros ul, .cons ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); }

table.comparison, .entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--space-5) 0; }
table.comparison th, table.comparison td, .entry-content table th, .entry-content table td { border: 1px solid var(--color-border); padding: var(--space-3); text-align: left; }
table.comparison th, .entry-content table th { background: var(--color-surface); font-family: var(--font-display); }

.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--color-news); z-index: 60; width: 0%; }
.toc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--fs-sm); }
.toc summary { font-family: var(--font-display); font-weight: 700; cursor: pointer; }
.toc ol { margin: var(--space-3) 0 0; padding-left: 1.2em; }
.toc a { color: var(--color-ink-soft); text-decoration: none; }
.toc a:hover { color: var(--color-news); }

.author-box { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); }
.author-box img { width: 56px; height: 56px; border-radius: 50%; }
.author-box h4 { margin: 0 0 var(--space-1); font-size: var(--fs-base); }
.author-box p { margin: 0; font-size: var(--fs-sm); color: var(--color-ink-soft); }

.ad-slot { text-align: center; margin: var(--space-6) 0; overflow: hidden; }
.ad-slot--placeholder { border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--fs-xs); color: var(--color-ink-muted); }
.ad-slot--mobile-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--color-surface); border-top: 1px solid var(--color-border); transition: transform .2s ease; margin: 0; }
.ad-slot--mobile-sticky[data-hidden="true"] { transform: translateY(100%); }
@media (min-width: 1024px) { .ad-slot--mobile-sticky { display: none; } }

.coupon-box { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--color-surface); border: 1px dashed var(--color-review); border-radius: var(--radius-md); padding: var(--space-4); }
.coupon-box code { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-base); }

.newsletter { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-md); padding: var(--space-7) var(--space-6); text-align: center; }
.newsletter h2, .newsletter p { color: inherit; }
[data-theme="dark"] .newsletter { background: var(--color-surface); }
.newsletter form { display: flex; gap: var(--space-3); max-width: 420px; margin: var(--space-5) auto 0; }
.newsletter input { flex: 1; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: var(--fs-sm); }

.site-footer { border-top: 1px solid var(--color-border); margin-top: var(--space-8); padding: var(--space-6) 0; font-size: var(--fs-sm); color: var(--color-ink-soft); }
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--space-6); }
.footer-grid h4 { font-size: var(--fs-sm); color: var(--color-ink); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-grid a { color: var(--color-ink-soft); text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--color-border); padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }

.single-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding: var(--space-6) 0; }
@media (min-width: 1024px) { .single-layout { grid-template-columns: 2fr 1fr; } }
.article-header { margin-bottom: var(--space-5); }
.article-meta { color: var(--color-ink-muted); font-size: var(--fs-sm); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 80px; align-self: start; } }
.breadcrumb { font-size: var(--fs-xs); color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-ink-muted); }

.entry-content { font-size: var(--fs-base); }
.entry-content > *:first-child { margin-top: 0; }
.pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-6) 0; }
.pagination a, .pagination span { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 12px; text-decoration: none; color: var(--color-ink); font-size: var(--fs-sm); }
.pagination .current { background: var(--color-ink); color: var(--color-paper); }

/* ================================
   Mobile responsiveness refinements
================================= */

/* Header: prevent overlap/overflow on small phones */
.site-header__inner { flex-wrap: nowrap; }
.site-logo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.header-actions { gap: var(--space-2); flex-shrink: 0; }
@media (max-width: 380px) {
	.lang-switch { padding: 6px 8px; font-size: 11px; }
	.header-actions { gap: 6px; }
	.icon-btn { width: 34px; height: 34px; }
}

/* Hero: side items should still be legible with a small thumbnail on narrow screens */
@media (max-width: 480px) {
	.hero__side-item img { width: 72px !important; height: 52px !important; }
}

/* Tables inside article content frequently overflow narrow viewports —
   wrap them so they scroll horizontally instead of breaking the layout. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-5) 0; }
.table-scroll table { margin: 0; min-width: 480px; }

/* Rating box, coupon box, and newsletter form: allow wrapping instead of
   overflowing on narrow screens. */
.rating-box { flex-wrap: wrap; }
.coupon-box { flex-wrap: wrap; }
.newsletter form { flex-wrap: wrap; }
.newsletter input { min-width: 0; flex: 1 1 180px; }
.newsletter button { flex-shrink: 0; }

/* Author box: avatar shouldn't shrink oddly on narrow screens */
.author-box img { flex-shrink: 0; }

/* Ensure long words (long product names, URLs) never force horizontal scroll */
h1, h2, h3, p, .post-card__meta, .article-meta { overflow-wrap: break-word; word-break: break-word; }

/* Mobile sticky ad: keep it from covering the last bit of content */
body:has(.ad-slot--mobile-sticky) { padding-bottom: 0; }
@media (max-width: 1023px) {
	.single-layout { padding-bottom: 90px; }
}

/* ================================
   Social share buttons
================================= */
.social-share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.social-share__label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-soft); margin-right: var(--space-1); }
.social-share__btn {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--color-border); border-radius: var(--radius-pill);
	padding: 6px 14px; font-size: var(--fs-xs); font-weight: 600;
	color: var(--color-ink); text-decoration: none; background: var(--color-surface);
	cursor: pointer; font-family: inherit; line-height: 1;
}
.social-share__btn svg { flex-shrink: 0; }
.social-share__btn:hover { border-color: var(--color-news); color: var(--color-news); }

/* ================================
   FAQ accordion
================================= */
.faq-section { margin: var(--space-6) 0; }
.faq-item {
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface);
}
.faq-item summary { font-weight: 700; cursor: pointer; font-family: var(--font-display); }
.faq-item summary::-webkit-details-marker { color: var(--color-news); }
.faq-answer { margin-top: var(--space-3); color: var(--color-ink-soft); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ================================
   Callout boxes
================================= */
.callout {
	border-radius: var(--radius-md); padding: var(--space-4);
	margin: var(--space-5) 0; border-left: 4px solid var(--color-border);
	font-size: var(--fs-sm);
}
.callout p:last-child { margin-bottom: 0; }
.callout--note { background: color-mix(in srgb, var(--color-news) 8%, var(--color-surface)); border-left-color: var(--color-news); }
.callout--warning { background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface)); border-left-color: var(--color-danger); }
.callout--tip { background: color-mix(in srgb, var(--color-guide) 8%, var(--color-surface)); border-left-color: var(--color-guide); }
.callout__label { font-family: var(--font-display); }

/* ================================
   Product card (affiliate shortcode)
================================= */
.product-card {
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: var(--space-4); text-align: center; max-width: 320px;
	margin: var(--space-5) auto; background: var(--color-surface); box-shadow: var(--shadow-card);
}
.product-card__image { border-radius: var(--radius-sm); margin-bottom: var(--space-3); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.product-card__name { margin: var(--space-2) 0 var(--space-1); }
.product-card__price { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--color-ink); margin: var(--space-2) 0; }

/* ================================
   Code blocks
================================= */
.entry-content pre {
	border-radius: var(--radius-md); padding: var(--space-4);
	overflow-x: auto; margin: var(--space-5) 0; font-size: var(--fs-sm);
	-webkit-overflow-scrolling: touch;
}
.entry-content code:not(pre code) {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: 4px; padding: 2px 6px; font-family: var(--font-mono); font-size: 0.9em;
}