@layer properties, theme, base, default;@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-ease:initial;}}@property --un-ease{syntax:"*";inherits:false;}}@layer theme{:root, :host {--spacing: 0.25rem;--ease-out: cubic-bezier(0, 0, 0.2, 1);--default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1);--default-transition-duration: 150ms;--font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono: var(--font-mono);--default-font-family: var(--font-sans);--default-monoFont-family: var(--font-mono);}}@layer base{/*  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)  2. Remove default margins and padding  3. Reset all borders.*/*,::after,::before,::backdrop,::file-selector-button {  box-sizing: border-box; /* 1 */  margin: 0; /* 2 */  padding: 0; /* 2 */  border: 0 solid; /* 3 */}/*  1. Use a consistent sensible line-height in all browsers.  2. Prevent adjustments of font size after orientation changes in iOS.  3. Use a more readable tab size.  4. Use the user's configured `sans` font-family by default.  5. Use the user's configured `sans` font-feature-settings by default.  6. Use the user's configured `sans` font-variation-settings by default.  7. Disable tap highlights on iOS.*/html,:host {  line-height: 1.5; /* 1 */  -webkit-text-size-adjust: 100%; /* 2 */  tab-size: 4; /* 3 */  font-family: var(    --default-font-family,    -apple-system,    BlinkMacSystemFont,    'Segoe UI',    Roboto,    'Helvetica Neue',    'Noto Sans',    Arial,    sans-serif,    'Apple Color Emoji',    'Segoe UI Emoji',    'Segoe UI Symbol',    'Noto Color Emoji'  ); /* 4 */  font-feature-settings: var(--default-font-featureSettings, normal); /* 5 */  font-variation-settings: var(--default-font-variationSettings, normal); /* 6 */  -webkit-tap-highlight-color: transparent; /* 7 */}/*  1. Add the correct height in Firefox.  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)  3. Reset the default border style to a 1px solid border.*/hr {  height: 0; /* 1 */  color: inherit; /* 2 */  border-top-width: 1px; /* 3 */}/*  Add the correct text decoration in Chrome, Edge, and Safari.*/abbr:where([title]) {  -webkit-text-decoration: underline dotted;  text-decoration: underline dotted;}/*  Remove the default font size and weight for headings.*/h1,h2,h3,h4,h5,h6 {  font-size: inherit;  font-weight: inherit;}/*  Reset links to optimize for opt-in styling instead of opt-out.*/a {  color: inherit;  -webkit-text-decoration: inherit;  text-decoration: inherit;}/*  Add the correct font weight in Edge and Safari.*/b,strong {  font-weight: bolder;}/*  1. Use the user's configured `mono` font-family by default.  2. Use the user's configured `mono` font-feature-settings by default.  3. Use the user's configured `mono` font-variation-settings by default.  4. Correct the odd `em` font sizing in all browsers.*/code,kbd,samp,pre {  font-family: var(    --default-monoFont-family,    ui-monospace,    SFMono-Regular,    Menlo,    Monaco,    Consolas,    'Liberation Mono',    'Courier New',    monospace  ); /* 1 */  font-feature-settings: var(--default-monoFont-featureSettings, normal); /* 2 */  font-variation-settings: var(--default-monoFont-variationSettings, normal); /* 3 */  font-size: 1em; /* 4 */}/*  Add the correct font size in all browsers.*/small {  font-size: 80%;}/*  Prevent `sub` and `sup` elements from affecting the line height in all browsers.*/sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}sub {  bottom: -0.25em;}sup {  top: -0.5em;}/*  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)  3. Remove gaps between table borders by default.*/table {  text-indent: 0; /* 1 */  border-color: inherit; /* 2 */  border-collapse: collapse; /* 3 */}/*  Use the modern Firefox focus style for all focusable elements.*/:-moz-focusring:where(:not(iframe)) {  outline: auto;}/*  Add the correct vertical alignment in Chrome and Firefox.*/progress {  vertical-align: baseline;}/*  Add the correct display in Chrome and Safari.*/summary {  display: list-item;}/*  Make lists unstyled by default.*/ol,ul,menu {  list-style: none;}/*  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)      This can trigger a poorly considered lint error in some tools but is included by design.*/img,svg,video,canvas,audio,iframe,embed,object {  display: block; /* 1 */  vertical-align: middle; /* 2 */}/*  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)*/img,video {  max-width: 100%;  height: auto;}/*  1. Inherit font styles in all browsers.  2. Remove border radius in all browsers.  3. Remove background color in all browsers.  4. Ensure consistent opacity for disabled states in all browsers.*/button,input,select,optgroup,textarea,::file-selector-button {  font: inherit; /* 1 */  font-feature-settings: inherit; /* 1 */  font-variation-settings: inherit; /* 1 */  letter-spacing: inherit; /* 1 */  color: inherit; /* 1 */  border-radius: 0; /* 2 */  background-color: transparent; /* 3 */  opacity: 1; /* 4 */}/*  Restore default font weight.*/:where(select:is([multiple], [size])) optgroup {  font-weight: bolder;}/*  Restore indentation.*/:where(select:is([multiple], [size])) optgroup option {  padding-inline-start: 20px;}/*  Restore space after button.*/::file-selector-button {  margin-inline-end: 4px;}/*  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)*/::placeholder {  opacity: 1;}/*  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)*/@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or  (contain-intrinsic-size: 1px) /* Safari 17+ */ {  ::placeholder {    color: color-mix(in oklab, currentcolor 50%, transparent);  }}/*  Prevent resizing textareas horizontally by default.*/textarea {  resize: vertical;}/*  Remove the inner padding in Chrome and Safari on macOS.*/::-webkit-search-decoration {  -webkit-appearance: none;}/*  1. Ensure date/time inputs have the same height when empty in iOS Safari.  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.*/::-webkit-date-and-time-value {  min-height: 1lh; /* 1 */  text-align: inherit; /* 2 */}/*  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.*/::-webkit-datetime-edit {  display: inline-flex;}/*  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.*/::-webkit-datetime-edit-fields-wrapper {  padding: 0;}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {  padding-block: 0;}/*  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)*/::-webkit-calendar-picker-indicator {  line-height: 1;}/*  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)*/:-moz-ui-invalid {  box-shadow: none;}/*  Correct the inability to style the border radius in iOS Safari.*/button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {  appearance: button;}/*  Correct the cursor style of increment and decrement buttons in Safari.*/::-webkit-inner-spin-button,::-webkit-outer-spin-button {  height: auto;}/*  Make elements with the HTML hidden attribute stay hidden by default.*/[hidden]:where(:not([hidden~='until-found'])) {  display: none !important;}}@layer default{.m-0{margin:calc(var(--spacing) * 0);}.-mx{margin-inline:calc(var(--spacing) * -4);}.-mx-\[0\.75rem\],.mx-\[-0\.75rem\]{margin-inline:-0.75rem;}.-mx-\[1rem\]{margin-inline:-1rem;}.mx-2{margin-inline:calc(var(--spacing) * 2);}.mx-auto{margin-inline:auto;}.my{margin-block:calc(var(--spacing) * 4);}.-mt-6{margin-top:calc(var(--spacing) * -6);}.mb-6{margin-bottom:calc(var(--spacing) * 6);}.me{margin-inline-end:calc(var(--spacing) * 4);}.me-1{margin-inline-end:calc(var(--spacing) * 1);}.me-2{margin-inline-end:calc(var(--spacing) * 2);}.me-6{margin-inline-end:calc(var(--spacing) * 6);}.ml-auto{margin-left:auto;}.ms{margin-inline-start:calc(var(--spacing) * 4);}.mt-\[1\.5rem\]{margin-top:1.5rem;}.mt-\[1rem\]{margin-top:1rem;}.mt-\[2rem\]{margin-top:2rem;}.mt-\[3rem\]{margin-top:3rem;}.mt-1{margin-top:calc(var(--spacing) * 1);}.mt-2{margin-top:calc(var(--spacing) * 2);}.mt-6{margin-top:calc(var(--spacing) * 6);}.px-\[0\.75rem\]{padding-inline:0.75rem;}.px-\[1rem\]{padding-inline:1rem;}.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}.text-end{text-align:end;}.list-none{list-style-type:none;}.b,.border{border-width:1px;}.flex{display:flex;}.flex\!{display:flex !important;}.flex-col{flex-direction:column;}.gap-2{gap:calc(var(--spacing) * 2);}.gap-6{gap:calc(var(--spacing) * 6);}.grid{display:grid;}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}.h-auto{height:auto;}.h-full{height:100%;}.max-w-full{max-width:100%;}.\!inline{display:inline !important;}.inline{display:inline;}.block{display:block;}.inline-block{display:inline-block;}.\[display\:flow-root\],.flow-root{display:flow-root;}.hidden{display:none;}.visible{visibility:visible;}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y);}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}.ease-out{--un-ease:var(--ease-out);transition-timing-function:var(--ease-out);}.items-center{align-items:center;}.justify-start{justify-content:flex-start;}.justify-end{justify-content:flex-end;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.static{position:static;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.table{display:table;}@media (max-width: 767.9px){.max-md\:-mt-3{margin-top:calc(var(--spacing) * -3);}.max-md\:mb-3{margin-bottom:calc(var(--spacing) * 3);}.max-md\:mt-3{margin-top:calc(var(--spacing) * 3);}}@media (min-width: 768px){.md\:mt-4{margin-top:calc(var(--spacing) * 4);}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (min-width: 992px){.lg\:grid{display:grid;}.lg\:col-span-1{grid-column:span 1/span 1;}.lg\:col-span-2{grid-column:span 2/span 2;}.lg\:col-start-2{grid-column-start:2;}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}}@media (min-width: 1200px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}}}/* Component-owned styles (shipped only when this component is used) */
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  /* Solid equivalent of the original: color-mix(..., transparent 97%).
     3% default-color + 97% background-color = same visual tint, no alpha. */
  background-color: color-mix(in srgb, var(--default-color), var(--background-color) 97%);
  /* Mirror the nav's bottom separator — same accent-blue tint, creates visual bookending */
  border-top: var(--nav-menu-mobile-border-width) solid var(--nav-border-color);
  font-size: var(--normal-font-size);
  text-align: center;
  padding: var(--spacing-lg) 0;
  position: relative;
  margin: var(--spacing-xxl) 0 0 0;
}

