/*
Theme Name: GridPulse
Theme URI: https://example.com/gridpulse
Author: Max
Author URI: https://example.com
Description: A fast, lightweight, SEO-optimized viral content grid theme inspired by modern media sites. Features a masonry-style card grid, built-in AdSense/ad management, logo upload, schema.org markup, Open Graph tags, and a flicker-free dark mode. No front-end user registration.
Version: 1.9.2
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: gridpulse
Tags: blog, news, photography, grid-layout, two-columns, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode
*/

/* =========================================================
   1. DESIGN TOKENS (CSS Variables)
   ========================================================= */
:root {
  color-scheme: light;
  /* Light theme (default) — soft grey page so white cards stand out (Apple-style) */
  --gp-bg:            #f5f5f7;
  --gp-bg-alt:        #ececef;
  --gp-surface:       #ffffff;
  --gp-text:          #1d1d1f;
  --gp-text-muted:    #6e6e73;
  --gp-heading:       #1d1d1f;
  --gp-border:        #d2d2d7;   /* visible, defined card edges */
  --gp-border-soft:   #e3e3e6;
  --gp-accent:        #ff4d2e;   /* overridden by Customizer */
  --gp-accent-ink:    #ffffff;
  --gp-link:          var(--gp-accent);
  --gp-shadow:        0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --gp-shadow-hover:  0 4px 14px rgba(0,0,0,.10), 0 18px 40px rgba(0,0,0,.10);

  --gp-radius:        18px;
  --gp-radius-sm:     12px;
  --gp-pill:          980px;
  --gp-maxw:          1180px;
  --gp-gap:           16px;
  --gp-header-h:      58px;
  --gp-ease:          cubic-bezier(.28,.11,.32,1);

  --gp-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gp-font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --gp-bg:            #000000;     /* true black, Apple-style */
  --gp-bg-alt:        #15171d;
  --gp-surface:       #1c1c1e;
  --gp-text:          #f5f5f7;
  --gp-text-muted:    #a1a1a6;
  --gp-heading:       #f5f5f7;
  --gp-border:        #3a3a3c;
  --gp-border-soft:   #2a2a2c;
  --gp-accent-ink:    #ffffff;
  --gp-shadow:        0 1px 3px rgba(0,0,0,.5);
  --gp-shadow-hover:  0 12px 40px rgba(0,0,0,.6);
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--gp-bg);   /* explicit so light mode never falls back to dark */
  color: var(--gp-text);
}
body {
  margin: 0;
  font-family: var(--gp-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gp-text);
  background: var(--gp-bg);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s var(--gp-ease), color .3s var(--gp-ease);
}
img, video, iframe, embed, object { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--gp-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--gp-font-head);
  color: var(--gp-heading);
  line-height: 1.12;
  font-weight: 800;
  margin: 0 0 .5em;
  letter-spacing: -.025em;
}
p { margin: 0 0 1.2em; }
.gp-container { max-width: var(--gp-maxw); margin: 0 auto; padding: 0 18px; }
.screen-reader-text {
  position: absolute !important; clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--gp-accent); color: var(--gp-accent-ink);
  padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
   3. HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--gp-bg) 72%, transparent);
  border-bottom: 1px solid var(--gp-border-soft);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
  .site-header { background: var(--gp-surface); }
}
.site-header .gp-container {
  display: flex; align-items: center; gap: 16px;
  height: var(--gp-header-h);
}
.site-branding { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.site-branding img { max-height: 36px; width: auto; }
.site-title {
  font-family: var(--gp-font-head);
  font-size: 22px; font-weight: 800; margin: 0; line-height: 1;
  letter-spacing: -.03em;
}
.site-title a { color: var(--gp-heading); }
.site-title a:hover { text-decoration: none; }
.site-title .gp-dot { color: var(--gp-accent); }

.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
.main-nav li { position: relative; list-style: none; }
.main-nav a {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--gp-pill);
  color: var(--gp-text-muted); font-weight: 600; font-size: 14px;
  letter-spacing: -.01em; line-height: 1; white-space: nowrap;
  transition: background .18s var(--gp-ease), color .18s var(--gp-ease);
}
.main-nav a:hover { background: var(--gp-bg-alt); text-decoration: none; color: var(--gp-text); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--gp-accent); }

