/*
 * MG Lawyer overrides on top of the Lexicon template stylesheet.
 * Keeps template edits out of style.css so the vendor file stays a clean copy.
 */

/* Header nav: logo stays left, nav items centered across the full header width.
   .main-box wraps logo-box + nav-outer in a flex row; outer-box (now just the
   hidden-on-desktop toggler) is the other direct child of inner-container.
   `display: contents` unwraps .main-box so its two children become direct
   grid items of inner-container, sitting in a 3-column
   [logo | nav (centered) | toggler] grid. Nothing leaves normal flow, so the
   header's height stays driven by its tallest child, unlike an absolute-
   positioned nav which collapses the parent's height and floats free of it.
   Scoped to the desktop breakpoint (>=1024px): below that the template already
   hides .main-menu and shows only the hamburger toggler (untouched here), so
   this never interferes with the mobile off-canvas menu. */
@media (min-width: 1024px) {
    /* Symmetric 1fr auto 1fr grid: the nav sits in the centre `auto` column
     flanked by two equal 1fr columns, so it is dead-centre of the FULL header
     width regardless of the logo's width. (A `auto 1fr auto` layout instead
     centres the nav inside the leftover space beside the logo, pushing it off
     true centre by a different amount in the normal vs sticky bars, since their
     logo widths and side padding differ, which made the two look misaligned.)
     Logo pinned to the left of column 1, toggler to the right of column 3. */
    .header-style-one .header-lower .inner-container,
    .header-style-two .header-lower .inner-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .header-style-one .header-lower .main-box,
    .header-style-two .header-lower .main-box {
        display: contents;
    }

    .header-style-one .header-lower .logo-box,
    .header-style-two .header-lower .logo-box {
        justify-self: start;
    }

    .header-style-one .header-lower .outer-box,
    .header-style-two .header-lower .outer-box {
        justify-self: end;
    }

    .header-style-one .header-lower .nav-outer,
    .header-style-two .header-lower .nav-outer {
        display: flex;
        justify-content: center;
    }

    /* The sticky row is wrapped in a bootstrap .container (max-width 1320px,
     auto-centred) while the normal header row uses .header-style-two
     .inner-container (max-width 1710px, 15px padding). That narrower, more
     inset container shifted the sticky logo ~60px to the right of the normal
     logo. Neutralise the wrapper to full width with no padding so the
     .inner-container inside it, which already gets max-width 1710 + 15px
     padding from the template, lines up exactly with the normal header. */
    .sticky-header .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* Sticky header: same symmetric grid. It has two direct children (logo,
     nav-outer); the empty third 1fr column keeps the nav truly centred, and
     the toggler lives inside nav-outer and stays hidden at this breakpoint. */
    .sticky-header .inner-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .sticky-header .logo {
        justify-self: start;
    }

    .sticky-header .nav-outer {
        display: flex;
        justify-content: center;
    }

    /* Sticky nav items default to margin-left: 60px per item (including before
     the first item, since the template only zeroes out top/bottom/right).
     That reads as noticeably looser than the normal header's tight 30px
     (20px under 1599.98px) margin-right gaps with no lead-in gap, so
     switching to sticky on scroll visibly changed the nav's spacing. Match
     the normal header's spacing and its same responsive tier; the bar itself
     stays shorter (compact scroll behaviour kept). */
    .sticky-header .main-menu .navigation > li {
        margin: 0 30px 0 0;
    }
}
@media (min-width: 1024px) and (max-width: 1599.98px) {
    .sticky-header .main-menu .navigation > li {
        margin-right: 20px;
    }
}
@media (min-width: 1024px) {
    .sticky-header .main-menu .navigation > li:last-child {
        margin-right: 0;
    }
}

/* ==========================================================================
   Right-side header controls: theme toggle (sun/moon) + language flags.
   Injected into .header-lower .outer-box and the sticky header by React.
   ========================================================================== */
.mg-header-controls {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* In the sticky header the controls are the 3rd grid item; pin them right. */
.sticky-header .inner-container > .mg-header-controls {
    justify-self: end;
}

.mg-lang {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s ease;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--headings-color);
}