.footer h3 {
  font-size: var(--heading-font-size);
  font-weight: 700;
  position: relative;
  padding: 0;
  margin: 0 0 var(--spacing-sm) 0;
}

.footer .quote {
  font-size: var(--normal-font-size);
  font-style: italic;
  padding: 0 0 0 0;
  margin: 0 0 var(--spacing-lg) 0;
}

.footer .social-links {
  margin: 0 0 var(--spacing-lg) 0;
}

/* Skin comes from .btn/.btn-icon (styles/_buttons.css) */
.footer .social-links a {
  margin: 0 var(--spacing-xxs);
}

.footer .copyright {
  font-size: var(--footer-font-size);
  padding-top: var(--spacing-md);
  position: relative;
}

/* Divider line painted as a gradient so the outer 10% fades to nothing */
.footer .copyright::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--default-color), transparent 90%) 15%,
    color-mix(in srgb, var(--default-color), transparent 90%) 85%,
    transparent
  );
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  font-size: var(--footer-font-size);
  padding-top: var(--spacing-xxs);
}

.footer .credits p {
  margin-bottom: 0;
}

/* Mobile/Tablet Typography Tweaks */
@media (max-width: 767px) {
  .footer h3 {
    font-size: 1.5rem;
    /* Reduce heading size */
    padding: 0 0.5rem;
  }

  /* The quote scaled with everything else on desktop (root dial) but
     was missed here — phones keep a 16px root, so it needs the same
     explicit mobile clamp as every other mobile text (section em idiom). */
  .footer .quote {
    font-size: clamp(0.8rem, 3.2vw, var(--normal-font-size));
  }

  .footer .copyright,
  .footer .credits {
    font-size: 0.75rem;
    /* Smaller text to keep "Zola Goyo" on same line */
    padding-left: 0.5rem;
    /* Minimize padding to maximize width */
    padding-right: 0.5rem;
  }
}
}/* Bubble: anchored above the source, flips below on top overflow.
     The caret (rotated ::after square) anchors to the source's center-x
     and top edge, so it points at the source in both flip states. */
  .fp-tooltip {
    position: fixed;
    inset: auto;
    margin: 0;
    position-area: block-start;
    position-try-fallbacks: flip-block;
    max-width: 18rem;
    width: max-content;
    padding: 0.45rem 0.7rem;
    border-radius: 0.5rem;
    background: var(--surface-color);
    color: var(--default-color);
    border: 1px solid
      color-mix(in srgb, var(--default-color), transparent 85%);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
    font-family: var(--font-body);
    text-align: center;
  }

  .fp-tooltip::after {
    content: "";
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    rotate: 45deg;
    background: inherit;
    border: inherit;
    border-top: none;
    border-left: none;
    left: anchor(var(--fp-tip-src) 50%);
    top: anchor(var(--fp-tip-src) top);
    translate: -50% -50%;
  }@layer components {
  .mobile-nav-drawer {
    padding-bottom: 2rem;
    overflow-y: auto;
  }

  .theme-toggle {
    background: none;
    border: none;
    color: var(--nav-color);
    width: 100%;
    display: flex;
    align-items: center;
    padding: .625rem 1.125rem;
    font-size: .9375rem;
    font-family: var(--font-nav);
    transition: all .3s;
    border-radius: 3.125rem;
    margin-bottom: .5rem;
    gap: 0;
  }

  .theme-toggle-container {
    display: flex;
    flex-direction: column;
  }

  .theme-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  .toggle-dropdown {
    font-size: .75rem;
    margin-left: .25rem;
    transition: all .3s;
  }

  @media (width >= 992px) {
    .desktop-nav.is-inner .theme-toggle .theme-text-label, .desktop-nav.is-inner .theme-toggle .toggle-dropdown {
      display: none !important;
    }

    .desktop-nav.is-inner .theme-toggle {
      width: auto;
      padding: 1rem 0 1rem 1rem;
      margin-left: .5rem;
      border-left: 1px solid
        color-mix(in srgb, var(--default-color), transparent 85%);
      border-radius: 0;
      margin-bottom: 0;
    }
  }

  .theme-toggle .navicon {
    display: none;
  }

  :root:has(.theme-state-os:checked) .theme-toggle .theme-icon-os, :root:has(.theme-state-light:checked) .theme-toggle .theme-icon-light, :root:has(.theme-state-dark:checked) .theme-toggle .theme-icon-dark {
    width: 1em;
    height: 1em;
    display: inline-block !important;
  }

  .theme-dropdown-menu {
    min-width: 12.5rem !important;
  }

  .theme-dropdown-menu .dropdown-item {
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    width: 100%;
    color: var(--nav-dropdown-color);
    min-width: 12.5rem;
    min-height: 2.5rem;
    padding: .5rem;
    border-radius: .25rem;
    white-space: nowrap;
    clear: both;
    text-align: inherit;
    transition: background-color .2s, color .2s;
    position: relative;
    display: flex !important;
  }

  .theme-dropdown-menu .dropdown-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  .theme-dropdown-menu .theme-name {
    flex-grow: 1;
    margin-right: auto;
    position: relative;
    z-index: 2;
  }

  .theme-dropdown-menu .toggle-icon {
    margin-left: auto;
  }

  .theme-dropdown-menu .toggle-on, .theme-dropdown-menu .toggle-off {
    display: inline-block !important;
    padding-right: 1rem !important;
  }

  .theme-dropdown-menu .toggle-on {
    display: none !important;
  }

  :root:has(.theme-state-os:checked) .theme-dropdown-menu .theme-label-os .toggle-off, :root:has(.theme-state-light:checked) .theme-dropdown-menu .theme-label-light .toggle-off, :root:has(.theme-state-dark:checked) .theme-dropdown-menu .theme-label-dark .toggle-off {
    display: none !important;
  }

  .theme-dropdown-menu .toggle-off {
    display: inline-block !important;
  }

  :root:has(.theme-state-os:checked) .theme-dropdown-menu .theme-label-os .toggle-on, :root:has(.theme-state-light:checked) .theme-dropdown-menu .theme-label-light .toggle-on, :root:has(.theme-state-dark:checked) .theme-dropdown-menu .theme-label-dark .toggle-on {
    display: inline-block !important;
  }

  :root:has(.theme-state-os:checked) .theme-dropdown-menu .theme-label-os, :root:has(.theme-state-light:checked) .theme-dropdown-menu .theme-label-light, :root:has(.theme-state-dark:checked) .theme-dropdown-menu .theme-label-dark {
    color: var(--nav-dropdown-hover-color);
  }

  .theme-dropdown-menu .dropdown-item:hover, .theme-dropdown-menu .dropdown-item:focus-within {
    background-color: color-mix(in srgb,
      var(--nav-dropdown-hover-color),
      transparent 92%);
    color: var(--nav-dropdown-hover-color) !important;
  }
}
/* raleway-latin-400-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/astro-freelance-persona_theme/_astro/raleway-latin-400-normal.C5eIEfLm.woff2) format('woff2'), url(/astro-freelance-persona_theme/_astro/raleway-latin-400-normal.sMcq1OIP.woff) format('woff');
}/* raleway-latin-700-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/astro-freelance-persona_theme/_astro/raleway-latin-700-normal.BVpQLp0x.woff2) format('woff2'), url(/astro-freelance-persona_theme/_astro/raleway-latin-700-normal.JVwBSLev.woff) format('woff');
}/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/* src/freelance-persona/styles/main.css
   Global-only entry: layout-critical and cross-cutting styles.
   Feature partials are imported by their owning components/pages
   (with `layer(components)`) so unused features ship no CSS. */

/* NOTE: Fonts are now imported in layouts/BaseLayout.astro via JS
   to ensure correct loading in Yarn PnP environments. */

/* Base typography (design-owned since 3.5; what the old reset used to
   provide now lives in _type.css, imported below. */

/* 1. Theme Core Styles */
/* _type.css overlays the upstream reset (uno `base` layer) with the design's
   typography + the legacy grid subset. First in layer(components): partials
   below win same-specificity ties, utilities above unlayered. */
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/* src/freelance-persona/styles/_type.css
 *
 * Typographic defaults (step 3.5 cutover).
 *
 * Strictly hole-plugging: the structural reset is upstream's (presetWind4
 * preflights.reset, emitted into the `base` layer, ordered below all theme
 * CSS by the layer statement in BaseLayout.head). This file only defines
 * what the UA/vendor reset leaves undefined and the theme's design relies
 * on: the heading scale and prose rhythm. Values that users can theme live
 * in the config (colors, fonts, single sizes); a full heading scale is a
 * CSS-front default, not a token.
 *
 * Imported FIRST inside layer(components): component partials below win
 * same-specificity ties; utilities sit unlayered above everything.
 */

/* ---------------------------------------------------------------
   Heading scale (historical rhythm, kept as the design voice)
   --------------------------------------------------------------- */