/* Caret on items that have a dropdown */
.main-nav .menu-item-has-children > a::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-1px) rotate(45deg); opacity: .55; transition: transform .2s var(--gp-ease);
}
.main-nav .menu-item-has-children:hover > a::after { transform: translateY(1px) rotate(45deg); opacity: .9; }

/* Dropdown submenu — clean floating panel */
.main-nav .sub-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  min-width: 210px; padding: 7px;
  background: var(--gp-surface); border: 1px solid var(--gp-border-soft);
  border-radius: 14px; box-shadow: var(--gp-shadow-hover);
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--gp-ease), transform .18s var(--gp-ease), visibility .18s;
}
/* small hover bridge so the menu doesn't close in the 8px gap */
.main-nav .menu-item-has-children::before {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .sub-menu a { padding: 9px 12px; border-radius: 9px; font-weight: 500; color: var(--gp-text); width: 100%; }
.main-nav .sub-menu a:hover { background: var(--gp-bg-alt); color: var(--gp-accent); }
.main-nav .sub-menu .sub-menu { top: -7px; left: calc(100% + 7px); }

.gp-header-tools { display: flex; align-items: center; gap: 8px; }
.gp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--gp-border);
  background: var(--gp-surface); color: var(--gp-text); border-radius: 50%;
  cursor: pointer; transition: .18s; padding: 0;
}
.gp-icon-btn:hover { border-color: var(--gp-text-muted); color: var(--gp-accent); }
.gp-icon-btn svg { width: 17px; height: 17px; }
.theme-toggle .gp-sun { display: none; }
html[data-theme="dark"] .theme-toggle .gp-sun { display: block; }
html[data-theme="dark"] .theme-toggle .gp-moon { display: none; }

.menu-toggle { display: none; }

/* Mobile nav */
@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: var(--gp-header-h) 0 auto 0;
    background: var(--gp-surface); border-bottom: 1px solid var(--gp-border);
    transform: translateY(-130%); transition: transform .25s ease;
    box-shadow: var(--gp-shadow); max-height: calc(100vh - var(--gp-header-h));
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav > ul { flex-direction: column; padding: 8px 12px; gap: 0; align-items: stretch; }
  .main-nav li { width: 100%; }
  .main-nav a { padding: 13px 12px; border-radius: 10px; }
  /* Submenus become inline, indented — no floating panel on mobile */
  .main-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 4px 14px; border: 0; box-shadow: none; background: transparent;
    border-radius: 0;
  }
  .main-nav .sub-menu .sub-menu { top: auto; left: auto; }
  .main-nav .menu-item-has-children::before { content: none; }
  .main-nav .menu-item-has-children > a::after { margin-left: auto; }
}

/* =========================================================
   4. AD SLOTS — styled to match: divider label + bordered box
   ========================================================= */

/* ── Wrapper ─────────────────────────────────────────────── */
.gp-ad-wrap {
  margin: 28px auto;
  text-align: center;
  max-width: 100%;
}

/* ── "Advertisement" label row with horizontal rules ──────── */
.gp-ad-label-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px; color: var(--gp-text-muted);
}
.gp-ad-label-row::before,
.gp-ad-label-row::after {
  content: ''; flex: 1; height: 1px; background: var(--gp-border);
}
.gp-ad-label-row span {
  font-size: 11.5px; font-weight: 400; letter-spacing: 1.6px;
  text-transform: uppercase; white-space: nowrap;
}

/* ── Ad content box ──────────────────────────────────────── */
.gp-ad-box {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: 10px;
  overflow: hidden;
  display: inline-block; max-width: 100%;
  text-align: center;
}
.gp-ad-box ins,
.gp-ad-box iframe,
.gp-ad-box img { display: block; margin: 0 auto; max-width: 100%; }

/* ── Bottom rule ─────────────────────────────────────────── */
.gp-ad-bottom-line {
  height: 1px; background: var(--gp-border); margin-top: 10px;
}

