/*
Theme Name: ShopWithMore
Theme URI: https://shopwithmore.co.uk
Author: Justin Hodnett
Author URI: https://shopwithmore.co.uk
Description: Custom theme for the ShopWithMore blog. Matches the main site design — dark blue to black gradient, Poppins, same header and footer.
Version: 1.0
License: Private
Text Domain: shopwithmore
*/

/* ════════════════════════════════════════════════════
       ShopWithMore Blog — Matching swmnet_v3.css design
       Dark blue → black gradient, Poppins, same header/footer
    ════════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg-top:      #111936;
      --bg-bottom:   #000000;
      --accent:      #1e6bff;
      --accent-hover:#1558d6;
      --text:        #f1f3f9;
      --muted:       #6b7280;
      --muted-2:     #9ca3af;
      --border:      rgba(255,255,255,0.08);
      --surface:     rgba(255,255,255,0.04);
      --surface-2:   rgba(255,255,255,0.07);
      --card-bg:     rgba(255,255,255,0.035);
      --font:        'Poppins', sans-serif;
      --radius:      12px;
    }

    html, body {
      overflow-x: hidden;
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      color: var(--text);
      background: linear-gradient(180deg, var(--bg-top) 0%, #07090f 40%, var(--bg-bottom) 100%);
      background-attachment: fixed;
      min-height: 100vh;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ── HEADER ── */
    .swm-header {
      position: sticky;
      top: 0;
      z-index: 9999;
      background: rgba(11,15,30,0.7);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: none;
    }

    .swm-header-content {
      max-width: 1280px;
      margin: 0 auto;
      padding: 12px 20px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 16px;
      height: 64px;
    }

    .swm-logo img {
      height: 36px;
      width: auto;
      display: block;
    }

    /* Header search */
    .swm-header-search {
      justify-self: center;
      width: 100%;
      max-width: 520px;
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .swm-header-search:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(30,107,255,0.2);
    }
    .swm-header-search input {
      flex: 1;
      min-width: 0;
      padding: 8px 16px;
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--font);
      font-size: 14px;
      color: var(--text);
    }
    .swm-header-search input::placeholder { color: var(--muted); }
    .swm-header-search button {
      width: 32px;
      height: 32px;
      margin: 3px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.18s;
    }
    .swm-header-search button:hover { background: var(--accent-hover); }

    /* Right side */
    .swm-header-right {
      display: flex;
      align-items: center;
      gap: 12px;
      justify-self: end;
    }

    .swm-blog-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      background: rgba(30,107,255,0.1);
      border: 1px solid rgba(30,107,255,0.2);
      border-radius: 999px;
      padding: 4px 12px;
      white-space: nowrap;
    }

    /* Hamburger */
    .swm-menu-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 15px;
      cursor: pointer;
    }
    .swm-menu-btn:hover { background: var(--surface-2); }

    /* Mobile nav */
    .swm-mobile-menu {
      display: none !important;
      flex-direction: column;
      gap: 2px;
      position: absolute;
      top: 64px;
      right: 16px;
      background: #0f1222;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px;
      width: 230px;
      z-index: 10000;
      box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    }
    .swm-mobile-menu.active { display: flex !important; }
    .swm-mobile-menu a {
      color: var(--muted-2);
      font-size: 14px;
      font-weight: 500;
      padding: 10px 12px;
      border-radius: 8px;
      transition: all 0.15s;
    }
    .swm-mobile-menu a:hover { color: var(--text); background: var(--surface); }

    @media (max-width: 900px) { .swm-menu-btn { display: flex !important; } }
    @media (max-width: 600px) {
      .swm-header-content { padding: 10px 14px; height: 56px; gap: 10px; }
      .swm-logo img { height: 28px; }
      .swm-blog-badge { display: none; }
      .swm-mobile-menu { top: 56px; }
    }

    /* ════════════════════════════════════════════
       BLOG CONTENT AREA
    ════════════════════════════════════════════ */
    .swm-blog-wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 48px 20px 80px;
    }

    /* Blog page title */
    .swm-blog-page-title {
      text-align: center;
      margin-bottom: 48px;
    }
    .swm-blog-page-title h1 {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 700;
      color: #fff;
      margin-bottom: 10px;
    }
    .swm-blog-page-title p {
      color: var(--muted);
      font-size: 1rem;
    }

    /* Post grid — archive/home */
    .swm-post-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }
    @media (max-width: 500px) { .swm-post-grid { grid-template-columns: 1fr; } }

    /* Post card */
    .swm-post-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .swm-post-card:hover {
      transform: translateY(-3px);
      border-color: rgba(30,107,255,0.35);
      box-shadow: 0 8px 28px rgba(0,0,0,0.4);
    }
    .swm-post-card-thumb {
      aspect-ratio: 16/9;
      overflow: hidden;
      background: rgba(255,255,255,0.03);
    }
    .swm-post-card-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }
    .swm-post-card:hover .swm-post-card-thumb img { transform: scale(1.04); }
    .swm-post-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
    .swm-post-card-cat {
      font-size: 10px;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .swm-post-card-title {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      line-height: 1.4;
    }
    .swm-post-card-title a { color: inherit; }
    .swm-post-card-title a:hover { color: var(--accent); }
    .swm-post-card-excerpt {
      font-size: 13px;
      color: var(--muted-2);
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .swm-post-card-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: auto;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .swm-post-card-meta i { font-size: 10px; }
    .swm-read-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      transition: gap 0.18s;
      margin-top: 4px;
    }
    .swm-read-more:hover { gap: 10px; }

    /* ════════════════════════════════════════════
       SINGLE POST
    ════════════════════════════════════════════ */
    .swm-single-post {
      max-width: 760px;
      margin: 0 auto;
    }

    .swm-post-header { margin-bottom: 36px; }

    .swm-post-cats {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .swm-post-cat-pill {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      background: rgba(30,107,255,0.1);
      border: 1px solid rgba(30,107,255,0.2);
      border-radius: 999px;
      padding: 3px 10px;
    }

    .swm-post-title {
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }

    .swm-post-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 12px;
      color: var(--muted);
      flex-wrap: wrap;
    }
    .swm-post-meta span { display: flex; align-items: center; gap: 5px; }
    .swm-post-meta i { font-size: 11px; }

    .swm-post-featured-img {
      width: 100%;
      border-radius: var(--radius);
      overflow: hidden;
      margin: 28px 0;
      aspect-ratio: 16/9;
    }
    .swm-post-featured-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Post body content */
    .swm-post-content {
      font-size: 16px;
      line-height: 1.85;
      color: var(--muted-2);
    }
    .swm-post-content h2 {
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      margin: 36px 0 14px;
      letter-spacing: -0.01em;
    }
    .swm-post-content h3 {
      font-size: 1.15rem;
      font-weight: 700;
      color: #fff;
      margin: 28px 0 10px;
    }
    .swm-post-content p { margin-bottom: 18px; }
    .swm-post-content a { color: var(--accent); text-decoration: underline; }
    .swm-post-content a:hover { color: #fff; }
    .swm-post-content ul, .swm-post-content ol {
      margin: 0 0 18px 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .swm-post-content li { color: var(--muted-2); }
    .swm-post-content strong { color: #fff; font-weight: 600; }
    .swm-post-content em { color: var(--muted-2); font-style: italic; }
    .swm-post-content blockquote {
      border-left: 3px solid var(--accent);
      padding: 12px 20px;
      margin: 24px 0;
      background: rgba(30,107,255,0.05);
      border-radius: 0 8px 8px 0;
      font-style: italic;
      color: var(--muted-2);
    }
    .swm-post-content img {
      border-radius: 8px;
      margin: 20px auto;
      max-width: 100%;
    }
    .swm-post-content code {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 6px;
      font-size: 0.88em;
      color: #a78bfa;
    }
    .swm-post-content pre {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 20px;
      overflow-x: auto;
      margin-bottom: 18px;
    }
    .swm-post-content hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 32px 0;
    }

    /* Tags */
    .swm-post-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 36px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
    }
    .swm-tag {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px 12px;
      transition: all 0.18s;
    }
    .swm-tag:hover { color: #fff; border-color: var(--accent); }

    /* Back to blog */
    .swm-back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 28px;
      transition: color 0.18s;
    }
    .swm-back-link:hover { color: var(--accent); }

    /* Pagination */
    .swm-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 48px;
      flex-wrap: wrap;
    }
    .swm-pagination a,
    .swm-pagination span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      height: 38px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid var(--border);
      color: var(--muted);
      background: var(--surface);
      transition: all 0.18s;
    }
    .swm-pagination a:hover { border-color: var(--accent); color: #fff; }
    .swm-pagination .current {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    /* Sidebar (if used) */
    .swm-blog-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 40px;
      align-items: start;
    }
    @media (max-width: 900px) { .swm-blog-layout { grid-template-columns: 1fr; } }

    .swm-sidebar-widget {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 20px;
    }
    .swm-sidebar-widget h3 {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      margin-bottom: 14px;
    }
    .swm-sidebar-widget a {
      display: block;
      font-size: 13px;
      color: var(--muted-2);
      padding: 6px 0;
      border-bottom: 1px solid var(--border);
      transition: color 0.18s;
    }
    .swm-sidebar-widget a:last-child { border-bottom: none; }
    .swm-sidebar-widget a:hover { color: var(--accent); }

    /* WP default overrides */
    .wp-block-image img { border-radius: 8px; }
    .aligncenter { text-align: center; margin: 0 auto; }
    figure { margin: 0; }
    figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }