/*
Theme Name: shk_k_2
Theme URI: https://shk.lu
Description: shk_k's theme
Version: 2.0
Author: hrktrmt
Author URI: https://shk.lu/h/
*/

:root {
    --site-nav-color: #1a1a1a;
}

/* Image protection (deterrent only, see functions.php for the matching JS):
   disables the iOS long-press "save/copy" callout menu and blocks the
   image itself from being drag-selected or dragged out. */
img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

body.has-front-slideshow {
    --site-nav-color: #ffa700;
}

@media (max-width: 768px) {
    /* Mobile slide-in menu always shows the default black, even on the front page */
    body.has-front-slideshow.menu-open {
        --site-nav-color: #1a1a1a;
    }
}

/* ==================== Reset & Base ==================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #f6f9f9;
    color: #1a1a1a;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.75;
    min-height: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
}

ul {
    list-style: none;
}

/* ==================== Layout ==================== */

.site-wrap {
    display: flex;
    min-height: 100vh;
}

/* ==================== Sidebar ==================== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 190px;
    height: 100vh;
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 3.5rem 3rem 3rem;
    background-color: transparent;
}

.sidebar-logo {
    margin-bottom: 3.5rem;
}

.sidebar-logo a {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--site-nav-color);
    line-height: 1.4;
    display: block;
    transition: color 0.4s;
}

/* ---- Nav links ---- */

.sidebar-nav ul {
    display: flex;
    flex-direction: column;
}

.sidebar-nav ul li {
    padding: 0;
    line-height: 1;
}

.sidebar-nav ul li a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--site-nav-color);
    transition: opacity 0.18s;
    position: relative;
}

.sidebar-nav ul li a:hover {
    opacity: 0.45;
}

.sidebar-nav ul li a.active {
    color: var(--site-nav-color);
}

.sidebar-nav ul li a.active::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* hide sub-menus */
.sidebar-nav ul li ul {
    display: none;
}

/* Separator */
.sidebar-nav .nav-sep {
    padding: 0.8rem 0 0.6rem;
    color: var(--site-nav-color);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transition: color 0.4s;
}

/* ---- Fixed elements ---- */

/* © bottom-left */
.sidebar-copyright {
    position: fixed;
    bottom: 2.8rem;
    left: 3rem;
    font-size: 1.0rem;
    font-weight: 300;
    color: #1a1a1a;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* BIO — now in sidebar nav, no separate fixed element needed */

/* Sidebar text is always black — no brightness-adaptive coloring */


/* ==================== Main Content ==================== */

.main-content {
    margin-left: 190px;
    flex: 1;
    min-height: 100vh;
    position: relative;
}

/* ==================== Mobile Header ==================== */

.mobile-header {
    display: none;
    /* sticky (not fixed) — avoids an iOS Safari bug where fixed headers can
       end up clipped behind the notch after the URL bar collapses on scroll */
    position: sticky;
    top: 0;
    z-index: 300;
    height: calc(48px + env(safe-area-inset-top, 0px));
    padding: 0 2rem;
    padding-top: env(safe-area-inset-top, 0px);
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
}

.mobile-site-name {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--site-nav-color);
}

.mobile-menu-btn {
    background: none;
    border: none;
    color: var(--site-nav-color);
    font-size: 1.15rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color 0.4s;
}

/* Mobile header: always black regardless of background image */

/* ==================== Menu Overlay (mobile) ==================== */

.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(249,248,246,0.6);
    z-index: 190;
}

.menu-overlay.active {
    display: block;
}

/* ==================== Front Page ==================== */

.front-page-wrap {
    position: fixed;
    inset: 0;          /* full screen — covers sidebar area too */
    z-index: 1;        /* below sidebar (z-index:200) and bio-link (z-index:250) */
    background-color: #f6f9f9;
}