h6,
h5,
h4,
h3,
h2,
h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Fluid sizes below 1200px, capped above (RFS output, ported verbatim) */
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + 0.9vw); }
h3 { font-size: calc(1.3rem + 0.8vw); }
h4 { font-size: calc(1.275rem + 0.3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------
   Prose rhythm
   --------------------------------------------------------------- */
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

figure {
  margin: 0 0 1rem;
}

blockquote {
  margin: 0 0 1rem;
}

small {
  /* .875em, not wind4's 80% */
  font-size: 0.875em;
}

hr {
  /* vendor reset provides height/color/border-top-width */
  margin: 1rem 0;
  opacity: 0.25;
}

code {
  font-size: 0.875em;
  word-wrap: break-word;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 0.875em;
}

/* UA default is an arrow on <button>; the design always had pointer hands */
button:not(:disabled) {
  cursor: pointer;
}

/* Mono IDENTITY is config-driven, not hardcoded: wind4's reset resolves its
   mono stack via theme.font.mono → var(--font-mono) (user config,
   BaseLayout injection) — the same token EC code blocks already use. */

/* UA default cell padding (1px) — the vendor reset's universal padding:0
   strips it, collapsing markdown tables by 2px per row. */
th,
td {
  padding: 1px;
}

/* ---------------------------------------------------------------
   Prose lists (wind4 unstyles lists globally; long-form content
   opts back in — UI lists style themselves in their own partials)
   --------------------------------------------------------------- */
.post-content ol,
.legal-text ol {
  list-style-type: decimal;
  padding-left: 2rem;
}

.post-content ul,
.legal-text ul {
  list-style-type: disc;
  padding-left: 2rem;
}

.post-content ol,
.post-content ul,
.legal-text ol,
.legal-text ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

.post-content ol ol,
.post-content ul ul,
.post-content ol ul,
.post-content ul ol,
.legal-text ol ol,
.legal-text ul ul,
.legal-text ol ul,
.legal-text ul ol {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Container (design infrastructure)
   wind4's `container` utility uses Tailwind max-width semantics
   (max = breakpoint); this design's column is narrower — kept as a
   semantic rule so the utility stays blocked (see uno.config.ts).
   --------------------------------------------------------------- */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* Breakpoint caps in rem (not px) so they inherit the fluid root
   dial above 1024px and stay pixel-identical below it (16px root).
   Values are the historical px caps ÷ 16. */
@media (min-width: 576px)  { .container { max-width: 33.75rem; } }
@media (min-width: 768px)  { .container { max-width: 45rem; } }
@media (min-width: 992px)  { .container { max-width: 60rem; } }
@media (min-width: 1200px) { .container { max-width: 71.25rem; } }
@media (min-width: 1400px) { .container { max-width: 82.5rem; } }
}
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
/* Fonts */
:root {
  --font-heading: sans-serif;
  --font-body: sans-serif;
  --font-nav: sans-serif;
  /* Raw in-code default (README Level 4): deliberately conspicuous — a
     project without a fonts.monospace setting should LOOK like it. Never
     rendered by configured sites (starter ships Courier New). */
  --font-mono: "Comic Sans MS", "Comic Neue", cursive;
}

/* Accessibility Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
/*
  DARK MODE STRATEGY (flat light-dark() table)
  1. Default: System Preference (via `color-scheme: light dark` — the UA picks)
  2. Override: Native Checkbox (CSS :has selector flips color-scheme)
  3. Persistence: JS syncs checkbox with localStorage

  Every scheme-dependent variable is declared exactly once using
  light-dark(<light>, <dark>). Variables whose value is identical in both
  schemes are declared once without light-dark(); formulas referencing
  other variables (e.g. --heading-color) resolve per-scheme automatically.
*/

/* Manual scheme override (checkbox wins over OS preference) */
:root:has(.theme-state-light:checked) {
  color-scheme: light;
}

:root:has(.theme-state-dark:checked) {
  color-scheme: dark;
}

/* Theme Variable Table (Libadwaita palette for the dark sides) */
:root {
  color-scheme: light dark;

  /* Core */
  --background-color: light-dark(#ffffff, #1e1e1e);
  --default-color: light-dark(#272829, #e0e0e0);
  --heading-color: color-mix(in srgb, var(--default-color), transparent 20%);
  --accent-color: #0563bb;
  --surface-color: light-dark(#ffffff, #303030);
  --contrast-color: #ffffff;
  --transparency: 25%;
  --text-muted: light-dark(#6c757d, color-mix(in srgb, var(--default-color), transparent 50%));

  /* Component Specifics */
  --card-background: light-dark(#ffffff, color-mix(in srgb, var(--default-color), transparent 98%));
  --card-border: light-dark(rgba(0, 0, 0, 0.125), color-mix(in srgb, var(--default-color), transparent 85%));
  --tag-background: color-mix(in srgb, var(--default-color), transparent 94%);
  --tag-text: color-mix(in srgb, var(--default-color), transparent 55%);
  --tag-border: transparent;
  --input-background: light-dark(#ffffff, color-mix(in srgb, var(--default-color), transparent 95%));
  --input-border: light-dark(#ced4da, color-mix(in srgb, var(--default-color), transparent 85%));
  --input-text: light-dark(#212529, var(--default-color));

  --underline-color: light-dark(var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 45%));
  --code-background: light-dark(#f6f6f6, var(--surface-color));

  /* Scrollbars (css-side tokens, deliberately not config-exposed) */
  --scrollbar-track: light-dark(#f1f1f1, color-mix(in srgb, var(--default-color), transparent 92%));
  --scrollbar-thumb: light-dark(#cccccc, color-mix(in srgb, var(--default-color), transparent 75%));
  --scrollbar-thumb-hover: light-dark(#999999, color-mix(in srgb, var(--default-color), transparent 60%));

  /* Nav Menu Colors */
  --nav-color: light-dark(#45505b, #e0e0e0);
  --nav-hover-color: var(--accent-color);
  --nav-dropdown-background-color: light-dark(#ffffff, var(--surface-color));
  --nav-dropdown-color: light-dark(#212529, #e0e0e0);
  --nav-dropdown-hover-color: var(--accent-color);

  /* Nav Menu Colors (Header) — Matte Polished glassmorphism base */
  --header-background-color: color-mix(in srgb, var(--background-color), transparent 5%);
  --header-color: light-dark(var(--default-color), #ffffff);
}

/* Font Sizes */
:root {
  --normal-font-size: 1rem; /* 16px */
  --footer-font-size: 0.875rem; /* 14px */
  --heading-font-size: 2rem; /* 32px */
  --subtitle-font-size: 1.5rem; /* 24px */
  --title-font-size: 4rem; /* 64px */
  --nav-font-size: 1rem; /* 16px */
}

/* Nav Menu Dimensions */
:root {
  --nav-icon-size: 3.75rem; /* 60px */
  --nav-menu-width: 9.375rem; /* 150px */
  --nav-pill-expanded-width: 11.25rem; /* 180px */
  --nav-menu-mobile-width: 18.75rem; /* 300px */
  --nav-menu-border-padding: 0.9375rem; /* 15px */
  --nav-menu-mobile-border-width: 1px; /* 1px */
  --nav-border-color: color-mix(in srgb, var(--accent-color), transparent 85%); /* Standard border color */
}

/* Spacing Variables */
:root {
  --spacing-xxs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 1rem; /* 16px */
  --spacing-md: 1.5rem; /* 24px */
  --spacing-lg: 2rem; /* 32px */
  --spacing-xl: 3rem; /* 48px */
  --spacing-xxl: 4rem; /* 64px */
}

/* Tighter vertical rhythm on phones — sections otherwise burn ~128px of
   pure padding before content on a small viewport. Desktop (>767px) keeps
   the airy 4rem spacing untouched. */
@media (max-width: 767px) {
  :root {
    --spacing-xxl: 2.25rem; /* 36px */
  }
}

:root {
  --transition-hover-time: 0.3s; /* Hover transition duration */
  --transition-hover-transparency: var(--transparency);
}

:root {
  --img-border-radius: 0.625rem; /* 10px */
  --button-size: 2.5rem; /* 40px */
  --button-position-away-from-corner-distance: 0.9375rem; /* 15px */
  --button-position-away-from-corner-horizontal-distance: var(--button-position-away-from-corner-distance);
  --button-position-away-from-corner-vertical-distance: 1.875rem; /* 30px */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# Proportional desktop scaling (fluid root dial — true linear)
  One dial makes the entire rem chain viewport-proportional:
  master design = 1920×1080 (0.8333vw = 16px there). TRUE LINEAR
  in both directions, so any 16:9 viewport is the master design
  photographically reduced/enlarged — identical positions and
  line breaks, just fewer/more pixels. The 1.4814vh term (= 16px
  at 1080 height) keeps that true on any aspect ratio and shields
  ultrawides. Floor 0.625rem only cushions the 1024–1200px zone
  (true-linear would dip to 8.5px there); cap 2rem is an 8K
  sanity bound. Bounds are rem so user font-size preferences
  still propagate. Below the 1024px breakpoint the mobile/tablet
  system keeps a fixed 16px root. The 1024 seam (16px → ~10px)
  is the accepted @min handover.
--------------------------------------------------------------*/
@media (min-width: 1024px) {
  html {
    font-size: clamp(0.625rem, min(0.8333vw, 1.4814vh), 2rem);
  }
}


/*--------------------------------------------------------------
# Selection
--------------------------------------------------------------*/
::selection {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--font-body);
  width: 100%;
  overflow-x: hidden;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: var(--transition-hover-time);
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent var(--transition-hover-transparency));
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-color), transparent 50%);
  text-underline-offset: 2px;
}

/* Skip link — first focusable element on every page. Visually hidden
   until focused (WCAG 2.4.1 bypass blocks). */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus-visible,
.skip-link:focus {
  top: 0;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--font-heading);
}

code {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Native Scroll Animations
--------------------------------------------------------------*/

/* 1. Base State: Default to VISIBLE (Safety First) */
[data-reveal] {
  opacity: 1;
  transform: none;
  transition-property: opacity, transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}

/* 2. Loading State: Explicitly Hidden via JS */
/* 'js-ready' ensures elements stay hidden until the observation logic runs. */
html.js-loading [data-reveal],
html.js-ready [data-reveal]:not(.revealed) {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

html.js-loading [data-reveal="fade-up"],
html.js-ready [data-reveal="fade-up"]:not(.revealed) {
  transform: translateY(1.875rem); /* 30px */
}

html.js-loading [data-reveal="zoom-out"],
html.js-ready [data-reveal="zoom-out"]:not(.revealed) {
  transform: scale(1.05);
}

/* 3. Active State (Visible) */
[data-reveal].revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/*--------------------------------------------------------------
# Global Icon Fixes
--------------------------------------------------------------*/
/* Global Icon Styling for astro-icon SVGs */
[data-icon] {
  display: inline; /* wind4 blockifies svg; icons flow inline with text (pre-3.5 UA default) */
  width: 1em;
  height: 1em;
  vertical-align: -0.125em; /* Standard vertical alignment for font icons */
  fill: currentColor;
}

/* 
  Prevent icons from being treated as text (blinking caret, selection).
  Targeting:
  - .bi (Bootstrap Icons)
  - .ai (Academicons)
  - [class*="icon-"] (Common pattern)
  - [class*=" bi-"] (icon-prefix safety)
  - [data-icon] (astro-icon)
*/
.bi,
.ai,
[class*="icon-"],
[class*=" bi-"],
[data-icon] {
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}



/*--------------------------------------------------------------
# Global Scroll Lock
--------------------------------------------------------------*/
/* 
  Prevent background page scrolling when mobile menu is open.
  This works in tandem with the "Layout Inversion" in navigation:
  1. Nav container captures scroll events.
  2. If scroll reaches boundary, this Lock prevents it from chaining to Body.
  
  Targeting HTML ensures we catch the root scroll container.
*/
html:has(#mobile-nav:popover-open),
html:has(.mobile-nav:popover-open),
html:has(.header[popover]:popover-open) {
  overflow: hidden;
  overscroll-behavior: none;
}

/*--------------------------------------------------------------
# Unified Tags and Badges
--------------------------------------------------------------*/
.badge,
.tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.1875rem;
  /* 3px (square-ish) */
  background-color: var(--tag-background, color-mix(in srgb, var(--default-color), transparent 94%));
  color: var(--tag-text, color-mix(in srgb, var(--default-color), transparent 45%));
  border: none;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;

  /* Active State */
  &.active {
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);

    @media (prefers-color-scheme: dark) {
      :root:not(:has(.theme-state-light:checked)) & {
        background-color: color-mix(in srgb, var(--accent-color), var(--surface-color) 85%);
      }
    }

    @media (prefers-color-scheme: light) {
      :root:has(.theme-state-dark:checked) & {
        background-color: color-mix(in srgb, var(--accent-color), var(--surface-color) 85%);
      }
    }
  }
}

/* Badge styling (design-owned since 3.5).
   NOTE: sibling rule, NOT nested — nesting inside `.badge,.tag` compiles
   to a descendant selector that never matches. Scoped to .badge only —
   bare `.tag` spans never had these. */
.badge {
  white-space: nowrap;
  line-height: 1;
  vertical-align: baseline;
}
.badge:empty {
  display: none;
}
/*--------------------------------------------------------------
# Code Blocks (Legacy - Removed in favor of astro-expressive-code)
--------------------------------------------------------------*/
/* Legacy styles removed. Now using astro-expressive-code. */

/*--------------------------------------------------------------
# Test Mode: Deterministic Rendering for Visual Regression
--------------------------------------------------------------*/
[data-test-mode="true"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* NOTE: the universal selectors are kept flat (not nested) because bare `*`
   inside a nested rule trips lightningcss' minifier. Output is identical. */
[data-test-mode="true"] *,
[data-test-mode="true"] *::before,
[data-test-mode="true"] *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

[data-test-mode="true"] [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

[data-test-mode="true"] .typed-cursor {
  display: none !important;
}

[data-test-mode="true"] .typing-lock,
[data-test-mode="true"] .typed {
  opacity: 1 !important;
  visibility: visible !important;
}

[data-test-mode="true"] .mascot-container {
  animation: none !important;
}

[data-test-mode="true"] ::-webkit-scrollbar {
  display: none;
}
}
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Image Attribution Styles
# Reusable partial for displaying image credits/license
# Used by: hero, blog-post .post-img, post-figure,
#          post-image-container, category-image-container,
#          avatar-container
#
# === TUNABLE DIALS === (defined at :root below)
# --attribution-ratio:         attribution size as a share of the
#                              IMAGE width (cqi — needs the image
#                              wrapper to be a query container).
# --attribution-ratio-mobile:  phone news-row ratio.
# --attribution-min-size:      global floor — anything smaller reads
#                              as a rendering mistake. Reference:
#                              the Permaculture Blogs card.
# Hero + About avatar keep fixed sizes (viewport-anchored / already
# tiny). Consumers: font-size: max(var(--attribution-ratio),
# var(--attribution-min-size)).
#
# Native-CSS port of the former Sass `attribution.styles()` mixin.
#
# ⚠️ The parent contexts are split into TWO groups by complexity.
# A single combined list would compile to `:is(...)`, which takes the
# specificity of its MOST specific member (.blog-post .post-img = 0,2,0)
# and would wrongly raise every simple context's rules above the
# per-component overrides (e.g. `.post-figure .img-attribution
# { position: static }`). Keeping groups homogeneous restores the exact
# cascade semantics of the old Sass expansion.
--------------------------------------------------------------*/

:root {
    --attribution-ratio: 2.34cqi;
    --attribution-ratio-mobile: 1.75cqi;
    --attribution-min-size: 0.1875rem; /* 3px — Permaculture card floor */
}

/* Group 1: simple (0,1,0) contexts -> rules compute to (0,2,0),
   matching the legacy per-context Sass expansion specificity. */
.hero,
.post-figure,
.avatar-container,
.post-image-container,
.category-image-container {
  .img-attribution {
    /* Position: bottom-right overlay */
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;

    /* Visual style: super subtle, NO background */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;

    /* Typography: configurable via CSS custom properties
       Override --attribution-* vars in parent scope to customize */
    font-size: var(--attribution-font-size, 0.75em);
    font-weight: var(--attribution-font-weight, 500);
    line-height: var(--attribution-line-height, 1.2);

    /* Muted color - same as qualification subtitles (55% transparent) */
    color: var(--attribution-color, color-mix(in srgb, var(--default-color), transparent 65%));

    /* Link styles
       Link and Span (disabled link) styles */
    & a,
    & span>span {
      /* span > span targets the disableLinks wrapper */
      color: inherit;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    & a[href]:hover,
    & span>span[href]:hover {
      color: var(--accent-color);
      text-decoration: none;
    }

    & i {
      font-size: 0.85em;
      vertical-align: middle;
    }

    & .license-line {
      font-style: italic;
    }

    &.img-attribution--bottom-left {
      bottom: 0.5rem;
      left: 0.5rem;
      right: auto;
      align-items: flex-start;
    }

    &.img-attribution--top-right {
      top: 0.5rem;
      right: 0.5rem;
      bottom: auto;
      align-items: flex-end;
    }

    &.img-attribution--top-left {
      top: 0.5rem;
      left: 0.5rem;
      bottom: auto;
      right: auto;
      align-items: flex-start;
    }

    &.img-attribution--theme-light {
      color: color-mix(in srgb, #e0e0e0, transparent 65%) !important;
    }

    &.img-attribution--theme-dark {
      color: color-mix(in srgb, #272829, transparent 65%) !important;
    }
  }

  /* Variant: Single line (for small cards) */
  .img-attribution--inline {
    flex-direction: row;
    gap: 0.375rem;

    & .credit-line::after {
      content: "|";
      margin-left: 0.375rem;
      opacity: 0.5;
    }

    & .license-line {
      font-style: normal;
    }
  }

  /* Variant: Light text (for dark image backgrounds) */
  .img-attribution--light {
    color: color-mix(in srgb, white, transparent 30%);
  }
}

/* Group 2: descendant (0,3,0) context */
.blog-post .post-img {
  .img-attribution {
    /* Position: bottom-right overlay */
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;

    /* Visual style: super subtle, NO background */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;

    /* Typography: configurable via CSS custom properties
       Override --attribution-* vars in parent scope to customize */
    font-size: var(--attribution-font-size, 0.75em);
    font-weight: var(--attribution-font-weight, 500);
    line-height: var(--attribution-line-height, 1.2);

    /* Muted color - same as qualification subtitles (55% transparent) */
    color: var(--attribution-color, color-mix(in srgb, var(--default-color), transparent 65%));

    /* Link styles
       Link and Span (disabled link) styles */
    & a,
    & span>span {
      /* span > span targets the disableLinks wrapper */
      color: inherit;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    & a[href]:hover,
    & span>span[href]:hover {
      color: var(--accent-color);
      text-decoration: none;
    }

    & i {
      font-size: 0.85em;
      vertical-align: middle;
    }

    & .license-line {
      font-style: italic;
    }

    &.img-attribution--bottom-left {
      bottom: 0.5rem;
      left: 0.5rem;
      right: auto;
      align-items: flex-start;
    }

    &.img-attribution--top-right {
      top: 0.5rem;
      right: 0.5rem;
      bottom: auto;
      align-items: flex-end;
    }

    &.img-attribution--top-left {
      top: 0.5rem;
      left: 0.5rem;
      bottom: auto;
      right: auto;
      align-items: flex-start;
    }

    &.img-attribution--theme-light {
      color: color-mix(in srgb, #e0e0e0, transparent 65%) !important;
    }

    &.img-attribution--theme-dark {
      color: color-mix(in srgb, #272829, transparent 65%) !important;
    }
  }

  /* Variant: Single line (for small cards) */
  .img-attribution--inline {
    flex-direction: row;
    gap: 0.375rem;

    & .credit-line::after {
      content: "|";
      margin-left: 0.375rem;
      opacity: 0.5;
    }

    & .license-line {
      font-style: normal;
    }
  }

  /* Variant: Light text (for dark image backgrounds) */
  .img-attribution--light {
    color: color-mix(in srgb, white, transparent 30%);
  }
}
}
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 * SPDX-FileCopyrightText: 2026, 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: opacity 0.25s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 1.875rem); /* 30px */
  left: calc(50% - 1.875rem); /* 30px */
  border: 0.375rem solid #ffffff; /* 6px */
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 3.75rem; /* 60px */
  height: 3.75rem; /* 60px */
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
}
/* NOTE: deliberately NOT in @layer components — this partial overrides
   Expressive Code's own unlayered styles via :root:root specificity tricks,
   which only work between two unlayered sheets (layers would invert priority). */
/* SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors */
/* SPDX-License-Identifier: MIT */

/* Pre-migration origin: _code-blocks.scss (converted in phase 3.1) */

/* ============================================================
   Expressive Code Customizations

   Theme switching strategy (all CSS-native, zero JS):
   - EC's useDarkModeMediaQuery handles OS dark preference
   - EC's themeCssSelector handles manual :has(.theme-state-dark:checked)
   - This file handles the edge case: OS dark + user forces light
     by resetting EC tokens and frame vars back to light values.

   EC fully manages its own copy-button opacity/hover behaviour via
   @media (hover: hover). We must NOT override opacity here or we
   break the hover-reveal interaction.
   ============================================================ */

.expressive-code {
  margin: 2rem 0;

  /* Connect to our theme variables for a designed-in look */
  --ec-bg: var(--code-background);
  --ec-brdRad: 0.5rem;
  --ec-brdCol: color-mix(in srgb, var(--default-color), transparent 85%);

  /* Copy icon follows the theme: the icon is drawn via mask-image +
     background-color: var(--ec-frm-inlBtnFg) — feeding it our token makes
     it theme-aware in all four input combinations.
     Per-theme dials (0% = full muted, 100% = invisible):
     - light: near-solid muted
     - dark: muted tone, heavily faded (full strength is too bright)
     The button outline (border) follows the same muted tone; EC's default
     border opacity (0.4) reads as invisible on the light code background.
     The dark combos are re-asserted in the :root:root blocks below (EC's
     (0,4,0) dark rules would otherwise win) — tune the dials HERE only. */
  --copy-icon-fade-light: 5%;
  --copy-icon-fade-dark: 55%;
  --ec-frm-inlBtnFg: color-mix(
    in srgb,
    var(--text-muted),
    transparent var(--copy-icon-fade-light)
  );
  --ec-frm-inlBtnBrd: var(--text-muted);
  --ec-frm-inlBtnBrdOpa: 0.6;

  /* Style the "Copied!" tooltip message */
  --ec-frm-tooltipSuccessBg: var(--accent-color);
  --ec-frm-tooltipSuccessFg: var(--contrast-color);

  .frame {
    background-color: var(--ec-bg);
  }
}

/* =============================================================
   DARK MODE: Remove EC's built-in box shadow.
   EC uses a heavy #0000005b shadow in dark mode which creates
   a muddy look on dark surfaces. Adwaita uses borders, not
   shadows, for visual separation. The --ec-brdCol border is
   sufficient.

   Specificity note: EC's themeCssSelector generates rules at
   (0,4,0). We use :root:root to reach (0,5,0) and win
   regardless of stylesheet load order.
   ============================================================= */

/* Case A: OS prefers dark AND user has not forced light.
   :root:root boosts specificity above EC's themeCssSelector rules. */
@media (prefers-color-scheme: dark) {
  :root:root:not(:has(.theme-state-light:checked)) .expressive-code {
    --ec-frm-shdCol: transparent;
    --ec-frm-frameBoxShdCssVal: none;
    --ec-brdCol: color-mix(in srgb, var(--default-color), transparent 85%);
    /* Re-assert the dark dial at (0,5,0): EC's dark rules re-declare
       --ec-frm-inlBtnFg and --ec-frm-inlBtnBrd on .expressive-code and
       would otherwise win in this combo (OS dark, chooser not forced
       light). */
    --ec-frm-inlBtnFg: color-mix(
      in srgb,
      var(--text-muted),
      transparent var(--copy-icon-fade-dark)
    );
    --ec-frm-inlBtnBrd: var(--text-muted);
  }
}

/* Case B: User explicitly forced dark.
   NO media query wrapper — this must fire for both OS=dark and OS=light
   (Case A only covers OS=dark; this covers OS=light+user=dark). */
:root:root:has(.theme-state-dark:checked) .expressive-code {
  --ec-frm-shdCol: transparent;
  --ec-frm-frameBoxShdCssVal: none;
  --ec-brdCol: color-mix(in srgb, var(--default-color), transparent 85%);
  /* Same re-assertion for the forced-dark combo (OS light, chooser dark) —
     EC's themeCssSelector rule (0,4,0) beats the base (0,1,0) mapping. */
  --ec-frm-inlBtnFg: color-mix(
    in srgb,
    var(--text-muted),
    transparent var(--copy-icon-fade-dark)
  );
  --ec-frm-inlBtnBrd: var(--text-muted);
}

/* =============================================================
   LIGHT MODE: Same treatment — EC's github-light frame shadow is
   a soft drop shadow; Adwaita uses borders, not shadows, for
   visual separation. The --ec-brdCol border is sufficient.

   Matches every combo where dark is NOT forced: OS light,
   OS no-preference, OS dark + forced light (this also fixes the
   forced-light case, which previously kept EC's dark shadow), and
   OS dark + chooser untouched (redundant with Case A, harmless).
   Forced dark is Case B. Union with Case B = shadow gone
   everywhere. Same :root:root:not(:has(...)) specificity math as
   Case A: (0,5,0) beats EC's themeCssSelector (0,4,0).
   ============================================================= */
:root:root:not(:has(.theme-state-dark:checked)) .expressive-code {
  --ec-frm-shdCol: transparent;
  --ec-frm-frameBoxShdCssVal: none;
}

/* =============================================================
   EDGE CASE: OS prefers dark BUT user has forced light.
   EC's @media (prefers-color-scheme: dark) activates dark tokens
   and frame vars. We counteract by resetting to light values.
   !FixMe! EC quirk compensation — EC reads the OS directly instead of
   following the page chooser. See the copy-button !FixMe! below and
   To_Do.md → "EC theming modernization".
   ============================================================= */
@media (prefers-color-scheme: dark) {
  :root:has(.theme-state-light:checked) {
    /* Reset EC tokens from dark (--1) back to light (--0) */
    .expressive-code .ec-line :where(span[style^='--']:not([class])) {
      color: var(--0, inherit);
      background-color: var(--0bg, transparent);
      font-style: var(--0fs, inherit);
      font-weight: var(--0fw, inherit);
      text-decoration: var(--0td, inherit);
    }
  }
}

/* Copy button icon: theme-aware via --ec-frm-inlBtnFg (mapped above).
   !FixMe! Long-term: either EC ships modern :has()/color-scheme-aware dual
   themes, or the compensation blocks above move to the CSS if() function
   (Chrome 137+, Firefox/Safari pending) querying our global --theme state —
   EC emits its own @media (prefers-color-scheme) switch, which bypasses the
   page chooser in the OS-dark + forced-light case.
   See To_Do.md → "EC theming modernization" (file a GitHub issue there). */

/* NOTE: do NOT resize the copy button externally (cqi/transform). EC
   manages the button's internals (icon div, pseudo-elements, copied-state
   feedback) against its fixed 2.5rem box — resizing breaks rendering and
   makes the click feedback jump. Verified 2026-09-08. */

/* ⚠️ EC-VISUAL OVERRIDE (flagged, minimal): shrink the copy button to
   50% via transform. WHY TRANSFORM: it's technically not the best
   approach — the best would be EC exposing a size knob for the button
   (it exposes colors only, e.g. --ec-frm-inlBtnFg) or a safely
   resizable box — but EC manages the button's internals (icon layer,
   copied-state feedback) against a fixed 2.5rem box with no size hook,
   so a real resize breaks rendering and makes the click feedback jump.
   A uniform transform is the only feasible route: EC renders at its
   native box — internals stay intact and scale 1:1 with the visual.
   The layout box stays 40px = a larger-than-visual click target.
   Do NOT resize the button box instead. */
.expressive-code .copy button {
  transform: scale(0.55);
  transform-origin: top right;
}
/* 2. Cross-cutting Section Styles */
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Section
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: var(--spacing-xxl) 0 0 0;
}

.section .section-title {
  text-align: center;
  padding-bottom: var(--spacing-xxl);
  position: relative;
}

.section-title h2 {
  font-size: var(--heading-font-size);
  font-weight: 700;
  margin-bottom: 1.25rem;
  /* 20px */
  padding-bottom: 1.25rem;
  /* 20px */
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 10rem;
  /* 160px */
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: var(--spacing-xxl);
  height: 0.1875rem;
  /* 3px */
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

.section-title em {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--subtitle-font-size);
  color: var(--accent-color);
}

/* Mobile: compact section-title block (divider + subtitle) so content
   starts higher on small screens. Headings scale fluidly with the
   viewport (user config vars act as the ceiling). */
@media (max-width: 767px) {
  .section .section-title {
    padding-bottom: calc(var(--spacing-xxl) * 0.75);
  }

  .section-title h2 {
    font-size: clamp(1.35rem, 5.5vw, var(--heading-font-size));
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .section-title h2::before {
    width: 6rem;
  }

  .section-title em {
    margin-top: 0.5rem;
    font-size: clamp(0.8rem, 3.2vw, var(--subtitle-font-size));
  }
}
}
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Plain Section
--------------------------------------------------------------*/
.plain .content h2 {
  font-weight: 700;
  font-size: 1.5rem;
  /* 24px */
}

.plain .content ul {
  list-style: none;
  padding: 0;
}

.plain .content ul li {
  margin-bottom: 1.25rem;
  /* 20px */
  display: flex;
  align-items: center;
}

.plain .content ul strong {
  margin-right: 0.625rem;
  /* 10px */
}

.plain .content ul i {
  font-size: 1rem;
  /* 16px */
  margin-right: 0.3125rem;
  /* 5px */
  color: var(--accent-color);
  line-height: 0;
}

.plain .content p {
  text-align: justify;
}

.plain img {
  width: 100%;
  display: flex;
  border-radius: var(--img-border-radius);
}

/* Plain/Legal page — dark mode card effect.
   Strategy: padding grows the box inward; negative margin pulls it back out
   by the same amount, stealing from surrounding empty space instead of
   compressing the content. Zero layout shift for the text. */

/* Case A: OS Dark + Unchecked = Dark */
@media (prefers-color-scheme: dark) {
  :root:not(:has(.theme-state-light:checked)) {

    .plain,
    .page-content,
    .legal-content {
      background-color: var(--surface-color);
      color: var(--default-color);
      border-radius: var(--img-border-radius, 0.625rem);
      /* Expand outward — counteracts the padding so text never moves */
      padding: 2rem;
      margin-left: -2rem;
      margin-right: -2rem;
      /* Visual border via box-shadow — outside the box model, no reflow */
      box-shadow: 0 0 0 1px var(--card-border);
    }
  }
}

/* Case B: OS Light + Checked = Dark */
@media (prefers-color-scheme: light) {
  :root:has(.theme-state-dark:checked) {

    .plain,
    .page-content,
    .legal-content {
      background-color: var(--surface-color);
      color: var(--default-color);
      border-radius: var(--img-border-radius, 0.625rem);
      /* Expand outward — counteracts the padding so text never moves */
      padding: 2rem;
      margin-left: -2rem;
      margin-right: -2rem;
      /* Visual border via box-shadow — outside the box model, no reflow */
      box-shadow: 0 0 0 1px var(--card-border);
    }
  }
}
}
@layer components {
/* SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors */
/* SPDX-License-Identifier: MIT */

/* ============================================================
   Shared button skin — one pill, modifiers for variation.

   Consumers: contact send button, footer social pills, 403/404
   (+ coming-soon) CTA links. Sizing/layout stays with the
   consumer (utilities or local css); this file owns only the
   skin so the visuals exist exactly once.

   Transition NOTE: specific properties only, never `all` —
   `all` animates text-decoration (the "blinking underline")
   and whatever else the cascade throws at the element.
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  border-radius: 3.125rem; /* 50px pill */
  padding: 0.625rem 1.875rem; /* 10px 30px */
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-hover-time),
    color var(--transition-hover-time),
    transform var(--transition-hover-time),
    box-shadow var(--transition-hover-time);
}

.btn:hover,
.btn:focus-visible {
  color: var(--contrast-color);
  background: color-mix(
    in srgb,
    var(--accent-color),
    transparent var(--transition-hover-transparency)
  );
  text-decoration: none;
}

/* Serious/danger variant (403 "Retreat to Safety") — theme-aware via
   light-dark(): stately in light mode, muted surface in dark, accent hover */
.btn-dark {
  background: light-dark(var(--heading-color), var(--surface-color));
  color: light-dark(var(--contrast-color), var(--default-color));
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* Circular icon variant (footer social pills) */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; /* 36px */
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
}
/* 3. Conditional Navigation Styles (body-class scoped layouts) */
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/* 
 * Shared Unified Theme Dropdown Styling
 * Applies globally to ensure identical behavior/shape across layouts.
 */

/* Baseline Styling applies natively across breakpoints where relevant */
.navmenu .theme-toggle-container .theme-dropdown-menu {
    display: block; /* Flex is not needed here if inner pages logic handles dropdown items*/
    position: absolute;
    visibility: hidden;
    opacity: 0;
    /* Frosted panel: the menu floats over the busy hero image — blur the
       background behind the whole panel so rows stay readable (the
       per-row blur variant read as a glitchy patch).
       Edge: the glass sits on the page color, so define where it starts
       and stops — the same accent hairline the topnav uses as its bottom
       border (user-requested experiment). */
    border: var(--nav-menu-mobile-border-width) solid var(--nav-border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Same tinted glass as the home sidebar dropdown (unified) — the
       hairline border + blur above were already mirrored here */
    background: color-mix(
      in srgb,
      color-mix(in srgb, var(--background-color), var(--default-color) 5%),
      transparent 35%
    );
    left: 0.875rem;
    top: 130%;
    transition: 0.3s;
    padding: 0.625rem 0;
    margin: 0;
    border-radius: 0.25rem;
    z-index: 99;
    cursor: default;
    user-select: none;
    /* Prevent text cursor highlighting on dropdown contents */
    /* Ensure dead zones like padding do not show a pointer */
}

.navmenu .theme-toggle-container {
    /* Anchoring context for the absolute dropdown menu (design-owned
       since 3.5) */
    position: relative;
}

.navmenu .theme-toggle {
    position: relative;
    z-index: 100; /* Ensure pill is clickable above the light-dismiss backdrop */
}

@media (min-width: 992px) {

    /* Show floating dropdown natively on interactions or when checkbox is triggered */
    .navmenu .theme-dropdown-menu:focus-within,
    .navmenu .theme-toggle-container:hover > .theme-dropdown-menu,
    .navmenu .theme-toggle:focus-visible~.theme-dropdown-menu,
    .navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked)>.theme-dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        top: 100% !important;
    }

    /* Enforce hidden chevron on desktop topnav (Inner Pages) globally */
    .header.is-inner .navmenu .theme-toggle .toggle-dropdown {
        display: none !important;
    }
}

/* 
 * Native Checkbox Hack: Light Dismiss Backdrop
 * When the hidden checkbox is NOT checked, the backdrop is hidden.
 * When checked, it expands full screen so clicking anywhere triggers the close natively.
 */
.navmenu .theme-menu-backdrop {
    display: none;
    position: fixed;
    /* Prevent backdrop-filter on the header from clipping this fixed element */
    top: -50vh;
    left: -50vw;
    width: 200vw;
    height: 200vh;
    z-index: 98;
    /* Just below the dropdown (99), above page content */
    cursor: default;
}

.navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked) .theme-menu-backdrop {
    display: block;
}

/* Mobile Specific Dropdown Drawer Expansion */
@media (max-width: 991px) {
    .navmenu .theme-menu-backdrop {
        display: none !important; /* Mobile is an accordion; no backdrop needed */
    }

    .navmenu .theme-toggle-container .theme-dropdown-menu {
        display: none;
        flex-direction: column;
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        background: transparent;
        padding: 0;
        margin: 0;
        list-style-type: none;
        min-width: auto !important;
        width: 100%;
        box-sizing: border-box;
    }

    body #navmenu-mobile .theme-dropdown-menu .dropdown-item {
        min-width: auto !important;
    }

    body #navmenu-mobile .theme-toggle-container.active .theme-dropdown-menu,
    body #navmenu-mobile .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked) .theme-dropdown-menu {
        display: flex !important;
    }
}

/* Dark Mode specifics for the Dropdown Menu */
@media (prefers-color-scheme: dark) {
    :root:not(:has(.theme-state-light:checked)) .navmenu .theme-dropdown-menu {
        box-shadow: none !important;
    }

    :root:not(:has(.theme-state-light:checked)) .navmenu .theme-dropdown-menu .dropdown-item:hover,
    :root:not(:has(.theme-state-light:checked)) .navmenu .theme-dropdown-menu .dropdown-item:focus-within {
        /* Subtle darken on top of the frosted panel */
        background-color: color-mix(in srgb, black, transparent 88%);
    }
}

@media (prefers-color-scheme: light) {
    :root:has(.theme-state-dark:checked) .navmenu .theme-dropdown-menu {
        box-shadow: none !important;
    }

    :root:has(.theme-state-dark:checked) .navmenu .theme-dropdown-menu .dropdown-item:hover,
    :root:has(.theme-state-dark:checked) .navmenu .theme-dropdown-menu .dropdown-item:focus-within {
        /* Subtle darken on top of the frosted panel */
        background-color: color-mix(in srgb, black, transparent 88%);
    }
}
}
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/* Shared Mobile Drawer (Popover API) Styles.
   Native-CSS port of the former `mobile-nav.styles()` mixin: the rules are
   scoped to both navigation contexts (home sidebar / inner top bar), exactly
   mirroring the two Sass expansions. */

body.home-page,
body.inner-page {
/* Shared Mobile Drawer (Popover API) Styles */

@media (max-width: 991px) {
  /* Reset popover defaults and set up drawer (Native Scroll) */
  .mobile-nav[popover] {
    /* Container: Full screen, Fixed, NO SCROLL */
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;

    /* Reset Transform/Transition for container */
    transform: none;
    transition:
      display 0.3s allow-discrete,
      overlay 0.3s allow-discrete;

    /* Flex layout: Align drawer to START */
    justify-content: flex-start;
    align-items: stretch;

    /* Ensure content color is inherited */
    color: var(--default-color);
  }

  /* Ensure nav-close is hidden when popover is not open (Fix for Stuck State) */
  .mobile-nav[popover]:not(:popover-open) .nav-close {
    display: none !important;
  }

  .mobile-nav[popover]:popover-open {
    display: flex;
  }

  /* Backdrop: Fixed, Non-scrolling */
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: transparent;
    border: none;
    cursor: default;
    width: 100%;
    height: 100dvh;
  }

  /* Visual Drawer: The SCROLL CONTAINER */
  .mobile-nav-drawer {
    /* Dimensions */
    width: calc(var(--nav-menu-mobile-width) + var(--nav-menu-mobile-border-width));
    height: 100dvh;
    /* Full Height */

    /* Styling */
    background: var(--background-color);
    border-right: var(--nav-menu-mobile-border-width) solid var(--nav-border-color);

    /* SCROLL LOGIC: This element scrolls */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    /* Padding */
    padding: 1rem var(--nav-menu-border-padding);

    /* Flex layout for content */
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;

    /* Slide Animation via Transform */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }

  /* Animate Drawer when Popover is Open */
  .mobile-nav[popover]:popover-open .mobile-nav-drawer {
    transform: translateX(0);
  }

  @starting-style {
    .mobile-nav[popover]:popover-open .mobile-nav-drawer {
      transform: translateX(-100%);
    }
  }

  /* Backdrop overlay */
  .mobile-nav[popover]::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease-in-out,
      display 0.3s ease-in-out allow-discrete,
      overlay 0.3s ease-in-out allow-discrete;
  }

  .mobile-nav[popover]:popover-open::backdrop {
    opacity: 1;
  }

  @starting-style {
    .mobile-nav[popover]:popover-open::backdrop {
      opacity: 0;
    }
  }

  /*--------------------------------------------------------------
  # Navigation Toggle
  --------------------------------------------------------------*/

  /* Hide the toggle button when the menu is open (NoScript supported) */
  /* This relies on .nav-toggle being a sibling of .mobile-nav in the HTML structure */
  .mobile-nav:popover-open~.nav-toggle {
    display: none;
  }

  .nav-toggle {
    /* Reset button styles */
    border: none;
    padding: 0;

    /* Visual styling */
    color: var(--contrast-color);
    background-color: var(--accent-color);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-size);
    height: var(--button-size);
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    top: var(--button-position-away-from-corner-vertical-distance);
    right: var(--button-position-away-from-corner-horizontal-distance);
    z-index: 1000;
    transition: background-color 0.3s;
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    caret-color: transparent;
    /* Prevent blinking cursor */
    /* Prevent cursor selection */
    outline: none;
  }

  /* Ensure icons (which are text) don't trigger text cursor behavior */
  .nav-toggle>* {
    pointer-events: none;
  }

  .nav-toggle:focus {
    outline: none;
    background-color: var(--accent-color);
    /* Ensure focus doesn't lock the hover color */
  }

  /* Only apply hover effect if the device supports hover and it's not just a touch/focus event */
  @media (hover: hover) {
    .nav-toggle:hover {
      color: var(--contrast-color);
      background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
    }
  }

  /* Internal Close Button (Overlay) - Matches exact position of external toggle */
  .nav-close {
    /* Reset button styles */
    border: none;
    padding: 0;

    /* Visual styling - matches nav-toggle */
    color: var(--contrast-color);
    background-color: var(--accent-color);
    font-size: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-size);
    height: var(--button-size);
    border-radius: 50%;
    cursor: pointer;

    /* Position fixed relative to viewport (since it's in top-layer popover) */
    position: fixed;
    top: var(--button-position-away-from-corner-vertical-distance);
    right: var(--button-position-away-from-corner-horizontal-distance);
    z-index: 10000;
    /* Ensure on top of everything inside drawer */
    transition: background-color 0.3s;
    user-select: none;
  }

  @media (hover: hover) {
    .nav-close:hover {
      color: var(--contrast-color);
      background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
    }
  }
}
}
}
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/* Applied only when body has home-page class.
   Native-CSS port of the former `navigation-index.styles()` mixin. */

body.home-page {
/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/* Pre-migration origin: _navigation-index.scss (converted in phase 3.1) */

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/

/* Visibility: Desktop nav visible on desktop, hidden on mobile */
@media (min-width: 992px) {

  .mobile-nav,
  .nav-toggle {
    display: none !important;
  }
}

/* Visibility: Mobile nav/toggle hidden on desktop, visible on mobile */
@media (max-width: 991px) {
  .desktop-nav {
    display: none !important;
  }
}

/* Desktop Sidebar Styling (Home Page) */
@media (min-width: 992px) {
  .desktop-nav {
    color: var(--default-color);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0 var(--nav-menu-border-padding);
    transition: all ease-in-out 0.3s;
    overflow: visible;
    /* CRITICAL: Allows dropdowns to break out horizontally */
    z-index: 997;
    display: flex;
    flex-direction: column;
  }
}



@media (min-width: 992px) {

  /* GLOBAL LAYOUT LOGIC:
     The sidebar (.header) is fixed on the left (hovering).
     The main content margin is controlled entirely by user config via CSS vars.
     If margins are equal, content is centered relative to viewport.
  */
  .header~main {
    margin-left: var(--global-margin-left);
    margin-right: var(--global-margin-right);
  }

  /* Hero Section Compensation:
     The Hero often wants to be full width.
     If we want it to ignore the margin and touch the edge, we use negative margin.
     If we want it contained like the rest, we remove this.
     Currently, maintaining "full width hero" illusion:
  */
  .header~main .hero {
    margin-left: calc(-1 * var(--global-margin-left));
    width: 100vw;
  }
}

/* Old JS toggle removed - now using Popover API */


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.navmenu {
  padding: 0;
  z-index: 9997;
  user-select: none;
}

.navmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Hand-tuned spacing (converted from a preprocessor calculation) */
  width: calc(var(--nav-menu-mobile-width) - 2 * var(--nav-menu-border-padding));
}

.navmenu a,
.navmenu .theme-toggle,
.navmenu a:focus {
  color: var(--nav-color);
  font-family: var(--font-nav);
  display: flex;
  align-items: center;
  /* Horizontal padding derives from --nav-icon-size so the icon is always
     centered in the collapsed (icon-only, max-width: --nav-icon-size) pill:
     padding = (pill − icon 1.25rem) / 2. Equals 1.125rem at the 3.5rem
     default; stays centered at any fonts.sizes.nav_icon value. */
  padding: 0.625rem calc(var(--nav-icon-size) / 2 - 0.625rem);
  margin-bottom: 0.5rem;
  /* 8px */
  font-size: var(--nav-font-size);
  /* 15px default, dialable via fonts.sizes.nav */
  border-radius: 3.125rem;
  /* 50px */
  --nav-pill-bg: color-mix(in srgb, var(--default-color), transparent 92%);
  background: var(--nav-pill-bg);
  height: var(--nav-icon-size);
  width: 100%;
  overflow: hidden;
  transition: max-width 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s, color 0.3s;
  /* Button Reset for theme-toggle */
  border: none;
  cursor: pointer;
}

.navmenu .theme-toggle {
  background: transparent;
  /* Inactive state has no background */
  position: relative;
  z-index: 100;
  /* Ensure pill is clickable above the light-dismiss backdrop */
}

.navmenu a [data-icon],
.navmenu a:focus [data-icon] {
  font-size: 1.25rem;
  /* 20px */
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  flex-shrink: 0;
  display: inline-block;
}

/* Theme toggle icons specifically (handled by Navigation.astro display logic) */
.navmenu .theme-toggle [data-icon] {
  font-size: 1.25rem;
}

@media (min-width: 992px) {
  /* Home sidenav: theme switcher icon sits quieter at rest (muted text
     color); hover / menu-open keeps the established white-on-accent look. */
  .desktop-nav .navmenu .theme-toggle-container {
    /* Quiet cluster tone: dimmer than --text-muted in light mode so the
       icon + hairline read as passive chrome; dark keeps the plain muted. */
    --nav-quiet-color: light-dark(
      color-mix(in srgb, var(--text-muted), transparent 60%),
      var(--text-muted)
    );
  }

  .desktop-nav .navmenu .theme-toggle [data-icon] {
    color: var(--nav-quiet-color);
  }

  .desktop-nav .navmenu .theme-toggle:hover [data-icon],
  .desktop-nav .navmenu .theme-toggle-container:hover .theme-toggle [data-icon],
  .desktop-nav .navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked) .theme-toggle [data-icon],
  .desktop-nav .navmenu .theme-toggle-container.active .theme-toggle [data-icon] {
    color: var(--contrast-color);
  }

  /* Separator: fading hairline between the last nav pill and the theme
     toggle. Passive chrome — stays muted on hover / menu-open. */
  /* TEMP-DISABLED while comparing looks
  .desktop-nav .navmenu .theme-toggle-container::before {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    border-radius: 1px;
    margin: 0.75rem 0 0.625rem calc(var(--nav-icon-size) / 2 - 1rem); / centered under the icon column at any dial value /
    background: linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--nav-quiet-color), transparent 25%) 30%,
      color-mix(in srgb, var(--nav-quiet-color), transparent 25%) 70%,
      transparent
    );
  }
  */
}

/* Custom SVG Icon Styling (LanceIcon only) */
.navmenu a svg.navicon:not([data-icon]) {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  flex-shrink: 0;
  fill: currentColor;
  transform: scale(1.8);
  transform-origin: center;
  /* Nudge for the 1.5rem lance box vs the 1.25rem navicon footprint:
     −(1.5 − 1.25)/2 rem — stays centered at any --nav-icon-size and root-dial scale. */
  margin-left: -0.125rem;
  vertical-align: -1.875px;
  transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out;
}

/* Ensure the colored part turns white on hover */
.navmenu a svg.navicon:not([data-icon]) .colored-part {
  transition: fill 0.3s ease-in-out;
  will-change: fill;
}

.navmenu a:hover svg.navicon:not([data-icon]) .colored-part,
.navmenu li:hover>a svg.navicon:not([data-icon]) .colored-part {
  fill: var(--contrast-color) !important;
}

.navmenu a span:not(.theme-icon-container),
.navmenu .theme-toggle span:not(.theme-icon-container),
.navmenu a:focus span:not(.theme-icon-container) {
  padding: 0 0.3rem 0 0.75rem;
  overflow: hidden;
  white-space: nowrap;
}

@media (min-width: 992px) {

  .navmenu ul {
    width: var(--nav-menu-width);
    transition: width 0.3s ease-in-out;
  }

  /* Container-based expansion: When hovering the menu area, the container expands */
  /* This allows pills (width: 100%) to grow into the newly available space */
  /*
    :focus-within is scoped to exclude the case where only the toggle checkbox has
    focus. That happens transiently when the backdrop label is clicked (the browser
    moves focus to the associated input). Excluding it lets the pill collapse in a
    single dismiss gesture without needing JS. Normal keyboard nav (links, pill label)
    is unaffected since those elements are not .theme-menu-toggle-checkbox.
  */
  .navmenu:hover ul,
  .navmenu:focus-within:not(:has(.theme-menu-toggle-checkbox:focus)) ul,
  .navmenu:has(.theme-menu-toggle-checkbox:checked) ul {
    width: var(--nav-pill-expanded-width, 15rem);
  }

  .navmenu a,
  .navmenu .theme-toggle,
  .navmenu a:focus {
    max-width: var(--nav-icon-size);
  }

  .navmenu a span:not(.theme-icon-container),
  .navmenu .theme-toggle span:not(.theme-icon-container),
  .navmenu a:focus span:not(.theme-icon-container),
  .navmenu .toggle-dropdown {
    display: none;
  }

}

.navmenu a:hover,
.navmenu .theme-toggle:hover,
.navmenu .theme-toggle-container.active>a,
.navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked)>.theme-toggle,
.navmenu .active,
.navmenu .active:focus,
.navmenu li:hover>a,
.navmenu .theme-toggle-container:hover>.theme-toggle {
  color: var(--contrast-color);
  background: var(--nav-hover-color);
}

.navmenu a:hover,
.navmenu .theme-toggle:hover,
.navmenu .theme-toggle-container.active>a,
.navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked)>.theme-toggle,
.navmenu li:hover>a,
.navmenu .theme-toggle-container:hover>.theme-toggle {
  /* Pills fill the parent UL as it expands */
  max-width: 100%;
  color: var(--contrast-color);
}

.navmenu a:hover span:not(.theme-icon-container),
.navmenu .theme-toggle:hover span:not(.theme-icon-container),
.navmenu .theme-toggle-container.active>a span:not(.theme-icon-container),
.navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked)>.theme-toggle span:not(.theme-icon-container),
.navmenu li:hover>a span:not(.theme-icon-container),
.navmenu .theme-toggle-container:hover>.theme-toggle span:not(.theme-icon-container) {
  display: block;
}

/* Adjust right padding on the theme-toggle so the chevron looks visually balanced against left margin gap */
.navmenu .theme-toggle:hover,
.navmenu .theme-toggle-container.active>a,
.navmenu .theme-toggle-container:hover>.theme-toggle,
.navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked)>.theme-toggle {
  padding-right: 0.75rem;
}

