/* =========================================================================
   Advokato J. Žėko kontora (JŽ-law) — stylesheet
   Palette drawn from the logo: deep navy on soft off-white.
   ========================================================================= */

:root {
    --navy:        #1f2d52;
    --navy-dark:   #16203c;
    --navy-soft:   #2c3d6b;
    --ink:         #1c2333;
    --muted:       #5b6478;
    --line:        #e2e5ec;
    --bg:          #ffffff;
    --bg-alt:      #f6f7fa;
    --gold:        #b6903f;
    /* Darker gold for TEXT on light backgrounds — #b6903f is fine as a
       decorative border but fails WCAG AA contrast as small text. */
    --gold-text:   #8a6a24;
    --success-bg:  #e7f4ec;
    --success-fg:  #1d6b3f;
    --error-bg:    #fbeaea;
    --error-fg:    #a12626;
    --radius:      10px;
    --maxw:        1080px;
    --serif:       Georgia, 'Times New Roman', 'Playfair Display', serif;
    --sans:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    /* Offset in-page anchors so the sticky header doesn't cover the target. */
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--serif);
    color: var(--navy);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 0.5em;
}

a {
    color: var(--navy-soft);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Accessibility ------------------------------------------------------- */
/* Skip link: visually hidden until focused via keyboard. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--navy);
    color: #fff;
    border-radius: 0 0 8px 0;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
    text-decoration: none;
}

/* Clear, consistent keyboard-focus indicator everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--navy-soft);
    outline-offset: 2px;
}

/* Don't let the main landmark show a focus ring when targeted by the skip link. */
main:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    /* No cross-fade on language switch either — plain instant navigation. */
    @view-transition {
        navigation: none;
    }
}

/* --- Language switch: cross-document transition -------------------------
   Switching language is a full page load. Opting both documents into a view
   transition turns that white flash into a cross-fade, and naming the header
   keeps the chrome anchored so it reads as the copy changing language rather
   than the site reloading. Ignored by browsers without support — they get
   today's instant navigation.
   ------------------------------------------------------------------------- */
@view-transition {
    navigation: auto;
}

/* --- Header ------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    view-transition-name: site-header;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    gap: clamp(8px, 2.5vw, 16px);
}

.brand-logo {
    display: block;
    /* Shrinks on narrow phones so the nav never overflows the 24px edge. */
    height: clamp(32px, 8vw, 46px);
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    /* Fluid rather than stepped: the nav breathes with the viewport instead of
       snapping at a breakpoint. */
    gap: clamp(12px, 2.4vw, 28px);
}

.site-nav a {
    color: var(--ink);
    font-size: 0.98rem;
    letter-spacing: 0.2px;
}

.site-nav .nav-cta {
    /* Same fluid treatment — no size jump when crossing 560px. */
    padding: clamp(8px, 1.1vw, 9px) clamp(12px, 2.6vw, 18px);
    font-size: clamp(0.88rem, 0.5rem + 0.68vw, 0.98rem);
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    white-space: nowrap;
}

.site-nav .nav-cta:hover {
    background: var(--navy-dark);
    text-decoration: none;
}

/* --- Language switcher ---------------------------------------------------
   The active language is marked by a gold rule, not a filled chip: only
   colour and a scaled pseudo-element change between states, so the pair holds
   exactly the same geometry in LT and EN and the header cannot shift when you
   switch. Letterspaced caps echo the hero eyebrow.
   ------------------------------------------------------------------------- */
.lang-switch {
    display: flex;
    align-items: center;
}

.site-nav .lang-link {
    position: relative;
    /* Identical box for every 2-letter code — no reflow between states. */
    min-width: 2.5em;
    padding: 6px 2px 8px;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-align: center;
    transition: color 0.2s ease;
}

/* Hairline between the pair — a constant 1px, so it costs no movement. */
.site-nav .lang-link + .lang-link {
    border-left: 1px solid var(--line);
}

.site-nav .lang-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    background: var(--gold);
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0.4);
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.site-nav .lang-link:hover {
    color: var(--ink);
    text-decoration: none;
}

.site-nav .lang-link:hover::after {
    opacity: 0.4;
    transform: scaleX(1);
}

.site-nav .lang-link.is-active {
    color: var(--navy);
}

.site-nav .lang-link.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-block;
    padding: 13px 28px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.06s ease;
    font-family: var(--sans);
}