.front-slide {
    position: absolute;
    inset: 0;
    background-size: cover;       /* cover = crop to fill, ratio preserved */
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.front-slide.active {
    opacity: 1;
}

.front-page-bg {
    width: 100%;
    height: 100%;
    background-color: #f6f9f9;
}

/* ==================== Photo Gallery (single-photo.php) ==================== */

/* Outer wrapper: padding for non-front-page viewing comfort */
.gallery-outer {
    padding: 3rem 3rem 6rem;
}

/* The gallery grid container */
.gallery-page {
    line-height: 0;
}

.gallery-page img {
    cursor: zoom-in;
}

/* Spacing between blocks (single images and gallery blocks) */
.gallery-page > * + * {
    margin-top: 5rem !important;
}

/* ---- WordPress block gallery — square-contain responsive grid ---- */
.gallery-page .wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start !important;
}

.gallery-page .wp-block-gallery > figure,
.gallery-page .wp-block-gallery > .wp-block-image {
    aspect-ratio: 1 !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gallery-page .wp-block-gallery img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: opacity 0.25s;
}

.gallery-page .wp-block-gallery figure:hover img,
.gallery-page .wp-block-gallery .wp-block-image:hover img {
    opacity: 0.82;
}

@media (max-width: 1100px) {
    .gallery-page .wp-block-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Keep the same uniform square-cell treatment as the 3/4-column desktop
       grid (equal area for landscape and portrait alike, via object-fit:
       contain) — just drop to 2 columns with one consistent gap value for
       both rows and columns. A leftover odd photo simply occupies its own
       normal-size cell instead of stretching to fill the row. */
    .gallery-page .wp-block-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* ---- Old-style shortcode gallery ---- */
.gallery-page .gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    margin: 0 !important;
    align-items: start !important;
}

.gallery-page .gallery-item {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

.gallery-page .gallery-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transition: opacity 0.25s;
}

.gallery-page .gallery-item:hover img { opacity: 0.88; }

@media (max-width: 768px) {
    .gallery-page .gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ---- Standalone (non-gallery) images inside photo post ---- */
.gallery-page > .wp-block-image {
    margin: 0;
    line-height: 0;
}
.gallery-page > .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    display: block !important;
}

/* Suppress captions and WP caption gradient overlays in grid view */
.gallery-page figcaption,
.gallery-page .wp-element-caption,
.gallery-page .gallery-caption {
    display: none !important;
}

.gallery-page .wp-block-gallery figure::before,
.gallery-page .wp-block-gallery figure::after,
.gallery-page .wp-block-image::before,
.gallery-page .wp-block-image::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 900px) {
    .gallery-outer {
        padding: 2rem 1.5rem 5rem;
    }
}

/* Page content (bio etc.) */
.page-container {
    padding: 4rem 4rem 6rem;
}

.page-content {
    max-width: 640px;
    line-height: 2.05;
}

.page-content p {
    margin-bottom: 2rem;
    font-size: 1.2rem;
    color: #444;
}

/* ==================== BIO Page ==================== */

.bio-container {
    padding: 6rem 4rem 6rem;
    max-width: 760px;
    margin: 0 auto;
}

.bio-table {
    width: 100%;
}

.bio-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2rem;
    padding: 3.2rem 0;
    border-bottom: 1px solid #e8e4df;
}

.bio-row:first-child {
    padding-top: 0;
}

.bio-row-left {
    padding-top: 0.2rem;
}

.bio-section-label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #aaa;
    padding-top: 0.35rem;
}

.bio-avatar {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.bio-sns {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

.bio-sns li a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #1a1a1a;
    font-size: 1.1rem;
    font-weight: 400;
    text-decoration: none;
}

.bio-sns li a:hover {
    opacity: 0.55;
}

.bio-sns-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
}

.bio-sns-icon svg {
    width: 16px;
    height: 16px;
}

/* X is a solid glyph (vs. mail/Instagram's thin outline), so shrink it slightly
   to match their visual weight */
.bio-sns-icon svg.icon-x {
    width: 13px;
    height: 13px;
}

.bio-sns-value {
    font-size: 1rem;
    color: #1a1a1a;
}

.bio-text {
    font-size: 1.15rem;
    line-height: 2.05;
    color: #333;
}

.bio-text p {
    margin-bottom: 1.5rem;
}

.bio-text p:last-child {
    margin-bottom: 0;
}

.bio-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bio-list-item {
    display: flex;
    gap: 0.4rem;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.7;
}

.bio-list-year {
    color: #555;
    min-width: 5rem;
    flex-shrink: 0;
    font-weight: 300;
}

