/* ==========================================================================
   Design tokens — single source of truth for accent colour and icon sizing.
   Change a value here and it propagates everywhere it is used.
   ========================================================================== */

:root {
    /* ---- accent ---- */
    --theme:            #00bc91;
    --theme-soft:       rgba(0, 188, 145, .45);

    /* ---- icon glyph sizes ---- */
    --ic-nav:           19px;   /* right-hand navigation rail        */
    --ic-tab:           22px;   /* tab rail (Skills / Sports)        */
    --ic-tile:          20px;   /* glyph inside a skills tile        */
    --ic-contact:       22px;   /* glyph inside an About tile        */
    --ic-social:        17px;   /* social / share icons              */
    --ic-badge:         16px;   /* small section badge icons         */
    --ic-placeholder:   23px;   /* empty photo tile camera           */
    --ic-menu:          17px;   /* mobile drawer menu                */
    --ic-share:         16px;   /* share button + its dropdown       */
    --ic-close:         15px;   /* mobile menu close button          */

    /* ---- icon container sizes ---- */
    --ic-tab-col:       28px;   /* width of the tab rail icon column */
    --ic-tile-box:      42px;   /* skills tile                       */
    --ic-contact-box:   46px;   /* About tile                        */
    --ic-tile-radius:   12px;
    --ic-contact-radius:14px;
}

/* ==========================================================================
   Skills — tabbed panel (icon rail + content area)
   ========================================================================== */

.sk-tabsys {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 16px;
    overflow: hidden;
    background-color: rgb(240 242 245);            /* flashWhite */
}

.dark .sk-tabsys {
    border-color: rgba(255, 255, 255, .07);
    background-color: rgb(45 46 47);               /* metalBlack */
}

@media (min-width: 900px) {
    .sk-tabsys { grid-template-columns: 272px minmax(0, 1fr); }
}

/* ---------- left rail ---------- */
.sk-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.dark .sk-rail { border-bottom-color: rgba(255, 255, 255, .06); }

@media (min-width: 900px) {
    .sk-rail {
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        padding: 16px 14px;
        border-bottom: none;
        border-right: 1px solid rgba(0, 0, 0, .06);
    }
    .dark .sk-rail { border-right-color: rgba(255, 255, 255, .06); }
}

.sk-rail-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    padding: 12px 15px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font-size: 14.5px;
    line-height: 1.3;
    text-align: left;
    color: rgba(0, 0, 0, .68);
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.dark .sk-rail-btn { color: rgba(255, 255, 255, .62); }

@media (min-width: 900px) {
    .sk-rail-btn { flex: 0 0 auto; width: 100%; }
}

.sk-rail-btn i {
    width: var(--ic-tab-col);
    flex: 0 0 auto;
    text-align: center;
    font-size: var(--ic-tab);
    color: var(--theme);
}

.sk-rail-btn:hover { background-color: rgba(0, 0, 0, .035); }
.dark .sk-rail-btn:hover { background-color: rgba(255, 255, 255, .04); }

.sk-rail-btn.is-active {
    background-color: #fff;
    color: #111;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.dark .sk-rail-btn.is-active {
    background-color: rgb(33 34 35);               /* nightBlack */
    color: #fff;
    box-shadow: none;
}

/* ---------- panels ---------- */
.sk-panel { display: none; padding: 20px 18px 24px; }
.sk-panel.is-active { display: block; }

@media (min-width: 900px) {
    .sk-panel { padding: 26px 28px 28px; }
}

.sk-block + .sk-block {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed rgba(0, 0, 0, .09);
}

.dark .sk-block + .sk-block { border-top-color: rgba(255, 255, 255, .08); }

/* ==========================================================================
   Skills grid — dashed, unfilled pills (matches the About section style)
   ========================================================================== */

/* ---------- card head ---------- */
.sk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.sk-ico {
    flex: 0 0 auto;
    width: var(--ic-tile-box);
    height: var(--ic-tile-box);
    border-radius: var(--ic-tile-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ic-tile);
    color: var(--theme);                                 /* theme */
    background-color: #fff;
}

.dark .sk-ico { background-color: rgb(33 34 35); }  /* nightBlack */

.sk-title {
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: .1px;
    color: #111;
    margin: 0;
}

