/*
Theme Name: giulia
Author: giulia
Version: 3.0
*/

/*
Theme Name: Portfolio
*/
/* ------------------------------------------------------------------
 * Base typography
 * ------------------------------------------------------------------ */
body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #1a1a1a;
    background: #ffffff;
}

h1, h2, h3 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
}

/* ------------------------------------------------------------------
 * Accessibility — skip link (visually hidden until focused)
 * ------------------------------------------------------------------ */
.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.skip-link:focus {
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 9999;
    background: #1a1a1a;
    color: #fff;
    padding: 10px 16px;
    font-size: 0.85rem;
    text-decoration: none;
}

/* ------------------------------------------------------------------
 * Sitewide layout — fixed left sidebar + scrolling main content
 * ------------------------------------------------------------------ */
:root {
    --sidebar-width: 300px;
}

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

.site-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    padding: 64px 48px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 48px;
    box-sizing: border-box;
    background: #ffffff; /* opaque — needed since the hero image visually extends behind it */
}

.site-branding .site-name {
    font-size: 1rem;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 500;
}

.sidebar-nav-item.has-submenu {
    display: flex;
    flex-direction: column;
}

.sidebar-nav-toggle {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    transition: color 0.2s ease;
}

.sidebar-nav-toggle:hover,
.sidebar-nav-item.has-submenu.is-open > .sidebar-nav-toggle {
    color: #1a1a1a;
}

.sidebar-nav-toggle::after {
    content: '+';
    font-size: 0.9rem;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.sidebar-nav-item.has-submenu.is-open > .sidebar-nav-toggle::after {
    content: '−';
}

.sidebar-submenu {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 0 0 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-submenu a {
    font-size: 0.78rem;
    text-decoration: none;
    color: #999;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.sidebar-submenu a:hover,
.sidebar-submenu a.active {
    color: #1a1a1a;
}

.sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-nav-list a {
    text-decoration: none;
    font-size: 0.85rem;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    color: #666;
    transition: color 0.2s ease;
}

.sidebar-nav-list a:hover,
.sidebar-nav-list a.active {
    color: #1a1a1a;
}

.site-main {
    flex: 1;
    min-width: 0; /* prevents flex overflow issues with wide images */
}

@media (max-width: 800px) {
    .site-wrapper {
        flex-direction: column;
    }

    .site-sidebar {
        width: auto;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 20px 16px;
        border-bottom: 1px solid #eee;
    }

    .sidebar-nav-list {
        flex-direction: row;
        gap: 20px;
    }
}

/* ------------------------------------------------------------------
 * Landing page hero image
 * ------------------------------------------------------------------ */
.landing-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* Extends the box the full window width (visually behind the
       sidebar, which stays opaque on top) so the image centers on the
       TRUE middle of the screen rather than just the space to the
       right of the sidebar. */
    width: calc(100% + var(--sidebar-width));
    margin-left: calc(-1 * var(--sidebar-width));
    padding: 40px;
    box-sizing: border-box;
    text-align: center;
}

.landing-hero-image {
    width: 100%;
    max-width: 500px;   /* adjust this to make the image bigger/smaller */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.landing-hero-placeholder {
    color: #999;
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 800px) {
    .landing-hero {
        height: 70vh;
        padding: 20px;
        /* On mobile the sidebar sits above the content instead of
           beside it, so the full-width trick above isn't needed. */
        width: 100%;
        margin-left: 0;
    }
}

/* ------------------------------------------------------------------
 * Works page — category tile grid
 * ------------------------------------------------------------------ */
.works-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
    padding: 0 24px 80px;
}

.works-category-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}

.works-category-tile img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
}

.works-category-name {
    font-size: 0.9rem;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    color: #1a1a1a;
}

/* ------------------------------------------------------------------
 * GLightbox — frosted translucent background, minimal grey controls,
 * small fixed work-info box (bottom-right)
 * ------------------------------------------------------------------
 * These class names (.goverlay, .gslide-description, .gdesc-inner,
 * .gslide-title, .gbtn/.gclose/.gnext/.gprev, .gslide-image) come from
 * GLightbox's default markup. Rules here are !important because
 * GLightbox's own stylesheet must be loaded for the lightbox to work,
 * so ours needs to reliably win regardless of load order.
 */

