/*
Theme Name: Iliraga Portfolio
Author: Ilir
Description: Ultra-minimalist FSE block theme for my personal portfolio.
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;700;800&family=Inter:wght@300;400;500;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ==========================================================================
   Base Utilities & Typographic Elements
   ========================================================================== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.text-editorial-gradient {
    background: linear-gradient(to bottom right, #f5f2ed, #a68a64);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   WordPress Native Button Overrides
   ========================================================================== */
.wp-block-button__link {
    transition: all 0.15s ease-in-out;
    border: none;
    text-decoration: none;
}


.wp-block-button__link:active {
    transform: scale(0.95);
}

/* Beat WP core's .wp-block-post-content a selector which has real specificity */
.wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link {
    background-color: var(--wp--preset--color--bronze) !important;
    color: var(--wp--preset--color--charcoal) !important;
}

.wp-block-button:not(.is-style-link):not(.is-style-outline) .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--bronze-hover) !important;
    color: var(--wp--preset--color--charcoal) !important;
}

.is-style-link .wp-block-button__link {
    color: var(--wp--preset--color--bronze) !important;
    background-color: transparent !important;
    padding: 0 !important;
}

.is-style-outline .wp-block-button__link {
    color: var(--wp--preset--color--bronze) !important;
    background-color: transparent !important;
    border: 1px solid var(--wp--preset--color--bronze) !important;
}


.wp-block-group p { margin-top: 0; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav {
    padding: 1.5rem 3rem;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 5%, transparent);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: color-mix(in srgb, var(--wp--preset--color--charcoal) 80%, transparent);
    align-items: center;
}

.admin-bar .site-nav { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-nav { top: 46px; }
}

/* Use ::before for blur so .site-nav does NOT become a containing block for
   position:fixed children (the mobile nav overlay). backdrop-filter on a parent
   would trap any fixed-position descendants inside it. */
.site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: -1;
    pointer-events: none;
}

/* WP core emits :root :where(.wp-block-navigation) { background-color: ... } via
   wp-includes/blocks/navigation/style.css as a safe default for unstyled themes.
   :where() has zero specificity, so a single class selector wins cleanly here.
   Without this override the inner block element renders a second opaque layer
   that blocks the semi-transparent glass effect on .site-nav. */
.site-nav .wp-block-navigation {
    background-color: transparent;
}

.site-nav-inner {
    max-width: var(--wp--preset--layout--content-size, 1400px);
    margin: 0 auto;
    padding: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}



.logo-text {
    margin: 0;
    font-family: var(--wp--preset--font-family--headline);
    font-weight: 800;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.logo-text a { text-decoration: none; }
.logo-text a:hover { color: inherit; }
/* Two-color site title using background-clip text */
.wp-block-site-title.logo-text a,
.logo-text a {
    background: linear-gradient(90deg, var(--wp--preset--color--cream) 0 48%, var(--wp--preset--color--bronze) 48% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.nav-links { gap: 3rem; }

.nav-link a,
.nav-links .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wp--preset--color--cream-muted) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link a:hover,
.nav-links .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--bronze) !important; }

.nav-link.active a,
.nav-links .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    color: var(--wp--preset--color--cream) !important;
    border-bottom: 1px solid var(--wp--preset--color--bronze);
    padding-bottom: 4px;
}

/* Raise WP core's hardcoded 600px hamburger breakpoint to 900px.
   Core uses two @media (min-width:600px) blocks to switch between the
   hamburger and inline nav. We undo both in the 600–899px range by
   re-hiding the inline container and re-showing the hamburger button.
   Below 600px core already shows the hamburger — no override needed.
   Above 900px core's inline nav takes over naturally. */
@media (max-width: 1019px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
}

/* ==========================================================================
   Mobile Navigation Overlay
   ========================================================================== */

/* Target the open state specifically — WordPress toggles .is-menu-open on the
   container when the hamburger is tapped. Without this class the overlay is
   hidden; we must not affect the desktop inline nav which shares the same
   base class but never receives .is-menu-open. */
