/* =====================================================================
 * shared.css — Shared styles for all tikoci.github.io pages
 *
 * Adapted from restraml-shared.css patterns. Include via:
 *   <link rel="stylesheet" href="shared.css">
 * Load AFTER Pico CSS and Google Fonts, BEFORE page-specific <style>.
 *
 * Sections:
 *   1. Font overrides (JetBrains Mono + Manrope)
 *   2. Inline code/kbd tightening
 *   3. Logo dark/light swap
 *   4. Theme switcher icon sizing
 *   5. Nav dropdown LTR fix
 *   6. Page guide pattern
 *   7. Utility classes
 *   8. Project cards
 *   9. Category badges
 *  10. Site footer
 * ===================================================================== */


/* -----------------------------------------------------------------
 * 1. Font overrides
 * ----------------------------------------------------------------- */
:root {
    --pico-font-family-sans-serif: Manrope, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
    --pico-font-family-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
    --pico-font-family: "JetBrains Mono", var(--pico-font-family-sans-serif);
}


/* -----------------------------------------------------------------
 * 2. Inline code/kbd tightening
 * ----------------------------------------------------------------- */
:not(pre) > code,
:not(pre) > kbd {
    padding: 0.05em 0.3em;
    vertical-align: baseline;
}


/* -----------------------------------------------------------------
 * 3. Logo dark/light swap
 *    Two <img data-theme="dark|light"> in the nav. CSS swaps visibility.
 * ----------------------------------------------------------------- */
img[data-theme=dark] { display: none; }
[data-theme=dark] img[data-theme=dark] { display: inline; }
[data-theme=dark] img[data-theme=light] { display: none; }
[data-theme=light] img[data-theme=dark] { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) img[data-theme=dark] { display: inline; }
    :root:not([data-theme=light]) img[data-theme=light] { display: none; }
}

header nav img[data-theme] {
    height: 2rem;
    width: auto;
}


/* -----------------------------------------------------------------
 * 4. Theme switcher icon sizing
 * ----------------------------------------------------------------- */
header nav li a svg {
    width: var(--font-size);
    height: var(--font-size);
    color: var(--contrast);
}


/* -----------------------------------------------------------------
 * 5. Nav dropdown LTR fix
 * ----------------------------------------------------------------- */
details.dropdown ul li { direction: ltr; }


/* -----------------------------------------------------------------
 * 6. Page guide pattern (collapsible help sections)
 * ----------------------------------------------------------------- */
.page-guide summary {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}
.page-guide article {
    font-size: 0.88rem;
    margin-top: 0.5rem;
}
.page-guide article hr { margin: 0.8rem 0; }
.page-guide pre {
    font-size: 0.78rem;
    border-left: 3px solid var(--pico-primary);
}
.page-guide .behind-curtain {
    border-left: 3px solid var(--pico-form-element-border-color);
    border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
    padding: 0.6rem 1rem;
    background: var(--pico-form-element-background-color);
}


/* -----------------------------------------------------------------
 * 7. Utility classes
 * ----------------------------------------------------------------- */
.ml-1 { margin-left: 1rem; }
.text-right { text-align: right; }
.mt-1 { margin-top: 1rem; }
.mt-1-5 { margin-top: 1.5rem; }

/* Share link styling */
.share-link { font-size: 0.9em; }

/* Inline compact select (for controls rows) */
.inline-select {
    display: inline-block;
    width: auto;
    padding: 0.15em 0.4em;
    font-size: 0.85em;
    margin: 0 0.2rem;
    vertical-align: baseline;
}

/* Compact, consistent switch labels in control navs */
.switch-controls label {
    font-size: 0.78rem;
    font-style: italic;
    white-space: nowrap;
}
.switch-controls label code {
    font-style: normal;
    font-size: inherit;
}
.switch-controls ul:last-child li + li { margin-left: 0.5rem; }

/* 2fr/1fr grid layout (e.g. search path + attribute inputs) */
.grid-2fr-1fr {
    grid-template-columns: 2fr 1fr;
}


/* -----------------------------------------------------------------
 * 11. Reversed/inverted brand text (TIKOCI)
 *     Used on hero h1 and nav top-left brand link — same style
 * ----------------------------------------------------------------- */
