/*
Theme Name:   Signal
Theme URI:    https://sango-os.local/signal
Author:       Sango OS
Author URI:   https://sango-os.local
Description:  A lightweight, hook-based, SEO-first personal publishing theme. Built for speed: no jQuery dependency, no bundled UI framework, system fonts by default, semantic HTML5, and JSON-LD structured data out of the box. Fully re-skinnable per site via the Customizer — one theme, many blogs.
Version:      1.0.0
Requires PHP: 7.4
Tested up to: 6.7
License:      GNU General Public License v2 or later
License URI:  LICENSE
Text Domain:  signal
*/

/* -------------------------------------------------------------------------
   0. DESIGN TOKENS
   Every visual knob a Customizer control touches lives here as a CSS
   custom property with inline overrides printed in inc/customizer.php.
   Change a token once, it cascades everywhere — no per-selector overrides.
-------------------------------------------------------------------------- */
:root{
  --signal-accent:      #2563EB;
  --signal-accent-ink:  #FFFFFF; /* text color placed ON TOP of the accent */
  --signal-ink:         #16181D;
  --signal-ink-soft:    #565C66;
  --signal-paper:       #FFFFFF;
  --signal-paper-soft:  #F4F5F7;
  --signal-border:      #E4E6EA;

  --signal-font-body:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --signal-font-head:   var(--signal-font-body);
  --signal-font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --signal-font-size:   18px;
  --signal-line-height: 1.65;

  --signal-content-width: 42rem;   /* single-column reading width  */
  --signal-site-width:    76rem;   /* full layout width w/ sidebar */
  --signal-gutter:        1.25rem;
  --signal-radius:        10px;
}

/* -------------------------------------------------------------------------
   1. RESET (minimal, not a framework)
-------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--signal-paper);
  color:var(--signal-ink);
  font-family:var(--signal-font-body);
  font-size:var(--signal-font-size);
  line-height:var(--signal-line-height);
  text-rendering:optimizeLegibility;
}
img, svg, video{ max-width:100%; height:auto; display:block; }
a{ color:var(--signal-accent); text-decoration-thickness:1px; text-underline-offset:0.15em; }
a:hover{ text-decoration:none; }
ul, ol{ padding-left:1.25em; }
table{ border-collapse:collapse; width:100%; }
button, input, textarea, select{ font:inherit; color:inherit; }
::selection{ background:var(--signal-accent); color:var(--signal-accent-ink); }

h1,h2,h3,h4,h5,h6{
  font-family:var(--signal-font-head);
  line-height:1.2;
  margin:1.6em 0 0.6em;
  font-weight:700;
  letter-spacing:-0.01em;
}
h1{ font-size:2.4rem; margin-top:0; }
h2{ font-size:1.7rem; }
h3{ font-size:1.35rem; }

/* -------------------------------------------------------------------------
   2. ACCESSIBILITY
-------------------------------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--signal-ink); color:#fff;
  padding:0.75em 1.25em; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--signal-accent); outline-offset:2px; }
.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden; word-wrap:normal;
}

/* -------------------------------------------------------------------------
   3. LAYOUT
-------------------------------------------------------------------------- */
.signal-wrap{
  max-width:var(--signal-site-width);
  margin-inline:auto;
  padding-inline:var(--signal-gutter);
}
.signal-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap:3rem;
}
.signal-layout.has-sidebar{
  grid-template-columns: minmax(0,1fr) 300px;
}
@media (max-width:820px){
  .signal-layout.has-sidebar{ grid-template-columns: minmax(0,1fr); }
}
.signal-content{ max-width:var(--signal-content-width); }
.signal-layout.has-sidebar .signal-content{ max-width:none; }

/* -------------------------------------------------------------------------
   4. HEADER
-------------------------------------------------------------------------- */
.signal-header{
  border-bottom:1px solid var(--signal-border);
  padding-block:1.25rem;
}
.signal-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.signal-branding{ display:flex; align-items:center; gap:0.75rem; }
.signal-site-title{ font-size:1.4rem; font-weight:800; margin:0; }
.signal-site-title a{ color:var(--signal-ink); text-decoration:none; }
.signal-site-description{ margin:0; font-size:0.9rem; color:var(--signal-ink-soft); }
.custom-logo{ max-height:44px; width:auto; }