/* ── Specific slot modifiers ─────────────────────────────── */
/* Below header: full-bleed strip, no inner box */
.gp-ad-wrap--header {
  margin: 0; border-bottom: 1px solid var(--gp-border);
  background: var(--gp-bg);
}
.gp-ad-wrap--header .gp-ad-box {
  border: none; border-radius: 0; background: transparent;
  width: 100%;
}
.gp-ad-wrap--header .gp-ad-bottom-line { display: none; }

/* In-content (inside single post) */
.gp-ad-wrap--incontent { margin: 2em 0; }

/* Homepage full-width in-grid */
.gp-ad-wrap--homepage {
  grid-column: 1 / -1;
  margin: 8px 0 16px;
}


/* =========================================================
   5. POST GRID (home / archive) — compact horizontal rows
   ========================================================= */
.gp-layout { display: flex; gap: 32px; align-items: stretch; padding: 22px 0 56px; }
.gp-main { flex: 1 1 auto; min-width: 0; }
.gp-sidebar { flex: 0 0 300px; position: sticky; top: calc(var(--gp-header-h) + 20px); }

.gp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 680px) { .gp-grid { grid-template-columns: 1fr; } }

/* Compact horizontal card: small thumbnail + text */
.gp-card {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border-soft);
  border-radius: var(--gp-radius);
  overflow: hidden;
  box-shadow: var(--gp-shadow);
  transition: transform .3s var(--gp-ease), box-shadow .3s var(--gp-ease), border-color .2s;
  display: flex; flex-direction: row; align-items: stretch;
  padding: 9px; gap: 13px;
}
.gp-card:hover { transform: translateY(-3px); box-shadow: var(--gp-shadow-hover); border-color: var(--gp-border); }
.gp-card__thumb {
  position: relative; flex: 0 0 116px; height: 80px;
  border-radius: 10px; overflow: hidden; background: var(--gp-bg-alt);
  display: block;
}
.gp-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--gp-ease); }
.gp-card:hover .gp-card__thumb img { transform: scale(1.05); }
.gp-card__cat {
  /* category now shows as a small accent label above the title (see body) */
  position: absolute; top: 7px; left: 7px;
  background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 7px; border-radius: var(--gp-pill);
}
.gp-card__cat:hover { text-decoration: none; opacity: .9; }
.gp-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 2px 4px 2px 0; }
.gp-card__kicker { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gp-accent); }
.gp-card__kicker:hover { text-decoration: none; opacity: .8; }
.gp-card__title { font-size: 15px; line-height: 1.28; margin: 0; letter-spacing: -.01em; }
.gp-card__title a {
  color: var(--gp-heading); font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gp-card__title a:hover { color: var(--gp-accent); text-decoration: none; }
.gp-card__excerpt { color: var(--gp-text-muted); font-size: 13px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gp-card__meta { font-size: 11.5px; color: var(--gp-text-muted); display: flex; gap: 7px; align-items: center; font-weight: 500; }

/* Featured / large first item — full width, a little bigger, with excerpt */
.gp-grid .gp-card--feature { grid-column: 1 / -1; padding: 11px; gap: 16px; }
.gp-grid .gp-card--feature .gp-card__thumb { flex-basis: 200px; height: 124px; }
.gp-grid .gp-card--feature .gp-card__title { font-size: 19px; -webkit-line-clamp: 3; }
.gp-grid .gp-card--feature .gp-card__title a { -webkit-line-clamp: 3; }
@media (max-width: 560px){
  .gp-grid .gp-card--feature .gp-card__thumb { flex-basis: 116px; height: 80px; }
  .gp-grid .gp-card--feature .gp-card__title { font-size: 16px; }
  .gp-card__excerpt { display: none; }
}

/* =========================================================
   6. SINGLE / PAGE
   ========================================================= */
.gp-article { background: var(--gp-surface); border: 1px solid var(--gp-border); border-radius: var(--gp-radius); padding: clamp(20px,4vw,44px); box-shadow: var(--gp-shadow); }
.gp-article__header { margin-bottom: 22px; }
.entry-title { font-size: clamp(28px,5vw,46px); margin: 0 0 14px; }
.gp-entry-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--gp-text-muted); font-size: 14px; align-items: center; }
.gp-entry-meta a { color: var(--gp-text-muted); }
.gp-entry-meta a:hover { color: var(--gp-accent); }
.gp-featured { margin: 0 0 26px; border-radius: var(--gp-radius); overflow: hidden; }
.gp-featured img { width: 100%; }

