/* ==========================================
   1. GLOBAL RESETS & BASE STYLES
========================================== */
html {
    background: linear-gradient(43deg,rgba(222, 222, 222, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(232, 232, 232, 1) 100%);
    scroll-behavior: smooth;
}

body {
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%;
    background: transparent;
    color: #4a4a4a;
    font-family: 'Jost', sans-serif;
}

/* Background Canvas styling */
#interactive-bg {
    position: fixed; 
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1; 
    pointer-events: none; /* Allows clicking on text through the canvas */
}

/* ==========================================
   2. TYPOGRAPHY & UTILITIES
========================================== */
h1, h2, h3, h4, .serif-text {
    font-family: 'Bellefair', serif;
    color: #222;
    font-weight: 400;
}

/* Glow for regular text over the moving canvas words */
.text-glow {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 1);
}


/* Premium Pure CSS Metallic Embossed Text */
.metal-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    letter-spacing: 2px; 
    
    /* Default fallback positions before the user moves their mouse */
    --mouse-x: 50%; 
    --mouse-y: 50%;
    --shadow-x: 2px; 
    --shadow-y: 4px;
    
    /* The Animated Light Source */
    background: radial-gradient(
        circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 1) 0%,      
        rgb(200, 200, 200) 60%,     
        rgb(186, 186, 186) 100%     
    );
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    
    /* The 3D Emboss & Dynamic Shadow */
    filter: 
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.9))  /* Top-left edge highlight */
        drop-shadow(1px 1px 1px rgba(130, 140, 150, 0.7))    /* Bottom-right edge bevel */
        drop-shadow(0 0 2px rgba(0, 0, 0, 0.15)); /* Soft dynamic drop shadow */

    text-shadow: none !important;
}

/* ==========================================
   3. LAYOUT & NAVIGATION
========================================== */
.main-container {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    width: 100%;
}