.signal-nav ul{ list-style:none; display:flex; gap:1.5rem; margin:0; padding:0; flex-wrap:wrap; }
.signal-nav a{ color:var(--signal-ink); text-decoration:none; font-weight:600; font-size:0.95rem; }
.signal-nav a:hover{ color:var(--signal-accent); }
.signal-nav .sub-menu{ display:none; }

/* -------------------------------------------------------------------------
   5. ENTRIES / CARDS
-------------------------------------------------------------------------- */
.signal-entry + .signal-entry{ margin-top:3rem; padding-top:3rem; border-top:1px solid var(--signal-border); }
.signal-entry-title{ margin-top:0; font-size:1.9rem; }
.signal-entry-title a{ color:var(--signal-ink); text-decoration:none; }
.signal-entry-title a:hover{ color:var(--signal-accent); }
.signal-entry-meta{ color:var(--signal-ink-soft); font-size:0.85rem; margin-bottom:1rem; }
.signal-entry-meta a{ color:inherit; }
.signal-entry-thumb{ margin-bottom:1.25rem; border-radius:var(--signal-radius); overflow:hidden; }
.signal-entry-content > *:first-child{ margin-top:0; }
.signal-badge{
  display:inline-block; background:var(--signal-paper-soft);
  color:var(--signal-ink-soft); font-size:0.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
  padding:0.2em 0.7em; border-radius:999px; text-decoration:none;
}

/* -------------------------------------------------------------------------
   6. SIDEBAR / WIDGETS
-------------------------------------------------------------------------- */
.widget{ margin-bottom:2.5rem; }
.widget-title{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--signal-ink-soft); }
.widget ul{ list-style:none; padding:0; margin:0; }
.widget li + li{ margin-top:0.5em; }

/* -------------------------------------------------------------------------
   7. BREADCRUMBS
-------------------------------------------------------------------------- */
.signal-breadcrumbs{ font-size:0.85rem; color:var(--signal-ink-soft); margin-bottom:1.5rem; }
.signal-breadcrumbs a{ color:inherit; }
.signal-breadcrumbs .sep{ margin-inline:0.4em; }

/* -------------------------------------------------------------------------
   8. PAGINATION
-------------------------------------------------------------------------- */
.signal-pagination{ display:flex; gap:0.75rem; margin-top:3rem; flex-wrap:wrap; }
.signal-pagination a, .signal-pagination span{
  padding:0.5em 1em; border:1px solid var(--signal-border); border-radius:8px; text-decoration:none;
}
.signal-pagination .current{ background:var(--signal-ink); color:#fff; border-color:var(--signal-ink); }

/* -------------------------------------------------------------------------
   9. FOOTER
-------------------------------------------------------------------------- */
.signal-footer{
  border-top:1px solid var(--signal-border);
  margin-top:4rem; padding-block:2rem;
  color:var(--signal-ink-soft); font-size:0.85rem;
}

/* -------------------------------------------------------------------------
   10. FORMS / BUTTONS / COMMENTS
-------------------------------------------------------------------------- */
.button, button, input[type="submit"]{
  display:inline-block; background:var(--signal-accent); color:var(--signal-accent-ink);
  border:none; border-radius:8px; padding:0.6em 1.2em; font-weight:600; cursor:pointer;
}
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea{
  width:100%; padding:0.6em 0.8em; border:1px solid var(--signal-border); border-radius:8px; background:var(--signal-paper);
}
.comment-list{ list-style:none; padding:0; }
.comment-list .children{ list-style:none; padding-left:1.5rem; }
.comment-body{ padding-block:1.25rem; border-top:1px solid var(--signal-border); }

/* -------------------------------------------------------------------------
   11. UTILITIES
-------------------------------------------------------------------------- */
.alignwide{ margin-inline:calc(var(--signal-gutter) * -1); max-width:none; }
.aligncenter{ margin-inline:auto; }
.has-text-align-center{ text-align:center; }