.dark .sk-title { color: #fff; }

/* ---------- tags: dashed outline, no fill ---------- */
.sk-tags {
    display: flex;
    flex-wrap: wrap;                /* wraps — never scrolls sideways */
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sk-tags li {
    font-size: 13px;
    line-height: 1.15;
    padding: 7px 13px;
    border-radius: 9999px;                          /* pill */
    background: transparent;                        /* unfilled */
    border: 1px dashed rgb(232 232 232);            /* platinum, like About */
    color: rgba(0, 0, 0, .78);
    transition: color .3s ease, border-color .3s ease;
    white-space: nowrap;
}

.dark .sk-tags li {
    border-color: rgb(67 68 69);                    /* greyBlack, like About */
    color: rgba(255, 255, 255, .70);
}

.sk-tags li:hover {
    color: var(--theme);
    border-color: rgba(0, 188, 145, .5);
}

/* ---------- language pills read as code glyphs ---------- */
.sk-tags.sk-code li {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    font-size: 12.5px;
    letter-spacing: -.2px;
}


/* ==========================================================================
   About Me — icon detail list
   ========================================================================== */

.about-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 18px 0 40px;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .about-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 32px;
    }
}

.about-info li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.about-info li.wide { grid-column: 1 / -1; }

.ai-ico {
    flex: 0 0 auto;
    width: var(--ic-contact-box);
    height: var(--ic-contact-box);
    border-radius: var(--ic-contact-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ic-contact);
    color: var(--theme);
    background-color: rgb(240 242 245);
}

.dark .ai-ico { background-color: rgb(45 46 47); }

.ai-text { min-width: 0; }

.ai-label {
    display: block;
    font-size: 11.5px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .45);
    margin-bottom: 3px;
}

.dark .ai-label { color: rgba(255, 255, 255, .40); }

.ai-value {
    display: block;
    font-size: 14px;
    color: #111;
    word-break: break-word;
    transition: color .3s ease;
}

.dark .ai-value { color: #fff; }

a.ai-value:hover { color: var(--theme); }


/* ==========================================================================
   Sports — intro text + photo gallery
   ========================================================================== */

.sp-intro {
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 62ch;
    margin: 0 0 20px;
    color: rgba(0, 0, 0, .70);
}

.dark .sp-intro { color: rgba(255, 255, 255, .62); }

.sp-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 700px) {
    .sp-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sp-shot {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .03);
}

.dark .sp-shot { background-color: rgba(255, 255, 255, .03); }

.sp-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.sp-shot:hover img { transform: scale(1.04); }

/* empty placeholder tile */
.sp-shot.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgb(232 232 232);            /* platinum */
    background-color: transparent;
}

.dark .sp-shot.is-empty { border-color: rgb(67 68 69); }   /* greyBlack */

.sp-shot.is-empty i {
    font-size: var(--ic-placeholder);
    color: rgba(0, 0, 0, .22);
}

.dark .sp-shot.is-empty i { color: rgba(255, 255, 255, .20); }

/* inline SVG icons in the tab rail (sized to match the icon font) */
.sk-rail-btn .sk-svg {
    width: var(--ic-tab-col);
    height: var(--ic-tab-col);
    flex: 0 0 auto;
    color: var(--theme);
}


/* ==========================================================================
   Site-wide icon sizing nudge
   ========================================================================== */

/* right-hand navigation rail */
.minfo__nav__wrapper i { font-size: var(--ic-nav); }

/* social / share icons */
.social-icons i { font-size: var(--ic-social); }

/* mobile drawer menu */
.main-menu i { font-size: var(--ic-menu); }

/* share button and its dropdown */
.share button i,
.share a i { font-size: var(--ic-share); }

/* mobile menu close button */
.close-menu i { font-size: var(--ic-close); }

/* section badge (eyebrow above each title) */
.section-name {
    font-size: 13.5px;
    letter-spacing: .05em;
    padding-top: 9px;
    padding-bottom: 9px;
    gap: 10px;
}

.section-name i { font-size: var(--ic-badge); }

/* ==========================================================================
   Breathing room between a section title and the paragraph beneath it
   ========================================================================== */

.section-title .title + .subtitle {
    margin-top: 21px;
}

@media (min-width: 768px) {
    .section-title .title + .subtitle { margin-top: 30px; }
}

/* tighter space around section titles
   (was mt-7/md:mt-10 = 28/40px above, mb-8/md:mb-10 = 32/40px below) */
.section-title {
    margin-top: 14px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .section-title {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}