.brand-reverse {
    display: inline-block;
    background: var(--brand-gradient, linear-gradient(135deg, #3660B9, #5F2965));
    color: #fff;
    padding: 0.05em 0.4em;
    border-radius: var(--pico-border-radius);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-decoration: none;
}
.brand-reverse:hover,
.brand-reverse:visited {
    color: #fff;
    text-decoration: none;
}
a.brand-reverse:hover { opacity: 0.85; }

/* -----------------------------------------------------------------
 * 11b. Nav brand link — MikroTik logo + "by TIKOCI" header
 * ----------------------------------------------------------------- */
.nav-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    white-space: nowrap;
}
.nav-brand-link:hover { text-decoration: none; }
.nav-brand-link .brand-reverse {
    font-size: 0.9rem;
    padding: 0.05em 0.35em;
}
/* Full MikroTik logo (symbol + brand name) — desktop only */
.nav-mt-full {
    height: 1.4rem;
    width: auto;
    flex-shrink: 0;
}
/* MikroTik symbol only — mobile only */
.nav-mt-symbol {
    height: 1.4rem;
    width: auto;
    flex-shrink: 0;
    display: none;
}
/* MikroTik logo: black in light, white in dark (not link-blue) */
.nav-mt-full,
.nav-mt-symbol {
    color: #000;
}
[data-theme=dark] .nav-mt-full,
[data-theme=dark] .nav-mt-symbol {
    color: #fff;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .nav-mt-full,
    :root:not([data-theme=light]) .nav-mt-symbol {
        color: #fff;
    }
}
.nav-by {
    font-size: 0.78rem;
    color: var(--pico-muted-color);
    font-style: italic;
}
@media (max-width: 576px) {
    .nav-mt-full { display: none; }
    .nav-mt-symbol { display: inline; }
}


/* -----------------------------------------------------------------
 * 12. Nav brand icon (small cubist potto — acts as categories toggle)
 * ----------------------------------------------------------------- */
details.dropdown > summary.brand-icon {
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
/* Remove Pico's caret arrow from icon-only summaries */
details.dropdown > summary.brand-icon::after,
details.dropdown > summary.mikrotik-icon::after {
    display: none;
}
.nav-potto {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------
 * 13. GitHub nav button
 * ----------------------------------------------------------------- */
a.github-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}
a.github-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------
 * 14. MikroTik icon dropdown (icon-only summary)
 * ----------------------------------------------------------------- */
details.dropdown > summary.mikrotik-icon {
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
details.dropdown > summary.mikrotik-icon svg {
    width: 1.4rem;
    height: 1.4rem;
    color: currentColor;
}


/* -----------------------------------------------------------------
 * 15. Install-in-VSCode button group
 * ----------------------------------------------------------------- */
.vscode-install-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.8rem 0;
}
.install-vscode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.install-vscode-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------
 * 8. Site footer (general)
 * ----------------------------------------------------------------- */
body > footer {
    text-align: center;
    padding: 2rem 1rem;
}
body > footer small {
    font-style: italic;
}


/* -----------------------------------------------------------------
 * 16. Site footer — not-affiliated disclaimer
 * ----------------------------------------------------------------- */
footer.site-footer {
    border-top: 1px solid var(--pico-muted-border-color);
    margin-top: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
footer.site-footer small {
    color: var(--pico-muted-color);
    font-size: 0.78rem;
}


/* -----------------------------------------------------------------
 * 9. Project cards
 * ----------------------------------------------------------------- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}

.project-grid > article {
    margin: 0;
}

.project-grid > article > header {
    padding-bottom: 0.5rem;
}

.project-grid > article > header a {
    text-decoration: none;
    font-weight: 600;
}

.project-grid > article > footer {
    font-size: 0.85rem;
    padding-top: 0.5rem;
}

.project-grid > article > footer a {
    font-size: 0.8rem;
}


/* -----------------------------------------------------------------
 * 10. Category badges (using <mark>)
 * ----------------------------------------------------------------- */
mark {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1em 0.45em;
    border-radius: 0.25rem;
    vertical-align: middle;
}

mark.new {
    background-color: var(--pico-primary);
    color: var(--pico-primary-inverse);
}

/* Language tags */
mark.lang {
    background-color: var(--pico-secondary-background);
    color: var(--pico-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

/* Cross-cutting membership tags (next to a tile title) */
mark.tag {
    background-color: var(--pico-secondary-background);
    color: var(--pico-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    margin-left: 0.25rem;
}
/* biome-ignore lint/style/noDescendingSpecificity: tag-badge link, different context than .project-grid selectors */
mark.tag a {
    color: inherit;
    text-decoration: none;
}

/* restraml callout */
.restraml-callout {
    border-left: 4px solid var(--pico-primary);
    margin: 0 0 1rem;
}

/* Hero section on index */
.hero {
    position: relative;
    padding: 2rem 0 1rem;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    width: 140%;
    height: 100%;
    top: -10%;
    left: -20%;
    background: var(--brand-gradient, linear-gradient(135deg, #3660B9, #5F2965));
    opacity: 0.05;
    transform: rotate(-6deg);
    z-index: 0;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 70%;
    bottom: -25%;
    right: -15%;
    background: var(--brand-gradient, linear-gradient(135deg, #3660B9, #5F2965));
    opacity: 0.035;
    transform: rotate(12deg);
    z-index: 0;
    pointer-events: none;
}
.hero-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero-art {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-art svg {
    width: 14rem;
    height: 14rem;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.08));
}
.hero-text {
    text-align: left;
}
.hero-text h1 {
    font-size: 2rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.2rem;
}
.hero-text p {
    font-size: 0.95rem;
    max-width: 36rem;
    margin: 0.2rem 0;
}
.hero-text .tagline {
    font-size: 1.1rem;
    font-weight: 600;
}
.hero-text .subtitle {
    color: var(--pico-muted-color);
}
@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
    }
    .hero-text { text-align: center; }
    .hero-art svg { width: 10rem; height: 10rem; }
}

/* Category section headers */
.category-header {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--pico-primary);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
.category-header h2 {
    margin: 0;
    font-size: 1.3rem;
}
/* biome-ignore lint/style/noDescendingSpecificity: different element context than .project-grid selectors */
.category-header > a {
    font-size: 0.85rem;
}


/* -----------------------------------------------------------------
 * 17. Share modal styling (legacy dialog pattern)
 *     Used by tool pages with <dialog class="share-modal">.
 *     Prefer initShareButton() for new pages.
 *     Placed last: dialog selectors have high specificity (0,1,3).
 * ----------------------------------------------------------------- */
dialog.share-modal {
    max-width: 36rem;
    width: 90%;
    border-radius: 0.5rem;
    padding: 1.5rem;
}
dialog.share-modal > article {
    margin: 0;
}
dialog.share-modal > article > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
}
dialog.share-modal > article > footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.75rem;
}
dialog.share-modal .share-url-input {
    font-size: 0.8em;
    font-family: var(--pico-font-family-monospace);
}
dialog.share-modal .share-copy-btn {
    width: auto;
}


/* -----------------------------------------------------------------
 * 18. Feature grid (2-column tiles)
 * ----------------------------------------------------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) {
    .feature-grid { grid-template-columns: 1fr; }
}
.feature-grid > article {
    margin: 0;
}
.feature-grid > article > header {
    padding-bottom: 0.3rem;
}
.feature-grid > article > header h3 {
    margin: 0;
    font-size: 1.05rem;
}
.feature-grid > article > header h3 a {
    text-decoration: none;
    font-weight: 600;
}
.feature-grid > article > p {
    font-size: 0.9rem;
}


/* -----------------------------------------------------------------
 * 19. Other projects grid (3-column compact)
 * ----------------------------------------------------------------- */
.other-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (max-width: 768px) {
    .other-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .other-grid { grid-template-columns: repeat(2, 1fr); }
}
.other-grid > article {
    margin: 0;
    padding: 0.8rem 1rem;
}
.other-grid > article h4 {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
}
.other-grid > article h4 a {
    text-decoration: none;
    font-weight: 600;
}
.other-grid > article p {
    font-size: 0.82rem;
    margin: 0;
}


/* -----------------------------------------------------------------
 * 20. Nav dropdown buttons with icon (Tools, GitHub)
 * ----------------------------------------------------------------- */
/* Prevent the <details> from stretching to fill its flex <li>,
   so the absolutely-positioned dropdown <ul> stays near the button. */
nav details.dropdown {
    width: fit-content;
}
nav details.dropdown > summary[role="button"].nav-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
nav details.dropdown > summary.nav-btn-icon svg.nav-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------
 * 21. Tile action buttons and detail links
 * ----------------------------------------------------------------- */
.tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.tile-actions a[role="button"] {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
}
.tile-detail {
    font-size: 0.8rem;
    margin-top: 0.4rem;
    margin-bottom: 0;
}


/* -----------------------------------------------------------------
 * 22. Section label (divider with text)
 * ----------------------------------------------------------------- */
.section-label {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--pico-primary);
    font-size: 1.15rem;
    font-weight: 700;
}
/* "in map →" deep-link in a section heading */
.section-label .map-link {
    float: right;
    font-size: 0.7rem;
    font-weight: 400;
    text-decoration: none;
    margin-top: 0.35rem;
    color: var(--pico-muted-color);
}
.section-label .map-link:hover {
    color: var(--pico-primary);
}
/* One-line blurb under a section heading */
.section-blurb {
    margin-top: -0.4rem;
    margin-bottom: 0.85rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}
/* Live stars / symbol / language footer on a feature tile */
.tile-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--pico-muted-color);
}
.tile-meta .tile-symbol {
    font-size: 1rem;
    line-height: 1;
}
/* Umbrella sub-project tiles (e.g. restraml web tools) */
.subtile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.4rem;
    margin-top: 0.6rem;
}
/* biome-ignore lint/style/noDescendingSpecificity: sub-tile link, different context than .project-grid selectors */
.subtile-grid a {
    display: block;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.82rem;
}
.subtile-grid a strong {
    display: block;
    font-weight: 600;
}
.subtile-grid a small {
    color: var(--pico-muted-color);
    font-size: 0.72rem;
}


/* -----------------------------------------------------------------
 * 23. README content styling (for per-repo landing pages)
 *     GitHub's rendered HTML uses internal class names — these rules
 *     ensure it renders cleanly under Pico CSS.
 * ----------------------------------------------------------------- */
.readme-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}
.readme-content pre {
    overflow-x: auto;
}
.readme-content table {
    width: 100%;
}
.readme-content h1:first-child,
.readme-content h2:first-child {
    display: none;
}
.readme-content .markdown-alert {
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    border-left: 4px solid var(--pico-primary);
    border-radius: 0.25rem;
}
.readme-content .highlight pre {
    padding: 1rem;
    border-radius: 0.25rem;
}
/* Hide GitHub's click-to-copy anchor link icons (paperclip SVGs) */
.readme-content a.anchor {
    display: none;
}