.mg-lang-btn:hover {
    opacity: 0.8;
}

.mg-lang-btn img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Highlight the active language (button gets .is-active from JS). */
.mg-lang-btn.is-active {
    opacity: 1;
}

.mg-theme-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--headings-color);
}

.mg-theme-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Show moon in light mode (click to go dark), sun in dark mode. */
.mg-icon-sun {
    display: none;
}

html.mg-dark .mg-icon-sun {
    display: inline-flex;
}

html.mg-dark .mg-icon-moon {
    display: none;
}

/* Compact on small screens: flags only, drop the ENG/GEO labels. */
@media (max-width: 1023.98px) {
    .mg-header-controls {
        gap: 12px;
        margin-right: 14px;
    }
    .mg-lang-btn span {
        display: none;
    }
}

/* ==========================================================================
   Dark mode (baseline). Driven by <html class="mg-dark">. Flips the template's
   CSS custom properties so text, headings, links and variable-based surfaces
   invert broadly, then darkens the main structural surfaces (page, header,
   white/cream sections and cards). Banners with background images keep them.
   This is a solid first pass; individual sections can be fine-tuned later.

   Palette: #001233 is the page background, with lighter navy tints layered on
   top for the card surfaces. The header bars share the page colour, so the
   header reads flush with the page rather than as a separate band:
     page + bars #001233 -> cards #003566 -> raised #013b71 / #01427d
   ========================================================================== */
html.mg-dark {
    --text-color: #b8c6d9;
    --headings-color: #e8eef6;
    --link-color: var(--theme-color1);
    --link-hover-color: var(--theme-color1);
    --body-bg: #001233;
    --theme-color-white: #003566;
    --theme-color-lighter: #013b71;
    --theme-color-lighter2: #01427d;
    --theme-color-silver: #013b71;
    --theme-color-gray: #002b52;
}

html.mg-dark body,
html.mg-dark .page-wrapper {
    background-color: #001233;
    color: var(--text-color);
}

/* Structural bars */
html.mg-dark .header-lower,
html.mg-dark .sticky-header {
    background-color: #001233;
}

html.mg-dark .sticky-header {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

/* Sections without a background image show the dark page through. */
html.mg-dark section {
    background-color: transparent;
}

html.mg-dark section .bg-image,
html.mg-dark section .bg {
    opacity: 1;
}

/* Common light/cream/white surfaces -> dark surface. */
html.mg-dark .bg-white,
html.mg-dark [class*='bg-light'],
html.mg-dark .service-block-two .inner-block,
html.mg-dark .feature-block .inner-box,
html.mg-dark .news-block .inner-box,
html.mg-dark .blog-block .inner-box,
html.mg-dark .pricing-block .inner-box,
html.mg-dark .testimonial-block .inner-box,
html.mg-dark .team-block .inner-box,
html.mg-dark .faq-block,
html.mg-dark .accordion-box .block,
html.mg-dark .team-contact-form,
html.mg-dark .contact-form,
html.mg-dark .default-form input[type='text'],
html.mg-dark .default-form input[type='email'],
html.mg-dark .default-form textarea {
    background-color: #003566;
}

/* Text + headings inside dark surfaces. */
html.mg-dark :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
html.mg-dark :is(.sec-title__title, .title, .sec-title .title) {
    color: var(--headings-color);
}

html.mg-dark :is(p, li, .text, blockquote) {
    color: var(--text-color);
}

/* Links stay on the gold accent, which reads well on dark. */
html.mg-dark
    a:not(.btn-style-one):not(.btn-style-two):not(.mg-lang-btn):not(
        .theme-btn
    ) {
    color: inherit;
}

/* Soft borders that were near-black become subtle light. */
html.mg-dark hr,
html.mg-dark .border,
html.mg-dark [class*='border-'] {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Top bar colour: gold #cbaf7d on every page. (This is the template's own
   accent, --theme-color1; it is written as a literal here so the bar keeps
   this colour even if the accent variable is retuned later.)

   The template painted this bar's text and links white, and header-style-one's
   icons gold, which on a gold background left the icons invisible and the text
   at about 1.9:1 contrast. Navy text lifts that to about 8.8:1, and is applied
   to the text, links and icons of both header styles. The selectors mirror the
   template's own specificity and win on cascade order, since this file loads
   after style.css. Applies in light and dark alike.
   ========================================================================== */
.header-style-one .header-top,
.header-style-two .header-top {
  background-color: #cbaf7d;
}

.header-style-one .header-top .list-style-one li,
.header-style-one .header-top .list-style-one li a,
.header-style-one .header-top .list-style-one li i,
.header-style-two .header-top .list-style-one li,
.header-style-two .header-top .list-style-one li a,
.header-style-two .header-top .list-style-one li i {
  color: #001233;
}

/* ==========================================================================
   Home hero converted to a Swiper slider (built in hero-slider.ts). Each slide
   carries its own absolute background, so scope the positioning per slide;
   style the pagination dots for the dark hero.
   ========================================================================== */
.banner-section-two .hero-swiper {
  width: 100%;
  /* Fixed height, see the hero height block below. */
  height: 90vh;
  /* A template .swiper rule adds padding-bottom to reserve space for pagination
     BELOW the slides; that pushed the swiper box 70px past the slide content and
     the dashes landed in that gap, under the slide. Zero it so the swiper hugs
     the slide and the bottom-anchored dashes sit over the content. */
  padding-bottom: 0;
}
.banner-section-two .hero-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}
.banner-section-two .hero-swiper .bg-image {
  position: absolute;
  inset: 0;
}
.banner-section-two .hero-swiper .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-section-two .hero-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.banner-section-two .hero-pagination .swiper-pagination-bullet {
  width: 30px;
  height: 4px;
  margin: 0 !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  opacity: 1;
  cursor: pointer;
  transition: all 0.3s ease;
}
.banner-section-two .hero-pagination .swiper-pagination-bullet-active {
  width: 46px;
  background: #ffffff;
}