.entry-content { font-size: 17.5px; line-height: 1.75; }
.entry-content { color: var(--gp-text); }
/* ── Light-mode safeguard ──────────────────────────────────
   Posts written while in dark mode sometimes carry a hard-coded
   white/near-white text colour that becomes invisible on the light
   background. In LIGHT mode, neutralise those stray inline colours so
   body text always follows the theme and stays readable. Intentional
   colours (links, buttons, highlight backgrounds) are left untouched. */
html[data-theme="light"] .entry-content p[style*="color:#fff"],
html[data-theme="light"] .entry-content p[style*="color: #fff"],
html[data-theme="light"] .entry-content span[style*="color:#fff"],
html[data-theme="light"] .entry-content span[style*="color: #fff"],
html[data-theme="light"] .entry-content li[style*="color:#fff"],
html[data-theme="light"] .entry-content h1[style*="color:#fff"],
html[data-theme="light"] .entry-content h2[style*="color:#fff"],
html[data-theme="light"] .entry-content h3[style*="color:#fff"],
html[data-theme="light"] .entry-content h4[style*="color:#fff"],
html[data-theme="light"] .entry-content [style*="color:#ffffff"],
html[data-theme="light"] .entry-content [style*="color: #ffffff"],
html[data-theme="light"] .entry-content [style*="color:rgb(255,255,255)"],
html[data-theme="light"] .entry-content .has-white-color {
  color: var(--gp-text) !important;
}
.entry-content > * { margin-bottom: 1.25em; }
.entry-content h2 { font-size: 28px; margin-top: 1.4em; }
.entry-content h3 { font-size: 22px; margin-top: 1.3em; }
.entry-content a { text-decoration: underline; }
.entry-content img, .entry-content figure { border-radius: var(--gp-radius-sm); }
.entry-content blockquote {
  border-left: 4px solid var(--gp-accent); margin: 1.5em 0; padding: .4em 0 .4em 20px;
  font-style: italic; color: var(--gp-text-muted);
}
.entry-content pre { background: var(--gp-bg-alt); padding: 16px; border-radius: var(--gp-radius-sm); overflow:auto; }
.entry-content code { background: var(--gp-bg-alt); padding: 2px 6px; border-radius: 4px; font-size: .9em; }

.gp-breadcrumbs { font-size: 13px; color: var(--gp-text-muted); margin-bottom: 16px; }
.gp-breadcrumbs a { color: var(--gp-text-muted); }
.gp-breadcrumbs a:hover { color: var(--gp-accent); }
.gp-breadcrumbs .sep { margin: 0 6px; opacity: .5; }

.gp-tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.gp-tags a {
  font-size: 13px; background: var(--gp-bg-alt); color: var(--gp-text-muted);
  padding: 5px 11px; border-radius: 999px; text-decoration: none;
}
.gp-tags a:hover { background: var(--gp-accent); color: var(--gp-accent-ink); }

.gp-share { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.gp-share a {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--gp-border); color: var(--gp-text);
}
.gp-share a:hover { border-color: var(--gp-accent); color: var(--gp-accent); text-decoration: none; }

.gp-author-box {
  display: flex; gap: 16px; margin-top: 34px; padding: 20px;
  background: var(--gp-bg-alt); border-radius: var(--gp-radius);
}
.gp-author-box img { border-radius: 50%; width: 64px; height: 64px; }
.gp-author-box h4 { margin: 0 0 4px; }
.gp-author-box p { margin: 0; color: var(--gp-text-muted); font-size: 14px; }

.gp-related { margin-top: 50px; }
.gp-related h3 { font-size: 22px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 18px; }

/* =========================================================
   7. SIDEBAR / WIDGETS
   ========================================================= */