.wp-block-navigation__responsive-container.is-menu-open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* surface token at 85% opacity — atmospheric glass per DESIGN.md.
       color-mix() keeps the value tethered to the theme.json palette instead
       of a hardcoded rgba(), so a palette update propagates here automatically. */
    background-color: color-mix(in srgb, var(--wp--preset--color--surface) 85%, transparent);
    /* 24px blur specified by DESIGN.md "Atmospheric Glass" — bleeds background
       photography through the overlay to keep the experience integrated. */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* 6rem top clears the fixed nav bar height + adds generous breathing room
       per DESIGN.md "if you think there is enough space, add 24px more". */
    padding: 6rem 2.5rem 4rem;
}

/* WordPress renders the nav items inside this inner wrapper. We need to
   re-declare flex here because the block's own stylesheet sets it to
   display:block in the open state, collapsing our vertical centering. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* Each list item gets a ghost bottom divider. DESIGN.md "No-Line" rule forbids
   100% opaque borders — 6% cream creates a suggestion of separation rather
   than a structural line. color-mix() keeps the tint token-based. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item {
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 6%, transparent);
}

/* First item also needs a top border to close the rhythm — :first-child
   is required because the bottom border alone would leave the top edge open. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:first-child {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 6%, transparent);
}

/* .wp-block-navigation-item__content is the actual <a> or <span> rendered by
   the block for each menu item. We target it explicitly (not a generic `a`)
   to avoid bleeding into sub-menu toggles or other nested elements.
   !important is required here because WordPress outputs inline color styles
   from the block's overlayTextColor attribute that would otherwise win. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
    /* Headline (Manrope) instead of the body UI font — treats nav links as
       editorial display text per DESIGN.md typography strategy. */
    font-family: var(--wp--preset--font-family--headline);
    /* clamp() keeps the size comfortable across all mobile viewport widths
       while staying large enough for a confident touch tap. */
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    /* Weight 200 — architectural thinness per DESIGN.md "geometric precision". */
    font-weight: 200;
    /* Tight tracking per DESIGN.md display-lg / headline-lg spec. */
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--cream) !important;
    text-decoration: none;
    /* Vertical padding creates generous touch targets; combined with the font
       size this comfortably exceeds the 44px minimum. */
    padding: 1.25rem 0;
    display: block;
    min-height: 44px;
    transition: color 0.2s ease;
}

/* Hover state — scoped to the open overlay so it does not bleed into
   desktop nav link hover rules defined elsewhere in style.css. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--bronze) !important;
}

/* The close button is rendered inside its own sub-container by WordPress.
   We target the inner <button> directly because the wrapper div has no
   interactive styles — only the button itself needs a touch-target guarantee. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close button {
    color: var(--wp--preset--color--cream-muted);
    /* 44×44px minimum touch target per WCAG 2.5.5 / Apple HIG. */
    min-width: 44px;
    min-height: 44px;
}

/* Author-level fallback: ensure post/page links use theme bronze when theme.json global styles aren't emitted */
.entry-content a,
.wp-block-post-content a,
.page-content a,
.wp-block-post-content a:visited {
    color: var(--wp--preset--color--bronze);
}
.entry-content a:hover,
.wp-block-post-content a:hover,
.page-content a:hover {
    color: var(--wp--preset--color--bronze-hover);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.site-main { padding-top: 10rem; }

.hero-section {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 3rem;
    margin-bottom: 3rem;
}

.hero-heading {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 200;
    line-height: 1.1;
}

/* Hero heading spacing moved into the block markup (parts/hero.html) */

.hero-paragraph {
    font-size: 1.25rem;
    line-height: 1.8;
    max-width: 42rem;
    margin-bottom: 3rem;
}

/* ==========================================================================
   Bento Grid Layout System
   ========================================================================== */
.bento-grid-wrapper {
    padding: 0 3rem;
    max-width: var(--wp--preset--layout--content-size, 1400px);
    margin: 0 auto;
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 12rem;
}

.bento-item {
    position: relative;
    overflow: hidden;
    background-color: var(--wp--preset--color--surface);
    border-radius: 0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bento-solid {
    background-color: var(--wp--preset--color--charcoal);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 5%, transparent);
}

.bento-item > .wp-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 1;
}

