/*
Theme Name: Fractured Protocol
Theme URI: https://example.com/fractured-protocol/
Author: Custom Build
Version: 1.0.0
Description: A tactical, high-contrast gaming-style WordPress theme inspired by tactical shooters. Features customizable color schemes, HUD-style layouts, glitch animations, and Customizer controls. Blog, gaming, esports, community.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-header, custom-colors, custom-menu, custom-background, blog, dark, gaming, esports, one-column, two-columns, left-sidebar, right-sidebar, featured-images, post-thumbnails, sticky-post, translation-ready
Status: publish
*/

/* =============================================
   GOOGLE FONTS
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Saira+Condensed:wght@400;700;900&display=swap');

/* =============================================
   CSS CUSTOM PROPERTIES — Customizer-driven
============================================= */
:root {
  /* Color scheme — overridden by Customizer */
  --fp-primary:        #FF4655;   /* Valorant red */
  --fp-primary-dark:   #cc2233;
  --fp-accent:         #00E5FF;   /* Cyan */
  --fp-accent-dark:    #00b8cc;

  --fp-bg:             #0a0c0f;
  --fp-bg-2:           #0f1115;
  --fp-bg-3:           #141720;
  --fp-surface:        #1a1d26;
  --fp-surface-2:      #20242f;
  --fp-surface-3:      #272b38;

  --fp-border:         rgba(255,70,85,.18);
  --fp-border-subtle:  rgba(255,255,255,.07);
  --fp-border-accent:  rgba(0,229,255,.2);

  --fp-text:           #e8eaf2;
  --fp-text-muted:     #7a8099;
  --fp-text-dim:       #4a5066;

  --fp-glow-primary:   0 0 20px rgba(255,70,85,.4);
  --fp-glow-accent:    0 0 20px rgba(0,229,255,.4);

  /* Typography */
  --fp-font-display:  'Saira Condensed', 'Rajdhani', sans-serif;
  --fp-font-ui:       'Rajdhani', sans-serif;
  --fp-font-mono:     'Share Tech Mono', monospace;
  --fp-font-body:     'Rajdhani', sans-serif;

  /* Sizing */
  --fp-container:     1160px;
  --fp-main:          680px;
  --fp-sidebar:       220px;

  --fp-radius:        2px;
  --fp-radius-md:     4px;

  --fp-transition:    0.15s ease;
  --fp-transition-md: 0.25s ease;
}

/* =============================================
   RESET
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--fp-font-body);
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--fp-bg);
  color: var(--fp-text);
  text-align: left;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scanline noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,.15) 2px,
      rgba(0,0,0,.15) 4px
    );
  pointer-events: none;
  z-index: 9990;
  opacity: .4;
}

a {
  color: var(--fp-primary);
  text-decoration: none;
  transition: color var(--fp-transition);
}
a:hover { color: var(--fp-accent); text-decoration: none; }
a img { border: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fp-font-display);
  font-weight: 900;
  line-height: 1.1;
  color: var(--fp-text);
  text-transform: uppercase;
  letter-spacing: 1px;
}

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.4em; }
li { margin-bottom: .3em; }

blockquote {
  border-left: 3px solid var(--fp-primary);
  padding: 10px 16px;
  margin: 14px 0;
  background: var(--fp-surface);
  color: var(--fp-text-muted);
  font-style: italic;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

code, kbd {
  font-family: var(--fp-font-mono);
  font-size: .88em;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border-subtle);
  padding: 1px 6px;
  color: var(--fp-accent);
}

pre {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border-subtle);
  border-left: 3px solid var(--fp-accent);
  padding: 14px;
  overflow-x: auto;
  font-family: var(--fp-font-mono);
  font-size: 13px;
  color: var(--fp-accent);
}

pre code { background: none; border: none; padding: 0; }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--fp-primary), transparent);
  margin: 20px 0;
}

small { font-size: 12px; }

input, textarea, select, button {
  font-family: var(--fp-font-ui);
  font-size: 14px;
}

::selection { background: rgba(255,70,85,.35); color: #fff; }

/* =============================================
   READING PROGRESS BAR
============================================= */
#fp-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent));
  z-index: 9999;
  transition: width .1s linear;
  box-shadow: 0 0 10px var(--fp-primary);
}

