/*
Theme Name: WPMagnet
Theme URI: https://wpmagnet.com
Author: Ahsanul Rashid
Author URI: https://wpmagnet.com
Description: A fast, AdSense-ready editorial blog theme for WPMagnet. Built for long-form readability, clean ad placements, and Core Web Vitals performance. Two-color "magnetic pole" accent system, distinct display and serif reading type, flat editorial layout with no ad-hostile clutter.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpmagnet
Tags: blog, news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options
*/

/* =========================================================
   WPMAGNET DESIGN SYSTEM
   Concept: "Magnetic poles" — a warm red (north) and cool
   blue (south) accent pair used sparingly against a cool
   pale surface, with a geometric display face for headings
   and an editorial serif for long-form reading.
   ========================================================= */

:root{
  /* Color */
  --wpm-bg:        #F4F6FA;
  --wpm-surface:   #FFFFFF;
  --wpm-border:    #E3E7EF;
  --wpm-ink:       #14161F;
  --wpm-muted:     #5B6072;
  --wpm-north:     #E5482B; /* warm accent */
  --wpm-south:     #2657EB; /* cool accent */
  --wpm-north-tint:#FDEDE9;
  --wpm-south-tint:#EAF0FE;
  --wpm-focus:     #2657EB;

  /* Type */
  --wpm-font-head: "Space Grotesk", "Segoe UI", sans-serif;
  --wpm-font-body: "Source Serif 4", Georgia, "Noto Serif Bengali", serif;
  --wpm-font-ui:   "Inter", "Segoe UI", sans-serif;

  /* Scale */
  --wpm-max: 1180px;
  --wpm-col: 68ch;
  --wpm-radius: 3px;
}

/* Reset */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body{
  margin: 0;
  background: var(--wpm-bg);
  color: var(--wpm-ink);
  font-family: var(--wpm-font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--wpm-ink); text-decoration: none; }
a:hover{ color: var(--wpm-south); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--wpm-focus);
  outline-offset: 2px;
}
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{
  font-family: var(--wpm-font-head);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
.wpm-container{ max-width: var(--wpm-max); margin: 0 auto; padding: 0 24px; }
.screen-reader-text{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.screen-reader-text:focus{
  position: static; width: auto; height: auto; clip: auto;
}

/* Skip link */
.wpm-skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--wpm-ink);
  color: #fff; padding: 10px 16px; z-index: 999;
}
.wpm-skip-link:focus{ left: 12px; top: 12px; }

/* =========================
   Header
   ========================= */
.wpm-site-header{
  background: var(--wpm-surface);
  border-bottom: 1px solid var(--wpm-border);
  position: relative; z-index: 50;
}
/* Sticky header is opt-in per breakpoint from WPMagnet Options > Header. */
@media (min-width: 861px){
  body.wpm-sticky-desktop .wpm-site-header{ position: sticky; top: 0; }
}
@media (max-width: 860px){
  body.wpm-sticky-mobile .wpm-site-header{ position: sticky; top: 0; }
}
.wpm-header-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: var(--wpm-max); margin: 0 auto;
  gap: 24px;
}
.wpm-logo{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--wpm-font-head); font-weight: 700; font-size: 22px;
  color: var(--wpm-ink);
}
.wpm-logo:hover{ color: var(--wpm-ink); }
.wpm-logo img{ max-height: 36px; width: auto; }
.wpm-logo-mark{
  width: 28px; height: 28px; border-radius: 50%;
  background: conic-gradient(from 180deg, var(--wpm-north), var(--wpm-south));
  flex-shrink: 0;
}
.wpm-primary-nav{ display: flex; align-items: center; gap: 28px; }
.wpm-primary-nav ul{ display: flex; gap: 28px; }
.wpm-primary-nav a{
  font-family: var(--wpm-font-ui); font-size: 15px; font-weight: 500;
  color: var(--wpm-muted); padding: 6px 0; position: relative;
}
.wpm-primary-nav a:hover,
.wpm-primary-nav .current-menu-item > a{ color: var(--wpm-ink); }
.wpm-primary-nav .current-menu-item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: linear-gradient(90deg, var(--wpm-north), var(--wpm-south));
}
.wpm-header-actions{ display: flex; align-items: center; gap: 14px; }
.wpm-search-toggle, .wpm-menu-toggle{
  background: none; border: 1px solid var(--wpm-border); border-radius: var(--wpm-radius);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--wpm-ink);
}
.wpm-menu-toggle{ display: none; }
.wpm-header-search{
  display: none; border-top: 1px solid var(--wpm-border); background: var(--wpm-surface);
}
.wpm-header-search.is-open{ display: block; }
.wpm-header-search .wpm-container{ padding: 14px 24px; }
.wpm-header-search input[type="search"]{
  width: 100%; padding: 10px 14px; border: 1px solid var(--wpm-border);
  border-radius: var(--wpm-radius); font-family: var(--wpm-font-ui); font-size: 15px;
}

