/**
 * Seldon Consulting - WordPress Custom Styles
 * Terminal Serif Design System
 *
 * Instructions:
 * 1. Add this CSS to Appearance > Customize > Additional CSS in WordPress
 * 2. OR add to your child theme's style.css
 * 3. Ensure fonts are loaded (see functions.php snippet)
 */

/* ================================
   FONTS
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ================================
   CSS CUSTOM PROPERTIES (LIGHT MODE)
   ================================ */
:root {
  /* Cream/Black monochromatic palette */
  --background: 45 25% 96%;        /* Warm cream background */
  --foreground: 0 0% 8%;           /* Deep black text */

  --card: 0 0% 100%;               /* Pure white cards */
  --card-foreground: 0 0% 8%;

  --primary: 100 13% 58%;          /* Sage green accent */
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 20%;           /* Charcoal */
  --secondary-foreground: 45 25% 96%;

  --muted: 45 15% 88%;             /* Light gray */
  --muted-foreground: 0 0% 35%;

  --accent: 100 13% 58%;           /* Sage green accent */
  --accent-foreground: 0 0% 100%;

  --border: 0 0% 15%;              /* Dark borders for pixel art effect */
  --input: 0 0% 100%;
  --ring: 100 13% 58%;

  --radius: 0px;                   /* Sharp corners for retro feel */

  /* Custom design tokens */
  --shadow-pixel: 2px 2px 0px hsl(0 0% 8% / 0.3);
  --shadow-card: 4px 4px 0px hsl(0 0% 8% / 0.2);
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Pixel art border thickness */
  --pixel-border: 2px;
}

/* ================================
   DARK MODE
   ================================ */
.dark,
body.dark-mode,
[data-theme="dark"] {
  /* Terminal green/amber on black for dark mode */
  --background: 0 0% 8%;
  --foreground: 45 25% 96%;

  --card: 0 0% 12%;
  --card-foreground: 45 25% 96%;

  --primary: 100 13% 65%;
  --primary-foreground: 0 0% 8%;

  --secondary: 0 0% 85%;
  --secondary-foreground: 0 0% 8%;

  --muted: 0 0% 18%;
  --muted-foreground: 0 0% 70%;

  --accent: 100 13% 65%;
  --accent-foreground: 0 0% 8%;

  --border: 45 25% 96%;
  --input: 0 0% 12%;
  --ring: 100 13% 65%;

  --shadow-pixel: 2px 2px 0px hsl(45 25% 96% / 0.3);
  --shadow-card: 4px 4px 0px hsl(45 25% 96% / 0.2);
}

/* ================================
   BASE STYLES
   ================================ */
html,
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: system-ui, -apple-system, -webkit-system-font, 'Segoe UI', sans-serif;
  max-width: 100vw;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ================================
   TYPOGRAPHY
   ================================ */

/* Serif headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.wp-block-heading {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
}

h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

h4 {
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
}

/* Monospace for code/technical elements */
code, pre, kbd, samp,
.mono,
.wp-block-code,
.wp-block-preformatted {
  font-family: 'IBM Plex Mono', monospace !important;
}

/* ================================
   LAYOUT & CONTAINERS
   ================================ */
.site-content,
.entry-content,
.wp-block-group__inner-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ================================
   PIXEL ART UTILITIES
   ================================ */

/* Pixel border */
.pixel-border,
.wp-block-button__link.pixel-border {
  border: var(--pixel-border) solid hsl(var(--border)) !important;
  box-shadow: var(--shadow-pixel) !important;
  border-radius: 0 !important;
}

.pixel-border-thick {
  border: calc(var(--pixel-border) * 2) solid hsl(var(--border)) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: 0 !important;
}

/* CRT scanline effect */
.scanlines {
  position: relative;
}

.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    hsl(var(--foreground) / 0.015) 3px,
    hsl(var(--foreground) / 0.015) 4px
  );
  pointer-events: none;
  z-index: 10;
}

/* Pixel grid background pattern */
.dithered {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 4px, hsl(var(--foreground) / 0.015) 4px, hsl(var(--foreground) / 0.015) 5px),
    repeating-linear-gradient(90deg, transparent, transparent 4px, hsl(var(--foreground) / 0.015) 4px, hsl(var(--foreground) / 0.015) 5px);
}

/* ================================
   BUTTONS
   ================================ */

/* WordPress default buttons */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
input[type="button"],
.button,
.btn {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid hsl(var(--border));
  border-radius: 0 !important;
  box-shadow: var(--shadow-pixel);
  transition: var(--transition-smooth);
  cursor: pointer;
}