/* =============================================
   CONTAINER / WRAPPER
============================================= */
#fp-wrap {
  max-width: var(--fp-container);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* =============================================
   HEADER
============================================= */
#fp-header {
  position: relative;
  width: 100%;
  background: var(--fp-bg-2);
  border-bottom: 1px solid var(--fp-border);
  overflow: hidden;
  z-index: 100;
}

/* Header background grid pattern */
#fp-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,70,85,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,70,85,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Red corner accent top-left */
#fp-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--fp-primary), transparent);
}

.fp-header-inner {
  max-width: var(--fp-container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* =============================================
   LOGO / SITE TITLE
============================================= */
#fp-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  flex-shrink: 0;
  text-decoration: none;
}

#fp-logo:hover { text-decoration: none; }

.fp-logo-icon {
  width: 38px;
  height: 38px;
  background: var(--fp-primary);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fp-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  transition: transform var(--fp-transition-md);
}

#fp-logo:hover .fp-logo-icon {
  transform: rotate(30deg);
  box-shadow: var(--fp-glow-primary);
}

.fp-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fp-logo-name {
  font-family: var(--fp-font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fp-text);
  line-height: 1;
}

.fp-logo-name span { color: var(--fp-primary); }

.fp-logo-tagline {
  font-family: var(--fp-font-mono);
  font-size: 10px;
  color: var(--fp-text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* =============================================
   HEADER SEARCH
============================================= */
#fp-header-search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border-subtle);
  padding: 0;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

#fp-header-search input[type="search"],
#fp-header-search input[type="text"] {
  background: transparent;
  border: none;
  outline: none;
  color: var(--fp-text);
  padding: 8px 14px;
  font-family: var(--fp-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  width: 200px;
}

#fp-header-search input::placeholder { color: var(--fp-text-dim); }

#fp-header-search input[type="submit"],
#fp-header-search button {
  background: var(--fp-primary);
  border: none;
  color: #fff;
  padding: 8px 16px;
  font-family: var(--fp-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fp-transition);
}

#fp-header-search input[type="submit"]:hover { background: var(--fp-primary-dark); }

/* =============================================
   PRIMARY NAVIGATION
============================================= */
#fp-nav {
  background: var(--fp-bg);
  border-bottom: 1px solid var(--fp-border);
  position: sticky;
  top: 0;
  z-index: 200;
}

.fp-nav-inner {
  max-width: var(--fp-container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#fp-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}

#fp-nav ul li {
  position: relative;
}

#fp-nav ul li a {
  display: block;
  padding: 14px 18px;
  font-family: var(--fp-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fp-text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--fp-transition), border-color var(--fp-transition), background var(--fp-transition);
  white-space: nowrap;
}

#fp-nav ul li a:hover,
#fp-nav ul li.current_page_item > a,
#fp-nav ul li.current-menu-item > a,
#fp-nav ul li.current_page_parent > a,
#fp-nav ul li.current-menu-ancestor > a {
  color: var(--fp-primary);
  border-bottom-color: var(--fp-primary);
  background: rgba(255,70,85,.06);
  text-decoration: none;
}

/* Dropdown */
#fp-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  min-width: 180px;
  z-index: 9999;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

#fp-nav ul ul li { border-bottom: 1px solid var(--fp-border-subtle); }
#fp-nav ul ul li:last-child { border-bottom: none; }

#fp-nav ul ul li a {
  padding: 10px 16px;
  border-bottom: none;
  font-size: 12px;
}

#fp-nav ul li:hover > ul { display: block; }

/* Nav RSS link */
.fp-nav-rss {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fp-font-mono);
  font-size: 11px;
  color: var(--fp-text-dim);
  padding: 0 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fp-nav-rss a { color: var(--fp-text-dim); }
.fp-nav-rss a:hover { color: var(--fp-accent); }