@media (max-width: 768px) {
    .bio-container {
        padding: 3rem 2.5rem 5rem;
    }
    .bio-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .bio-row-left {
        padding-top: 0;
    }
    .bio-section-label {
        padding-top: 0;
    }
    .bio-award-break {
        display: none;
    }
    /* Profile image + SNS links stay side-by-side, not stacked */
    .bio-row-profile {
        grid-template-columns: 56px 1fr;
        gap: 1.2rem;
        align-items: center;
    }
}

/* ==================== Works Archive ==================== */

/* Align works thumbnails top edge with sidebar logo */
.main-container {
    padding-top: 3.5rem;
    padding-right: 2.5rem;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 960px) {
    .works-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1400px) {
    .works-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.work-item {
    display: block;
    padding: 0 1.5rem 3rem;
}

.work-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: 1.1rem;
    transition: opacity 0.2s;
}

.work-item:hover img {
    opacity: 0.82;
}

.work-item-title {
    font-size: 1.2rem;
    font-weight: 300;
    color: #333;
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

.work-item-date {
    font-size: 1.05rem;
    color: #aaa;
    font-weight: 300;
}

/* ==================== Text / Diary Archive ==================== */

.text-container {
    padding: 6rem 4rem 6rem;
    max-width: 720px;
}

.list-back-link {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #bbb;
    transition: color 0.2s;
}

.list-back-link:hover {
    color: #1a1a1a;
}

.list-back-link--top {
    margin-bottom: 2.5rem;
}

.list-back-link--bottom {
    margin-top: 4rem;
    display: block;
}

.text-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.text-item {
    display: block;
    padding: 0.5rem 0;
    transition: opacity 0.2s;
}

.text-item:hover {
    opacity: 0.6;
}

.text-item--pinned {
    padding-bottom: 2.3rem;
    margin-bottom: 2.7rem;
    border-bottom: 1px solid #e9e9e9;
}

.text-item-title {
    font-size: 1.3rem;
    font-weight: 300;
    color: #2a2a2a;
    line-height: 1.5;
    display: block;
    margin-bottom: 0.35rem;
}

.text-item-date {
    font-size: 1.05rem;
    color: #c0b8b0;
    font-weight: 300;
    display: block;
    letter-spacing: 0.02em;
}

/* ==================== Single Post ==================== */

.single-container {
    padding: 4rem 4rem 6rem;
    max-width: 980px;
    margin: 0 auto;
}

.single-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.single-date {
    font-size: 1.05rem;
    color: #aaa;
    margin-bottom: 5rem;
    font-weight: 300;
}

.single-content {
    font-size: 1.2rem;
    line-height: 2.1;
    color: #444;
}

.single-content p {
    margin-bottom: 2.2rem;
}

.single-content a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #ccc;
}

.single-content a:hover {
    text-decoration-color: #1a1a1a;
}

.single-content img {
    margin: 0.8rem 0;
    max-width: 100%;
    height: auto;
    display: block;
}

.single-content .wp-block-image {
    margin: 0;
}

/* Separator block: thin line matching the theme's existing divider style */
.single-content .wp-block-separator,
.page-content .wp-block-separator {
    border: none;
    border-top: 1px solid #e8e4df;
    width: 100%;
    max-width: 100%;
    margin: 4rem 0;
    opacity: 1;
}

.single-content .wp-block-separator.is-style-dots,
.page-content .wp-block-separator.is-style-dots {
    border-top: none;
}

/* Works single post: 1-column gallery, equal-area sizing applied by JS */
.single-content .wp-block-gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 2.5rem 0 !important;
}

.single-content .wp-block-gallery > figure,
.single-content .wp-block-gallery > .wp-block-image {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.single-content .wp-block-gallery img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: unset !important;
    transition: opacity 0.25s;
}

.back-link {
    display: inline-block;
    margin-top: 4rem;
    font-size: 1.15rem;
    color: #aaa;
    transition: color 0.2s;
    letter-spacing: 0.02em;
}

.back-link:hover {
    color: #1a1a1a;
}

/* ==================== Lightbox ==================== */

.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(249,248,246,0.97);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-img-wrap {
    max-width: 88vw;
    max-height: 78vh;
}