.main-nav {
    display: flex; 
    justify-content: flex-end; 
    font-size: 1.1rem; 
    gap: 3rem; 
    margin-right: 4rem; 
    margin-top: 3rem; 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

/* Navigation Link Hover Effects */
nav a { 
    text-decoration: none; 
    color: #555; 
    cursor: pointer;
    transition: color 0.3s ease; 
    position: relative; 
}

nav a:hover, nav a.active { 
    color: #000; 
}

/* Animated Underline for Nav */
nav a::after {
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 1px; 
    bottom: -4px; 
    left: 0;
    background-color: #000; 
    transition: width 0.3s ease;
}

nav a:hover::after, nav a.active::after { 
    width: 100%; 
}

/* Language Switcher Specific Styles */
.lang-switcher a { margin-left: 0.5rem; color: #777;}
.lang-switcher a.active { color: #000; }
.lang-switcher a::after { display: none; } 

/* ==========================================
   4. HERO SECTION
========================================== */
.hero-section {
    height: calc(100vh - 10rem); 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    margin-left: 10%;
}

.hero-title { 
    font-size: 4rem; 
    margin-bottom: 0; 
    letter-spacing: 1px; 
    align-self: flex-start;
}

.hero-subtitle {
    font-size: 1.2rem; 
    font-weight: 400; 
    color: #666; 
    margin-top: 1rem; 
    letter-spacing: 4px; 
    text-transform: uppercase; 
}

.scroll-hint { 
    margin: 0 10%; 
    padding-bottom: 5rem; 
    display: flex; 
    justify-content: flex-start; 
}

.scroll-hint-text {
    color: #999; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-size: 0.85rem;
    text-decoration: none;
}

/* ==========================================
   5. EDITORIAL ABOUT SECTION
========================================== */

#about {
    padding-top:7.5rem;
    margin-top: -5rem;
}

.editorial-layout {
    display: grid; 
    grid-template-columns: 1fr 1.8fr; 
    gap: 5rem; 
    align-items: start;
    max-width: 1200px; 
    margin: 8rem auto; 
    padding: 0 10%;
}

/* Left Column Styling */
.sticky-column { 
    position: sticky; 
    top: 0;
    align-self: start;
}
.profile-block {
    width: 100%;
}
.profile-img { 
    display: block;
    border-radius: 4px; 
    width: 100%; 
    height: auto;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
}
.profile-name { 
    font-size: 2.2rem; 
    margin-top: 1.5rem; 
    margin-bottom: 0; 
}
.profile-title { 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #555; 
    margin-top: 0.5rem; 
    font-size: 0.85rem; 
    font-weight: 400; 
}
.profile-name,
.profile-title {
    text-align: center;
}
/* .profile-award { 
    font-family: 'Noto Serif', serif; 
    font-style: italic; 
    color: #777; 
    margin-top: 0.5rem; 
    font-size: 1rem; 
} */

/* Right Column Styling */

.roundThingsDiv {
    margin-top: -2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem 1.25rem;
}

.roundThingsDiv picture {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

/* Okrągłe pieczęcie — wspólna „linia” dzięki flex + object-fit */
.roundThingsDiv img:not(.aila-member-logo) {
    width: 7rem;
    height: 7rem;
    margin: 0;
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* AILA — ten sam kwadrat co pieczęcie (object-fit zachowuje proporcje w środku) */
.roundThingsDiv img.aila-member-logo {
    width: 7rem;
    height: 7rem;
    margin: 0;
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    display: block;
}

.bio-content {
    display: flex; 
    flex-direction: column; 
    gap: 3.5rem;
}
.section-subtitle {
    font-size: 1.8rem; 
    margin-top: 0;
}

.section-subtitle::before, .practice-category-title::before {
    content: '⚖';
    color: #af7034;
    margin-right: 0.5rem;
    font-family: 'Noto Emoji Subset', sans-serif;
    font-size: 1.5rem;
    vertical-align: middle;
    line-height: 1;
}

.bio-text {
    line-height: 1.8; 
    font-size: 1.15rem; 
    color: #333;
}
.editorial-divider { 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    padding-bottom: 1rem; 
    margin-bottom: 1.5rem; 
}

/* Lists styling for Education & Memberships */
.credentials-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 3rem;
}
.credential-list { 
    list-style: none; 
    padding: 0; margin: 0; 
    line-height: 1.8; 
    color: #444; 
}
.credential-list li { 
    margin-bottom: 0.8rem; 
    position: relative; 
    padding-left: 1rem; 
}
.credential-list li::before { 
    content: '•'; 
    position: absolute; left: 0; 
    color: #999; 
}
li strong { color:#222; font-weight: 500; }
li span { font-size: 0.95rem; color: #777; }
.case-citation {
    display: block;
}
.case-citation cite {
    color: #444;
    display: block;
    font-style: italic;
    line-height: 1.25;
}
.case-citation span {
    display: block;
    margin-top: 0.02rem;
    line-height: 1.35;
    text-align: left;
}

/* Show more / Show less for Representative Cases & Speaking Events */
.collapsible-list-wrap.show-more-collapsed .show-more-item {
    display: none;
}

.show-more-btn {
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #af7034;
    background: transparent;
    border: 1px solid rgba(175, 112, 52, 0.5);
    border-radius: 2px;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.show-more-btn:hover {
    color: rgb(143, 93, 47);
    border-color: rgb(175, 112, 52);
    background: rgba(175, 112, 52, 0.06);
}

/* ==========================================
   6. INTERACTIVE ACCORDION (Practice Areas)
========================================== */
.standard-section { 
    width: 80%; 
    max-width: 1200px; 
    margin: 4rem 10% 8rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}
.section-title { 
    font-size: 3rem; 
    text-align: center; 
    margin-bottom: 4rem; 
}

/* MAJOR CATEGORY HEADINGS (Immigration Law, etc.) */
.practice-category-title {
    font-size: 2.2rem;
    color: #111;
    width: 100%;
    max-width: 900px;
    margin: 4rem auto 1.5rem auto; /* Large gap separates it from the previous list */
    text-align: left;
    border-bottom: 2px solid #111; /* Thicker, bolder dividing line */
    padding-bottom: 0.8rem;
    letter-spacing: 0.5px;
    font-weight: 400;
}

/* Removes the large top gap for the very first category so it sits cleanly under "Areas of Practice" */
#practice-areas .practice-category-title:first-of-type {
    margin-top: 0;
}

.accordion-container { 
    width: 100%; 
    max-width: 900px; 
    margin: 0 auto; 
}
.accordion-item { 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
}

/* Accordion Buttons (The clickable subcategories) */
.accordion-header {
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 1.5rem 0; 
    cursor: pointer; 
    background: none; 
    border: none; 
    text-align: left; 
    transition: opacity 0.3s ease;
}
.accordion-header:hover { opacity: 0.6; }
.accordion-title { font-size: 1.6rem; margin: 0; color: #222; font-weight: 300; font-family: Jost; }
.accordion-icon { 
    font-size: 2rem; 
    font-weight: 300; 
    font-family: Jost;
    color: #222; 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* Accordion Expanding Content */
.accordion-content { 
    max-height: 0; 
    padding-bottom: 0; /* explicitly start with 0 padding */
    overflow: hidden; 
    opacity: 0; 
    /* Apply faster transition when CLOSING so it doesn't hang */
    transition: max-height 0.4s ease, padding-bottom 0.4s ease, opacity 0.2s ease; 
}

.accordion-item.active .accordion-content { 
    max-height: 520px; /* Room for longer Immigration Law accordions */
    padding-bottom: 2rem; 
    opacity: 1; 
    /* Apply smooth transition when OPENING */
    transition: max-height 0.5s ease-in-out, padding-bottom 0.5s ease, opacity 0.4s ease 0.1s; 
}

.accordion-item.active .accordion-icon { 
    transform: rotate(45deg); 
}

.accordion-text {
    font-size: 1.1rem; 
    line-height: 1.7; 
    color: #444;
}

/* Little gray badge tags */
.tag-container { margin-top: 1rem; }
.tag {
    display: inline-block; 
    padding: 0.4rem 1rem; 
    margin: 0.3rem 0.3rem 0.3rem 0;
    background-color: rgba(0,0,0,0.04); 
    border-radius: 50px; 
    font-size: 0.9rem; 
    color: #555; 
    border: 1px solid rgba(0,0,0,0.05);
}

/* ==========================================
   7. CONTACT SECTION
========================================== */
.contact-section {
    width: 100%;
    max-width: none;
    margin: 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* border-top: 1px solid #00000055; */
    box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    width: 100%;
    margin-top: 6rem;
    padding-top: 2rem;
    padding-bottom: 6rem;
}

/* Header block */
.contact-header {
    width: 100%;
    margin-top: 3rem;
}

.contact-title {
    font-size: 3.5rem;
    letter-spacing: 2px;
    margin-top: -3.5rem;
}

.contact-subtitle {
    font-family: 'Bellefair', serif;
    color: #666;
    font-size: 1.1rem;
    margin: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* One row: Address | Direct Contact | Office Hours */
.contact-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    margin-top: 3rem;
    gap: 3rem;
}

.contact-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0 1.5rem;
    min-width: 0;
}

.contact-eyebrow {
    font-family: 'Jost', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.2rem;
    color: #af7034;
    display: block;
    margin-bottom: 1rem;
}

.contact-block-text {
    font-size: 1.4rem;
    color: #2a2a2a;
    line-height: 1.7;
    margin: 0;
}

.contact-phone-hero {
    font-size: 2.25rem;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.2;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    display: block;
}
.contact-phone-hero:hover { color: #af7034; }

.contact-email-hero {
    font-size: 1.2rem;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.18);
    padding-bottom: 1px;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-email-hero:hover {
    color: #af7034;
    border-bottom-color: #af7034;
}

.contact-hours-value {
    color: #666;
    /* font-size: 1.05rem; */
}

.contact-icon {
    font-size: 2rem;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    /* color: #af7034; */
    vertical-align: middle;
    line-height: 1;
    font-family: 'Noto Emoji Subset', sans-serif;
    margin-bottom: 1rem;
}

/* Zegar jako SVG — spójny kontur z 📌/📞 (Noto); emoji 🕒 na iOS często idzie w Apple Color Emoji */
.contact-icon--clock {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-icon-svg {
    /* Trochę większy niż 2rem — emoji 📌/📞 wizualnie wypełniają kwadrat em bardziej niż sam okrąg w viewBox 24×24 */
    width: 2.35rem;
    height: 2.35rem;
    color: #454545;
    flex-shrink: 0;
}



/* ==========================================
   8. MOBILE RESPONSIVE MEDIA QUERIES
========================================== */
@media (min-width: 901px) {
    /* Natural top aligns with bio; when stuck, JS sets --profile-offset to half block height */
    .sticky-column {
        position: sticky;
        top: calc(50vh - var(--profile-offset, 0px));
        align-self: start;
    }
}

@media (max-width: 900px) {
    /* Clip horizontal overflow without affecting desktop sticky (overflow on html breaks sticky) */
    html,
    body {
        overflow-x: hidden;
    }

    /* Tablet + mobile: full-width layout */
    #about {
        margin-top: 0;
        padding-top: 4rem;
    }

    .main-nav {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        gap: 1.5rem;
        margin-right: 0;
        margin-top: 2rem;
        font-size: 0.95rem;
        flex-wrap: wrap;
        padding: 0 1rem;
    }

    .hero-section {
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        align-items: center;
        text-align: center;
        padding: 0 1.5rem;
        height: auto;
        min-height: calc(100vh - 12rem);
    }

    .hero-title {
        font-size: clamp(2.25rem, 6vw, 3.25rem);
        align-self: center;
    }

    .hero-subtitle {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .scroll-hint {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        justify-content: center;
        padding-bottom: 3rem;
    }

    .main-container {
        align-items: stretch;
        width: 100%;
        max-width: 100%;
    }

    .editorial-layout,
    .standard-section,
    .contact-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .standard-section {
        margin: 4rem auto;
        padding: 0 5%;
    }

    .editorial-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 0 5%;
        margin: 4rem auto;
    }

    .sticky-column { position: relative; top: 0; height: auto; display: block; }

    .contact-row {
        flex-direction: column;
        gap: 2rem;
        margin-top: 2.5rem;
    }

    .contact-block { padding: 0.5rem 0; }
}

/* Scales icon next to main nav links — desktop only */
@media (min-width: 901px) {
    .main-nav > a::before {
        content: '⚖';
        color: #af7034;
        margin-right: 0.5rem;
        font-family: 'Noto Emoji Subset', sans-serif;
        vertical-align: middle;
        line-height: 1;
    }
}

@media (max-width: 768px) {
    .main-nav { font-size: 0.9rem; }

    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 0.95rem; }

    .standard-section { margin-bottom: 6rem; }
    
    /* Adjust major category headers for mobile */
    .practice-category-title { 
        font-size: 1.8rem; 
        text-align: left; 
        margin-top: 3rem; 
    }
    .accordion-title { font-size: 1.3rem; }
    .accordion-header { padding: 1.2rem 0; }

    /* Odznaki: trzy w jednym rzędzie, równa szerokość każdego slotu */
    .roundThingsDiv {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: clamp(0.35rem, 2vw, 0.75rem);
    }
    .roundThingsDiv picture {
        flex: 1 1 0;
        min-width: 0;
        max-width: 7rem;
    }
    .roundThingsDiv img:not(.aila-member-logo),
    .roundThingsDiv img.aila-member-logo {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 7rem;
        max-height: 7rem;
        margin: 0 auto;
        object-fit: contain;
        object-position: center;
    }

    /* Contact section mobile */
    .contact-section {
        width: 100%;
        min-height: auto;
        padding: 4rem 1rem 5rem;
    }

    .contact-subtitle {
        font-size: clamp(0.85rem, 2.85vw, 0.95rem);
        letter-spacing: 0.08em;
        line-height: 1.35;
        padding: 0 0.75rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-title { font-size: 2.6rem; }

    .contact-block-text { font-size: 1.1rem; }

    .contact-phone-hero { font-size: 2rem; }
    .contact-email-hero { font-size: 1.1rem; }
}