/* =============================================
   HERO / HEADER IMAGE BANNER
============================================= */
#fp-hero {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--fp-bg-3);
  border-bottom: 1px solid var(--fp-border);
}

#fp-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .25;
  filter: saturate(0.5) contrast(1.2);
}

#fp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--fp-bg) 0%, transparent 40%, transparent 60%, var(--fp-bg) 100%),
    linear-gradient(0deg, var(--fp-bg) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* Diagonal slash accent */
#fp-hero::after {
  content: '';
  position: absolute;
  right: 15%;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--fp-primary), transparent);
  transform: skewX(-10deg);
  opacity: .6;
  z-index: 2;
}

.fp-hero-content {
  position: relative;
  z-index: 3;
  max-width: var(--fp-container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-hero-eyebrow {
  font-family: var(--fp-font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--fp-primary);
  text-transform: uppercase;
}

.fp-hero-title {
  font-family: var(--fp-font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  color: var(--fp-text);
  line-height: 1;
  text-shadow: 0 0 40px rgba(255,70,85,.3);
}

.fp-hero-title em {
  font-style: normal;
  color: var(--fp-primary);
}

/* =============================================
   MAIN LAYOUT — Full-width flex
============================================= */
#fp-body {
  max-width: var(--fp-container);
  margin: 24px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: var(--fp-sidebar) 1fr var(--fp-sidebar);
  gap: 18px;
  align-items: start;
}

/* =============================================
   LEFT SIDEBAR (obar)
============================================= */
#fp-obar {
  /* Left sidebar */
}

/* =============================================
   CENTER CONTENT
============================================= */
#fp-main {
  min-width: 0;
}

/* =============================================
   RIGHT SIDEBAR
============================================= */
#fp-sidebar {
  /* Right sidebar */
}

/* =============================================
   WIDGET / PANEL
============================================= */
.fp-panel {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border-subtle);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  animation: fpSlideIn .3s ease both;
}

.fp-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent), transparent);
}

.fp-panel-title {
  font-family: var(--fp-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fp-primary);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--fp-border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fp-panel-title::before {
  content: '//';
  color: var(--fp-text-dim);
  font-family: var(--fp-font-mono);
  font-size: 10px;
}

.fp-panel-body {
  padding: 12px 14px;
}

/* Widget items */
.fp-panel ul {
  list-style: none;
  padding: 0; margin: 0;
}

.fp-panel ul li {
  border-bottom: 1px solid var(--fp-border-subtle);
  padding: 6px 0;
  font-size: 13px;
}

.fp-panel ul li:last-child { border-bottom: none; }

.fp-panel ul li a {
  color: var(--fp-text-muted);
  display: block;
  transition: color var(--fp-transition), padding-left var(--fp-transition);
}

.fp-panel ul li a:hover {
  color: var(--fp-accent);
  padding-left: 6px;
  text-decoration: none;
}

/* Sidebar widget headings override */
.sidebar ul, .obar ul { list-style: none; padding: 0; margin: 0; }

.sidebar ul > li,
.obar ul > li {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border-subtle);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.sidebar ul > li::before,
.obar ul > li::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent), transparent);
}

.sidebar ul > li > h2,
.obar ul > li > h2 {
  font-family: var(--fp-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fp-primary);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--fp-border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.sidebar ul > li > h2::before,
.obar ul > li > h2::before {
  content: '//';
  color: var(--fp-text-dim);
  font-family: var(--fp-font-mono);
  font-size: 10px;
}

.sidebar ul > li > ul,
.obar ul > li > ul {
  padding: 8px 14px 12px;
  list-style: none;
}

.sidebar ul > li > ul > li,
.obar ul > li > ul > li {
  border-bottom: 1px solid var(--fp-border-subtle);
  padding: 5px 0;
  font-size: 13px;
  margin: 0;
}

.sidebar ul > li > ul > li:last-child { border-bottom: none; }

.sidebar ul > li > ul > li a,
.obar ul > li > ul > li a {
  color: var(--fp-text-muted);
  display: block;
  transition: color var(--fp-transition), padding-left var(--fp-transition);
  font-family: var(--fp-font-ui);
}

.sidebar ul > li > ul > li a:hover,
.obar ul > li > ul > li a:hover {
  color: var(--fp-accent);
  padding-left: 6px;
  text-decoration: none;
}

/* Widget search */
.sidebar ul li.widget_search,
.obar ul li.widget_search {
  padding-bottom: 0;
}

.sidebar ul li select,
.obar ul li select {
  width: 100%;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border-subtle);
  color: var(--fp-text);
  padding: 6px;
  font-family: var(--fp-font-ui);
  outline: none;
  margin-top: 6px;
}

