/* =============================================================================
   style.css  —  Custom layer for the terminal-style portfolio
   -----------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED
   1. @font-face .............. Load LOCAL fonts from the /fonts folder.
   2. Layer order + WebTUI ..... We DO NOT re-import WebTUI here (that is done in
                                 each HTML <head> via <link> tags), but we DO
                                 re-declare the WebTUI @layer order so our own
                                 rules land in the right cascade layer.
   3. base layer ............... Global tokens: font stack, per-theme accent
                                 colours, and our custom "light" / "dark" themes.
   4. components layer ......... A custom "accent" badge/button variant so we get
                                 the colourful pink highlight (like the WebTUI
                                 "Showcase" label) in EVERY theme.
   5. Layout ................... The sidebar + main content grid, the directory
                                 "tree" navigation, the hover theme dropdown,
                                 responsive behaviour and RTL (Arabic) handling.

   GOLDEN RULE (per the project brief): anything WebTUI can do natively
   (buttons, inputs, badges, boxes, separators, typography) is done with WebTUI
   attributes in the HTML. This file only adds what WebTUI has no primitive for:
   the app shell layout, the tree glyphs, the hover menu and RTL tweaks.
   ============================================================================= */


/* =============================================================================
   1. LOCAL FONTS  (@font-face)
   -----------------------------------------------------------------------------
   All font files live in the project-root `fonts/` directory. NO external CDN
   is used for text fonts. To swap a font: drop the new file in `fonts/` and
   change the `src:` url below (and the family name if you like).
   ============================================================================= */