.navmenu a:hover .toggle-dropdown,
.navmenu .theme-toggle:hover .toggle-dropdown,
.navmenu .theme-toggle-container.active>a .toggle-dropdown,
.navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked)>.theme-toggle .toggle-dropdown,
.navmenu li:hover>a .toggle-dropdown,
.navmenu .theme-toggle-container:hover>.theme-toggle .toggle-dropdown {
  display: inline-block;
}

/* See _theme-dropdown.css for shared theme menu display/visibility logic */


@media (min-width: 992px) {

  /* Keep the pill wide while the menu is open, but NOT when only the toggle
     checkbox has focus — that transient state only occurs during light-dismiss
     (browser focuses the associated input when its label is clicked). */
  .navmenu .theme-toggle-container.active>a,
  .navmenu .theme-toggle-container:focus-within:not(:has(.theme-menu-toggle-checkbox:focus))>a,
  .navmenu .theme-toggle-container:focus-within:not(:has(.theme-menu-toggle-checkbox:focus))>.theme-toggle,
  .navmenu .theme-toggle-container:has(.theme-menu-toggle-checkbox:checked)>.theme-toggle {
    max-width: 100%;
    color: var(--contrast-color);
    background: var(--nav-hover-color);
  }

  /* Theme changer dropdown matches inactive pill background ONLY for sidenav */
  /* Slightly tweaked to compensate for optical illusions 92% -> 90% */
  .header:not(.is-inner) #navmenu {
    /* --nav-pill-menu-bg: var(--nav-pill-bg); */
    /* Header glass, but notably more transparent — the header sits on a
       calm strip, this menu floats over the busy hero image.
       Tint: shifted 5% toward default-color so the glass is never
       literally the page color (it was pixel-identical over quiet hero
       areas — invisible start/stop). Dials: the 5% tint, the 35%
       opacity, and the hairline border in _theme-dropdown.css. */
    --nav-pill-menu-bg: color-mix(
      in srgb,
      color-mix(in srgb, var(--background-color), var(--default-color) 5%),
      transparent 35%
    );
  }

  .header:not(.is-inner) #navmenu .theme-toggle-container .theme-dropdown-menu {
    background: var(--nav-pill-menu-bg) !important;
  }
}
}