.bento-item > .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    transition: transform 1s ease;
}

.bento-item:hover > .wp-block-image img { transform: scale(1.05); }

.bento-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--wp--preset--color--charcoal), color-mix(in srgb, var(--wp--preset--color--charcoal) 20%, transparent), transparent);
    z-index: 5;
    pointer-events: none;
}
.bento-solid::after { display: none; }

.bento-content {
    position: relative;
    padding: 2.5rem;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bento-hidden-text {
    opacity: 1;
    transform: translateY(0);
    font-size: 0.875rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    max-width: 28rem;
}

.category-label {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
    display: block;
}

.bento-title {
    font-weight: 300;
    font-size: 1.875rem;
    margin-bottom: 2rem;
}

.bento-title-no-margin {
    font-weight: 300;
    font-size: 1.5rem;
    margin: 0;
}

.bento-link-wrapper a {
    color: var(--wp--preset--color--bronze);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--bronze) 30%, transparent);
    padding-bottom: 4px;
    transition: color 0.3s ease;
    display: inline-block;
}

.bento-link-wrapper a:hover { color: var(--wp--preset--color--bronze-hover); }

.bento-link-plain a {
    color: var(--wp--preset--color--bronze);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bento-link-plain a:hover { color: var(--wp--preset--color--bronze-hover); }

.link-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.centered-content { justify-content: center; }
.row-content { flex-direction: row; align-items: center; justify-content: space-between; }
.flex-link { display: flex; align-items: center; gap: 0.5rem; }
.icon-small { font-size: 14px; }
.icon-large { font-size: 2.5rem; color: color-mix(in srgb, var(--wp--preset--color--bronze) 30%, transparent); }
.opacity-low { opacity: 0.2 !important; }
.mb-4 { margin-bottom: 1rem; }

/* ==========================================================================
   Page Template
   ========================================================================== */
/* padding and title spacing moved to block attributes in page.html */

/* Ensure page titles use theme cream color (override editor/UA styles) */
/* Page title and content colors are handled by theme.json (elements.h1 / elements.p) */

/* Prevent about-section from adding extra spacing inside regular pages */
.page-content .about-section {
    padding: 0;
    background-color: transparent;
}

/* ==========================================================================
   About Section
   ========================================================================== */
.about-eyebrow {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.8em;
    margin-bottom: 2rem;
}

.about-heading {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 200;
    line-height: 1.1;
    tracking: tight;
    margin: 0;
}

.about-paragraph {
    /* font-size, line-height, font-weight now global via styles.elements.p in theme.json */
    margin-bottom: 3rem;
}

.about-divider {
    border: none !important;
    border-top: none !important;
    height: 1px !important;
    background-color: color-mix(in srgb, var(--wp--preset--color--bronze) 30%, transparent);
    width: 6rem;
    margin: 3rem auto !important;
}

.about-quote {
    border: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.about-quote p {
    font-size: 1.25rem;
    line-height: 1.8;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 1rem;
}

.about-quote cite {
    font-family: var(--wp--preset--font-family--headline);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--wp--preset--color--bronze);
    font-style: normal;
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Footer visual styles moved into the footer block markup (parts/footer.html)
   as inline block attributes per FSE best-practices. Remove or override
   these rules only if you want a fallback for non-FSE environments. */

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(300px, auto);
    }
    .col-span-8 { grid-column: span 8; }
    .col-span-4 { grid-column: span 4; }
    .row-span-3 { grid-row: span 3; }
    .row-span-2 { grid-row: span 2; }
    .row-span-1 { grid-row: span 1; }
}

@media (max-width: 768px) {
    /* Allow wp:navigation to handle mobile display (don't forcibly hide nav-links) */
    .site-nav { padding: 1.5rem !important; }
    .hero-section { padding: 0 1.5rem; }
    .bento-grid-wrapper { padding: 0 1.5rem; }
    .bento-item { min-height: 400px; }
}

@media (max-width: 480px) {
    .site-nav .wp-block-buttons { display: none; }
}