/* --- Space Mono → primary LATIN / English text (4 styles) ------------------ */
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* --- Kawkab Mono → ALL Arabic / RTL text ------------------------------------- */
@font-face {
  font-family: "Kawkab Mono";
  src: url("../fonts/KawkabMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kawkab Mono";
  src: url("../fonts/KawkabMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* NOTE: "Symbols Nerd Font" is declared in vendor/plugin-nf.css (the WebTUI
   Nerd Font plugin) and also points at a LOCAL file (fonts/…woff2). We just add
   it to the END of every font stack below so glyph icons render everywhere. */


/* =============================================================================
   2. LAYER ORDER
   -----------------------------------------------------------------------------
   WebTUI relies on CSS cascade layers (base < utils < components). We repeat the
   declaration so the rules we author below are attributed to the correct layer
   and can therefore override / extend WebTUI predictably.
   ============================================================================= */
@layer base, utils, components;


/* =============================================================================
   3. BASE LAYER  — global tokens + custom themes
   ============================================================================= */
@layer base {

  :root {
    /* Primary font stack. English (Space Mono) first, generic monospace
       fallbacks in the middle, and the Nerd Font LAST so icon glyphs resolve. */
    --font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco,
                   Consolas, monospace, "Symbols Nerd Font";
    --font-size: 16px;
    --line-height: 1.35;

    /* Accent = the colourful highlight colour used by our custom badge variant.
       Each theme below re-defines --accent / --accent-fg so highlights always
       fit the palette. This default is the "light" pink. */
    --accent: #c74b8b;
    --accent-fg: #ffffff;

    /* ---------------------------------------------------------------------------
       COLOUR PALETTE (single source of truth)
       These 8 colours are used everywhere something is coloured: highlight
       badges/marks/buttons AND the terminal-style multicoloured icons in the UI
       (nav items, folders, socials, the shell prompt, …). Change a colour here
       and it updates across the whole site. --c-on is the dark text placed on top
       of these light fills. */
    --c-pink:   #f2a3c7;
    --c-purple: #c3a6e6;
    --c-blue:   #8fb6ff;
    --c-cyan:   #7fe1e0;
    --c-green:  #a9d98a;
    --c-yellow: #ecd07a;
    --c-orange: #f0a97a;
    --c-red:    #f08a8a;
    --c-on:     #141620;

    /* ICON colours — default to the bright palette (perfect on the dark themes).
       The light theme overrides these with darker shades so icons stay legible
       on a pale background. Badges/marks keep the bright --c-* fills. */
    --ic-pink:   var(--c-pink);
    --ic-purple: var(--c-purple);
    --ic-blue:   var(--c-blue);
    --ic-cyan:   var(--c-cyan);
    --ic-green:  var(--c-green);
    --ic-yellow: var(--c-yellow);
    --ic-orange: var(--c-orange);
    --ic-red:    var(--c-red);
  }

  /* WebTUI's base stylesheet sets `word-break: break-all` on <body>, which chops
     English words mid-letter ("actuall-y"). We prefer wrapping at word
     boundaries and only breaking genuinely long tokens (URLs). This rule lives
     in our base layer, declared after WebTUI, so it wins. */
  html, body {
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* --- LIGHT theme (data-webtui-theme="light") -----------------------------
     A soft "paper terminal" palette — easier on the eyes than pure #fff/#000.
     To retune the light look, edit these values only. */
  [data-webtui-theme="light"] {
    --background0: #f4f1ea;   /* page background            */
    --background1: #e8e3d8;   /* panels / raised surfaces   */
    --background2: #d8d2c4;   /* hovers / borders           */
    --background3: #bcb4a2;   /* strong borders             */
    --foreground0: #23201b;   /* primary text               */
    --foreground1: #4f4a40;   /* secondary text             */
    --foreground2: #8a8376;   /* muted text / tree lines    */
    --box-border-color: var(--foreground2);
    --accent: #c74b8b;        /* pink highlight             */
    --accent-fg: #ffffff;
    /* Darker icon shades so the multicolour icons read on the pale background. */
    --ic-pink:   #c2477f;
    --ic-purple: #7d51a8;
    --ic-blue:   #3b6fd0;
    --ic-cyan:   #1f8f8d;
    --ic-green:  #4f8a3a;
    --ic-yellow: #b0842a;
    --ic-orange: #c26a34;
    --ic-red:    #cc4b4b;
  }

  /* --- DARK theme (data-webtui-theme="dark") -------------------------------
     PURE BLACK & WHITE terminal: black background, white text. Panels/borders
     use tiny steps of grey so boxes stay visible. All the *colour* on this theme
     comes from the palette (--c-*) via badges and the multicoloured icons. */
  [data-webtui-theme="dark"] {
    --background0: #000000;   /* pitch-black page background */
    --background1: #0c0c0e;   /* panels / raised surfaces    */
    --background2: #191a1d;   /* hovers                       */
    --background3: #2e2f34;   /* borders                      */
    --foreground0: #ffffff;   /* white primary text           */
    --foreground1: #c8c8cc;   /* secondary text               */
    --foreground2: #7a7a82;   /* muted text / tree lines      */
    --box-border-color: var(--foreground2);
    --accent: var(--c-pink);  /* accent for CTAs still comes from the palette */
    --accent-fg: #000000;
  }

  /* --- NORD accent -----------------------------------------------------------
     The Nord palette itself is supplied by vendor/theme-nord.css. We bolt a
     non-purple accent on top (Nord frost cyan) so nothing reads as violet. */
  [data-webtui-theme="nord"] {
    --accent: #88c0d0;
    --accent-fg: #2e3440;
  }

  /* --- CATPPUCCIN MOCHA accent ----------------------------------------------
     Palette comes from vendor/theme-catppuccin.css; we set the pink accent. */
  [data-webtui-theme="catppuccin-mocha"] {
    --accent: #f5c2e7;
    --accent-fg: #1e1e2e;
  }

  /* --- ARABIC / RTL typography ----------------------------------------------
     When the <html> is switched to Arabic the JS sets lang="ar" + dir="rtl".
     KAWKAB MONO is the one Arabic font: body text, headings, buttons, badges,
     nav links and the terminal chrome all use it. Space Mono stays last as a
     Latin fallback so English words/numbers inside Arabic text keep the grid,
     and the Nerd Font stays last so icons still render. */
  [lang="ar"] {
    --font-family: "Kawkab Mono", "Space Mono", monospace, "Symbols Nerd Font";
    /* Arabic glyphs read better with a touch more line height. */
    --line-height: 1.85;
    /* Box-drawing tree glyphs are Latin; do not word-break Arabic mid-letter. */
    word-break: normal;
    /* Keep joining/kerning on, but never add letter-spacing to Arabic — it
       breaks the connected letterforms. */
    letter-spacing: 0;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* TUI feel in Arabic: bold terminal chrome, headings get a `#` prompt marker
     (mirrored to the right edge by RTL), and selection looks like a terminal
     highlight. */
  [lang="ar"] .brand,
  [lang="ar"] .box-title,
  [lang="ar"] .tree__folder,
  [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 {
    font-weight: 700;
  }
  [lang="ar"] .main h1::before,
  [lang="ar"] .main h2::before {
    content: "# ";
    color: var(--accent);
    font-family: "Space Mono", monospace;
    font-weight: 700;
  }
  [lang="ar"] .main h3::before {
    content: "## ";
    color: var(--ic-cyan, var(--accent));
    font-family: "Space Mono", monospace;
    font-weight: 700;
  }
  [lang="ar"] ::selection {
    background: var(--accent);
    color: var(--accent-fg, var(--background0));
  }
  /* Blinking block cursor after the brand, like a live shell prompt. */
 .brand { direction: ltr; unicode-bidi: isolate; }
 .brand::after {
  content: "█";
  color: var(--accent);
  margin-inline-start: -.5ch;
  animation: cursor-blink 1.1s steps(1) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .brand::after { animation: none; }
}}


/* =============================================================================
   4. COMPONENTS LAYER — custom "accent" variants (the colourful highlights)
   -----------------------------------------------------------------------------
   WebTUI badges expose --badge-color (fill) and --badge-text (text). We add a
   brand-new variant, variant-="accent", so you can write:
       <span is-="badge" variant-="accent">C++</span>
   and get the pink highlight in every theme. Same idea for buttons/marks.
   ============================================================================= */
@layer components {

  /* Colourful highlight badge — used for skills, tags, keywords. */
  [is-~="badge"][variant-="accent"] {
    --badge-color: var(--accent);
    --badge-text: var(--accent-fg);
  }

  /* ---------------------------------------------------------------------------
     EXTRA HIGHLIGHT COLOURS
     A fixed rainbow palette so tags/skills can be multi-coloured (not just the
     theme accent). These use solid, light-ish fills with dark text, so they stay
     readable on EVERY theme background. Use them like:
         <span is-="badge" variant-="hl-blue">C++</span>
     Add your own by copying a line and changing --badge-color.
     Available: hl-pink hl-purple hl-blue hl-cyan hl-green hl-yellow hl-orange hl-red
     --------------------------------------------------------------------------- */
  [is-~="badge"][variant-="hl-pink"]   { --badge-color: var(--c-pink); --badge-text: var(--c-on); }
  [is-~="badge"][variant-="hl-purple"] { --badge-color: var(--c-purple); --badge-text: var(--c-on); }
  [is-~="badge"][variant-="hl-blue"]   { --badge-color: var(--c-blue); --badge-text: var(--c-on); }
  [is-~="badge"][variant-="hl-cyan"]   { --badge-color: var(--c-cyan); --badge-text: var(--c-on); }
  [is-~="badge"][variant-="hl-green"]  { --badge-color: var(--c-green); --badge-text: var(--c-on); }
  [is-~="badge"][variant-="hl-yellow"] { --badge-color: var(--c-yellow); --badge-text: var(--c-on); }
  [is-~="badge"][variant-="hl-orange"] { --badge-color: var(--c-orange); --badge-text: var(--c-on); }
  [is-~="badge"][variant-="hl-red"]    { --badge-color: var(--c-red); --badge-text: var(--c-on); }

  /* The same palette as wrapping <mark> highlights (for inline keywords). */
  [is-~="mark"][variant-="hl-pink"]   { background-color: var(--c-pink); color: var(--c-on); }
  [is-~="mark"][variant-="hl-purple"] { background-color: var(--c-purple); color: var(--c-on); }
  [is-~="mark"][variant-="hl-blue"]   { background-color: var(--c-blue); color: var(--c-on); }
  [is-~="mark"][variant-="hl-cyan"]   { background-color: var(--c-cyan); color: var(--c-on); }
  [is-~="mark"][variant-="hl-green"]  { background-color: var(--c-green); color: var(--c-on); }
  [is-~="mark"][variant-="hl-yellow"] { background-color: var(--c-yellow); color: var(--c-on); }
  [is-~="mark"][variant-="hl-orange"] { background-color: var(--c-orange); color: var(--c-on); }
  [is-~="mark"][variant-="hl-red"]    { background-color: var(--c-red); color: var(--c-on); }

  /* Accent button (maps WebTUI's primary/secondary button tokens). */
  [is-~="button"][variant-="accent"] {
    --button-primary: var(--accent);
    --button-secondary: var(--accent-fg);
  }

  /* Coloured OUTLINE buttons (use with box-="round"/"square"): the colour is
     applied to the text + border via WebTUI's --button-primary token. Same
     palette as the highlight badges above. Example:
         <a is-="button" box-="round" variant-="hl-blue" href="…">GitHub</a> */
  [is-~="button"][variant-="hl-pink"]   { --button-primary: var(--c-pink); --button-secondary: var(--c-on); }
  [is-~="button"][variant-="hl-purple"] { --button-primary: var(--c-purple); --button-secondary: var(--c-on); }
  [is-~="button"][variant-="hl-blue"]   { --button-primary: var(--c-blue); --button-secondary: var(--c-on); }
  [is-~="button"][variant-="hl-cyan"]   { --button-primary: var(--c-cyan); --button-secondary: var(--c-on); }
  [is-~="button"][variant-="hl-green"]  { --button-primary: var(--c-green); --button-secondary: var(--c-on); }
  [is-~="button"][variant-="hl-yellow"] { --button-primary: var(--c-yellow); --button-secondary: var(--c-on); }
  [is-~="button"][variant-="hl-orange"] { --button-primary: var(--c-orange); --button-secondary: var(--c-on); }
  [is-~="button"][variant-="hl-red"]    { --button-primary: var(--c-red); --button-secondary: var(--c-on); }

  /* Accent <mark> for inline highlighted keywords in prose. */
  mark[variant-="accent"], [is-~="mark"][variant-="accent"] {
    --mark-color: var(--accent);
    background-color: var(--accent);
    color: var(--accent-fg);
  }
}


/* =============================================================================
   4b. NERD FONT ICONS
   -----------------------------------------------------------------------------
   We render icons with HTML numeric entities (e.g. &#xf015; = home) wrapped in
   <span class="nf">. The `.nf` class forces the local "Symbols Nerd Font" so the
   Private-Use-Area glyphs resolve reliably. To find more glyph codepoints see
   https://www.nerdfonts.com/cheat-sheet — copy the hex code into an entity.
   ============================================================================= */
.nf {
  font-family: "Symbols Nerd Font";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  margin-inline-end: .5ch;   /* small gap between icon and its label */
  display: inline-block;
}
/* When an icon is used alone (e.g. social row) drop the trailing gap. */
.socials .nf, .nf.nf--solo { margin-inline-end: 0; }


/* =============================================================================
   5. LAYOUT  (plain CSS — no WebTUI primitive exists for an app shell)
   ============================================================================= */

/* Fill the viewport and let the grid manage scrolling regions. */
html, body { height: 100%; }
body { margin: 0; }

/* ---- App shell: fixed-width sidebar + fluid main column -------------------- */
.app {
  display: grid;
  grid-template-columns: 22rem 1fr;   /* sidebar | content */
  min-height: 100vh;
}
/* In RTL the grid columns flip automatically because we use logical order,
   but we make the intent explicit for clarity. */
[dir="rtl"] .app { grid-template-columns: 22rem 1fr; }

/* ---- Sidebar -------------------------------------------------------------- */
.sidebar {
  background-color: var(--background1);
  border-inline-end: 1px solid var(--background3); /* logical: right in LTR, left in RTL */
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Brand / prompt line at the top of the sidebar. */
.brand { font-weight: 700; }
.brand .accent { color: var(--accent); }

/* ---- Directory TREE navigation ------------------------------------------- *
   The screenshot look (▼ Folder, then ├ / │ / └ branch glyphs) is produced with
   literal box-drawing characters kept in the HTML inside .tree__branch spans.
   WebTUI has no tree component, so this small amount of custom CSS is allowed. */
.tree { list-style: none; }
.tree__group { margin-bottom: 1.25rem; }

/* Folder header row: caret + icon + label. */
.tree__folder {
  display: flex;
  align-items: center;
  gap: .5ch;
  font-weight: 700;
  margin-bottom: .35rem;
  color: var(--foreground0);
}
.tree__folder .nf { color: var(--accent); }   /* the Nerd Font folder icon */

/* Each navigation item is a row: [branch glyph][link]. */
.tree__item { display: flex; align-items: stretch; }
.tree__branch {
  color: var(--foreground2);        /* muted branch lines, like a real tree */
  white-space: pre;                 /* keep the glyph spacing exact          */
  padding-inline-end: .25ch;
  user-select: none;
}
/* Links inside the tree fill the row so the active highlight spans full width. */
.tree__link {
  flex: 1;
  text-decoration: none;
  color: var(--foreground1);
  padding: 0 .5ch;
}
.tree__link:hover { color: var(--foreground0); background-color: var(--background2); }

/* Active page: inverted bar exactly like the "Introduction" row in the mock-up. */
.tree__link[aria-current="page"] {
  background-color: var(--foreground0);
  color: var(--background0);
  font-weight: 700;
}

/* In RTL the ASCII branch glyphs must be mirrored so ├ points the correct way.
   We flip the glyph span horizontally (the link text stays normal). */
[dir="rtl"] .tree__branch { transform: scaleX(-1); display: inline-block; }

/* ---- Social icon row (Nerd Font glyphs) in the sidebar ------------------- */
.socials { display: flex; gap: 1ch; font-size: 1.25rem; margin-top: auto; }
.socials a { color: var(--foreground1); text-decoration: none; }
.socials a:hover { color: var(--accent); }

/* ---- Toolbar row holding the Theme + Language toggles -------------------- */
.toolbar { display: flex; gap: 1ch; align-items: flex-start; flex-wrap: wrap; }

/* Language switch: a WebTUI switch (is-="switch") flanked by EN / عربي labels.
   The label whose language is active is emphasised via [data-lang].

   FONT PINNING (fixes the "switch changes shape when language changes" bug):
   because Arabic mode swaps the global --font-family, the "EN" label and the
   switch track (whose width is measured in `ch`) would otherwise re-render in the
   Arabic font. We pin the container + switch + EN label to the Latin mono font,
   and the عربي label to the Arabic font — so the control looks identical in both
   languages. These rules are unlayered, so they beat WebTUI's layered defaults. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .75ch;
  cursor: pointer;
  user-select: none;
  height: 1lh;
  padding: .35rem .9ch;
  border: 1px solid var(--foreground2);
  background-color: var(--background0);
  font-family: "Space Mono", ui-monospace, monospace, "Symbols Nerd Font";
  transition: border-color .15s ease, background-color .15s ease;
}
.sidebar .lang-switch { background-color: var(--background0); }
.lang-switch:hover { border-color: var(--accent); }

.lang-switch .nf { margin-inline-end: 0; color: var(--accent); }

/* Each side keeps its own script's font, regardless of the page language. */
.lang-switch__side { color: var(--foreground2); transition: color .15s ease; }
.lang-switch__side--en { font-family: "Space Mono", ui-monospace, monospace; }
.lang-switch__side--ar { font-family: "Kawkab Mono", monospace; font-weight: 700; }

/* Emphasise the currently-active language side (data-lang set by main.js). */
.lang-switch[data-lang="en"] .lang-switch__side--en,
.lang-switch[data-lang="ar"] .lang-switch__side--ar {
  color: var(--accent);
  font-weight: 700;
}

/* Style the WebTUI switch itself. We pin its font so the track width (measured
   in `ch`) never shifts when the language changes, and colour the track + thumb
   by targeting the ::before (track) / ::after (thumb) pseudo-elements directly —
   these unlayered rules override WebTUI's layered defaults, including the
   :checked thumb colour. */
.lang-switch input[is-~="switch"] {
  font-family: "Space Mono", ui-monospace, monospace;
}
.lang-switch input[is-~="switch"]::before { background: var(--background2); }   /* track */
.lang-switch input[is-~="switch"]::after  { background: var(--foreground1); }   /* thumb (EN) */
.lang-switch input[is-~="switch"]:checked::after { background: var(--accent); } /* thumb (AR) */

/* ---- THEME dropdown (opens on HOVER, matching the reference image) --------
   Built from a WebTUI box (the "[ Theme]" titled panel) + a small custom
   hover-reveal menu. On touch devices where hover is unavailable, JS also
   toggles the .open class on click (see main.js). */
.theme-switch { position: relative; }

/* The trigger reuses WebTUI button styling via attributes in the HTML. */
.theme-switch__menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 16ch;
  background-color: var(--background0);
  border: 1px solid var(--foreground0);
  z-index: 50;
  /* Hidden until hover/focus/open. */
  display: none;
  flex-direction: column;
}
/* Reveal on hover of the wrapper, on keyboard focus within, or when JS marks it open. */
.theme-switch:hover .theme-switch__menu,
.theme-switch:focus-within .theme-switch__menu,
.theme-switch.open .theme-switch__menu { display: flex; }

.theme-switch__menu button {
  text-align: start;
  border: none;
  background: transparent;
  color: var(--foreground0);
  padding: .35rem 1ch;
  cursor: pointer;
  font: inherit;
  border-bottom: 1px solid var(--background2);
}
.theme-switch__menu button:last-child { border-bottom: none; }
.theme-switch__menu button:hover { background-color: var(--background1); }
/* A tiny dot marks the currently active theme in the list (set by JS). */
.theme-switch__menu button[aria-current="true"]::before { content: "» "; color: var(--accent); }

/* ---- Main content column -------------------------------------------------- */
.main { padding: 2rem 2.5rem; overflow-x: hidden; max-width: 70rem; }
.page-header { margin-bottom: 1.5rem; }

/* Utility spacing helpers (kept tiny; layout only). */
.stack > * + * { margin-top: 1rem; }              /* vertical rhythm            */
.cluster { display: flex; flex-wrap: wrap; gap: .6ch; align-items: center; } /* badge rows */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }

/* Give WebTUI boxes a bit of breathing room when stacked. */
[box-] { margin-bottom: 1rem; }

/* The little caption sitting ON a box border (WebTUI shear pattern) needs its
   background to match the surface so the border appears "broken" for the text. */
.box-title { background-color: var(--background0); padding: 0 1ch; font-weight: 700; }
.sidebar .box-title, .theme-switch .box-title { background-color: var(--background1); }

/* ---- Mobile hamburger (hidden on desktop) -------------------------------- */
.nav-toggle { display: none; }

/* Dim overlay shown behind the open mobile drawer. Created once by js/main.js
   and appended to <body>. Hidden by default; only revealed on small screens
   while the drawer is open (see the media query below). Tapping it closes the
   drawer. z-index sits below the sidebar (55) but above the page content. */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 50;
}

/* ---- Documentation modal (native <dialog>) -------------------------------
   Native <dialog> gives us Esc-to-close and focus trapping for free. We only
   set sizing + backdrop; the panel itself uses a WebTUI box in the HTML. */
dialog {
  background-color: var(--background0);
  color: var(--foreground0);
  border: none;
  max-width: 44rem;
  width: calc(100% - 2rem);
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 1ch; }

/* Project card links row. */
.card-actions { display: flex; gap: 1ch; flex-wrap: wrap; margin-top: .5rem; }

/* Blog post meta line (date). */
.post-meta { color: var(--foreground2); }

/* ---- Contact form ---------------------------------------------------------
   WebTUI styles the <input>/<textarea> themselves; we wrap each in a boxed
   <label> so it gets a border, and make the field fill the label width. */
.form { max-width: 40rem; }
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; margin-bottom: .35rem; color: var(--foreground1); }
.field label[box-] { display: block; }
.field input, .field textarea { width: 100%; min-width: 0; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { margin-top: 2.5rem; color: var(--foreground1); }
.site-footer a { color: var(--accent); }

/* Anchors styled as WebTUI buttons (is-="button") are still links, so browsers
   underline them — that stray "line" looked wrong on the blog "Read more"
   button. Remove the underline for any button-styled element. */
[is-~="button"] { text-decoration: none; }

/* Expandable blog post body: hidden until "Read more" is clicked (js/main.js
   toggles the [hidden] attribute). Its paragraphs get the same vertical rhythm
   as the rest of the page. */
.post-full[hidden] { display: none; }
.post-full > * + * { margin-top: 1rem; }

/* WebTUI separators are inline-flex (so they can be vertical too); when we use
   one as a horizontal divider on an <hr> we need to stretch it to full width. */
hr[is-~="separator"] { display: flex; width: 100%; margin: .5rem 0 1rem; }


/* =============================================================================
   6. RESPONSIVE  — collapse the sidebar into a slide-in drawer on small screens
   ============================================================================= */
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }

  /* Hamburger button — pinned to the inline-start edge (left in LTR, right in
     RTL). It OPENS the drawer, then DISAPPEARS while the drawer is open; the
     drawer is closed by tapping the dim backdrop or a nav link. */
  .nav-toggle {
    display: inline-flex;
    position: fixed;
    top: 1rem;
    inset-inline-start: 1rem;
    z-index: 60;
  }

  /* While the drawer is open (body.nav-open, set by JS): hide the burger and
     reveal the tap-to-close backdrop. */
  body.nav-open .nav-toggle { display: none; }
  body.nav-open .nav-backdrop { display: block; }

  /* Leave headroom at the top of the drawer so the fixed toggle doesn't cover
     the brand/prompt line. */
  .sidebar { padding-top: 3.75rem; }

  /* Sidebar slides in from the start edge; toggled by .sidebar--open (JS).
     In LTR it hides to the left; in RTL it sits on the right and hides to the
     right. IMPORTANT: the "open" rules are written with matching/greater
     specificity than the closed [dir="rtl"] rule, otherwise the drawer would
     never open in Arabic (this was the mobile-menu bug). */
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 20rem;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 55;
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }

  /* Open states — one per direction so specificity always wins. */
  [dir="ltr"] .sidebar--open,
  .sidebar--open { transform: translateX(0); }
  [dir="rtl"] .sidebar--open { transform: translateX(0); }

  .main { padding: 3.5rem 1.25rem 2rem; }
}