.gp-widget { background: var(--gp-surface); border: 1px solid var(--gp-border); border-radius: var(--gp-radius); padding: 18px; margin-bottom: var(--gp-gap); }
.gp-widget .widget-title { font-size: 16px; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--gp-accent); display: inline-block; }
.gp-widget ul { list-style: none; margin: 0; padding: 0; }
.gp-widget li { padding: 7px 0; border-bottom: 1px solid var(--gp-border); }
.gp-widget li:last-child { border-bottom: 0; }
.gp-widget a { color: var(--gp-text); }
.gp-widget a:hover { color: var(--gp-accent); }
@media (max-width: 980px) {
  /* In column direction, align-items controls WIDTH (cross axis).
     Switch to stretch so .gp-main fills the full container width —
     this stops the article card from overflowing the right edge on mobile. */
  .gp-layout  { flex-direction: column; align-items: stretch; }
  .gp-sidebar { flex-basis: auto; width: 100%; position: static; }
}

/* =========================================================
   8. SECTION HEADINGS / PAGINATION
   ========================================================= */
.gp-section-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.gp-section-head h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0; color: var(--gp-text-muted); font-weight: 700; }
.gp-section-head::after { content: ""; flex: 1; height: 1px; background: var(--gp-border-soft); }
.gp-section-head .bar { display: none; }

.gp-pagination { margin: 36px 0 0; display: flex; justify-content: center; }
.gp-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 10px; margin: 0 3px;
  border: 1px solid var(--gp-border); border-radius: var(--gp-pill); color: var(--gp-text);
  font-weight: 600; background: var(--gp-surface);
}
.gp-pagination .page-numbers.current,
.gp-pagination a.page-numbers:hover { background: var(--gp-accent); color: var(--gp-accent-ink); border-color: var(--gp-accent); text-decoration: none; }

/* =========================================================
   9. FOOTER — minimal & refined (Apple-style)
   ========================================================= */
.site-footer { background: var(--gp-bg); border-top: 1px solid var(--gp-border-soft); margin-top: 54px; }
/* Optional widget columns — only render when the user adds widgets */
.gp-footer-widgets { display: grid; grid-template-columns: repeat(var(--gp-footer-cols,4),1fr); gap: 28px; padding: 38px 0 28px; }
@media (max-width: 880px){ .gp-footer-widgets { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .gp-footer-widgets { grid-template-columns: 1fr; } }
.gp-footer-widgets .widget-title { font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-bottom: 10px; }
.gp-footer-widgets a { font-size: 13px; }
/* Bottom bar — centered, quiet, only the copyright shows by default */
.gp-footer-bottom {
  border-top: 1px solid var(--gp-border-soft); padding: 26px 0;
  display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
  font-size: 13px; color: var(--gp-text-muted);
}
.gp-footer-menu { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.gp-footer-menu a { font-size: 13px; color: var(--gp-text-muted); font-weight: 500; }
.gp-footer-menu a:hover { color: var(--gp-text); }
.gp-social { display: flex; gap: 10px; justify-content: center; }
.gp-social a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--gp-border); border-radius: 50%; color: var(--gp-text-muted); }
.gp-social a:hover { color: var(--gp-accent); border-color: var(--gp-accent); }
.gp-social svg { width: 15px; height: 15px; }

/* =========================================================
   10. FORMS / SEARCH / 404 / COMMENTS
   ========================================================= */
input[type=text], input[type=search], input[type=email], input[type=url], textarea, select {
  width: 100%; padding: 11px 16px; border: 1px solid var(--gp-border);
  border-radius: var(--gp-pill); background: var(--gp-surface); color: var(--gp-text); font: inherit;
}
textarea { border-radius: var(--gp-radius-sm); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gp-accent); outline-offset: 1px; border-color: var(--gp-accent); }
.gp-btn, button, input[type=submit] {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gp-accent); color: var(--gp-accent-ink); border: 0;
  padding: 11px 24px; border-radius: var(--gp-pill); font-weight: 700; cursor: pointer; font: inherit;
  transition: transform .2s var(--gp-ease), opacity .2s;
}
.gp-btn:hover, button:hover, input[type=submit]:hover { opacity: .92; transform: scale(1.03); text-decoration: none; }
.search-form { display: flex; gap: 8px; }
.gp-404 { text-align: center; padding: 80px 0; }
.gp-404 h1 { font-size: clamp(70px,15vw,140px); color: var(--gp-accent); margin: 0; line-height: 1; }

