/*
Theme Name: WPInsider
Theme URI: https://wpinsider.org/
Author: WPInsider
Author URI: https://wpinsider.org/
Description: Independent WordPress news, tutorials & reviews publication theme. Ported 1:1 from the WPInsider design. Classic theme with a magazine home, article, category, search, author, about, contact and review/hosting page templates.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpinsider
Tags: news, blog, magazine, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ---- Design tokens (from the source design) ---- */
:root{
  --wpi-ink:#1e1e1e; --wpi-blue:#2271b1; --wpi-blue-dark:#135e96; --wpi-blue-light:#5ba3dd;
  --wpi-muted:#50575e; --wpi-muted2:#6c7278; --wpi-faint:#8c8f94; --wpi-line:#e4e5e7;
  --wpi-line2:#ebecee; --wpi-red:#b91c1c; --wpi-green:#1a7f5a;
}

/* ---- Globals (verbatim from design <style>) ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Geist',system-ui,-apple-system,sans-serif;color:#1e1e1e;background:#ffffff;-webkit-font-smoothing:antialiased}
a{color:#2271b1;text-decoration:none}
a:hover{color:#135e96}
::selection{background:#cfe4f5}
img{max-width:100%;height:auto}
figure{margin:0}

/* Reset the color inheritance so template links (which set their own color inline) win */
.wpi a{color:inherit}

/* ---- Hover behaviours (design used style-hover; these are the real CSS equivalents) ---- */
/* Header category nav (desktop: inline row) */
.wpi-topnav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow:hidden}