/* Tag cloud in sidebar */
.widget_tag_cloud div,
.wp_widget_tag_cloud div {
  padding: 8px 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.widget_tag_cloud a,
.wp_widget_tag_cloud a {
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border-subtle);
  color: var(--fp-text-muted) !important;
  padding: 2px 8px;
  font-size: 11px !important;
  font-family: var(--fp-font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  transition: all var(--fp-transition);
  line-height: 1.6;
}

.widget_tag_cloud a:hover,
.wp_widget_tag_cloud a:hover {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
  color: #fff !important;
}

/* =============================================
   POST CARD
============================================= */
.fp-post {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border-subtle);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--fp-transition-md), transform var(--fp-transition-md);
  animation: fpSlideIn .35s ease both;
}

.fp-post:nth-child(2) { animation-delay: .06s; }
.fp-post:nth-child(3) { animation-delay: .12s; }
.fp-post:nth-child(4) { animation-delay: .18s; }
.fp-post:nth-child(5) { animation-delay: .24s; }

.fp-post::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--fp-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--fp-transition-md);
}

.fp-post:hover {
  border-color: rgba(255,70,85,.3);
  transform: translateX(3px);
}

.fp-post:hover::before { transform: scaleY(1); }

/* Top stripe */
.fp-post::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--fp-primary), transparent 60%);
}

/* Sticky post */
.sticky.fp-post::after {
  background: linear-gradient(90deg, var(--fp-accent), transparent 60%);
}

.sticky.fp-post .fp-post-badge {
  background: var(--fp-accent);
}

.fp-post-badge {
  display: inline-block;
  background: var(--fp-primary);
  color: #fff;
  font-family: var(--fp-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  padding: 3px 8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%);
}

.fp-post-thumbnail {
  width: 100%;
  max-height: 220px;
  overflow: hidden;
  position: relative;
}

.fp-post-thumbnail img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  filter: saturate(0.85);
  transition: filter var(--fp-transition-md), transform var(--fp-transition-md);
}

.fp-post:hover .fp-post-thumbnail img {
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.02);
}

/* Thumbnail overlay */
.fp-post-thumbnail::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(0deg, var(--fp-surface), transparent);
  pointer-events: none;
}

.fp-post-content {
  padding: 16px 18px 14px;
}

.fp-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fp-font-mono);
  font-size: 11px;
  color: var(--fp-text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fp-post-date { color: var(--fp-primary); font-weight: 600; }
.fp-post-author { color: var(--fp-text-muted); }
.fp-post-sep { color: var(--fp-text-dim); }

.fp-post-title {
  font-family: var(--fp-font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.fp-post-title a {
  color: var(--fp-text);
  text-decoration: none;
  background-image: linear-gradient(var(--fp-primary), var(--fp-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--fp-transition-md), color var(--fp-transition);
}

.fp-post-title a:hover {
  color: var(--fp-text);
  background-size: 100% 2px;
  text-decoration: none;
}

.fp-post-excerpt {
  font-size: 14px;
  color: var(--fp-text-muted);
  line-height: 1.65;
  margin-bottom: 12px;
}

.fp-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--fp-border-subtle);
  gap: 10px;
  flex-wrap: wrap;
}

.fp-post-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.fp-post-tags a {
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border-subtle);
  color: var(--fp-text-dim);
  font-family: var(--fp-font-mono);
  font-size: 10px;
  padding: 2px 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  transition: all var(--fp-transition);
}

.fp-post-tags a:hover {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
  color: #fff;
}

.fp-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fp-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fp-primary);
  padding: 6px 14px;
  border: 1px solid rgba(255,70,85,.4);
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  transition: all var(--fp-transition);
  white-space: nowrap;
}