.comment-list { list-style: none; padding: 0; }
.comment-list .comment { background: var(--gp-bg-alt); border-radius: var(--gp-radius); padding: 16px; margin-bottom: 14px; }
.comment-list .children { list-style: none; margin-left: 24px; }
.comment-author { font-weight: 700; }
.comment-meta { font-size: 12.5px; color: var(--gp-text-muted); }

/* =========================================================
   11. UTIL
   ========================================================= */
.gp-load-more-wrap { text-align: center; margin-top: 36px; }
.gp-spin { animation: gpspin 1s linear infinite; }
@keyframes gpspin { to { transform: rotate(360deg); } }
.gp-fade-up { animation: gpfade .5s ease both; }
@keyframes gpfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* =========================================================
   11b. GRADIENT PLACEHOLDER (no featured image)
   ========================================================= */

/* Wrapper — fills the .gp-card__thumb slot exactly */
.gp-no-img {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Decorative SVG circles — subtle, stays behind the initial */
.gp-no-img__pattern {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Large typographic initial — the hero character */
.gp-no-img__initial {
  position: relative; z-index: 1;
  font-family: var(--gp-font-head);
  font-size: clamp(64px, 14vw, 130px);
  font-weight: 800;
  color: rgba(255, 255, 255, .26);
  line-height: 1;
  letter-spacing: -.02em;
  user-select: none;
  text-transform: uppercase;
}
/* Compact card thumb: scale the initial down to fit the small thumbnail */
.gp-card__thumb .gp-no-img__initial { font-size: 30px; }
.gp-grid .gp-card--feature .gp-card__thumb .gp-no-img__initial { font-size: 46px; }

/* Single post hero placeholder: taller, larger initial */
.gp-featured--nophoto { margin: 0 0 26px; border-radius: var(--gp-radius); overflow: hidden; }
.gp-featured--nophoto .gp-no-img { position: relative; aspect-ratio: 21/8; }
.gp-featured--nophoto .gp-no-img__initial { font-size: clamp(80px, 18vw, 200px); }

/* =========================================================
   12. MOBILE POLISH (v1.4)
   ========================================================= */

/* ---- Safety: prevent wide media breaking layout (NOT overflow:hidden on html/body) ---- */
/* We do NOT use overflow-x on html or body — that clips article text and ads. */
/* Instead we ensure all known overflow sources are contained at element level.  */
img, video, iframe, embed, object, figure { max-width: 100%; height: auto; }
.entry-content pre { white-space: pre-wrap; word-break: break-all; }
.entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Flex/grid children: prevent min-content blowout ---- */
.gp-main { min-width: 0; }

/* ---- Long text in articles: wrap gracefully ---- */
.entry-content,
.entry-title { overflow-wrap: break-word; }

/* ---- Never render visually empty widget boxes ---- */
.gp-widget:empty { display: none; }
.gp-footer-col:empty { display: none; }

/* ---- Footer widget grid (--gp-footer-cols set dynamically in PHP) ---- */
.gp-footer-widgets { grid-template-columns: repeat(var(--gp-footer-cols, 4), 1fr); }
@media (max-width: 880px) { .gp-footer-widgets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gp-footer-widgets { grid-template-columns: 1fr; } }

/* ---- Tablet (601 – 860px) ---- */
@media (max-width: 860px) {
  .gp-container { padding-left: 16px; padding-right: 16px; }
}

/* ---- Mobile (≤ 600px) ---- */
@media (max-width: 600px) {
  /* Keep enough side padding — do NOT go below 16px or content feels jammed */
  .gp-container { padding-left: 16px; padding-right: 16px; }
  :root { --gp-gap: 16px; }

  /* Header: prevent long site name from pushing buttons off-screen */
  .site-header .gp-container { gap: 8px; }
  .site-title { font-size: 20px; max-width: 56vw;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gp-icon-btn { width: 36px; height: 36px; }

  /* Grid cards: image top, text below */
  .gp-card__thumb { aspect-ratio: 16/10; }
  .gp-card__body  { padding: 12px 14px 16px; }
  .gp-card__title { font-size: 18px; line-height: 1.25; }
  .gp-card__excerpt { display: none; }
  .gp-card__meta  { font-size: 12px; gap: 6px; }

  /* Feature card hero */
  .gp-grid .gp-card--feature .gp-card__thumb   { aspect-ratio: 16/9; }
  .gp-grid .gp-card--feature .gp-card__title   { font-size: 22px; }
  .gp-grid .gp-card--feature .gp-card__excerpt { display: block; }

  /* Single post article — comfortable readable padding, NOT compressed */
  .gp-article { padding: 20px 18px; }
  .entry-title { font-size: 26px; line-height: 1.2; }
  .entry-content { font-size: 16.5px; line-height: 1.8; }
  .gp-entry-meta { font-size: 13px; gap: 10px; }

  /* Footer bottom: stack on narrow screens */
  .gp-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- Very small phones (≤ 360px) ---- */
@media (max-width: 360px) {
  .gp-container { padding-left: 12px; padding-right: 12px; }
  .site-title { font-size: 18px; max-width: 52vw; }
  .gp-card__title { font-size: 16px; }
  .gp-article { padding: 16px 14px; }
}

/* =========================================================
   13. FLOATING ELEMENTS — Reading bar, scroll-top, promo
   ========================================================= */

/* ── Reading progress bar ──────────────────────────────── */
#gp-read-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 3px; background: transparent; pointer-events: none;
}
#gp-read-bar__fill {
  height: 100%; width: 0%;
  background: var(--gp-accent);
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── Scroll-to-top button (bottom-LEFT so it never overlaps the promo) ── */
#gp-scroll-top {
  position: fixed; z-index: 250;
  left: 16px; right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gp-accent); color: var(--gp-accent-ink);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.26);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
#gp-scroll-top.gp-visible { opacity: 1; transform: none; pointer-events: auto; }
#gp-scroll-top svg { width: 18px; height: 18px; }

/* ── Floating promo widget (compact, sits low in the bottom-right) ── */
#gp-promo {
  position: fixed; z-index: 300;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 260px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: 14px; padding: 11px 12px;
  box-shadow: 0 6px 26px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.10);
  display: flex; align-items: flex-start; gap: 10px;
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
#gp-promo.gp-promo--visible { opacity: 1; transform: none; pointer-events: auto; }
#gp-promo[hidden] { display: none !important; }
.gp-promo--bottom-left { right: auto; left: 14px; }