/* Anchor positioning for home sidebar theme dropdown — auto-flip when it
   would overflow the viewport. Placed at top-level (outside body.home-page)
   so postcss can parse it. */
@media (min-width: 992px) {
  .header:not(.is-inner) .navmenu .theme-toggle-container {
    anchor-name: --theme-toggle;
  }

  .header:not(.is-inner) #navmenu .theme-toggle-container ul.theme-dropdown-menu {
    position: fixed;
    position-anchor: --theme-toggle;
    inset: auto !important;
    position-area: block-end span-inline-end;
    justify-self: start;
    margin-inline-start: 0.875rem;
    background: var(--nav-pill-menu-bg) !important;
    container-type: anchored;
    position-try-fallbacks: flip-block;
  }

  /* Modern anchored container query (Chromium 143+): when the flip-block
     fallback is active (menu rolled above the toggle), give the panel an
     opaque fill so it stays readable over the busy header. The fill must
     go on a ::before overlay — @container styles only reach DESCENDANTS
     of the anchored container, never the positioned element itself.
     Other engines keep the translucent below-state (graceful degradation
     until they ship anchor positioning L2 container queries). The toggle
     chevron stays static: the flip state is unreachable outside the
     menu's subtree (css-anchor-position-2 §2.1) — revisit with optional
     JS only if this edge case proves common (see To_Do.md). */
  @container anchored(fallback: flip-block) {
    .header:not(.is-inner) #navmenu .theme-toggle-container ul.theme-dropdown-menu::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: var(--nav-dropdown-background-color);
    }
  }
}
}
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/* Applied only when body has inner-page class.
   Native-CSS port of the former `navigation.styles()` mixin. */