@media (max-width: 860px){
  .wpm-primary-nav{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--wpm-surface); border-bottom: 1px solid var(--wpm-border);
    flex-direction: column; align-items: flex-start; padding: 12px 24px 20px;
  }
  .wpm-primary-nav.is-open{ display: flex; }
  .wpm-primary-nav ul{ flex-direction: column; gap: 4px; width: 100%; }
  .wpm-primary-nav a{ display: block; padding: 10px 0; width: 100%; }
  .wpm-menu-toggle{ display: flex; }
}

/* =========================
   Ad slots
   ========================= */
.wpm-ad-slot{
  margin: 32px 0; text-align: center;
}
.wpm-ad-label{
  font-family: var(--wpm-font-ui); font-size: 11px; color: var(--wpm-muted);
  margin-bottom: 8px; letter-spacing: .02em;
}
.wpm-ad-slot .wpm-ad-body{
  min-height: 90px; display: flex; align-items: center; justify-content: center;
  background: var(--wpm-surface); border: 1px dashed var(--wpm-border);
  border-radius: var(--wpm-radius); overflow: hidden;
}
.wpm-ad-inline{ margin: 40px 0; }

/* =========================
   Shared bits (eyebrow meta line, buttons)
   ========================= */
.wpm-eyebrow{
  font-family: var(--wpm-font-ui); font-size: 13px; color: var(--wpm-muted);
  margin-bottom: 10px;
}
.wpm-eyebrow .wpm-dot{ margin: 0 6px; }
.wpm-archive-description{
  color: var(--wpm-muted); font-size: 17px; margin: 8px 0 0; max-width: 60ch;
}
.wpm-btn{
  display: inline-block; font-family: var(--wpm-font-ui); font-weight: 600; font-size: 15px;
  padding: 11px 20px; border-radius: var(--wpm-radius); background: var(--wpm-ink); color: #fff;
  border: 1px solid var(--wpm-ink);
}
.wpm-btn:hover{ background: var(--wpm-south); border-color: var(--wpm-south); color: #fff; }
.wpm-btn-outline{ background: transparent; color: var(--wpm-ink); }
.wpm-btn-outline:hover{ background: var(--wpm-ink); color: #fff; }

/* =========================
   Homepage magazine feed (Daily-Kos-inspired dense rows)
   ========================= */
.wpm-feed-page{ padding: 32px 0 56px; max-width: 900px; }
.wpm-feed-section{ margin-bottom: 44px; }
.wpm-feed-heading{
  font-size: 20px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--wpm-ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.wpm-feed-section-link{
  font-family: var(--wpm-font-ui); font-size: 13px; font-weight: 600; color: var(--wpm-south);
  white-space: nowrap;
}
.wpm-feed-list{ display: flex; flex-direction: column; }
.wpm-feed-row{
  display: grid; grid-template-columns: 76px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--wpm-border);
}
.wpm-feed-row:first-child{ padding-top: 14px; }
.wpm-feed-thumb{
  display: block; width: 76px; height: 76px; border-radius: var(--wpm-radius);
  overflow: hidden; background: var(--wpm-border); flex-shrink: 0;
}
.wpm-feed-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.wpm-feed-body{ min-width: 0; }
.wpm-feed-title{
  font-size: 18px; margin: 6px 0 6px; line-height: 1.3;
}
.wpm-feed-title a:hover{ color: var(--wpm-south); }
.wpm-feed-meta{
  font-family: var(--wpm-font-ui); font-size: 13px; color: var(--wpm-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0;
}
.wpm-feed-meta .wpm-dot{ margin: 0 2px; }
.wpm-feed-author{ color: var(--wpm-ink); font-weight: 600; }
.wpm-feed-comments{
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;
  color: var(--wpm-muted); font-weight: 600;
}
.wpm-feed-comments:hover{ color: var(--wpm-south); }

.wpm-feed-callout{ margin: 8px 0 44px; }

.wpm-spotlight{
  background: var(--wpm-surface); border: 1px solid var(--wpm-border); border-radius: var(--wpm-radius);
  padding: 24px;
}
.wpm-spotlight-header{
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
}
.wpm-spotlight-header img{ border-radius: 50%; }

@media (max-width: 640px){
  .wpm-feed-row{ grid-template-columns: 60px 1fr; gap: 12px; }
  .wpm-feed-thumb{ width: 60px; height: 60px; }
  .wpm-feed-title{ font-size: 16px; }
}

/* =========================
   Content layout
   ========================= */
.wpm-layout{
  display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px;
  padding: 24px 0 64px;
}
.wpm-layout.wpm-no-sidebar{ grid-template-columns: minmax(0,1fr); max-width: var(--wpm-col); margin: 0 auto; }
@media (max-width: 900px){
  .wpm-layout{ grid-template-columns: 1fr; }
}

.wpm-section-title{
  font-size: 20px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--wpm-border);
}

/* Editorial post list (no cards, dividers instead) */
.wpm-post-row{
  display: grid; grid-template-columns: 96px 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--wpm-border);
}
.wpm-post-row:first-child{ padding-top: 0; }
.wpm-post-row-date{
  font-family: var(--wpm-font-ui); font-size: 13px; color: var(--wpm-muted); padding-top: 4px;
}
.wpm-post-row-date .wpm-day{ display:block; font-family: var(--wpm-font-head); font-size: 26px; color: var(--wpm-ink); line-height: 1; }
.wpm-post-row-title{ font-size: 21px; margin-bottom: 6px; }
.wpm-post-row-title a:hover{ color: var(--wpm-south); }
.wpm-post-row-excerpt{ color: var(--wpm-muted); font-size: 16px; margin: 0; }
.wpm-post-meta{
  font-family: var(--wpm-font-ui); font-size: 13px; color: var(--wpm-muted); margin-top: 8px;
}
.wpm-cat-pill{
  display: inline-block; font-family: var(--wpm-font-ui); font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; background: var(--wpm-north-tint); color: var(--wpm-north);
}
.wpm-cat-pill.is-south{ background: var(--wpm-south-tint); color: var(--wpm-south); }

.wpm-pagination{
  display: flex; gap: 10px; margin-top: 28px; font-family: var(--wpm-font-ui);
}
.wpm-pagination a, .wpm-pagination span{
  padding: 8px 14px; border: 1px solid var(--wpm-border); border-radius: var(--wpm-radius); font-size: 14px;
}
.wpm-pagination .current{ background: var(--wpm-ink); color: #fff; border-color: var(--wpm-ink); }

/* =========================
   Sidebar
   ========================= */
.wpm-sidebar .widget{
  background: var(--wpm-surface); border: 1px solid var(--wpm-border); border-radius: var(--wpm-radius);
  padding: 22px; margin-bottom: 24px;
}
.wpm-sidebar .widget-title{
  font-family: var(--wpm-font-head); font-size: 16px; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--wpm-border);
}
.wpm-sidebar ul li{ padding: 8px 0; border-bottom: 1px solid var(--wpm-border); font-size: 15px; }
.wpm-sidebar ul li:last-child{ border-bottom: none; }
.wpm-sidebar .wpm-cat-count{ float: right; color: var(--wpm-muted); font-size: 13px; }
.wpm-newsletter input[type="email"]{
  width: 100%; padding: 10px 12px; border: 1px solid var(--wpm-border); border-radius: var(--wpm-radius);
  font-family: var(--wpm-font-ui); margin-bottom: 10px;
}

/* =========================
   Single post
   ========================= */
.wpm-article-header{ padding: 40px 0 0; max-width: var(--wpm-col); margin: 0 auto; }
.wpm-breadcrumbs{
  font-family: var(--wpm-font-ui); font-size: 13px; color: var(--wpm-muted); margin-bottom: 16px;
}
.wpm-breadcrumbs a{ color: var(--wpm-muted); }
.wpm-breadcrumbs a:hover{ color: var(--wpm-south); }
.wpm-article-title{ font-size: clamp(28px, 4vw, 42px); }
.wpm-article-meta{
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-family: var(--wpm-font-ui); font-size: 14px; color: var(--wpm-muted); margin: 16px 0 28px;
}
.wpm-article-featured{ margin-bottom: 32px; border-radius: var(--wpm-radius); overflow: hidden; }
.wpm-article-body{ max-width: var(--wpm-col); margin: 0 auto; font-size: 19px; }
.wpm-article-body p{ margin: 0 0 1.3em; }
.wpm-article-body h2{ font-size: 28px; margin-top: 1.6em; }
.wpm-article-body h3{ font-size: 22px; margin-top: 1.4em; }
.wpm-article-body blockquote{
  margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--wpm-north);
  color: var(--wpm-muted); font-style: italic;
}
.wpm-article-body img{ border-radius: var(--wpm-radius); margin: 1.6em 0; }
.wpm-article-body a{ color: var(--wpm-south); text-decoration: underline; text-underline-offset: 3px; }
.wpm-article-body pre{
  background: var(--wpm-ink); color: #EDEEF2; padding: 18px; border-radius: var(--wpm-radius);
  overflow-x: auto; font-size: 15px;
}
.wpm-article-body ul, .wpm-article-body ol{ margin: 0 0 1.3em; padding-left: 1.4em; list-style: revert; }