/* Hero height. The height used to be driven by the inner-container's padding,
   so it was a function of each slide's content: a short title made a short
   slide, a long one a tall slide. That caused three problems at once. The
   swiper box and the slide box disagreed, so the bottom-anchored pagination
   fell outside the visible slide; the hero jumped between slides of different
   title lengths; and switching to Georgian (longer, taller text) grew the hero.

   Pinning the swiper to a fixed 90vh and stretching the wrapper and slides to
   fill it makes every slide exactly the same height, so content can no longer
   drive it. The template lays the inner-container out as a bottom-aligned flex
   row (align-items: flex-end), so giving it the full height keeps the title and
   the cards pinned to the bottom without the original oversized padding-top;
   what remains of padding-top only keeps tall content clear of the header. */
.banner-section-two .hero-swiper .swiper-wrapper,
.banner-section-two .hero-swiper .swiper-slide {
  height: 100%;
}
.banner-section-two .inner-container {
  height: 100%;
  padding-top: 120px;
  padding-bottom: 80px;
}
@media (max-width: 1199.98px) {
  .banner-section-two .inner-container {
    padding-top: 100px;
    padding-bottom: 80px;
  }
}
@media (max-width: 767.98px) {
  .banner-section-two .inner-container {
    padding-top: 90px;
    padding-bottom: 60px;
  }
}

/* ==========================================================================
   Language typography. When Georgian is the active language (the header
   switcher sets data-mg-lang on <html>), swap the two font-family variables to
   Georgian-capable fonts. The template applies these vars to all headings
   (h1..h6, .h1..) and body text, so this cascades site-wide with no per-element
   rules.

   System fonts only, no web font is downloaded. Sylfaen ships with Windows and
   covers Georgian; the entries after it cover macOS and Linux, where Sylfaen is
   not installed, before falling back to the generic families. The template's
   own Lora / Work Sans carry no Georgian glyphs, so they are deliberately not
   in this chain.
   ========================================================================== */
html[data-mg-lang='ka'] {
  --heading-font-family: 'Sylfaen', 'Noto Serif Georgian', 'Noto Sans Georgian',
    'BPG Arial', Georgia, serif;
  --body-font-family: 'Sylfaen', 'Noto Sans Georgian', 'BPG Arial', system-ui,
    sans-serif;
}