.fp-more-link::after { content: '→'; }

.fp-more-link:hover {
  background: var(--fp-primary);
  color: #fff;
  border-color: var(--fp-primary);
  box-shadow: var(--fp-glow-primary);
  text-decoration: none;
}

/* =============================================
   PAGINATION
============================================= */
.fp-pagination,
.browse {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border-subtle);
  border-top: 2px solid var(--fp-primary);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.browse a,
.fp-pagination a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fp-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fp-primary);
  padding: 7px 16px;
  border: 1px solid rgba(255,70,85,.4);
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  transition: all var(--fp-transition);
}

.browse a:hover,
.fp-pagination a:hover {
  background: var(--fp-primary);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--fp-glow-primary);
}

/* =============================================
   SINGLE POST
============================================= */
.fp-entry h1, .fp-entry h2, .fp-entry h3,
.fp-entry h4, .fp-entry h5, .fp-entry h6 {
  margin-top: 20px;
  margin-bottom: 8px;
  color: var(--fp-text);
}

.fp-entry p { color: var(--fp-text-muted); margin-bottom: 1em; }
.fp-entry a { color: var(--fp-accent); }
.fp-entry a:hover { color: var(--fp-primary); }

.fp-entry img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--fp-border-subtle);
}

.fp-entry img.alignleft  { float: left;  margin: 5px 16px 8px 0; }
.fp-entry img.alignright { float: right; margin: 5px 0 8px 16px; }

/* =============================================
   COMMENTS
============================================= */
.fp-comments-area {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border-subtle);
  border-top: 2px solid var(--fp-primary);
  padding: 18px;
  margin-top: 18px;
}

.fp-comments-title {
  font-family: var(--fp-font-display);
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--fp-primary);
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fp-border-subtle);
}

ol.commentlist { list-style: none; padding: 0; margin: 0 0 16px; }

ol.commentlist li > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--fp-border-subtle);
}

.commentmetadata {
  font-family: var(--fp-font-mono);
  font-size: 11px;
  color: var(--fp-text-dim);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.commentmetadata a { color: var(--fp-text-dim); }

div.avatar { float: right; margin: 0 0 8px 12px; }
div.avatar img { border: 1px solid var(--fp-border); }

.reply a {
  font-family: var(--fp-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fp-primary);
  border: 1px solid rgba(255,70,85,.3);
  padding: 2px 10px;
  display: inline-block;
  margin-top: 6px;
  transition: all var(--fp-transition);
}

.reply a:hover {
  background: var(--fp-primary);
  color: #fff;
  text-decoration: none;
}

#respond {
  margin-top: 16px;
  padding: 16px;
  background: var(--fp-bg-3);
  border: 1px solid var(--fp-border-subtle);
}

#respond h3 {
  font-family: var(--fp-font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--fp-text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}

#respond label {
  display: block;
  font-family: var(--fp-font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fp-text-dim);
  margin-bottom: 3px;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
  width: 100%;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border-subtle);
  color: var(--fp-text);
  padding: 8px 10px;
  margin-bottom: 10px;
  outline: none;
  font-family: var(--fp-font-ui);
  transition: border-color var(--fp-transition);
}

#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond input[type="url"]:focus,
#respond textarea:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 2px rgba(255,70,85,.15);
}

#respond textarea { min-height: 100px; resize: vertical; }

#respond input[type="submit"] {
  background: var(--fp-primary);
  color: #fff;
  border: none;
  padding: 9px 20px;
  font-family: var(--fp-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  transition: background var(--fp-transition), box-shadow var(--fp-transition);
}

#respond input[type="submit"]:hover {
  background: var(--fp-primary-dark);
  box-shadow: var(--fp-glow-primary);
}

#respond .comment-form-comment label,
#respond .form-allowed-tags { display: none; }
#respond .required { color: var(--fp-primary); }

