/* layout.css — page shell and chrome: content column, masthead, nav tabs,
   breadcrumb, per-page header, section labels. Cross-cutting responsive
   rules live at the end of pages.css so they win the cascade. */

#content {
	width: 100%;
	max-width: 1100px;
	box-sizing: border-box;
	margin: auto;
	background-color: rgba(8, 10, 9, 0.78);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding: 0px 10px 10px 10px;
	font-size: 9.5pt;
}

#header {
    height: 128px;
}

/* Left accent rule, mirroring .page-header on every tab, but carrying the ".ai"
   gradient instead of a flat accent colour. It is a pseudo-element, not a
   border: a border cannot take a gradient, and the glow has to be a filter on
   the rule alone or it would bleed onto the name. The 10px margin is
   .tab-pane's left padding, so this rule and the name land on the same x as
   each tab's accent rule and page title. */
#header #title {
    position: relative;
    margin-left: 10px;
    /* 26px = the rule's 3px + 23px of gap. 23 rather than .page-header's 16 on
       purpose: LRTOksana's J hooks ~9px left of its text origin, so a matching
       16 would leave the name looking half as far from the rule as every page
       title. This makes the *ink* line up. */
    padding: 22px 8px 0px 26px;
    font-family: var(--font-display);
    float: left;
}
/* Vertical, where the wordmark's is horizontal: on a 3px-wide rule a 90deg
   gradient would compress all three stops into nothing. */
#header #title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand-stops));
    filter: drop-shadow(0 0 12px var(--brand-glow));
}

h1#name {
    margin: 0;
    font-size: 40pt;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.5px;
}

#header #title #subheader {
    font-size: 15pt;
    text-align: right;
    color: rgba(255, 255, 255, 0.85);
}

#header #location {
    padding: 18px 8px 0px 7px;
    float: right;
    font-family: var(--font-display);
    font-size: 13pt;
    text-align: right;
}

#body {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 12px;
}

/* Nav tabs: modern pill buttons (they are real <a> links now). */
.title {
    display: inline-block;
    padding: 7px 16px;
    margin: 0 8px 8px 0;
    font-family: var(--font-body);
    font-size: 11.5pt;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.07);
    color: white !important;
}

.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
                linear-gradient(180deg, var(--tab-c, #5fbf95) 0%, color-mix(in srgb, var(--tab-c, #5fbf95) 60%, #10201a) 100%);
    border-color: color-mix(in srgb, var(--tab-c, #5fbf95) 70%, transparent);
}

/* ---- Header: social buttons (GitHub / LinkedIn / Email) ---- */
#social-bubbles {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.bubble-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 27px;
    margin-right: 5px;
    border-radius: 7px;
    color: var(--accent);
    border: 1px solid var(--panel-edge);
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 55%),
        rgba(255, 255, 255, 0.06);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
}
.bubble-btn:last-child { margin-right: 0; }
.bubble-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bubble-btn svg { display: block; width: 17px; height: 17px; }

/* Nav tab bar: flex row that also sticks to the top on scroll. */
#tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 30;
    /* No background or backdrop-filter: the nav sits inside #content, which
       already blurs the photo behind it. A second (nested) backdrop-filter here
       renders as an opaque black bar in Chrome, so the pills float on the
       translucent panel instead. */
    background: transparent;
    padding: 10px 2px 6px;
}
#body .title {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#body .title:not(.active):hover { border-color: var(--tab-c, var(--accent)); }

/* ---- The "More" nav pill: a bare "+" that slides open to "More +" ----
   The label is always in the DOM (crawlable, read by screen readers); only its
   width collapses. Animating max-width rather than width lets the open state be
   sized by the text instead of a magic pixel value, and the plus does a full
   turn on the way out so it reads as spinning rather than toggling. */
.tab-more {
    display: inline-flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
}
.tab-more .more-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.32s ease, opacity 0.22s ease, margin-right 0.32s ease;
}
.tab-more .more-plus {
    display: inline-block;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.5, 1);
}
/* Open on hover, on keyboard focus, and whenever the More page is the one
   being shown (Angular adds .active, the server renders it on a /more load). */