.lightbox-img-wrap img {
    max-width: 88vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    cursor: zoom-out;
}

.lightbox-close {
    position: fixed;
    top: 2rem;
    right: 2.2rem;
    background: none;
    border: none;
    color: #ccc;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.4rem;
    z-index: 1001;
    transition: color 0.2s;
    font-weight: 200;
}

.lightbox-prev,
.lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b6b6b;
    cursor: pointer;
    padding: 1.5rem 1.2rem;
    z-index: 1001;
    line-height: 1;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.lightbox-prev svg,
.lightbox-next svg {
    width: 28px;
    height: 28px;
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:hover {
    color: #1a1a1a;
}

@media (max-width: 768px) {
    .lightbox-prev,
    .lightbox-next {
        padding: 2.5rem 0.5rem;
        opacity: 0.3;
        color: #555;
    }
    .lightbox-prev svg,
    .lightbox-next svg {
        width: 18px;
        height: 18px;
    }
    .lightbox-prev { left: 0; }
    .lightbox-next { right: 0; }

    /* Leave more room below the image so the fixed-position caption never
       sits flush against it — mobile Safari's address bar shrinks the
       actually-visible viewport well below the "vh" units used above,
       so the gap needs extra margin here to stay comfortable in practice. */
    .lightbox-img-wrap,
    .lightbox-img-wrap img {
        max-height: 66vh;
    }

}

.lightbox-caption {
    position: fixed;
    bottom: 2rem;
    right: 2.5rem;
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: #444444d6;
    line-height: 1.6;
    max-width: 95vw;
    text-align: right;
    pointer-events: none;
}

@media (max-width: 768px) {
    /* Comes after the base rule above so these actually win the cascade
       (same selector/specificity — source order decides, not media match). */
    .lightbox-caption {
        bottom: 2rem;
        left: 2rem;
        right: 2rem;
        /* max-width dropped (not just widened) — combining it with both
           left AND right would over-constrain the box and silently break
           the right-anchoring (browsers drop "right" to satisfy all three).
           Wrap frequency is tuned via padding-left instead, which narrows
           the usable text width without touching the box's positioning. */
        max-width: none;
        padding-left: 3.5rem;
        font-size: 1rem;
        line-height: 1.3;
    }
}

/* ==================== Mobile ==================== */

@media (max-width: 768px) {
    /* Expand tap target on nav links without changing visual appearance */
    .sidebar-nav ul li a::after {
        content: '';
        position: absolute;
        inset: -3px 0;
    }

    /* Wider line spacing between items in the mobile slide-in menu */
    .sidebar-nav ul li a {
        padding: 1rem 0;
    }

    /* Sidebar: slides in from left on mobile */
    .sidebar {
        transform: translateX(-100%);
        background-color: transparent;
        padding-top: 6rem;
        width: 220px;
        box-shadow: none;
    }

    /* transition only activates during JS-triggered menu toggle, not on window resize */
    .sidebar.menu-anim {
        transition: transform 0.28s ease;
    }

    .sidebar.open {
        transform: translateX(0);
        background-color: #fff;
        box-shadow: 2px 0 16px rgba(0,0,0,0.08);
    }

    /* No site title in mobile slide-in menu */
    .sidebar-logo {
        display: none;
    }

    .sidebar-copyright {
        display: none;
    }

    /* bio-link (desktop fixed top-right) hidden on mobile */
    .bio-link {
        display: none;
    }

    .mobile-header {
        display: flex;
    }

    .main-content {
        margin-left: 0;
    }

    /* Front page image extends behind transparent mobile header */
    .front-page-wrap {
        top: 0;
    }

    .page-container,
    .single-container {
        padding: 2.5rem 2rem 5rem;
    }

    .text-container {
        padding: 2.5rem 2rem 5rem;
    }

    .main-container {
        padding-left: 2.5rem;
    }

    .works-grid {
        grid-template-columns: 1fr;
    }

    .work-item {
        padding: 0 1rem 2.5rem;
    }

    .text-item {
        flex-direction: column;
        gap: 0.3rem;
    }

    .text-item-date {
        font-size: 1.0rem;
    }

}