.btn-primary {
    background: var(--navy);
    color: #fff;
}

.btn-primary:hover {
    background: var(--navy-dark);
    text-decoration: none;
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Hero --------------------------------------------------------------- */
.hero {
    position: relative;
    /* A fixed stage rather than a text-sized box. The height comes from the
       viewport, never from how long a translation runs, so switching language
       can neither resize the hero nor rescale the illustration behind it
       (which is sized off the hero's own height). Verified to clear the
       tallest language at every width from 300px up, so this min-height is
       always the operative height.

       Deliberately NOT vertically centred: centring would slide the whole text
       block by half the height of whichever line a translation saves, so the
       headline would still drift on switch. Top-anchored, the headline is
       pinned and a longer translation simply runs further down into the stage,
       where the illustration lives. */
    min-height: clamp(620px, 33rem + 8vw, 660px);
    /* Courthouse illustration anchored bottom-right, veiled by a
       left-to-right gradient so the headline stays fully legible. */
    background:
        linear-gradient(100deg,
            var(--bg-alt) 0%,
            var(--bg-alt) 34%,
            rgba(246, 247, 250, 0.86) 58%,
            rgba(246, 247, 250, 0.55) 100%),
        url('../img/hero.svg') no-repeat right bottom / auto 100%,
        radial-gradient(1200px 400px at 15% -10%, rgba(31, 45, 82, 0.06), transparent 60%),
        var(--bg-alt);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

/* Optional uploaded photo (config 'hero_image'): centered, cover-scaled,
   with a left-to-right veil so the headline stays legible over any image. */
.hero.hero--photo {
    background:
        linear-gradient(100deg,
            var(--bg-alt) 0%,
            rgba(246, 247, 250, 0.94) 34%,
            rgba(246, 247, 250, 0.60) 62%,
            rgba(246, 247, 250, 0.30) 100%),
        var(--hero-image) center center / cover no-repeat,
        var(--bg-alt);
    /* Height and centering come from .hero — both variants share one stage. */
}

.hero-inner {
    position: relative;
    z-index: 1;
    /* Fluid: previously this stepped 64px → 96px at 560px, which threw the
       whole page down by 32px mid-resize. */
    padding: clamp(64px, 3rem + 4vw, 96px) 24px clamp(72px, 3.5rem + 4vw, 104px);
    /* Inherits the global .container max-width so the headline shares the
       same left edge as every other section (no private narrower column). */
    width: 100%;
}

/* Cap hero text line lengths individually instead of narrowing the column. */
.hero h1,
.hero-tagline {
    max-width: 720px;
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    color: var(--gold-text);
    font-weight: 700;
    margin: 0 0 14px;
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin-bottom: 0.35em;
}

.hero-tagline {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    color: var(--navy-soft);
    margin: 0 0 1em;
}

.hero-lead {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 620px;
    margin: 0 0 2em;
}

/* The lead reserves the lines its layout needs, so the button below it holds
   one position whichever language is showing. Three lines is the desktop
   measure — Lithuanian fills them, English uses two and the third reads as
   ordinary paragraph spacing. A floor, not a cap: longer copy still grows. */
.hero-lead {
    min-height: 87px; /* fallback for browsers without the lh unit */
    min-height: 3lh;
}

/* Narrower columns need more lines, and which language runs longer flips with
   the width — so the floor follows the layout, not one language. */
@media (max-width: 470px) {
    .hero-lead {
        min-height: 116px;
        min-height: 4lh;
    }
}

@media (max-width: 370px) {
    .hero-lead {
        min-height: 145px;
        min-height: 5lh;
    }
}

/* The tagline needs the same treatment: below ~360px the Lithuanian line wraps
   to two lines while the English one still fits on one, which pushed the lead
   and the button below it down by 30px on switch. */
@media (max-width: 359px) {
    .hero-tagline {
        min-height: 61px; /* fallback for browsers without the lh unit */
        min-height: 2lh;
    }
}

/* --- Specializations ----------------------------------------------------
   A tinted band between the hero and the white contacts section, so the two
   content sections read as separate without needing a divider.
   ------------------------------------------------------------------------- */
.spec {
    padding: 88px 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}

.spec h2 {
    font-size: 1.9rem;
    margin-bottom: 1em;
}

.spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* Two columns where there's room, one on phones — no breakpoint needed. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 48px;
}

.spec-list li {
    padding: 14px 0 14px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 1.08rem;
    color: var(--ink);
    position: relative;
}

/* Gold tick echoing the accent used by the language switcher and bar note. */
.spec-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.5em;
    width: 8px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

/* --- Contacts section --------------------------------------------------- */
.contacts {
    padding: 88px 0;
}

.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: start;
}