/* =============================================
   FOOTER
============================================= */
#fp-footer {
  background: var(--fp-bg-2);
  border-top: 1px solid var(--fp-border);
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}

#fp-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent), transparent);
}

.fp-footer-inner {
  max-width: var(--fp-container);
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fp-footer-copy {
  font-family: var(--fp-font-mono);
  font-size: 11px;
  color: var(--fp-text-dim);
  letter-spacing: 1px;
}

.fp-footer-copy a { color: var(--fp-text-muted); }
.fp-footer-copy a:hover { color: var(--fp-primary); }

.fp-footer-sig {
  font-family: var(--fp-font-mono);
  font-size: 10px;
  color: var(--fp-text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.fp-footer-sig span { color: var(--fp-primary); }

/* =============================================
   BACK TO TOP
============================================= */
#fp-btt {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: var(--fp-primary);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  clip-path: polygon(50% 0%, 100% 50%, 75% 50%, 75% 100%, 25% 100%, 25% 50%, 0% 50%);
  opacity: 0;
  transform: translateY(12px);
  transition: all var(--fp-transition-md);
  pointer-events: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fp-btt.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#fp-btt:hover {
  background: var(--fp-accent);
  box-shadow: var(--fp-glow-accent);
}

/* =============================================
   ANIMATIONS
============================================= */
@keyframes fpSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fpGlitch {
  0%, 100% { clip-path: inset(0 0 98% 0); transform: translateX(0); }
  10% { clip-path: inset(30% 0 50% 0); transform: translateX(-4px); }
  30% { clip-path: inset(80% 0 5% 0);  transform: translateX(4px); }
  50% { clip-path: inset(10% 0 85% 0); transform: translateX(-2px); }
  70% { clip-path: inset(60% 0 30% 0); transform: translateX(2px); }
}

/* =============================================
   GLITCH TITLE EFFECT
============================================= */
.fp-glitch {
  position: relative;
  display: inline-block;
}

.fp-glitch::before,
.fp-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.fp-glitch::before {
  color: var(--fp-accent);
  animation: fpGlitch 4s infinite linear;
  animation-delay: .5s;
  left: 2px;
}

.fp-glitch::after {
  color: var(--fp-primary);
  animation: fpGlitch 4s infinite linear;
  animation-delay: 1s;
  left: -2px;
}

/* =============================================
   SEARCHFORM
============================================= */
.search-form {
  display: flex;
  gap: 0;
}

.search-form input[type="search"],
.search-form input[type="text"] {
  flex: 1;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border-subtle);
  border-right: none;
  color: var(--fp-text);
  padding: 7px 10px;
  font-family: var(--fp-font-mono);
  font-size: 12px;
  outline: none;
}

.search-form input[type="submit"] {
  background: var(--fp-primary);
  border: 1px solid var(--fp-primary);
  color: #fff;
  padding: 7px 14px;
  font-family: var(--fp-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.search-form input[type="submit"]:hover { background: var(--fp-primary-dark); }

/* =============================================
   MISC WP CLASSES
============================================= */
.aligncenter, div.aligncenter { display: block; margin: 0 auto; }
.alignright { float: right; }
.alignleft  { float: left; }
img.wp-smiley { padding: 0; border: 0; }

.wp-caption {
  border: 1px solid var(--fp-border-subtle);
  text-align: center;
  background: var(--fp-surface);
  padding-top: 4px;
  margin: 12px;
  max-width: 95.5%;
}

.wp-caption img { max-width: 98%; height: auto; border: 0; }

.wp-caption p.wp-caption-text {
  font-family: var(--fp-font-mono);
  font-size: 11px;
  color: var(--fp-text-dim);
  padding: 4px 6px 6px;
  margin: 0;
  letter-spacing: 1px;
}

div.navigation { padding-bottom: 2em; }

/* Page links */
.page-links {
  font-family: var(--fp-font-mono);
  font-size: 12px;
  color: var(--fp-text-muted);
  margin-top: 14px;
}

/* Print */
@media print {
  #fp-nav, #fp-btt, #fp-progress, .reply, #respond, #fp-hero { display: none; }
  body { background: white; color: black; }
}