.wpm-tags{ max-width: var(--wpm-col); margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wpm-tags a{
  font-family: var(--wpm-font-ui); font-size: 13px; padding: 5px 12px; border: 1px solid var(--wpm-border);
  border-radius: 999px; color: var(--wpm-muted);
}
.wpm-tags a:hover{ border-color: var(--wpm-south); color: var(--wpm-south); }

.wpm-author-box{
  max-width: var(--wpm-col); margin: 40px auto 0; display: flex; gap: 18px; align-items: flex-start;
  background: var(--wpm-surface); border: 1px solid var(--wpm-border); border-radius: var(--wpm-radius); padding: 24px;
}
.wpm-author-box img{ width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.wpm-author-box h3{ font-size: 17px; margin-bottom: 4px; }
.wpm-author-box p{ color: var(--wpm-muted); font-size: 15px; margin: 0; font-family: var(--wpm-font-ui); }

.wpm-related{ max-width: var(--wpm-col); margin: 48px auto 0; }
.wpm-related h2{ font-size: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--wpm-border); margin-bottom: 8px; }

.wpm-comments{ max-width: var(--wpm-col); margin: 48px auto 0; }
.wpm-comments-title{ font-size: 20px; }
.comment-list{ margin: 20px 0; }
.comment-list li{ margin-bottom: 20px; }
.comment-body{ border-bottom: 1px solid var(--wpm-border); padding-bottom: 20px; }
.comment-author{ font-family: var(--wpm-font-ui); font-weight: 600; font-size: 15px; }
.comment-metadata{ font-family: var(--wpm-font-ui); font-size: 13px; color: var(--wpm-muted); margin-bottom: 8px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea{
  width: 100%; padding: 10px 12px; border: 1px solid var(--wpm-border); border-radius: var(--wpm-radius);
  font-family: var(--wpm-font-ui); margin-bottom: 14px;
}
.comment-form textarea{ min-height: 140px; }

/* =========================
   Contact form
   ========================= */
.wpm-contact-form{ max-width: var(--wpm-col); margin-top: 24px; }
.wpm-contact-form label{
  font-family: var(--wpm-font-ui); font-size: 14px; font-weight: 600; color: var(--wpm-ink);
}
.wpm-contact-form input[type="text"],
.wpm-contact-form input[type="email"],
.wpm-contact-form textarea{
  width: 100%; padding: 11px 14px; border: 1px solid var(--wpm-border); border-radius: var(--wpm-radius);
  font-family: var(--wpm-font-ui); font-size: 15px; margin-top: 6px;
}
.wpm-contact-form textarea{ min-height: 160px; }

/* =========================
   Footer
   ========================= */
.wpm-site-footer{ margin-top: 40px; }
.wpm-footer-pole{ height: 3px; background: linear-gradient(90deg, var(--wpm-north), var(--wpm-south)); }
.wpm-footer-inner{
  background: var(--wpm-ink); color: #C9CCD8; padding: 48px 0 24px;
}
.wpm-footer-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 32px;
}
.wpm-footer-grid .widget-title{
  color: #fff; font-family: var(--wpm-font-head); font-size: 15px; margin-bottom: 14px;
}
.wpm-footer-grid ul li{ padding: 6px 0; font-size: 14px; }
.wpm-footer-grid a{ color: #C9CCD8; }
.wpm-footer-grid a:hover{ color: #fff; }
.wpm-footer-brand{ font-family: var(--wpm-font-head); font-weight: 700; font-size: 20px; color: #fff; margin-bottom: 10px; }
.wpm-footer-bottom{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid #2A2D3B; padding-top: 20px; font-size: 13px; font-family: var(--wpm-font-ui);
}
.wpm-social{ display: flex; gap: 12px; }
.wpm-social a{
  width: 32px; height: 32px; border: 1px solid #2A2D3B; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 860px){
  .wpm-footer-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================
   Back to top
   ========================= */
.wpm-to-top{
  position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--wpm-ink); color: #fff; border: none; display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 40;
}
.wpm-to-top.is-visible{ display: flex; }

/* =========================
   404 / search-no-results
   ========================= */
.wpm-empty-state{ text-align: center; padding: 80px 0; max-width: 520px; margin: 0 auto; }
.wpm-empty-state h1{ font-size: 30px; }
.wpm-empty-state p{ color: var(--wpm-muted); }

/* Alignment helpers used by core blocks/editor content */
.alignwide{ max-width: 100%; }
.alignfull{ width: 100vw; margin-left: calc(50% - 50vw); }