/* ============================================
   SHARED STYLES FOR PIA LINZ WEBSITE
   ============================================ */

/* ============================================
   FONTS
   ============================================ */
@font-face {
    font-family: 'Blanchard Web';
    src: url('Blanchard-Medium-Web.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Blanchard Web';
    src: url('Blanchard-MediumItalic-Web.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: block;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
}

/* Base font size: scales from 16px (mobile) to 18px (1440px+) */
/* Using 1440px as baseline reference */
html {
    font-size: clamp(16px, 1.25vw, 18px);
}

body {
    overflow-y: auto;
    background: #fff;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: 'Blanchard Web', serif;
}

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */
/* Font sizes scale proportionally from 1440px baseline */
/* Formula: (target-size / 1440) * 100vw, with min/max bounds */
.font-size-30 { 
    font-size: clamp(1.5rem, 2.08vw, 1.875rem); /* 24px - 30px */
}
.font-size-23 { 
    font-size: clamp(1.25rem, 1.6vw, 1.4375rem); /* 20px - 23px */
}
.font-size-20 { 
    font-size: clamp(1rem, 1.39vw, 1.25rem); /* 16px - 20px */
}
.font-size-18 { 
    font-size: clamp(0.9375rem, 1.25vw, 1.125rem); /* 15px - 18px */
}
.font-size-14 { 
    font-size: clamp(0.8125rem, 0.97vw, 0.875rem); /* 13px - 14px */
}
.font-size-13 { 
    font-size: clamp(0.75rem, 0.9vw, 0.8125rem); /* 12px - 13px */
}

/* Line Heights */
.line-height-1-1 { line-height: 1.1; }
.line-height-1-4 { line-height: 1.4; }
.line-height-133 { line-height: 133%; }

/* Font Weights */
.font-weight-500 { font-weight: 500; }

/* Font Styles */
.font-style-normal { font-style: normal; }
.font-style-italic { font-style: italic; }

/* ============================================
   SPACING SYSTEM
   ============================================ */
/* Spacing scales proportionally from 1440px baseline */
/* Using rem units that scale with base font size */
.margin-bottom-60 { margin-bottom: clamp(2rem, 4.17vw, 3.75rem); }
.margin-bottom-40 { margin-bottom: clamp(1.5rem, 2.78vw, 2.5rem); }
.margin-bottom-20 { margin-bottom: clamp(1rem, 1.39vw, 1.25rem); }
.margin-bottom-15 { margin-bottom: clamp(0.75rem, 1.04vw, 0.9375rem); }
.margin-bottom-10 { margin-bottom: clamp(0.5rem, 0.69vw, 0.625rem); }
.margin-bottom-5 { margin-bottom: clamp(0.25rem, 0.35vw, 0.3125rem); }
.margin-top-40 { margin-top: clamp(1.5rem, 2.78vw, 2.5rem); }
.margin-top-35 { margin-top: clamp(1.25rem, 2.43vw, 2.1875rem); }
.margin-top-20 { margin-top: clamp(1rem, 1.39vw, 1.25rem); }
.margin-top-10 { margin-top: clamp(0.5rem, 0.69vw, 0.625rem); }
.margin-top-0 { margin-top: 0; }

/* Padding */
.padding-20 { padding: clamp(1rem, 1.39vw, 1.25rem); }
.padding-top-20 { padding-top: clamp(1rem, 1.39vw, 1.25rem); }
.padding-bottom-20 { padding-bottom: clamp(1rem, 1.39vw, 1.25rem); }
.padding-right-240 { padding-right: clamp(2rem, 16.67vw, 15rem); }
.padding-right-40 { padding-right: clamp(1rem, 2.78vw, 2.5rem); }

/* Gaps */
.gap-4 { gap: clamp(0.25rem, 0.28vw, 0.25rem); }
.gap-5 { gap: clamp(0.25rem, 0.35vw, 0.3125rem); }
.gap-10 { gap: clamp(0.5rem, 0.69vw, 0.625rem); }
.gap-20 { gap: clamp(1rem, 1.39vw, 1.25rem); }
.gap-30 { gap: clamp(1.25rem, 2.08vw, 1.875rem); }
.gap-40 { gap: clamp(1.5rem, 2.78vw, 2.5rem); }

/* ============================================
   MENU / NAVIGATION
   ============================================ */
/* CSS variable for consistent spacing - matches content left padding */
:root {
    --content-padding: clamp(1rem, 1.39vw, 1.25rem);
    /* Menu width: sized to fit longest menu item "Early Site Specific" + left padding + right padding (matching left) */
    /* "Early Site Specific" is ~20 characters. At menu font size (20px at 1440px), that's approximately the text width */
    /* We use responsive rem values that scale proportionally with the font size */
    --menu-width: clamp(10.25rem, 14.24vw, 12.5rem);
}

.menu-container {
    position: fixed;
    top: 0;
    right: var(--content-padding);
    z-index: 100;
    padding: var(--content-padding) var(--content-padding) var(--content-padding) var(--content-padding);
    user-select: none;
    width: var(--menu-width);
    min-width: var(--menu-width);
    max-width: var(--menu-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.menu-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: clamp(1rem, 1.39vw, 1.25rem);
    bottom: clamp(1rem, 1.39vw, 1.25rem);
    width: 1px;
    background: #000;
}

.menu-title {
    font-family: 'Blanchard Web', serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(1.5rem, 2.08vw, 1.875rem);
    color: #000;
    line-height: 1.1;
    margin-bottom: clamp(1rem, 1.39vw, 1.25rem);
    text-align: left;
    position: relative;
}

.menu-title a {
    color: #000;
    text-decoration: none;
}

.menu {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.28vw, 0.25rem);
    flex: 1;
}

.menu a {
    display: block;
    font-family: 'Blanchard Web', serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(1rem, 1.39vw, 1.25rem);
    color: #000;
    text-decoration: none;
    line-height: 1.1;
    white-space: nowrap;
    transition: transform 0.2s ease;
    opacity: 1;
}

.menu a:hover {
    transform: translateX(clamp(0.25rem, 0.49vw, 0.4375rem));
}

.submenu {
    margin-left: clamp(1rem, 1.39vw, 1.25rem);
    margin-top: clamp(0.125rem, 0.14vw, 0.125rem);
    margin-bottom: clamp(0.125rem, 0.14vw, 0.125rem);
    display: none;
    flex-direction: column;
    gap: clamp(0.25rem, 0.35vw, 0.3125rem);
}

body.about-page .submenu.about-submenu,
body.works-page .submenu.works-submenu {
    display: flex;
}

.submenu a {
    font-family: 'Blanchard Web', serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(0.8125rem, 0.97vw, 0.875rem);
    color: #000;
    text-decoration: none;
    line-height: 1.1;
    white-space: nowrap;
    transition: transform 0.2s ease;
    opacity: 1;
}

.submenu a:hover {
    transform: translateX(clamp(0.25rem, 0.49vw, 0.4375rem));
}

.menu-footer {
    margin-top: auto;
    padding-top: clamp(1rem, 1.39vw, 1.25rem);
    font-family: 'Blanchard Web', serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(0.8125rem, 0.97vw, 0.875rem);
    color: #000;
    line-height: 1.1;
    white-space: nowrap;
    display: block;
    position: relative;
}

.menu-footer a {
    color: #000;
    text-decoration: none;
    font-size: clamp(0.8125rem, 0.97vw, 0.875rem);
    display: inline;
}

/* Special menu styling for index.html */
.menu-title img {
    height: clamp(60px, 6.25vw, 90px);
    width: auto;
    display: block;
}

/* ============================================
   CONTENT AREA
   ============================================ */
.content {
    padding: var(--content-padding);
    /* Padding-right = menu width + gap (same as left padding) + menu right offset */
    /* This creates a gap between content right edge and menu left edge equal to left padding */
    padding-right: calc(var(--menu-width) + var(--content-padding) + var(--content-padding));
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section-title {
    font-family: 'Blanchard Web', serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(1.5rem, 2.08vw, 1.875rem);
    color: #000;
    margin-bottom: clamp(1rem, 1.39vw, 1.25rem);
    margin-top: 0;
    padding-bottom: clamp(1rem, 1.39vw, 1.25rem);
    border-bottom: 1px solid #000;
    text-align: left;
}

/* ============================================
   BODY TEXT
   ============================================ */
.body-text {
    font-family: 'Blanchard Web', serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
    color: #000;
    line-height: 1.4;
    text-align: left;
    margin-bottom: clamp(1rem, 1.39vw, 1.25rem);
}

.body-text p {
    margin: 0 0 clamp(0.75rem, 1.04vw, 0.9375rem) 0;
}

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

.body-text em {
    font-family: 'Blanchard Web', serif;
    font-weight: 500;
    font-style: italic;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: #000;
    text-decoration: none;
    transition: transform 0.2s ease;
}

a:hover {
    transform: translateX(7px);
}

/* ============================================
   ARROW ICON
   ============================================ */
.arrow-icon {
    display: inline-block;
    width: auto;
    height: 1em;
    vertical-align: baseline;
    margin-left: 0.2em;
}

/* ============================================
   MOBILE MENU ELEMENTS (hidden on desktop)
   ============================================ */
.mobile-menu-button,
.mobile-menu-overlay,
.mobile-menu-title {
    display: none;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet and below (1024px and smaller) */
@media (max-width: 1024px) {
    html {
        font-size: clamp(15px, 1.46vw, 16px);
    }
    
    :root {
        --menu-width: clamp(12.5rem, 19.53vw, 13.75rem); /* 200px - 220px in rem */
    }
}

/* Mobile landscape and below (768px and smaller) */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
    
    /* Hide desktop menu */
    .menu-container {
        display: none;
    }
    
    /* Hide desktop menu title on index.html */
    .menu-title {
        display: none;
    }
    
    /* Show mobile menu elements (except on homepage) */
    .mobile-menu-bar,
    .mobile-menu-button,
    .mobile-menu-title {
        display: block;
    }
    
    /* Hide mobile menu on homepage */
    body.homepage .mobile-menu-bar,
    body.homepage .mobile-menu-button,
    body.homepage .mobile-menu-title,
    body.homepage .mobile-menu-overlay {
        display: none !important;
    }
    
    /* Mobile menu bar background */
    .mobile-menu-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(3.5rem, 7.8vw, 4rem); /* Enough height for padding + text + padding */
        background: #ffffff;
        z-index: 100;
    }
    
    /* Mobile menu button */
    .mobile-menu-button {
        position: fixed;
        top: clamp(1rem, 2.6vw, 1.25rem);
        right: clamp(1rem, 2.6vw, 1.25rem);
        z-index: 1001; /* Above the overlay (z-index 1000) */
        background: none;
        border: none;
        font-family: 'Blanchard Web', serif;
        font-weight: 500;
        font-style: normal;
        font-size: clamp(1rem, 1.39vw, 1.25rem);
        color: #000;
        cursor: pointer;
        padding: 0;
        user-select: none;
    }
    
    /* Mobile menu title (top left) */
    .mobile-menu-title {
        position: fixed;
        top: clamp(1rem, 2.6vw, 1.25rem);
        left: clamp(1rem, 2.6vw, 1.25rem);
        z-index: 101;
        font-family: 'Blanchard Web', serif;
        font-weight: 500;
        font-style: normal;
        font-size: clamp(1rem, 1.39vw, 1.25rem);
        color: #000;
        text-decoration: none;
    }
    
    /* Full-screen mobile menu overlay */
    .mobile-menu-overlay {
        display: none !important; /* Hidden by default, shown with .active */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #ffffff;
        z-index: 1000;
        overflow-y: auto;
        padding: clamp(1rem, 2.6vw, 1.25rem);
    }
    
    .mobile-menu-overlay.active {
        display: flex !important;
        flex-direction: column;
    }
    
    /* Mobile menu header */
    .mobile-menu-header {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: clamp(4rem, 10.4vw, 5rem); /* Four times the space between Pia Linz and News */
    }
    
    /* Pia Linz title in overlay - bigger than menu items */
    .mobile-menu-overlay .mobile-menu-title {
        font-size: clamp(1.75rem, 4.55vw, 2rem); /* Biggest font size */
    }
    
    .mobile-menu-close {
        background: none;
        border: none;
        font-family: 'Blanchard Web', serif;
        font-weight: 500;
        font-style: normal;
        font-size: clamp(1rem, 1.39vw, 1.25rem);
        color: #000;
        cursor: pointer;
        padding: 0;
        user-select: none;
    }
    
    /* Mobile menu navigation */
    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        gap: clamp(1rem, 2.6vw, 1.25rem);
    }
    
    .mobile-menu-nav a {
        font-family: 'Blanchard Web', serif;
        font-weight: 500;
        font-style: normal;
        font-size: clamp(1.25rem, 3.26vw, 1.5rem);
        color: #000;
        text-decoration: none;
        line-height: 1.1;
    }
    
    /* 4px spacing before Texts (after Drawing Notes) */
    .mobile-menu-nav a[href="texts.html"] {
        margin-top: 4px;
    }
    
    /* 4px spacing before Contact (after Bibliography) */
    .mobile-menu-nav a[href="contact.html"] {
        margin-top: 4px;
    }
    
    .mobile-menu-nav .submenu {
        display: flex;
        flex-direction: column;
        gap: clamp(0.5rem, 1.3vw, 0.625rem);
        margin-left: clamp(1rem, 2.6vw, 1.25rem);
        margin-top: calc(clamp(0.5rem, 1.3vw, 0.625rem) - 2px); /* Reduced by 2px */
    }
    
    .mobile-menu-nav .submenu a {
        font-family: 'Blanchard Web', serif;
        font-weight: 500;
        font-style: normal;
        font-size: clamp(0.8125rem, 2.11vw, 0.875rem);
        color: #000;
        text-decoration: none;
        line-height: 1.1;
    }
    
    .mobile-menu-footer {
        margin-top: auto;
        padding-top: clamp(2rem, 5.2vw, 2.5rem);
        font-family: 'Blanchard Web', serif;
        font-weight: 500;
        font-style: normal;
        font-size: clamp(0.8125rem, 2.11vw, 0.875rem);
        color: #000;
        line-height: 1.1;
    }
    
    .mobile-menu-footer a {
        color: #000;
        text-decoration: none;
        font-size: inherit; /* Use same size as parent */
    }
    
    .content {
        padding-left: clamp(1rem, 2.6vw, 1.25rem) !important;
        padding-right: clamp(1rem, 2.6vw, 1.25rem) !important; /* No menu space needed on mobile */
        padding-bottom: clamp(3rem, 7.8vw, 4rem) !important; /* Extra white space at bottom */
        padding-top: clamp(4.5rem, 10.4vw, 5.25rem) !important; /* Menu bar height (3.5-4rem) + content padding (1-1.25rem) */
    }
}

/* Mobile portrait (480px and smaller) */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .content {
        padding: clamp(0.75rem, 3.13vw, 1rem);
    }
    
    .mobile-menu-nav a {
        font-size: clamp(1.125rem, 4.69vw, 1.375rem);
    }
    
    .mobile-menu-nav .submenu a {
        font-size: clamp(0.9375rem, 3.91vw, 1.0625rem);
    }
}