/* =============================================================================
   7. TERMINAL MULTICOLOUR ICONS
   -----------------------------------------------------------------------------
   Instead of tinting every icon with one accent colour, the UI icons are spread
   across the palette (--c-*) — like a colourful shell prompt / `eza --icons`.
   All colours are pulled from the palette defined in :root, so editing a --c-*
   value there recolours both the badges AND these icons. To recolour a single
   icon, change the var() below.
   ============================================================================= */

/* Shell prompt line: ❯ green, @ pink. */
.brand span:nth-of-type(1) { color: var(--ic-green); }
.brand span:nth-of-type(2) { color: var(--ic-pink); }

/* Folder headers in the nav tree. */
.tree__group:nth-of-type(1) .tree__folder .nf { color: var(--ic-yellow); }
.tree__group:nth-of-type(2) .tree__folder .nf { color: var(--ic-cyan); }

/* Page links (pages folder). We skip the ACTIVE row so its icon inherits the
   inverted highlight-bar colour instead of a palette colour. */
.tree__group:nth-of-type(1) .tree__item:nth-child(1) .tree__link:not([aria-current="page"]) .nf { color: var(--ic-green); }
.tree__group:nth-of-type(1) .tree__item:nth-child(2) .tree__link:not([aria-current="page"]) .nf { color: var(--ic-blue); }
.tree__group:nth-of-type(1) .tree__item:nth-child(3) .tree__link:not([aria-current="page"]) .nf { color: var(--ic-yellow); }
.tree__group:nth-of-type(1) .tree__item:nth-child(4) .tree__link:not([aria-current="page"]) .nf { color: var(--ic-pink); }

/* Connect links (external). */
.tree__group:nth-of-type(2) .tree__item:nth-child(1) .tree__link .nf { color: var(--ic-purple); }
.tree__group:nth-of-type(2) .tree__item:nth-child(2) .tree__link .nf { color: var(--ic-blue); }
.tree__group:nth-of-type(2) .tree__item:nth-child(3) .tree__link .nf { color: var(--ic-red); }

/* Quick social icon row at the bottom of the sidebar. */
.socials a:nth-child(1) .nf { color: var(--ic-purple); }
.socials a:nth-child(2) .nf { color: var(--ic-blue); }
.socials a:nth-child(3) .nf { color: var(--ic-red); }
.socials a:nth-child(4) .nf { color: var(--ic-green); }

/* Panel caption (box-title) icons. */
.box-title .nf { color: var(--ic-cyan); }

/* The translate icon on the language switch. */
.lang-switch .nf { color: var(--ic-orange); }