.contacts h2 {
    font-size: 1.9rem;
    margin-bottom: 0.6em;
}

.contacts-intro {
    color: var(--muted);
    margin-top: -0.4em;
    margin-bottom: 2em;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
}

.contact-list li {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.contact-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--muted);
    margin-bottom: 4px;
}

.contact-list a,
.contact-list span:not(.contact-label) {
    font-size: 1.12rem;
    color: var(--ink);
}

.bar-note {
    font-size: 0.9rem;
    color: var(--muted);
    font-style: italic;
    border-left: 3px solid var(--gold);
    padding-left: 14px;
}

/* Two paragraphs inside one gold rule — collapse their margins so the block
   still reads as a single quote rather than two stacked notes. */
.bar-note p {
    margin: 0 0 0.6em;
}

.bar-note p:last-child {
    margin-bottom: 0;
}

/* The Bar register URL is shown in full (it is the mandatory disclosure), so it
   must be allowed to break mid-string rather than overflow a phone. */
.bar-link {
    font-style: normal;
    overflow-wrap: anywhere;
}

/* --- Form --------------------------------------------------------------- */
.contacts-form {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px;
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.field input,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cfd4de;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--sans);
    color: var(--ink);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--navy-soft);
    box-shadow: 0 0 0 3px rgba(44, 61, 107, 0.15);
}

.field input.invalid,
.field textarea.invalid {
    border-color: var(--error-fg);
    box-shadow: 0 0 0 3px rgba(161, 38, 38, 0.12);
}

.field textarea {
    resize: vertical;
    min-height: 120px;
}

/* Honeypot — visually hidden but present in the DOM for bots. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-required-note {
    font-size: 0.85rem;
    color: var(--muted);
    margin: -0.4em 0 1.6em;
}

.field-error {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--error-fg);
}

.form-status {
    margin: 14px 0 0;
    font-size: 0.95rem;
    min-height: 1.2em;
}

.form-status.is-success { color: var(--success-fg); }
.form-status.is-error   { color: var(--error-fg); }

.form-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.form-alert-success { background: var(--success-bg); color: var(--success-fg); }
.form-alert-error   { background: var(--error-bg);   color: var(--error-fg); }

.is-hidden { display: none; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.82);
    padding: 28px 0;
    font-size: 0.9rem;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}

.footer-credit a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.footer-credit a:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .footer-inner {
        justify-content: center;
        text-align: center;
    }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 820px) {
    .contacts-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Whenever the contacts stack into ONE column (tablet & phone), full-bleed
       the form card so its content aligns to the same 24px edge as the
       "Kontaktai" heading above it (no double indent). */
    .contacts-form {
        margin-inline: -24px;
        padding: 28px 24px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 560px) {
    /* Keep only the CTA and the language switcher on phones. Both sit at the
       right edge, so dropping the section links moves nothing — and the CTA
       and switcher are sized fluidly, so nothing resizes here either. */
    .site-nav a:not(.nav-cta):not(.lang-link) {
        display: none;
    }

    /* Keep the illustration as a faint backdrop below the copy on phones. */
    .hero {
        background:
            linear-gradient(180deg,
                var(--bg-alt) 0%,
                rgba(246, 247, 250, 0.9) 55%,
                rgba(246, 247, 250, 0.62) 100%),
            url('../img/hero.svg') no-repeat right bottom / 118% auto,
            var(--bg-alt);
    }

    /* Uploaded photo on phones: stronger top-down scrim keeps text readable
       while the image stays centered and covers the hero. */
    .hero.hero--photo {
        background:
            linear-gradient(180deg,
                rgba(246, 247, 250, 0.90) 0%,
                rgba(246, 247, 250, 0.80) 55%,
                rgba(246, 247, 250, 0.58) 100%),
            var(--hero-image) center center / cover no-repeat,
            var(--bg-alt);
    }

    .spec,
    .contacts {
        padding: 56px 0;
    }
}