.gp-promo__close {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gp-bg-alt); border: 1px solid var(--gp-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; color: var(--gp-text-muted); transition: .15s;
}
.gp-promo__close:hover { background: var(--gp-accent); color: #fff; border-color: var(--gp-accent); }
.gp-promo__close svg { width: 11px; height: 11px; }

.gp-promo__icon { flex-shrink: 0; width: 42px; height: 42px; }
.gp-promo__icon svg,
.gp-promo__icon img { width: 42px; height: 42px; border-radius: 11px; display: block; }

.gp-promo__body { flex: 1; min-width: 0; padding-right: 16px; display: flex; flex-direction: column; gap: 2px; }
.gp-promo__title { display: block; font-size: 13.5px; font-weight: 700; color: var(--gp-heading); line-height: 1.25; }
.gp-promo__sub   { display: block; font-size: 11.5px; color: var(--gp-text-muted); line-height: 1.35; }
.gp-promo__btn {
  display: inline-block; margin-top: 7px;
  padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff;
  text-decoration: none; background: var(--gp-accent);
  transition: opacity .15s; align-self: flex-start;
}
.gp-promo__btn:hover { opacity: .88; text-decoration: none; }
.gp-promo--telegram .gp-promo__btn { background: #2AABEE; }
.gp-promo--whatsapp .gp-promo__btn { background: #25D366; }

/* Mobile: keep compact, anchor low, never full-bleed */
@media (max-width: 600px) {
  .gp-promo--no-mobile { display: none !important; }
  #gp-promo {
    width: min(300px, calc(100vw - 28px));
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .gp-promo--bottom-left { left: 12px; right: auto; }
  /* On mobile the promo owns the bottom-right; nudge scroll-top up a touch */
  #gp-scroll-top { left: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================
   14. SCROLL REVEAL (progressive, fails safe to visible)
   ========================================================= */
.gp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--gp-ease), transform .6s var(--gp-ease); }
.gp-reveal.gp-in { opacity: 1; transform: none; }
.no-js .gp-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}