body.inner-page {
/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/

/* Visibility: Desktop nav visible on desktop, hidden on mobile */
@media (min-width: 992px) {

  .mobile-nav,
  .nav-toggle {
    display: none !important;
  }
}

/* Visibility: Mobile nav/toggle hidden on desktop, visible on mobile */
@media (max-width: 991px) {
  .desktop-nav {
    display: none !important;
  }
}

/* Desktop Top Bar Styling (Inner Pages) */
@media (min-width: 992px) {
  .desktop-nav {
    display: flex;
    flex-direction: row;
    color: var(--default-color);
    background-color: transparent;
    /* Transparent to let blur show through */
    padding: 1.25rem 0;
    /* 20px */
    transition: all 0.5s;
    z-index: 997;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Glass frost moved to ::before below — keeping backdrop-filter on the
       element itself would isolate the dropdown's backdrop root (its blur
       went inert over the page). */
    border-bottom: var(--nav-menu-mobile-border-width) solid var(--nav-border-color);
    /* Subtle separation */
  }

  .desktop-nav:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--header-background-color);
    /* The frost lives here (not on .desktop-nav) so the header element
       never becomes a backdrop root — descendants (the theme dropdown)
       keep working backdrop-filters. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: -1;
  }


  .header .logo {
    line-height: 1;
  }

  .header .logo img {
    max-height: 2rem;
    /* 32px */
    margin-right: 0.5rem;
    /* 8px */
  }

  .header .logo h1 {
    font-size: 1.875rem;
    /* 30px */
    margin: 0;
    font-weight: 300;
    color: var(--heading-color);
  }

  .scrolled .header {
    box-shadow: 0 0 1.125rem color-mix(in srgb, var(--default-color), transparent 85%);
    /* 18px */
  }
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 992px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu .theme-toggle,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 1rem 0.9375rem;
    /* 18px 15px */
    font-size: 1rem;
    /* 16px */
    font-family: var(--font-nav);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;


  }

  .navmenu a [data-icon] {
    display: none;
  }
}