/* Hamburger — hidden on desktop, shown on mobile via the media query below */
.wpi-burger{display:none;width:36px;height:36px;padding:0;border:1px solid #dcdcde;border-radius:8px;background:#fff;align-items:center;justify-content:center;cursor:pointer;color:#50575e;transition:border-color .12s,color .12s}
.wpi-burger:hover{border-color:#2271b1;color:#2271b1}

.wpi-nav-link{color:#3c434a;transition:background .12s,color .12s}
.wpi-nav-link:hover{background:#f2f4f6;color:#2271b1}

/* Primary nav when driven by an assigned WordPress menu */
.wpi-primary-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.wpi-primary-menu li{margin:0}
.wpi-primary-menu a{display:block;padding:8px 11px;font-size:13.5px;font-weight:500;color:#3c434a;border-radius:6px;white-space:nowrap;transition:background .12s,color .12s}
.wpi-primary-menu a:hover,.wpi-primary-menu .current-menu-item>a{background:#f2f4f6;color:#2271b1}

.wpi-iconbtn{color:#50575e;transition:border-color .12s,color .12s}
.wpi-iconbtn:hover{border-color:#2271b1;color:#2271b1}

.wpi-btn{transition:background .12s}
.wpi-btn:hover{background:#135e96}
.wpi-btn-light:hover{background:#2f81c4}
.wpi-btn-amber:hover{background:#96450b}
.wpi-btn-orange:hover{background:#a3360a}

.wpi-chip{color:#3c434a;transition:border-color .12s,color .12s}
.wpi-chip:hover{border-color:#2271b1;color:#2271b1}

.wpi-card,.wpi-card-sm{transition:box-shadow .15s}
.wpi-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.wpi-card-sm:hover{box-shadow:0 8px 24px rgba(0,0,0,0.07)}

.wpi-row:hover{background:#f7f8f9}
.wpi-fade:hover{opacity:.85}
.wpi-security:hover{border-color:#e9b8b8}

.wpi-foot-link{color:#9ea1a5;cursor:pointer;transition:color .12s}
.wpi-foot-link:hover{color:#5ba3dd}
.wpi-social:hover{border-color:#2271b1;color:#5ba3dd}

.wpi-share{color:#50575e;transition:border-color .12s,color .12s}
.wpi-share:hover{border-color:#2271b1;color:#2271b1}

.wpi-toc-link{color:#50575e;border-left:2px solid transparent;transition:color .12s,border-color .12s}
.wpi-toc-link:hover,.wpi-toc-link.is-active{color:#2271b1;border-left-color:#2271b1}

.wpi-muted-link:hover{color:#2271b1}

/* ---- Article body typography (single / pages) ---- */
.wpi-article-body{font-size:17px;line-height:1.75;color:#2c3338}
.wpi-article-body h2{font-size:26px;font-weight:800;letter-spacing:-0.5px;margin:34px 0 14px;color:#1e1e1e}
.wpi-article-body h3{font-size:20px;font-weight:800;letter-spacing:-0.3px;margin:26px 0 12px;color:#1e1e1e}
.wpi-article-body p{margin:0 0 18px}
.wpi-article-body ul,.wpi-article-body ol{margin:0 0 18px;padding-left:22px}
.wpi-article-body li{margin-bottom:8px}
.wpi-article-body a{color:#2271b1;text-decoration:underline;text-underline-offset:2px}
.wpi-article-body img,.wpi-article-body iframe{border-radius:12px;margin:24px 0}
.wpi-article-body blockquote{margin:24px 0;padding:4px 20px;border-left:3px solid #2271b1;color:#3c434a;font-style:italic}
.wpi-article-body code{font-family:'Geist Mono',monospace;font-size:14px;background:#f0f0f1;padding:2px 6px;border-radius:5px;color:#b91c1c}
.wpi-article-body pre{margin:20px 0;background:#1e1e1e;padding:18px 20px;border-radius:12px;overflow-x:auto;font-family:'Geist Mono',monospace;font-size:13.5px;line-height:1.7;color:#e6e6e6}
.wpi-article-body pre code{background:none;color:inherit;padding:0}
.wpi-article-body table{width:100%;border-collapse:collapse;font-size:14px;margin:20px 0}
.wpi-article-body th,.wpi-article-body td{padding:12px 16px;border-bottom:1px solid #f0f0f1;text-align:left}
.wpi-article-body th{background:#f7f8f9;font-weight:700;color:#3c434a}

/* WP core alignment / caption helpers */
.alignleft{float:left;margin:6px 20px 12px 0}
.alignright{float:right;margin:6px 0 12px 20px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.wp-caption-text,.wp-element-caption{font-size:12.5px;color:#a7aaae;margin-top:8px;text-align:center}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Pagination */
.wpi-pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:44px 0 20px}
.wpi-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid #dcdcde;border-radius:10px;font-size:14px;font-weight:600;color:#3c434a}
.wpi-pagination .page-numbers.current{background:#2271b1;border-color:#2271b1;color:#fff}
.wpi-pagination a.page-numbers:hover{border-color:#2271b1;color:#2271b1}

/* ---- Responsive (source design had no media queries) ---- */
@media (max-width:900px){
  .wpi-burger{display:inline-flex}
  .wpi-subscribe{display:none}
  .wpi-header-controls{margin-left:auto}
  /* Category nav becomes a slide-down panel below the header bar */
  .wpi-topnav{
    position:absolute;top:64px;left:0;right:0;z-index:49;
    flex:none;flex-direction:column;align-items:stretch;gap:0;padding:0;
    background:#fff;border-bottom:1px solid #e4e5e7;box-shadow:0 8px 24px rgba(0,0,0,0.06);
    max-height:0;opacity:0;visibility:hidden;overflow:hidden;
    transition:max-height .22s ease,opacity .18s ease,visibility .18s ease;
  }
  .wpi-topnav.is-open{max-height:calc(100vh - 64px);opacity:1;visibility:visible;overflow-y:auto;padding:8px 0}
  .wpi-topnav .wpi-nav-link{padding:13px 24px;border-radius:0;font-size:15px}
  .wpi-topnav .wpi-primary-menu{flex-direction:column;align-items:stretch;width:100%;gap:0}
  .wpi-topnav .wpi-primary-menu a{padding:13px 24px;border-radius:0;font-size:15px}
}
@media (max-width:960px){
  .wpi-responsive-grid{grid-template-columns:1fr !important;gap:28px !important}
  .wpi-sticky{position:static !important;top:auto !important}
}
@media (max-width:600px){
  .wpi-hero-title{font-size:30px !important}
  .wpi-hide-sm{display:none !important}
}