/* Primary button */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button__link:not(.has-background),
.button-primary,
.btn-primary {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.wp-block-button__link:hover,
.button-primary:hover,
.btn-primary:hover {
  background-color: hsl(var(--primary) / 0.9) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card) !important;
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link,
.button-secondary,
.btn-secondary {
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: 2px solid hsl(var(--border)) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.button-secondary:hover,
.btn-secondary:hover {
  background-color: hsl(var(--foreground)) !important;
  color: hsl(var(--background)) !important;
  transform: translateY(-2px);
}

/* ================================
   NAVIGATION MENU
   ================================ */

/* Top level menu items */
.site-header,
.main-navigation {
  background-color: hsl(var(--background));
  border-bottom: 3px solid hsl(var(--border));
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main-navigation a,
.nav-menu a,
.menu a {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: hsl(var(--foreground) / 0.7);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.25rem;
  transition: var(--transition-smooth);
}

.main-navigation a:hover,
.nav-menu a:hover,
.menu a:hover {
  color: hsl(var(--foreground));
  border-bottom-color: hsl(var(--primary));
}

/* Mobile menu */
.mobile-menu-toggle {
  border: 2px solid hsl(var(--border));
  background: transparent;
  padding: 0.5rem;
}

/* ================================
   CARDS & BLOCKS
   ================================ */
.wp-block-group,
.wp-block-column,
.card,
article {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--card-foreground));
}

.wp-block-group.pixel-border,
.card.pixel-border {
  border: 2px solid hsl(var(--border));
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

/* ================================
   BLOG POST LAYOUT
   ================================ */
/* Center the main container */
.grid-container {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make posts use full width with cream background */
.site-content {
  background-color: hsl(var(--background)) !important;
  margin-top: 2rem !important;
  padding: 0 2rem !important;
}

/* Override GeneratePress sidebar layout - make content full width */
.home .site-content .content-area,
.blog .site-content .content-area,
.single .site-content .content-area,
.archive .site-content .content-area,
.search .site-content .content-area {
  width: 100% !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1000px !important;
}

/* Hide sidebar on blog/archive pages */
.home .sidebar,
.blog .sidebar,
.single .sidebar,
.archive .sidebar,
.search .sidebar {
  display: none !important;
}

/* Style posts like project boxes from React app */
article.post,
.hentry {
  background-color: hsl(var(--card)) !important;
  border: 2px solid hsl(var(--border)) !important;
  box-shadow: none !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
  transition: var(--transition-smooth);
}

/* Hover effect for post boxes */
body.blog article.post:hover,
body.archive article.post:hover,
body.search article.post:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0px hsl(0 0% 8% / 0.2) !important;
}

/* Style post meta (categories, comments, etc.) */
.entry-meta,
.entry-footer {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin: 1rem 0;
}

.entry-meta a,
.entry-footer a,
.cat-links a,
.comments-link a {
  color: hsl(var(--primary));
  text-decoration: none;
  transition: var(--transition-smooth);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}

.entry-meta a:hover,
.entry-footer a:hover,
.cat-links a:hover,
.comments-link a:hover {
  color: hsl(var(--primary) / 0.8);
  text-decoration: underline;
}

/* Style category and comment links */
.cat-links,
.comments-link {
  display: inline-block;
  margin-right: 1rem;
}

.cat-links::before,
.comments-link::before {
  content: '';
  margin-right: 0.5rem;
}

/* ================================
   FORMS & INPUTS
   ================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.wpcf7-form-control {
  font-family: 'IBM Plex Mono', monospace;
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--border));
  border-radius: 0 !important;
  padding: 0.75rem 1rem;
  transition: var(--transition-smooth);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
}

label,
.wpcf7-form-control-wrap {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: hsl(var(--foreground));
  text-transform: uppercase;
}

/* ================================
   LINKS
   ================================ */
a {
  color: hsl(var(--primary));
  text-decoration: none;
  transition: var(--transition-smooth);
}

a:hover {
  color: hsl(var(--primary) / 0.8);
  text-decoration: underline;
}

/* ================================
   IMAGES & MEDIA
   ================================ */
img,
.wp-block-image img {
  border: 2px solid hsl(var(--border));
  box-shadow: var(--shadow-pixel);
  height: auto;
}

figure {
  margin: 2rem 0;
}

/* ================================
   ANIMATIONS
   ================================ */

/* Terminal cursor blink */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cursor-blink {
  animation: blink 1s infinite;
}

/* Pixel fade in */
@keyframes pixelFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-pixel-fade {
  animation: pixelFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ================================
   FOOTER
   ================================ */
.site-footer,
footer {
  background-color: hsl(var(--background));
  border-top: 3px solid hsl(var(--border));
  padding: 4rem 0;
  margin-top: 4rem;
}

.site-footer a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  color: hsl(var(--foreground) / 0.6);
  letter-spacing: 0.05em;
}

.site-footer a:hover {
  color: hsl(var(--foreground));
}

/* ================================
   LOGO
   ================================ */
.site-logo,
.custom-logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background-color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon span {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: hsl(var(--background));
}

.logo-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* ================================
   UTILITY CLASSES
   ================================ */
.bg-background { background-color: hsl(var(--background)) !important; }
.bg-foreground { background-color: hsl(var(--foreground)) !important; }
.bg-primary { background-color: hsl(var(--primary)) !important; }
.bg-secondary { background-color: hsl(var(--secondary)) !important; }
.bg-muted { background-color: hsl(var(--muted)) !important; }

.text-foreground { color: hsl(var(--foreground)) !important; }
.text-primary { color: hsl(var(--primary)) !important; }
.text-secondary { color: hsl(var(--secondary)) !important; }
.text-muted { color: hsl(var(--muted-foreground)) !important; }

.border-foreground { border-color: hsl(var(--foreground)) !important; }
.border-primary { border-color: hsl(var(--primary)) !important; }
.border-border { border-color: hsl(var(--border)) !important; }

.mono {
  font-family: 'IBM Plex Mono', monospace !important;
}

.serif {
  font-family: 'Playfair Display', serif !important;
}

/* ================================
   WORDPRESS SPECIFIC OVERRIDES
   ================================ */

/* Remove default WordPress rounded corners */
.wp-block-button__link,
.wp-block-image img,
.wp-block-cover,
.wp-block-group {
  border-radius: 0 !important;
}

/* Override WordPress color palette if needed */
.has-primary-background-color {
  background-color: hsl(var(--primary)) !important;
}

.has-primary-color {
  color: hsl(var(--primary)) !important;
}

/* ================================
   RESPONSIVE ADJUSTMENTS
   ================================ */
@media (max-width: 768px) {
  .site-content,
  .entry-content {
    padding: 0 1rem;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.5rem;
  }
}

/* ================================
   PRINT STYLES
   ================================ */
@media print {
  .scanlines::before,
  .dithered {
    display: none;
  }
}

/* ================================
/* Remove border/line from post navigation to avoid double lines */
.post-navigation,
.entry-meta .post-navigation,
footer.entry-meta .post-navigation {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure only one line appears above the footer meta */
footer.entry-meta {
  border-top: 2px solid hsl(var(--border)) !important;
  padding-top: 1rem !important;
  margin-top: 1.5rem !important;
}

/* Remove any potential borders from individual elements within footer */
footer.entry-meta > * {
  border-top: none !important;
}

/* ================================
   FIX: Remove duplicate horizontal lines in post footer
   ================================ */

/* Remove all potential borders from footer elements that could cause duplicates */
footer.entry-meta,
footer.entry-meta *,
.cat-links,
.tags-links,
.comments-link,
.post-navigation,
#nav-below {
  border-top: none !important;
  border-bottom: none !important;
}

/* Add single border line only at the top of the footer.entry-meta */
article footer.entry-meta {
  border-top: 2px solid hsl(var(--border)) !important;
  padding-top: 1.5rem !important;
  margin-top: 2rem !important;
}

/* Ensure spacing between elements without borders */
footer.entry-meta .cat-links {
  margin-bottom: 1rem !important;
}

footer.entry-meta .post-navigation {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========================================================================
   COMPREHENSIVE FIX: Remove duplicate horizontal lines
   ======================================================================== */

/* Remove borders from entry-content bottom */
.entry-content,
.inside-article .entry-content,
article .entry-content {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Remove all borders from these elements */
.cat-links,
.tags-links,
.comments-link,
.post-navigation,
#nav-below,
.site-main .post-navigation,
footer.entry-meta .post-navigation,
.entry-meta .post-navigation,
footer.entry-meta .cat-links,
footer.entry-meta .tags-links,
footer.entry-meta .comments-link {
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Reset footer.entry-meta borders first */
footer.entry-meta,
.entry-footer,
article footer.entry-meta,
article .entry-footer {
  border-top: none !important;
  border-bottom: none !important;
}

/* Add ONLY ONE border at the very top of footer.entry-meta */
.single article footer.entry-meta:first-of-type,
article.post footer.entry-meta:first-of-type {
  border-top: 2px solid hsl(var(--border)) !important;
  padding-top: 1.5rem !important;
  margin-top: 2rem !important;
}

/* Ensure spacing between cat-links and post-navigation */
footer.entry-meta .cat-links {
  margin-bottom: 1rem !important;
  display: block !important;
}

/* Remove margins/padding that could create visual separation */
footer.entry-meta > span,
footer.entry-meta > nav {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
}


/* Aggressively remove any border that might appear between cat-links and post-navigation */
.single .cat-links,
.single .post-navigation,
.single #nav-below,
article.single .cat-links,
article.single .post-navigation,
article.post .cat-links + nav,
article.post .cat-links + .post-navigation,
footer.entry-meta .cat-links + nav,
footer.entry-meta .cat-links + .post-navigation,
footer.entry-meta span + nav {
  border-top: 0 !important;
  border-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make sure the post-navigation has no top border even with high specificity */
.single-post .post-navigation,
.single article .post-navigation,
body.single .site-main .post-navigation,
article .entry-meta .post-navigation {
  border-top: 0 !important;
  margin-top: 1rem !important;
  padding-top: 0 !important;
}


/* ====================================================================================
   NUCLEAR OPTION: Remove ALL borders in post footer area
   ==================================================================================== */

/* Set ALL borders to 0 for everything related to entry-meta and post navigation */
footer.entry-meta,
footer.entry-meta *,
.entry-meta,
.entry-meta *,
.cat-links,
.cat-links *,
.tags-links,
.tags-links *,
.comments-link,
.comments-link *,
.post-navigation,
.post-navigation *,
#nav-below,
#nav-below *,
.gp-icon,
article footer,
article footer * {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Now add ONLY the single border we want at the top of footer.entry-meta */
article.post > .inside-article > footer.entry-meta:first-of-type,
article.single > .inside-article > footer.entry-meta:first-of-type,
.hentry > .inside-article > footer.entry-meta {
  border-top: 2px solid hsl(var(--border)) !important;
  border-bottom: 0 !important;
  padding-top: 1.5rem !important;
  margin-top: 2rem !important;
}


/* ====================================================================================
   FIX: Remove duplicate border above site footer
   ==================================================================================== */

/* Remove border from .site-footer wrapper - the inner footer element has its own border */
.site-footer {
  border-top: none !important;
  margin-top: 0 !important;
}

/* Keep border only on the inner footer element (which has inline styles) */
.site-footer > footer {
  border-top: 3px solid hsl(var(--border)) !important;
}


/* ====================================================================================
   Style post footer with white background
   ==================================================================================== */

/* Set white background for post footer (entry-meta) */
footer.entry-meta,
article footer.entry-meta {
  background-color: #ffffff !important;
  background-color: hsl(var(--card)) !important;
  padding: 1.5rem 2rem !important;
  border-top: 2px solid hsl(var(--border)) !important;
  margin-top: 2rem !important;
}


/* ====================================================================================
   FIX: Make all backgrounds consistent - use cream background everywhere
   ==================================================================================== */

/* Override card/article backgrounds to match main background */
article.post,
.hentry,
article,
.inside-article,
.wp-block-group,
.wp-block-column,
.card {
  background-color: hsl(var(--background)) !important;
}

/* Also update the post footer to match */
footer.entry-meta,
article footer.entry-meta {
  background-color: hsl(var(--background)) !important;
}

/* Ensure site content area matches */
.site-content,
.content-area,
.site-main,
body,
html {
  background-color: hsl(var(--background)) !important;
}

/* Keep white only for specific elements like inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: #ffffff !important;
}


/* ====================================================================================
   FIX: Keep post white, make surrounding areas cream
   ==================================================================================== */

/* Keep the post article itself WHITE */
article.post,
.hentry,
article.single,
article#post-7,
.inside-article {
  background-color: #ffffff !important;
  background-color: hsl(var(--card)) !important;
}

/* Keep the post footer WHITE too */
footer.entry-meta,
article footer.entry-meta {
  background-color: #ffffff !important;
  background-color: hsl(var(--card)) !important;
}

/* Make ONLY the surrounding page areas cream */
body,
html,
.site-content,
#page,
.site {
  background-color: hsl(var(--background)) !important;
}