/* Ensure nav-close is hidden when popover is not open (Fix for Stuck State) */
.header[popover]:not(:popover-open) .nav-close {
  display: none !important;
}

@media (min-width: 992px) {

  .navmenu a .navicon,
  .navmenu a:focus .navicon {
    font-size: 1rem;
    margin-left: 0.3125rem;
    transition: 0.3s;
  }

  .navmenu .theme-toggle [data-icon] {
    font-size: 0.75rem; /* Set to 12px for crisp rendering at a smaller size */
    margin-left: 0.3125rem;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .theme-toggle:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 0.625rem 0;
    /* 10px 0 */
    display: block;
    position: absolute;
    visibility: hidden;
    left: 0.875rem;
    /* 14px */
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 0.25rem;
    /* 4px */
    z-index: 99;
    /* 30px */
  }

  /* Inner topnav dropdown: more opaque than the shared baseline — at 65%
     opacity the strong heading colors of the page content bled through
     the frost. Same 5%-tint at ~90% opacity. */
  .header.is-inner .navmenu .dropdown ul {
    background: color-mix(
      in srgb,
      color-mix(in srgb, var(--background-color), var(--default-color) 5%),
      transparent 15%
    );
  }

  .navmenu .dropdown ul li {
    min-width: 12.5rem;
    /* 200px */
  }

  .navmenu .dropdown ul a {
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
    font-size: var(--nav-font-size);
    /* 15px default, dialable via fonts.sizes.nav */
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a [data-icon] {
    font-size: 0.65rem;
    /* 10-11px approximately */
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  /* Specific Alignment Fix for Theme Dropdown on Desktop Top Nav */
  .header.is-inner .navmenu .theme-toggle-container .theme-dropdown-menu {
    transform: translateX(0.5rem);
    /* Shift right slightly to align dropdown icons with toggle icon */
  }
}


/* Navmenu - Mobile */
@media (max-width: 991px) {
  .navmenu {
    padding: 0;
    z-index: 9997;
    user-select: none;
  }

  .navmenu>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Hand-tuned spacing (converted from a preprocessor calculation) */
    width: calc(var(--nav-menu-mobile-width) - 2 * var(--nav-menu-border-padding));
  }

  .navmenu a,
  .navmenu .theme-toggle,
  .navmenu a:focus {
    color: var(--nav-color);
    font-family: var(--font-nav);
    display: flex;
    align-items: center;
    padding: 0.625rem 1.125rem;
    /* 10px 18px */
    margin-bottom: 0.5rem;
    /* 8px */
    font-size: var(--nav-font-size);
    /* 15px default, dialable via fonts.sizes.nav */
    border-radius: 3.125rem;
    /* 50px */
    background: color-mix(in srgb, var(--default-color), transparent 92%);
    height: var(--nav-icon-size);
    width: 100%;
    overflow: hidden;
    transition: 0.3s;
    /* Button Reset */
    border: none;
    cursor: pointer;
    outline: none;
  }

  .navmenu .theme-toggle {
    background: transparent;
  }

  .navmenu a [data-icon],
  .navmenu .theme-toggle [data-icon],
  .navmenu a:focus [data-icon] {
    font-size: 1.25rem;
    /* 20px */
  }

  .navmenu a span:not(.theme-icon-container),
  .navmenu .theme-toggle span:not(.theme-icon-container),
  .navmenu a:focus span:not(.theme-icon-container) {
    padding: 0 0.3125rem 0 0.4375rem;
    /* 0 5px 0 7px */
  }

  .navmenu a:hover,
  .navmenu .theme-toggle:hover,
  .navmenu .theme-toggle-container.active,
  .navmenu .active,
  .navmenu .active:focus,
  .navmenu li:hover>a {
    color: var(--contrast-color);
    background: var(--nav-hover-color);
  }

  .navmenu a:hover,
  .navmenu .theme-toggle:hover,
  .navmenu .theme-toggle-container.active>a,
  .navmenu .theme-toggle-container:focus-within:not(:has(.theme-menu-toggle-checkbox:focus))>a,
  .navmenu li:hover>a {
    max-width: 100%;
    color: var(--contrast-color);
  }

  .navmenu a:hover span:not(.theme-icon-container),
  .navmenu .theme-toggle:hover span:not(.theme-icon-container),
  .navmenu .theme-toggle-container.active>a span:not(.theme-icon-container),
  .navmenu .theme-toggle-container:focus-within:not(:has(.theme-menu-toggle-checkbox:focus))>a span:not(.theme-icon-container),
  .navmenu li:hover>a span:not(.theme-icon-container) {
    display: block;
  }

  /* Handled by _theme-dropdown.css */


}
}
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}