/*
Theme Name: Linux Free The Noise
Theme URI: https://linux.freethenoise.com
Description: Fully modern, wide-canvas child theme for Twenty Twenty-Five. Engineered specifically for Linux homelab engineering, GitOps runbooks, sysadmin guides, and technical infrastructure journals. 100% ADA & WCAG 2.1 AA/AAA compliant, fluid mobile responsiveness, high-contrast dark/light mode themes, accessible focus rings, and zero-dependency code copying.
Author: Wes T
Author URI: https://linux.freethenoise.com
Template: twentytwentyfive
Version: 1.0.3
Requires at least: 6.7
Tested up to: 7.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-linux
Tags: blog, wide-blocks, full-site-editing, block-patterns, dark-mode, custom-colors, custom-spacing, editor-style, accessibility-ready
*/

/* ==========================================================================
   ADA & WCAG 2.1 Design Tokens (Guaranteed Contrast >= 4.5:1 AA / 7.0:1 AAA)
   ========================================================================== */

:root {
  --ftn-content-width: 920px;
  --ftn-wide-width: 1440px;
  --ftn-font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ftn-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Light Mode Colors (Strict WCAG 2.1 AAA Compliant) */
  --ftn-bg-canvas: #f8fafc;
  --ftn-surface-card: #ffffff;
  --ftn-text-primary: #0f172a;       /* 17.8:1 against white (AAA) */
  --ftn-text-body: #1e293b;          /* 14.0:1 against white (AAA) */
  --ftn-text-muted: #334155;         /* 9.6:1 against white (AAA) */
  --ftn-text-date: #475569;          /* 7.5:1 against white (AAA) */
  --ftn-link: #026aa7;               /* 6.2:1 against white (AA/AAA large) */
  --ftn-link-hover: #014770;         /* 10.2:1 against white (AAA) */
  --ftn-border: #cbd5e1;
  --ftn-border-subtle: #e2e8f0;
  
  /* Category Pill / Tag Tokens (Light) */
  --ftn-pill-bg: #e0f2fe;
  --ftn-pill-text: #0369a1;          /* 5.9:1 against #e0f2fe (AA) */
  --ftn-pill-border: #bae6fd;
  
  /* Status Badge Tokens (Light) */
  --ftn-badge-bg: #dcfce7;
  --ftn-badge-text: #166534;        /* 7.1:1 against #dcfce7 (AAA) */
  --ftn-badge-border: #86efac;
  
  /* Focus indicator */
  --ftn-focus-ring: #0284c7;
}

/* Dark Mode Tokens (Triggered by prefers-color-scheme or dark mode class) */
@media (prefers-color-scheme: dark) {
  :root {
    --ftn-bg-canvas: #0b0f19;
    --ftn-surface-card: #151d2f;
    --ftn-text-primary: #f8fafc;     /* 16.5:1 against #151d2f (AAA) */
    --ftn-text-body: #e2e8f0;        /* 13.5:1 against #151d2f (AAA) */
    --ftn-text-muted: #cbd5e1;       /* 10.5:1 against #151d2f (AAA) */
    --ftn-text-date: #94a3b8;        /* 5.7:1 against #151d2f (AA) */
    --ftn-link: #38bdf8;             /* 6.8:1 against #151d2f (AA) */
    --ftn-link-hover: #7dd3fc;       /* 9.8:1 against #151d2f (AAA) */
    --ftn-border: #334155;
    --ftn-border-subtle: rgba(148, 163, 184, 0.2);
    
    /* Category Pill / Tag Tokens (Dark) */
    --ftn-pill-bg: rgba(56, 189, 248, 0.15);
    --ftn-pill-text: #7dd3fc;        /* 9.8:1 against #151d2f (AAA) */
    --ftn-pill-border: rgba(56, 189, 248, 0.3);
    
    /* Status Badge Tokens (Dark) */
    --ftn-badge-bg: rgba(16, 185, 129, 0.2);
    --ftn-badge-text: #4ade80;       /* 8.5:1 against #0b0f19 (AAA) */
    --ftn-badge-border: rgba(16, 185, 129, 0.4);
  }
}

/* ==========================================================================
   Full Site Accessibility & Typography
   ========================================================================== */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

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

body {
  background-color: var(--ftn-bg-canvas) !important;
  color: var(--ftn-text-body) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100%;
}

