/* =========================================================
   Root variables
   ========================================================= */

:root{
  /* Responsive gutters */
  --gutter-left: clamp(16px, 6vw, 96px);
  --gutter-right: clamp(14px, 2.5vw, 32px);

  /* Typography */
  --text-size: clamp(16px, 0.95rem + 0.35vw, 18px);
  --line: 1.6; /* tuned for Inter */
  --mono-size: clamp(11px, 0.85rem + 0.3vw, 15.5px);

  --sans: 'Inter', system-ui, -apple-system, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;

  /* Colors */
  --bg: #eff8ff;
  --text: #17212b;

  --header-bg: #2C3042;
  --header-text: #ffffff;

  /* Body link colors */
  --link-body: #2563eb;        /* clear blue at rest */
  --link-body-hover: #1d4ed8;  /* slightly darker blue on hover */

  /* External link colors */
  --link-external: #0f766e;
  --link-external-hover: #0369a1;
}

/* =========================================================
   Base reset
   ========================================================= */

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

html{ width:100%; height:100%; }

body{
  margin:0;
  font-family: var(--sans);
  font-size: var(--text-size);
  line-height: var(--line);
  background-color: var(--bg);
  color: var(--text);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Raster media only */
img, video{
  max-width:100%;
  height:auto;
}

/* Inline SVG should not be constrained */
svg{
  max-width:none;
  height:auto;
}

/* =========================================================
   Header / breadcrumbs (unchanged behavior)
   ========================================================= */

.xheader{
  background-color: var(--header-bg);
  color: var(--header-text);
  padding: 0.85rem 0;
  border-top: 1px solid rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(0,0,0,0.6);
  line-height: 1.25;
  overflow: hidden;
}

.xheader a:link,
.xheader a:visited{
  color: var(--header-text);
  text-decoration: none;
}

.xheader a:hover{
  color:#8990b0;
  text-decoration: underline;
  font-style: oblique;
  transition: all .2s ease-out;
}

.sitebrand{
  float:left;
  padding-left: var(--gutter-left);
  font-size: 1.2em;
  white-space: nowrap;
}

.breadcrumbs{
  float:right;
  padding-right: var(--gutter-right);
  white-space: nowrap;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   Divider
   ========================================================= */

.shadow{
  width:100%;
  height:8px;
  box-shadow: inset 0 5px 5px rgba(0,0,0,0.25);
}

/* =========================================================
   Main content
   ========================================================= */

.content{
  margin:0;
  padding-top:0.4em;
  padding-bottom:1em;
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
  max-width:none;
}

/* Vertical rhythm */
.content p,
.content ul,
.content ol,
.content pre,
.content table,
.content blockquote{
  margin:0.9em 0;
}

/* =========================================================
   Typography
   ========================================================= */

h1,h2,h3,h4{
  line-height:1.2;
  margin:1.25em 0 0.5em;
  letter-spacing:-0.015em;
}

h1{ font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
h2{ font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); }
h3{ font-size: 1.25rem; }
h4{ font-size: 1.05rem; }

/* =========================================================
   Body links (NO animation; normal underline on hover)
   ========================================================= */

.content a:link,
.content a:visited{
  color: var(--link-body);
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
  transition: color 120ms ease;
}

.content a:hover,
.content a:focus-visible{
  color: var(--link-body-hover);
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

.content a:active{
  color:#1e3a8a;
}

/* External links (CSS-only detection) */
.content a:is([href^="http://"], [href^="https://"], [href^="//"])
         :not([href*="elifulkerson.com"]):link,
.content a:is([href^="http://"], [href^="https://"], [href^="//"])
         :not([href*="elifulkerson.com"]):visited{
  color: var(--link-external);
}

.content a:is([href^="http://"], [href^="https://"], [href^="//"])
         :not([href*="elifulkerson.com"]):hover,
.content a:is([href^="http://"], [href^="https://"], [href^="//"])
         :not([href*="elifulkerson.com"]):focus-visible{
  color: var(--link-external-hover);
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

/* Icon-only links: no underline/hover decoration */
.content a:has(> img:only-child),
.content a:has(> svg:only-child){
  text-decoration: none !important;
}

/* =========================================================
   Code / pre / console
   ========================================================= */

code, pre, kbd, samp{
  font-family: var(--mono);
  font-size: var(--mono-size);
}

code{
  padding:0.12em 0.35em;
  border-radius:6px;
  background: rgba(0,0,0,0.06);
}

pre{
  padding:0.9em 1em;
  border-radius:10px;
  background: rgba(0,0,0,0.06);
  white-space: pre;
  overflow-x:hidden;
  overflow-y:auto;
  max-width:100%;
}

pre code{
  background: transparent;
  padding:0;
}

/* Console block (no border) */
.console{
  overflow-x:hidden;
  overflow-y:auto;
  max-width:100%;
  padding:10px 12px;
  background:#000;
  color:#fff;
  border:none;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,0.35);
  font-family: var(--mono);
  font-size: var(--mono-size);
  line-height:1.35;
}

/* Links inside code blocks */
pre a,
.console a{
  font-style: normal !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

/* =========================================================
   SVG glyph icons
   ========================================================= */

img.glyph{
  width:1em;
  height:1em;
  max-width:none;
  vertical-align:-0.12em;
}

/* =========================================================
   Tables
   ========================================================= */

table{
  border-collapse: collapse;
  width:100%;
}

th, td{
  padding:0.5em 0.75em;
  text-align:left;
  border-bottom:1px solid rgba(0,0,0,0.12);
  vertical-align:top;
}

tr:nth-child(even) td{
  background: rgba(255,255,255,0.35);
}

/* =========================================================
   Misc
   ========================================================= */

ul,ol{ padding-left:1.25em; }
li{ margin:0.25em 0; }

blockquote{
  padding:0.75em 1em;
  border-left:4px solid rgba(0,0,0,0.18);
  background:rgba(255,255,255,0.55);
  border-radius:10px;
}

.center{ width:100%; text-align:center; }
.footer{ margin-top:16px; font-size:0.75rem; opacity:0.85; }

::selection{
  background: rgba(37,99,235,0.2);
}

/* =========================================================
   Mobile adjustments
   ========================================================= */

@media (max-width: 767px){
  .sitebrand,
  .breadcrumbs{
    float:none;
    display:block;
    padding-left: var(--gutter-right);
    padding-right: var(--gutter-right);
    white-space: normal;
  }

  .breadcrumbs{
    margin-top:0.25em;
  }

  .content{
    padding-left: var(--gutter-right);
    padding-right: var(--gutter-right);
    padding-top:0.4em;
  }
}