@charset "utf-8";
/* =====================================================================
   frankgarcia.com — fg-menu.css   (2026-11-07)
   The left-column menu, identical on every page. Link it LAST in <head>.

   Markup (same on every page):
     RESUME   (hover/click) -> Acrobat, HTML
     CREATIVE (hover/click) -> Art
     PPA, TOPICS            -> plain links

   The left column's width is tied to the menu's text size (--menu-fs).
   It only gets narrower when the menu text gets smaller on small screens.
   ===================================================================== */

:root {
  --menu-fs: 20px;                          /* menu text size */
  --leftw: calc(var(--menu-fs) * 8.6);      /* left column width follows the menu text size */
}
@media (max-width: 900px) { :root { --menu-fs: 17px; } }
@media (max-width: 640px) { :root { --menu-fs: 15px; } }
@media (max-width: 420px) { :root { --menu-fs: 13px; } }

/* Left column width (grid pages use .fg-wrap; the older sec-*.html pages float .fg-left) */
.fg-wrap { grid-template-columns: var(--leftw) minmax(0, 1fr); }
.fg-left { width: var(--leftw); box-sizing: border-box; flex-shrink: 0; }

/* Older sec-art / sec-ideas / sec-topics pages (sections.css, .fg-page wrapper):
   left column at its fixed width, the main column takes the rest. */
.fg-page { display: flex; align-items: stretch; min-height: 100vh; }
.fg-page > .fg-left { float: none; }
.fg-page > .fg-main { float: none; width: auto; flex: 1 1 auto; min-width: 0; box-sizing: border-box; }

/* ---------- Menu ---------- */
.fg-menu {
  list-style: none;
  margin: 20px 0 0;
  padding: 0 0 0 1em;
  font-size: var(--menu-fs);
}
.fg-menu li { margin: 0; padding: 0; font-weight: 300; }
.fg-menu a {
  display: block;
  width: auto;
  text-decoration: none;
  color: var(--menu-color);
  background: none;
}

.fg-menu .fg-label {
  display: block;
  box-sizing: border-box;
  padding: .05em .6em .05em .85em;
  font-family: "Khula", sans-serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--menu-color);
}
.fg-menu .fg-has-sub > .fg-label { cursor: pointer; }
.fg-menu .fg-desc { display: none; }

/* Hover / open: green bar, white semibold label (same look as before) */
.fg-menu a:hover .fg-label,
.fg-menu a:focus-visible .fg-label,
.fg-menu .fg-has-sub:hover > .fg-label,
.fg-menu .fg-has-sub.open > .fg-label,
.fg-menu .fg-has-sub > .fg-label:focus-visible {
  background: var(--hover-bg);
  color: #fff;
  font-weight: 600;
  outline: none;           /* text stays left-aligned, in place */
}
.fg-menu a:hover, .fg-menu a:focus-visible { background: none; outline: none; }

/* Sub-links: hidden until RESUME / CREATIVE is hovered, clicked, or reached by keyboard */
.fg-menu .fg-sub {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 .25em;
}
.fg-menu .fg-has-sub:hover > .fg-sub,
.fg-menu .fg-has-sub.open > .fg-sub,
.fg-menu .fg-has-sub:has(:focus-visible) > .fg-sub { display: block; }
.fg-menu .fg-sub li { margin: 0; }
.fg-menu .fg-sub a {
  display: block;
  padding: .12em .6em .12em 1.9em;          /* indented under the section word */
  font-family: "Khula", sans-serif;
  font-weight: 400;
  font-size: .8em;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--menu-color);
}
.fg-menu .fg-sub a:hover,
.fg-menu .fg-sub a:focus-visible {
  background: var(--hover-bg);
  color: #fff;
  outline: none;
}

@media print { .fg-left { display: none; } .fg-wrap { display: block; } }