/* Semi-transparent + blurred backdrop — rest of the site shows through */
.goverlay {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Strip the default dark circular button backgrounds — icon only */
.gbtn,
.gclose,
.gnext,
.gprev {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    opacity: 0.55 !important;
    transition: opacity 0.2s ease !important;
}

.gbtn:hover,
.gclose:hover,
.gnext:hover,
.gprev:hover {
    opacity: 1 !important;
}

/* Recolor the icons to grey. GLightbox's next/prev/close icons are
   often baked-in white assets rather than a styleable <svg fill>, so a
   filter is the reliable way to recolor them regardless of how they're
   drawn: brightness(0) forces solid black, then invert(x%) lightens it
   to a mid-grey. Raise the invert % for a lighter grey, lower for darker. */
.gbtn,
.gclose,
.gnext,
.gprev {
    filter: brightness(0) saturate(100%) invert(65%) !important;
}

.gclose svg,
.gnext svg,
.gprev svg {
    fill: #999999 !important;
    stroke: none !important;
}

/* Remove GLightbox's default drop-shadow on the enlarged image */
.gslide-image img,
.gslide-image {
    box-shadow: none !important;
    filter: none !important;
}

/* GLightbox's own auto-generated title is hidden — we render the
   title ourselves inside the description box instead, so it doesn't
   duplicate or show up in the old full-width bar position. */
.gslide-title {
    display: none !important;
}

/* The actual anchoring now happens in JS (js/lightbox-init.js), which
   measures the rendered <img> directly and places this box just
   outside it (right side, or left if there's no room) with a 20px
   gap — bottom edges aligned. The rule below is just the sane fallback
   shown for an instant before that JS runs. Starts hidden — JS (in
   lightbox-init.js) reveals it only once correctly positioned, which
   is what prevents the visible "jump" on load. */

.gslide-description,
.gslide-description.description-bottom {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    visibility: hidden !important;
    width: 180px !important;   /* fixed and small — same on every image; must match BOX_WIDTH in lightbox-init.js */
    max-width: 180px !important;
    height: auto !important;
    max-height: calc(100vh - 40px) !important; /* keeps it fully on-screen if content runs long */
    background: #f7f6f4 !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
    z-index: 999999 !important;
}

.gdesc-inner {
    padding: 0 !important;
    width: 100% !important;
}

.lightbox-work-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    margin: 0 0 6px;
}

.lightbox-work-meta {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #777;
    margin: 0;
}

@media (max-width: 600px) {
    .gslide-description,
    .gslide-description.description-bottom {
        width: 150px !important;
        max-width: 150px !important;
        bottom: 16px !important;
        right: 16px !important;
        padding: 10px 12px !important;
    }
}

/* ------------------------------------------------------------------
 * Standard pages (About, Contact) — page.php
 * ------------------------------------------------------------------ */
.page-content {
    max-width: 640px;
    margin: 0;
    padding: 120px 50px 50px;
    box-sizing: border-box;
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    margin: 0 0 28px;
}

.page-body {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
}

.page-body p {
    margin: 0 0 20px;
}

.page-body a {
    color: #1a1a1a;
}

@media (max-width: 600px) {
    .page-content {
        padding: 60px 24px 60px;
    }
}

/* ------------------------------------------------------------------
 * Category header (shown above "All Works" and each category page)
 * ------------------------------------------------------------------ */
.category-header {
    text-align: center;
    padding: 60px 20px 20px;
}

.category-header h1 {
    font-size: 1.8rem;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    margin: 0;
}

.category-description {
    max-width: 500px;
    margin: 10px auto 0;
    font-size: 0.9rem;
    color: #666;
}

/* ------------------------------------------------------------------
 * Category navigation
 * ------------------------------------------------------------------ */
.painting-category-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 20px;
    margin-bottom: 20px;
}

.painting-category-nav a {
    font-size: 0.85rem;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #999;
    transition: color 0.2s ease;
}

.painting-category-nav a:hover,
.painting-category-nav a.active {
    color: #1a1a1a;
}

/* ------------------------------------------------------------------
 * Masonry grid with organic, syncopated offsets
 * ------------------------------------------------------------------ */
.artwork-grid {
    columns: 3 300px; /* 3 columns, min 300px each — auto-adjusts responsively */
    column-gap: 24px;
    padding: 48px 24px 80px; /* top value sits just above the sidebar's site-name level (64px) */
}

.artwork-item {
    break-inside: avoid; /* keeps an image from splitting across columns */
    margin-bottom: 32px;
    display: inline-block;
    width: 100%;
}

.artwork-item a {
    display: block;
}

.artwork-item img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none;
    filter: none;
}

.no-artworks {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

/* Syncopated vertical offsets — repeats every 5 items, avoids a
   mechanical/predictable rhythm while staying consistent across loads */
.offset-sm { margin-top: 16px; }
.offset-md { margin-top: 36px; }
.offset-lg { margin-top: 56px; }
.offset-none { margin-top: 0; }

/* ------------------------------------------------------------------
 * Responsive breakpoints
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .artwork-grid {
        columns: 2 250px;
    }
}

@media (max-width: 600px) {
    .artwork-grid {
        columns: 1;
        padding: 32px 16px 60px;
    }

    /* collapse offsets to a clean single column on mobile */
    .offset-sm,
    .offset-md,
    .offset-lg {
        margin-top: 0;
    }

    .category-header {
        padding: 40px 16px 10px;
    }
}

/* ------------------------------------------------------------------
 * GLightbox tweaks (optional — matches the minimal aesthetic)
 * ------------------------------------------------------------------ */
.gcaption {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.85rem;
}