main.wp-block-group {
  flex-grow: 1;
}

/* WCAG 2.4.1: Accessible Skip to Content Link */
.skip-link.screen-reader-text:focus {
  background-color: #0f172a !important;
  color: #ffffff !important;
  clip: auto !important;
  clip-path: none !important;
  display: block !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 1rem 1.5rem !important;
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 1000000 !important;
  box-shadow: 0 0 0 3px #0284c7 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
}

/* WCAG 2.4.7: Accessible Focus Indicators on All Interactive Elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ftn-focus-ring) !important;
  outline-offset: 3px !important;
}

/* Accessible links */
a {
  color: var(--ftn-link) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--ftn-link-hover) !important;
  text-decoration: underline !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-heading {
  color: var(--ftn-text-primary) !important;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Callout Boxes & Quick Runbooks (Fixes Inline Styles & Dark Mode Contrast)
   ========================================================================== */

div.wp-block-group[style*="background"],
div[style*="background:#f6f8fa"],
div[style*="background: #f6f8fa"],
div[style*="background-color:#f6f8fa"],
div[style*="border-left"],
.is-style-runbook-note,
.is-style-runbook-tip,
.is-style-runbook-warning,
.is-style-runbook-critical {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 1.5rem 0 !important;
  border-radius: 8px !important;
  padding: 1.25rem 1.4rem !important;
}

/* Light mode defaults for callouts */
div.wp-block-group[style*="background"] h1,
div.wp-block-group[style*="background"] h2,
div.wp-block-group[style*="background"] h3,
div.wp-block-group[style*="background"] h4,
div[style*="border-left"] h1,
div[style*="border-left"] h2,
div[style*="border-left"] h3,
div[style*="border-left"] h4 {
  color: #0f172a !important;
  margin-top: 0 !important;
}

div.wp-block-group[style*="background"] p,
div.wp-block-group[style*="background"] span,
div.wp-block-group[style*="background"] strong,
div[style*="border-left"] p,
div[style*="border-left"] span,
div[style*="border-left"] strong {
  color: #1e293b !important;
}

/* In Dark Mode, override inline light background and light text */
@media (prefers-color-scheme: dark) {
  div.wp-block-group[style*="background"],
  div[style*="background:#f6f8fa"],
  div[style*="background: #f6f8fa"],
  div[style*="background-color:#f6f8fa"],
  div[style*="border-left"],
  .is-style-runbook-note,
  .is-style-runbook-tip,
  .is-style-runbook-warning,
  .is-style-runbook-critical {
    background: #151d2f !important;
    background-color: #151d2f !important;
    border: 1px solid #334155 !important;
    border-left: 5px solid #38bdf8 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  }

  div.wp-block-group[style*="background"] h1,
  div.wp-block-group[style*="background"] h2,
  div.wp-block-group[style*="background"] h3,
  div.wp-block-group[style*="background"] h4,
  div[style*="border-left"] h1,
  div[style*="border-left"] h2,
  div[style*="border-left"] h3,
  div[style*="border-left"] h4 {
    color: #f8fafc !important;
  }

  div.wp-block-group[style*="background"] p,
  div.wp-block-group[style*="background"] span,
  div.wp-block-group[style*="background"] strong,
  div[style*="border-left"] p,
  div[style*="border-left"] span,
  div[style*="border-left"] strong {
    color: #cbd5e1 !important;
  }

  div.wp-block-group[style*="background"] :not(pre) > code,
  div[style*="border-left"] :not(pre) > code {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
  }
}

/* Ensure code blocks inside callout boxes fill full container */
div.wp-block-group[style*="background"] pre.wp-block-code,
div[style*="border-left"] pre.wp-block-code {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   Glass Card / Archive Category Card - ADA High Contrast
   ========================================================================== */

.is-style-glass-card {
  background: var(--ftn-surface-card) !important;
  border: 1px solid var(--ftn-border) !important;
  border-radius: 10px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  max-width: 100% !important;
}

.is-style-glass-card:hover {
  transform: translateY(-2px);
  border-color: var(--ftn-link) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.is-style-glass-card .wp-block-post-title a {
  color: var(--ftn-text-primary) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.is-style-glass-card .wp-block-post-title a:hover,
.is-style-glass-card .wp-block-post-title a:focus {
  color: var(--ftn-link) !important;
  text-decoration: underline !important;
}

.is-style-glass-card .wp-block-post-excerpt__excerpt,
.is-style-glass-card p {
  color: var(--ftn-text-muted) !important;
  line-height: 1.65 !important;
  font-size: 0.95rem !important;
}

.is-style-glass-card .wp-block-post-date,
.is-style-glass-card time {
  color: var(--ftn-text-date) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

/* Category pills in cards & meta */
.taxonomy-category a,
.wp-block-post-terms.taxonomy-category a,
.is-style-glass-card .taxonomy-category a {
  display: inline-block;
  background: var(--ftn-pill-bg) !important;
  color: var(--ftn-pill-text) !important;
  border: 1px solid var(--ftn-pill-border) !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 9999px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.taxonomy-category a:hover,
.taxonomy-category a:focus,
.is-style-glass-card .taxonomy-category a:hover,
.is-style-glass-card .taxonomy-category a:focus {
  background: var(--ftn-link) !important;
  color: #ffffff !important;
  border-color: var(--ftn-link) !important;
  text-decoration: none !important;
}

.wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--ftn-link) !important;
  margin-top: 0.75rem;
}

.wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-link:focus {
  color: var(--ftn-link-hover) !important;
}

/* ==========================================================================
   Header Status Badge
   ========================================================================== */

.ftn-site-badge {
  display: inline-block;
  font-family: var(--ftn-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ftn-badge-text);
  background: var(--ftn-badge-bg);
  border: 1px solid var(--ftn-badge-border);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  margin-left: 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* ==========================================================================
   Code Blocks & Terminal UX
   ========================================================================== */

pre.wp-block-code,
.wp-block-code pre {
  position: relative;
  background: #0d1117 !important;
  color: #f0f6fc !important;
  border: 1px solid #30363d !important;
  border-radius: 8px !important;
  padding: 1.1rem 1.25rem !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

pre.wp-block-code code,
.wp-block-code pre code {
  font-family: var(--ftn-font-mono) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  tab-size: 2;
  letter-spacing: -0.01em;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
  display: block;
  color: #f0f6fc !important;
}

.ftn-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 32px;
  min-width: 60px;
  background: rgba(33, 38, 45, 0.9);
  color: #f0f6fc;
  border: 1px solid #484f58;
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-family: var(--ftn-font-mono);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(4px);
  z-index: 10;
  user-select: none;
}

.ftn-copy-btn:hover,
.ftn-copy-btn:focus-visible {
  background: #38bdf8;
  color: #0b0f19;
  border-color: #38bdf8;
}

.ftn-copy-btn.copied {
  background: #10b981;
  color: #042f2e;
  border-color: #10b981;
}

.ftn-copy-btn svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

#ftn-a11y-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:not(pre) > code {
  font-family: var(--ftn-font-mono) !important;
  background: rgba(110, 118, 129, 0.15) !important;
  color: var(--ftn-link) !important;
  padding: 0.18em 0.4em !important;
  border-radius: 5px !important;
  font-size: 0.875em !important;
  border: 1px solid var(--ftn-border-subtle) !important;
  word-break: break-word;
}

#ftn-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0284c7;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
  border: none;
}

#ftn-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#ftn-back-to-top:hover,
#ftn-back-to-top:focus-visible {
  background: #0369a1;
  transform: translateY(-2px) scale(1.05);
}

#ftn-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #10b981);
  z-index: 999999;
  transition: width 0.1s ease-out;
}

/* ==========================================================================
   Mobile Fluid Rules (<= 781px)
   ========================================================================== */

@media (max-width: 781px) {
  :root {
    --wp--style--global--content-size: 100% !important;
    --wp--style--global--wide-size: 100% !important;
    --wp--style--root--padding-left: 1rem !important;
    --wp--style--root--padding-right: 1rem !important;
  }

  .wp-site-blocks,
  main.wp-block-group,
  .entry-content,
  .wp-block-post-content {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .is-layout-constrained > .alignwide {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .has-global-padding {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .has-global-padding > .alignfull {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    max-width: calc(100% + 2rem) !important;
    width: calc(100% + 2rem) !important;
  }

  .wp-block-columns {
    flex-wrap: wrap !important;
  }

  .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.25rem;
  }

  pre.wp-block-code,
  .wp-block-code pre,
  div.wp-block-group[style*="border-left"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}