.tab-more:hover .more-label,
.tab-more:focus-visible .more-label,
.tab-more.active .more-label {
    max-width: 6em;
    opacity: 1;
    margin-right: 7px;
}
.tab-more:hover .more-plus,
.tab-more:focus-visible .more-plus {
    transform: rotate(360deg);
}
@media (prefers-reduced-motion: reduce) {
    .tab-more .more-label { transition: none; }
    .tab-more .more-plus  { transition: none; }
    .tab-more:hover .more-plus, .tab-more:focus-visible .more-plus { transform: none; }
}

/* Special "Ask AI" nav pill — a gradient stand-out among the section tabs. */
.tab-ask {
    border: 0;
    background: linear-gradient(135deg, #22d3ee, #6366f1 55%, #a855f7);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}
.tab-ask:hover { filter: brightness(1.08); }
.tab-ask i { margin-right: 5px; }

.breadcrumb { margin: 4px 4px 2px; }
.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 10pt;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.6); }
.breadcrumb li + li::before { content: "/"; opacity: 0.4; }
.breadcrumb a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* "← All projects" link inside a project page's header intro. */
.crumb-back { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.crumb-back:hover { text-decoration: underline; }

/* Every content pane shares the same padding, so all pages start their header
   and content at the same place. This is what makes Work / Projects / Skills /
   AI line up with Home / Cloud / Policy / Community / Bio. (Cloud keeps its own
   #cloud-page rule with identical values.) */
.tab-pane { padding: 24px 10px 14px 10px; }

/* =====================  PAGE HEADER (every tab)  ===================== */
/* One consistent header at the top of each page: a display title with a left
   accent rule, above the content. Pages that used to carry their title inside
   the first glossy panel now use this instead, so every tab opens the same
   way. Zero horizontal margin so the accent rule lines up with the left edge
   of the panels and cards below it. */
.page-header {
    margin: 4px 0 22px 0;
    border-left: 3px solid var(--accent);
    padding-left: 16px;
}
.page-title {
    font-family: var(--font-display);
    font-size: 30pt;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.page-intro {
    font-family: var(--font-body);
    font-size: 12pt;
    color: var(--text-soft);
    margin: 8px 0 0;
    max-width: 72ch;
    line-height: 1.6;
}

/* =====================  SECTION LABELS  ===================== */
/* Lighter, uppercase accent labels that group cards (Projects, Community, and
   the Skills categories). Deliberately quieter than the page title so the two
   never read as competing headings. */
.section-title {
    font-family: var(--font-body);
    font-size: 11pt;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 22px 0 10px 0;
    padding: 0;
    border: 0;
}

/* ---- StashPop link in the header social row: a small labelled pill (the
        animated warp circle + "stashpop"), matching the bubble styling of the
        GitHub / LinkedIn / Email icons beside it ---- */
.stashpop-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 27px;
    padding: 0 12px;
    border-radius: 7px;
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 11pt;
    border: 1px solid var(--panel-edge);
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 55%),
        rgba(255, 255, 255, 0.06);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
}
.stashpop-link:hover {
    transform: translateY(-2px);
    color: #F7C146;
    border-color: #F7C146;
}
.stashpop-link .wp-classic { --size: 16px; flex: 0 0 auto; }
.stashpop-link:visited { color: var(--accent); }

/* The classic warp logo (flicker-free), lifted from the StashPop blog. */
.wp-classic {
    --c1: #995ECE; --c2: #F7C146; --dur: 2.4s;
    inline-size: var(--size, 60px); aspect-ratio: 1; border-radius: 50%;
    position: relative; overflow: hidden; display: inline-block;
    background: var(--c1); isolation: isolate;
}
.wp-classic::before, .wp-classic::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; transform: scale(0);
}
.wp-classic::before { background: var(--c2); z-index: 1; animation: wpk-classic-a var(--dur) linear infinite; }
.wp-classic::after  { background: var(--c1); z-index: 2; animation: wpk-classic-b var(--dur) linear infinite; }
@keyframes wpk-classic-a { 0%{transform:scale(0)} 50%{transform:scale(1)} 100%{transform:scale(1)} }
@keyframes wpk-classic-b { 0%,45%{transform:scale(0)} 95%{transform:scale(1)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) {
    .wp-classic::before, .wp-classic::after { animation: none !important; }
}