/* ==========================================================================
   modern.css — visual refresh layer for the IGPEB frontend
   --------------------------------------------------------------------------
   Loaded LAST in frontend/assets/AppAsset.php so it overrides the Canvas
   theme without touching markup, content or page structure.

   Palette is taken from the existing site, not invented:
     #477234  brand green  (logo + institute name)
     #1abc9c  accent teal  (links, buttons, theme accent)

   Everything here is presentation only. Removing this one file returns the
   site to its previous appearance.
   ========================================================================== */

:root {
    /* --- brand (unchanged, sampled from the live site) --- */
    --m-brand:        #477234;
    --m-brand-dark:   #365728;
    --m-brand-light:  #5d8c47;
    --m-brand-tint:   rgba(71, 114, 52, .08);

    --m-accent:       #1abc9c;
    --m-accent-dark:  #15a186;
    --m-accent-tint:  rgba(26, 188, 156, .10);

    /* --- neutrals --- */
    --m-ink:          #1c2321;
    --m-body:         #55605c;
    --m-muted:        #8a938f;
    --m-line:         #e7ebe8;
    --m-surface:      #ffffff;
    --m-surface-2:    #f6f8f7;

    /* --- elevation --- */
    --m-shadow-sm: 0 1px 2px rgba(28, 35, 33, .05), 0 1px 3px rgba(28, 35, 33, .06);
    --m-shadow:    0 2px 6px rgba(28, 35, 33, .05), 0 8px 24px rgba(28, 35, 33, .07);
    --m-shadow-lg: 0 4px 10px rgba(28, 35, 33, .06), 0 18px 44px rgba(28, 35, 33, .12);

    /* --- shape + motion --- */
    --m-r-sm: 8px;
    --m-r:    14px;
    --m-r-lg: 20px;
    --m-r-pill: 999px;
    --m-ease: cubic-bezier(.4, 0, .2, 1);
    --m-dur: .28s;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
    color: var(--m-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--m-accent); color: #fff; }

h1, h2, h3, h4, h5, h6 { color: var(--m-ink); }

a { transition: color var(--m-dur) var(--m-ease); }

img { max-width: 100%; }

/* Visible keyboard focus everywhere (the theme removes outlines). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--m-accent);
    outline-offset: 2px;
    border-radius: var(--m-r-sm);
}

/* ==========================================================================
   2. Header
   --------------------------------------------------------------------------
   Two rows, both full-bleed and aligned to the same 30px gutter:

     row 1  utility icons + state links          |  accessibility · phone · mail
     row 2  logo + wordmark  ·  main menu        |  language · search

   The only rule that draws a line is the hairline under the whole header.
   Everything else separates by spacing alone — the theme's column borders,
   float columns and fixed heights are switched off here.

   Layout tokens are declared once so the two rows cannot drift apart.
   ========================================================================== */

:root {
    --m-hd-gutter: 30px;   /* left/right gutter shared by both rows */
    --m-hd-btn: 32px;      /* square hit area for every icon button   */
}

/* --------------------------------------------------------------------------
   2.1  Utility bar
   -------------------------------------------------------------------------- */

#top-bar.m-topbar {
    height: auto;
    line-height: normal;
    background: var(--m-surface-2);
    border-bottom: 1px solid var(--m-line);
}

.m-topbar .m-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 38px;
    max-width: 100%;
    width: 100%;
    padding-left: var(--m-hd-gutter);
    padding-right: var(--m-hd-gutter);
}

/* `.clearfix::before/::after` become flex items once the parent is a flex
   container and silently absorb `space-between`. The utility bar is flex at
   every width, so it can be neutralised outright; `.m-head` is only flex from
   1340px — below that the theme still lays it out with floats and needs its
   clearfix, or the header collapses and the utilities overlap the bar. */
.m-topbar__inner::before, .m-topbar__inner::after { content: none; }

@media (min-width: 1340px) {
    .m-head::before, .m-head::after { content: none; }
}

.m-topbar__left,
.m-topbar__right {
    display: flex;
    align-items: center;
    gap: 2px;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}
.m-topbar__right { gap: 4px; }

/* Undo the theme's 50% float columns and its per-item divider borders. */
.m-topbar .col_half { width: auto; margin: 0; }
.m-topbar .top-links,
.m-topbar #top-social { float: none; margin: 0; border: 0; }
.m-topbar .top-links ul,
.m-topbar #top-social ul {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.m-topbar .top-links ul > li,
.m-topbar #top-social ul > li {
    float: none;
    border: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One consistent icon button for every control in the bar. */
.m-topbar .top-links ul > li > a,
.m-topbar #top-social ul > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--m-hd-btn);
    height: var(--m-hd-btn);
    padding: 0;
    border: 0;
    border-radius: var(--m-r-sm);
    color: var(--m-body);
    font-size: 14px;
    line-height: 1;
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease);
}
.m-topbar .top-links ul > li > a:hover,
.m-topbar #top-social ul > li > a:hover {
    background: var(--m-brand-tint);
    color: var(--m-brand);
}
/* The theme sizes these with ID selectors (`#top-social li a{width:40px}`,
   `.ts-icon{height:44px;line-height:44px}`), which outranked the shared icon
   button rule — the emblems ended up wider than the glyphs and pinned to the
   top of their box. Matching the ID specificity puts them on the same grid. */
/* the <li> itself is pinned to 40x44 by the theme, and the anchor inherits
   that width, so the list item has to be released first */
/* !important is used deliberately here. The theme sizes this widget through a
   chain of ID selectors (`#top-social li{height:44px}`, `#top-social li a
   {width:40px}`, `#top-social li .ts-icon{width:40px}`) that kept winning in
   practice, leaving the three emblems wider than and 6px below the glyph
   icons beside them. */
/* Both icon groups must collapse to the height of their 32px buttons. The
   theme gives each a 44px line-box; left as-is the glyph group top-aligned its
   anchors while the emblem group centred them, so the two rows sat 6px apart. */
#top-bar.m-topbar .top-links,
#top-bar.m-topbar .top-links ul,
#top-bar.m-topbar .top-links ul > li {
    height: auto !important;
    line-height: 1 !important;
}
#top-bar.m-topbar .top-links,
#top-bar.m-topbar .top-links ul { display: flex !important; align-items: center; }

#top-bar.m-topbar #top-social,
#top-bar.m-topbar #top-social ul {
    height: auto !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
}
#top-bar.m-topbar #top-social ul > li {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    float: none !important;
    overflow: visible !important;
    border: 0 !important;
}
#top-bar.m-topbar #top-social ul > li > a {
    width: var(--m-hd-btn) !important;
    height: var(--m-hd-btn) !important;
    line-height: 1 !important;
    overflow: visible !important;
}
#top-bar.m-topbar #top-social ul > li > a .ts-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    overflow: visible !important;
    font-size: 14px;
}
/* Source files are wildly different shapes (flag 23x17, coat of arms 66x69,
   anthem 16x21), so a fixed box with object-fit evens them out. */
#top-bar.m-topbar #top-social ul > li > a .ts-icon img {
    display: block;
    width: 19px;
    height: 19px;
    max-width: 19px;
    object-fit: contain;
}
.m-topbar #top-social ul > li > a .ts-text { display: none; }

/* a small breather between the two icon clusters */
.m-topbar__left .top-links + #top-social { margin-left: 12px; }

/* phone / e-mail */
.m-topbar__contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--m-hd-btn);
    padding: 0 10px;
    border-radius: var(--m-r-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--m-body);
    white-space: nowrap;
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease);
}
.m-topbar__contact i { color: var(--m-accent); font-size: 14px; }
.m-topbar__contact:hover { background: var(--m-brand-tint); color: var(--m-brand); }
.m-topbar__contact:hover i { color: var(--m-brand); }

/* --------------------------------------------------------------------------
   2.2  Main row
   -------------------------------------------------------------------------- */

#header.m-header {
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-line);
}

/* `.sticky-style-2` hard-codes `#header{height:175px}` / `#header-wrap{60px}`
   for the old two-row header. Both must size to content now. The #id is needed
   to outrank the theme's own `#header.sticky-style-2`. */
#header.m-header,
#header.m-header #header-wrap,
#header.m-header #primary-menu { height: auto; min-height: 0; }

@media (min-width: 1340px) {

    .m-header #header-wrap .m-head {
        display: flex;
        align-items: center;
        gap: 24px;
        width: 100%;
        max-width: 100%;
        padding-left: var(--m-hd-gutter);
        padding-right: var(--m-hd-gutter);
    }

    /* Source order is logo → utilities → menu, so `order` puts them back into
       the intended visual order: logo, menu, then utilities on the right. */
    .m-header #logo            { order: 1; }
    .m-header #primary-menu > .m-head > ul { order: 2; }
    .m-header .m-head__utils   { order: 3; }

    /* --- logo ------------------------------------------------------------ */
    .m-header #logo {
        float: none;
        flex: 0 0 auto;
        margin: 0;
        padding: 9px 0;
        height: auto;
        border: 0;
    }
    /* the theme's second <a> is a retina duplicate; in a flex row it rendered
       as a second logo underneath */
    .m-header #logo a.retina-logo { display: none; }
    .m-header #logo a.standard-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        height: auto;
        line-height: 1.25;
        border: 0;
    }
    .m-header #logo img { max-height: 42px; width: auto; display: block; }
    .m-header #logo a.standard-logo span {
        /* `max-width` is inert on an inline box, so this must be block or the
           100-character institute name pushes the menu onto a second row */
        display: block;
        max-width: 196px;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;
        color: var(--m-brand);
    }

    /* --- menu ------------------------------------------------------------ */
    .m-header #primary-menu > .m-head > ul {
        float: none;
        flex: 1 1 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;   /* balanced between logo and utilities */
        gap: 2px;
        margin: 0;
        padding: 0;
    }
    .m-header #primary-menu > .m-head > ul > li {
        float: none;
        margin: 0;
        border: 0;
    }
    .m-header #primary-menu > .m-head > ul > li > a {
        height: auto;
        padding: 9px 10px;
        border: 0;
        border-radius: var(--m-r-sm);
        font-size: 12px;
        line-height: 1.3;
        letter-spacing: .2px;
        white-space: nowrap;
    }

    /* --- utilities ------------------------------------------------------- */
    .m-header .m-head__utils {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 0;
        border: 0;              /* no divider rule before the language chip */
    }

    .m-header #primary-menu-trigger { display: none; }
}

/* --------------------------------------------------------------------------
   2.3  Menu item states (all breakpoints)
   -------------------------------------------------------------------------- */

#primary-menu > .m-head > ul > li > a,
#primary-menu > ul > li > a {
    position: relative;
    color: var(--m-ink);
    font-weight: 700;
    transition: color var(--m-dur) var(--m-ease),
                background-color var(--m-dur) var(--m-ease);
}

/* underline grows from the left on hover — decorative, not a border */
#primary-menu > .m-head > ul > li > a::after,
#primary-menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--m-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--m-dur) var(--m-ease);
}
#primary-menu > .m-head > ul > li:hover > a::after,
#primary-menu > .m-head > ul > li.current > a::after,
#primary-menu > ul > li:hover > a::after,
#primary-menu > ul > li.current > a::after { transform: scaleX(1); }

#primary-menu > .m-head > ul > li:hover > a,
#primary-menu > .m-head > ul > li.current > a,
#primary-menu > ul > li:hover > a,
#primary-menu > ul > li.current > a { color: var(--m-brand); }

/* --------------------------------------------------------------------------
   2.4  Utilities: language, search, and every dropdown
   -------------------------------------------------------------------------- */

.m-head__utils .languages,
.m-head__utils .languages ul,
.m-head__utils .languages ul li {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
/* #header prefix needed: a theme rule of equal class-specificity was winning
   on display/padding for this link. */
#header .m-head__utils .languages .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--m-hd-btn);
    padding: 0 9px;
    border: 0;
    border-radius: var(--m-r-sm);
    font-size: 13px;
    font-weight: 700;
    color: var(--m-ink);
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease);
}
#header .m-head__utils .languages .nav-link:hover {
    background: var(--m-brand-tint);
    color: var(--m-brand);
}

/* search trigger — a plain icon button, matching the utility bar */
.m-head__utils #top-search {
    position: relative;
    float: none;
    width: auto;
    margin: 0;
    border: 0;
    /* flex + centre so the wrapper hugs the 32px trigger; otherwise its extra
       line-height made it 37px tall and knocked the icon 3px above the chip */
    display: flex;
    align-items: center;
    line-height: 0;
}
.m-head__utils #top-search a#top-search-trigger {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--m-hd-btn);
    height: var(--m-hd-btn);
    border: 0;
    border-radius: var(--m-r-sm);
    color: var(--m-ink);
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease);
}
.m-head__utils #top-search a#top-search-trigger:hover {
    background: var(--m-brand-tint);
    color: var(--m-brand);
}
/* The theme stacks the search and close glyphs absolutely at top:0 (it swaps
   them by opacity), which left the magnifier sitting above the button's
   centre line. Centre both instead. */
.m-head__utils #top-search a#top-search-trigger i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    line-height: 1;
}

/* The theme ships the search as a full-width overlay (`width:100%!important`,
   input padded 80px right). Against a 32px button that no longer fits, and
   being absolutely positioned it still counted toward scrollWidth and pushed
   the page 35px wide. Re-cast as a right-aligned panel. */
.m-head__utils #top-search form {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: auto !important;
    right: 0 !important;
    width: min(320px, calc(100vw - 32px)) !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0;
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-sm);
    box-shadow: var(--m-shadow-lg);
    overflow: hidden;
}
.m-head__utils #top-search form input {
    width: 100%;
    box-sizing: border-box;
    height: 46px !important;
    padding: 10px 14px !important;
    border: 0 !important;
    font-size: 15px !important;
    font-weight: 400;
}

/* Every popover in the header sits at the right edge, so all of them open
   inwards — otherwise each one widens the page.

   The language menu is 160px wide inside a 52px <li>, so left-aligning it put
   its right edge 44px past the viewport: it appeared to open from the left of
   the button and vanish off the right, and it stretched the document to
   1484px. The class-only version of this rule lost to an id-prefixed theme
   rule, hence the #header / #top-bar prefixes and the !important — the
   anchoring is load-bearing here, not cosmetic. */
#header .m-head__utils .dropdown-menu,
#top-bar .m-topbar__right .dropdown-menu,
#top-bar .m-topbar__right .apperance-menu .dropdown-menu,
.m-head__utils .dropdown-menu,
.m-topbar__right .dropdown-menu,
.m-topbar__right .apperance-menu .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    transform: none;
    max-width: calc(100vw - 24px);
}

/* shared popover skin */
.m-head__utils .dropdown-menu,
.m-topbar__right .apperance-menu .dropdown-menu,
#primary-menu ul ul,
#primary-menu ul li .mega-menu-content {
    border: 1px solid var(--m-line);
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow-lg);
    padding: 6px;
    overflow: hidden;
}
.m-head__utils .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--m-r-sm);
    font-weight: 600;
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease);
}
.m-head__utils .dropdown-menu .dropdown-item:hover {
    background: var(--m-brand-tint);
    color: var(--m-brand);
}

/* submenus */
#primary-menu ul ul li a {
    border-top: 0;
    border-radius: var(--m-r-sm);
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease);
}
#primary-menu ul ul li:hover > a {
    background: var(--m-brand-tint);
    color: var(--m-brand);
}

/* --------------------------------------------------------------------------
   2.5  Tablet and phone
   -------------------------------------------------------------------------- */

@media (max-width: 1339px) {
    /* The theme's stacked header takes over here — eight long menu items
       cannot share a line with the logo below ~1340px. Only the utilities
       need repositioning, back onto the logo row. */
    .m-head { position: relative; }

    /* The theme pads each menu link 39px top and bottom, sized for a 175px
       fixed-height header. With the header now sizing to content, a wrapped
       two-row menu ballooned to ~315px; this keeps the stacked header compact. */
    #header.m-header #primary-menu > .m-head > ul > li > a {
        padding: 12px 11px;
        font-size: 12.5px;
        line-height: 1.35;
    }
    #header.m-header #logo { padding: 12px 0; }
    #header.m-header #logo img { max-height: 46px; width: auto; }

    .m-head__utils {
        position: absolute;
        top: 14px;          /* the logo row, not the middle of the stack */
        right: 14px;
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 0;
        border: 0;
        z-index: 5;
    }
}

@media (max-width: 767px) {
    /* Icons only: the full number and address do not fit a 390px bar, and the
       same address is one tap away from the envelope icon on the left. */
    .m-topbar__contact span { display: none; }
    .m-topbar__contact { padding: 0 8px; gap: 0; }
    .m-topbar .m-topbar__inner {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .m-topbar__left .top-links + #top-social { margin-left: 6px; }
    .m-topbar .top-links ul > li > a,
    .m-topbar #top-social ul > li > a,
    .m-topbar__contact { width: 30px; height: 30px; }
    .m-topbar__contact { width: auto; }
}

/* Wordmark only where there is genuinely room beside a full-width menu. */
@media (min-width: 1340px) and (max-width: 1599px) {
    .m-header #logo a.standard-logo span { display: none; }
}

/* mobile menu trigger */
#primary-menu-trigger {
    border-radius: var(--m-r-sm);
    transition: background-color var(--m-dur) var(--m-ease);
}
#primary-menu-trigger:hover { background: var(--m-brand-tint); }

/* ==========================================================================
   3. Hero slider
   --------------------------------------------------------------------------
   Was 100vh, which pushed every piece of content below the fold. A capped
   height plus a legibility scrim is the single biggest UX win on the page.
   ========================================================================== */

/* The theme's slider script writes an inline `height:auto` onto #slider and
   onto every .swiper-slide. An inline style beats a stylesheet rule, so these
   need !important — without it only min-height applied and the slide ended up
   shorter than its container, leaving a dead band under the photo. */
#slider.swiper_wrapper.full-screen,
#slider.swiper_wrapper {
    height: 72vh !important;
    min-height: 460px;
    max-height: 760px;
}
#slider .swiper-container,
#slider .swiper-parent,
#slider .swiper-wrapper { height: 100% !important; }
#slider .swiper-slide { height: 100% !important; }

#slider .swiper-slide {
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Readability scrim — the old slider put white text straight onto photos, and
   these are real event photographs with bright areas exactly where the caption
   sits, so the middle of the gradient has to carry real weight. */
#slider .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10, 17, 14, .42) 0%,
            rgba(10, 17, 14, .58) 45%,
            rgba(10, 17, 14, .84) 100%),
        radial-gradient(ellipse 70% 55% at 50% 55%,
            rgba(10, 17, 14, .38) 0%,
            rgba(10, 17, 14, 0) 75%);
    pointer-events: none;
}

#slider .swiper-slide > a { position: relative; z-index: 2; }

/* caption */
#slider .slider-caption {
    max-width: 900px;
    padding: 0 20px;
}
#slider .slider-caption h2 {
    font-size: 40px;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -.2px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    margin-bottom: 14px;
}
#slider .slider-caption p {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    opacity: .95;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* --- arrows: from flat grey squares to soft glass pills ------------------ */
#slider .slider-arrow-left,
#slider .slider-arrow-right {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: var(--m-r-pill);
    color: #fff;
    /* Always visible: hover-only arrows hide the affordance entirely on touch
       and are easy to miss on desktop. Subtle by default, solid on hover. */
    opacity: .85;
    transition: opacity var(--m-dur) var(--m-ease),
                background-color var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease);
    z-index: 5;
}
#slider .slider-arrow-left  { left: 24px; }
#slider .slider-arrow-right { right: 24px; }

#slider:hover .slider-arrow-left,
#slider:hover .slider-arrow-right { opacity: 1; }

#slider .slider-arrow-left:hover,
#slider .slider-arrow-right:hover {
    background: var(--m-accent);
    border-color: var(--m-accent);
}
#slider .slider-arrow-left:hover  { transform: translateY(-50%) translateX(-2px); }
#slider .slider-arrow-right:hover { transform: translateY(-50%) translateX(2px); }

#slider .slider-arrow-left i,
#slider .slider-arrow-right i {
    font-size: 20px;
    line-height: 1;
    margin: 0;
    color: #fff;
}

/* Arrows must stay reachable without a mouse. */
#slider .slider-arrow-left:focus-visible,
#slider .slider-arrow-right:focus-visible { opacity: 1; }

/* --- slide counter -------------------------------------------------------
   The theme builds this as a diagonal mark: a fixed 36x40 box with a 32px
   slash, `.slide-number-current` pinned absolutely top-left and
   `.slide-number-total` bottom-right. Dropping a pill around it without
   resetting those children left the digits scattered across the corner.
   Reset to a single inline "2 / 4" line. */
#slider .slide-number {
    position: absolute;
    top: auto;
    left: auto;
    right: 26px;
    bottom: 22px;
    width: auto;
    height: auto;
    padding: 6px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    text-shadow: none;
    color: #fff;
    background: rgba(12, 20, 16, .42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--m-r-pill);
    z-index: 5;
    opacity: 1;   /* the theme reveals it on hover only; the progress bar is
                     always visible, so the counter should be too */
}
#slider .slide-number-current,
#slider .slide-number-total {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: inline-block;
    line-height: 1;
    font-size: 13px;
}
#slider .slide-number span {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    opacity: .55;
    font-weight: 400;
}
#slider .slide-number-current { color: var(--m-accent); font-weight: 700; }

/* --- autoplay progress bar (added by modern.js) -------------------------- */
#slider .m-slider-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .18);
    z-index: 6;
}
#slider .m-slider-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--m-accent);
    transition: width .12s linear;
}

/* ==========================================================================
   4. Section headings
   ========================================================================== */

.heading-block h3,
.fancy-title h3,
.useful-links h4.center {
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--m-ink);
}

/* The theme draws the rule under a heading with `border-top: 2px solid #444`,
   so it has to be recoloured via border-top-color, not background. */
.heading-block:not(.noborder):not(.nobottomborder)::after {
    border-top: 3px solid var(--m-accent);
    width: 46px;
    margin-top: 22px;
    border-radius: 3px;
}

.fancy-title.title-border { border-bottom-color: var(--m-line); }

/* ==========================================================================
   4b. Quick-access category tiles + info row
   ========================================================================== */

/* Konferensiyalar / Labaratoriyalar / Maqolalar / Tajriba bazalar */
#big-category .menu-info {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r);
    padding: 26px 18px;
    height: 100%;
    box-shadow: var(--m-shadow-sm);
    transition: transform var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease),
                border-color var(--m-dur) var(--m-ease),
                background-color var(--m-dur) var(--m-ease);
}
#big-category a:hover .menu-info {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow-lg);
    border-color: transparent;
}

#big-category .menu-info i {
    font-size: 30px;
    color: var(--m-brand);
    transition: color var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease);
    display: inline-block;
}
#big-category a:hover .menu-info i {
    color: var(--m-accent);
    transform: translateY(-2px) scale(1.06);
}

#big-category .menu-title {
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--m-ink);
    letter-spacing: .1px;
}

#big-category .line { border-top-color: var(--m-line); }

/* Work time / contacts / address row */
.work-time .feature-box.fbox-bg .fbox-icon a {
    background: var(--m-brand-tint);
    border-radius: var(--m-r-pill);
    transition: background-color var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease);
}
.work-time .feature-box.fbox-bg .fbox-icon a i { color: var(--m-brand); }
.work-time .feature-box:hover .fbox-icon a {
    background: var(--m-accent);
    transform: translateY(-2px);
}
.work-time .feature-box:hover .fbox-icon a i { color: #fff; }

.work-time .feature-box h3 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--m-ink);
}
.work-time .feature-box h3 .subtitle {
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--m-body);
    text-transform: none;
    letter-spacing: 0;
}

/* ==========================================================================
   5. News grid
   --------------------------------------------------------------------------
   A plain CSS grid of equal-height cards, contained to the same width as the
   rest of the page. Each card is a flex column so the footer (date + button)
   pins to the bottom regardless of how long the title or excerpt runs.
   ========================================================================== */

.m-news { background: var(--m-surface-2); padding: 10px 0 60px; }

.m-news-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin-top: 34px;
}

.m-news-card {
    display: flex;
    flex-direction: column;
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow-sm);
    padding: 14px;
    height: 100%;
    transition: transform var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease),
                border-color var(--m-dur) var(--m-ease);
}
.m-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow-lg);
    border-color: transparent;
}

/* --- media ---------------------------------------------------------------
   A fixed ratio keeps every card's image the same height, which is what makes
   the row read as a set rather than as ragged masonry cells. */
.m-news-card__media {
    display: block;
    border-radius: var(--m-r-sm);
    overflow: hidden;
    background: var(--m-surface-2);
}
.m-news-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .5s var(--m-ease);
}
.m-news-card:hover .m-news-card__media img { transform: scale(1.05); }

/* --- body ---------------------------------------------------------------- */
.m-news-card__body {
    flex: 1 1 auto;   /* pushes the footer down → equal-height cards */
    padding: 16px 6px 0;
}

.m-news-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--m-accent-dark);
    margin-bottom: 10px;
}
.m-news-card__cat i { font-size: 13px; color: var(--m-accent); }

.m-news-card__title {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 10px;
}
.m-news-card__title a { color: var(--m-ink); }
.m-news-card__title a:hover { color: var(--m-brand); }

.m-news-card__excerpt {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--m-body);
    margin: 0;
    /* Cap the excerpt so one long entry cannot stretch its whole row. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- footer -------------------------------------------------------------- */
/* Single row: meta left, button right. No flex-wrap — at the 4-column width
   the two only just fit, and wrapping dropped the button onto its own line. */
.m-news-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 18px;
    padding: 14px 6px 4px;
    border-top: 1px dashed var(--m-line);
}

.m-news-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 12px;
    color: var(--m-muted);
    white-space: nowrap;
}
.m-news-card__meta i { color: var(--m-accent); font-size: 12.5px; }
.m-news-card__meta i + i { margin-left: 6px; }

.m-news-card__btn {
    display: inline-block;
    flex: 0 0 auto;
    padding: 8px 15px;
    border-radius: var(--m-r-pill);
    background: var(--m-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease);
}
.m-news-card__btn:hover {
    background: var(--m-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--m-shadow);
}

/* --- grid responsiveness ------------------------------------------------- */
@media (max-width: 1199px) { .m-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .m-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 575px)  { .m-news-grid { grid-template-columns: 1fr; } }

/* Legacy `.more-link` (still used elsewhere) → quiet button */
.more-link {
    display: inline-block;
    border-bottom: 0;
    padding: 7px 16px;
    border-radius: var(--m-r-pill);
    background: var(--m-accent-tint);
    color: var(--m-accent-dark);
    font-weight: 700;
    font-size: 13px;
    font-style: normal;
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease);
}
.more-link:hover {
    background: var(--m-accent);
    color: #fff;
    border-bottom: 0;
}

/* ==========================================================================
   6. Academics / team carousel
   ========================================================================== */

.academics .oc-item { padding: 4px; }

.academics .team.team-list {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r);
    padding: 18px;
    box-shadow: var(--m-shadow-sm);
    transition: transform var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease);
}
.academics .team.team-list:hover {
    transform: translateY(-3px);
    box-shadow: var(--m-shadow);
}

.academics .team-image {
    border-radius: var(--m-r-sm);
    overflow: hidden;
}
.academics .team-image img { transition: transform .5s var(--m-ease); }
.academics .team.team-list:hover .team-image img { transform: scale(1.04); }

.academics .team-title h4 {
    font-size: 17px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--m-ink);
    margin-bottom: 6px;
}
.academics .team-title span {
    font-style: normal;
    color: var(--m-body);
    font-size: 13.5px;
    line-height: 1.6;
}

/* carousel dots */
.owl-carousel .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    border-radius: var(--m-r-pill);
    background: var(--m-line);
    transition: width var(--m-dur) var(--m-ease),
                background-color var(--m-dur) var(--m-ease);
}
.owl-carousel .owl-dots .owl-dot.active span {
    width: 24px;
    background: var(--m-accent);
}

/* ==========================================================================
   7. Useful links
   ========================================================================== */

.useful-links .clients-grid li { padding: 8px; }

/* The theme draws dashed rules between cells with li::before / li::after.
   Cards replace them. */
.useful-links .clients-grid li::before,
.useful-links .clients-grid li::after { display: none; }

.useful-links .clients-grid li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 128px;
    padding: 18px;
    border: 1px solid var(--m-line);
    border-radius: var(--m-r);
    background: var(--m-surface);
    /* The theme dims these to .6; partner and state emblems read better
       closer to full strength. */
    opacity: 1;
    transition: transform var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease),
                border-color var(--m-dur) var(--m-ease);
}

/* Deliberately no grayscale filter here: these are official emblems
   (including the state coat of arms) and partner marks, which should keep
   their own colours. Depth comes from the card, not from desaturation. */
.useful-links .clients-grid li a img {
    width: auto;
    max-height: 84px;
    object-fit: contain;
    transition: transform var(--m-dur) var(--m-ease);
}
.useful-links .clients-grid li a:hover {
    transform: translateY(-3px);
    box-shadow: var(--m-shadow);
    border-color: transparent;
}
.useful-links .clients-grid li a:hover img { transform: scale(1.04); }

.useful-links .line { border-top-color: var(--m-line); }

/* ==========================================================================
   7b. Inner pages — title band, sidebar, article card, breadcrumb
   ========================================================================== */

#page-title {
    background: var(--m-surface-2);
    border-bottom: 1px solid var(--m-line);
    padding: 44px 0;
}
#page-title h1 {
    font-weight: 800;
    font-size: 30px;
    line-height: 1.28;
    letter-spacing: -.2px;
    color: var(--m-ink);
}

/* breadcrumb */
.breadcrumb {
    background: transparent;
    padding-left: 0;
    font-size: 13.5px;
}
.breadcrumb-item a { color: var(--m-accent); font-weight: 600; }
.breadcrumb-item a:hover { color: var(--m-accent-dark); }
.breadcrumb-item.active { color: var(--m-muted); }

/* sidebar list */
.sidebar-widgets-wrap .list-group {
    border-radius: var(--m-r);
    overflow: hidden;
    border: 1px solid var(--m-line);
    box-shadow: var(--m-shadow-sm);
}
.sidebar-widgets-wrap .card-header,
.sidebar-widgets-wrap .list-group .card-header {
    background: var(--m-brand-tint);
    color: var(--m-brand);
    font-weight: 800;
    font-size: 15px;
    border-bottom: 1px solid var(--m-line);
}
.sidebar-widgets-wrap .list-group-item {
    border-left: 0;
    border-right: 0;
    border-color: var(--m-line);
    position: relative;
    padding-left: 18px;
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease),
                padding-left var(--m-dur) var(--m-ease);
}
.sidebar-widgets-wrap .list-group-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--m-accent);
    transform: scaleY(0);
    transition: transform var(--m-dur) var(--m-ease);
}
.sidebar-widgets-wrap .list-group-item:hover {
    background: var(--m-surface-2);
    color: var(--m-brand);
    padding-left: 24px;
}
.sidebar-widgets-wrap .list-group-item:hover::before { transform: scaleY(1); }

/* article card */
.single-post .card,
#content .card {
    border-radius: var(--m-r);
    border: 1px solid var(--m-line);
    box-shadow: var(--m-shadow-sm);
    overflow: hidden;
}
.single-post .card > .card-header,
#content .card > .card-header {
    background: var(--m-surface-2);
    border-bottom: 1px solid var(--m-line);
    font-weight: 700;
    color: var(--m-ink);
}
.single-post .entry-content { font-size: 15.5px; line-height: 1.8; }
.single-post .entry-content a { color: var(--m-accent); }
.single-post .entry-content img { border-radius: var(--m-r-sm); height: auto; }

/* article lead image + standfirst (news/view) */
.m-article-hero {
    margin: 0 0 22px;
    border-radius: var(--m-r-sm);
    overflow: hidden;
    background: var(--m-surface-2);
}
.m-article-hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
}
.m-article-lead {
    margin: 0 0 20px;
    padding-left: 16px;
    border-left: 3px solid var(--m-accent);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--m-body);
    font-weight: 500;
}

/* person page (academic/view) */
.m-person {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 22px;
}
.m-person__photo {
    flex: 0 0 auto;
    width: 168px;
    height: 200px;
    border-radius: var(--m-r-sm);
    overflow: hidden;
    background: var(--m-surface-2);
    border: 1px solid var(--m-line);
}
.m-person__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.m-person__meta { flex: 1 1 auto; min-width: 0; }
.m-person__meta h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--m-body);
}
@media (max-width: 575px) {
    .m-person { flex-direction: column; gap: 14px; }
    .m-person__photo { width: 140px; height: 168px; }
}

.news-info { color: var(--m-muted); font-size: 13px; }
.news-info i { color: var(--m-accent); }

/* --------------------------------------------------------------------------
   List cards (all news / all posts / academics / category / search results)

   Those five pages render identical markup:

       <a class="card academic-item">
         <div class="card-header"><strong>title</strong></div>
         <div class="card-body">
           <div><div class="author-image"><div class="rounded-circle" …></div></div>
                <h4>second title</h4></div>
           <div class="entry-content"></div>
           <div class="news-info">date · views</div>
         </div>
       </a>

   The theme drew it as a title bar above a large circular avatar, which left
   two thirds of every row empty. Restyling the shared classes turns all five
   pages into horizontal media cards at once, with no markup changes.

   The thumbnail has to be positioned absolutely into a reserved left gutter:
   it lives inside .card-body, a level below the title, so no amount of flex or
   grid on the card itself can bring the two onto the same row.
   -------------------------------------------------------------------------- */

#content .card.academic-item,
.single-post .card.academic-item {
    position: relative;
    display: block;
    min-height: 152px;
    padding: 18px 22px 18px 218px;
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px !important;
    transition: transform var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease),
                border-color var(--m-dur) var(--m-ease);
}
#content .card.academic-item:hover,
.single-post .card.academic-item:hover {
    transform: translateY(-2px);
    border-color: var(--m-accent);
    box-shadow: var(--m-shadow);
}

/* thumbnail */
#content .card.academic-item .author-image,
.single-post .card.academic-item .author-image {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 178px;
    height: calc(100% - 36px);
    min-height: 116px;
    margin: 0;
    padding: 0;
    float: none;
    overflow: hidden;
    border-radius: 10px;
    background: var(--m-surface-2);
}
/* Two variants exist in the views: a <div class="rounded-circle"> carrying a
   background-image, and an <img class="rounded-circle">. One rule covers both.
   Bootstrap sets .rounded-circle{border-radius:50%!important}, so squaring it
   off needs !important too. */
#content .card.academic-item .author-image > *,
.single-post .card.academic-item .author-image > * {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .45s var(--m-ease);
}
#content .card.academic-item:hover .author-image > *,
.single-post .card.academic-item:hover .author-image > * { transform: scale(1.05); }

/* The <img> variant is the one the people/sector pages use, and those are
   portraits — anchoring to the top keeps foreheads out of the crop. News rows
   use the background-image variant and stay centred. */
#content .card.academic-item .author-image > img,
.single-post .card.academic-item .author-image > img { object-position: center top; }

/* title */
#content .card.academic-item > .card-header,
.single-post .card.academic-item > .card-header {
    background: none;
    border: 0;
    padding: 0 0 8px;
    font-size: 17px;
    line-height: 1.36;
    letter-spacing: -.1px;
    color: var(--m-ink);
    transition: color var(--m-dur) var(--m-ease);
}
#content .card.academic-item > .card-header strong,
.single-post .card.academic-item > .card-header strong { font-weight: 700; }
#content .card.academic-item:hover > .card-header,
.single-post .card.academic-item:hover > .card-header { color: var(--m-brand); }

#content .card.academic-item > .card-body,
.single-post .card.academic-item > .card-body { padding: 0; }

/* second title, used as the excerpt */
#content .card.academic-item h4,
.single-post .card.academic-item h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--m-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Empty in most rows — collapse it so it cannot add phantom height. */
#content .card.academic-item .entry-content:empty,
.single-post .card.academic-item .entry-content:empty { display: none; }

#content .card.academic-item .news-info,
.single-post .card.academic-item .news-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--m-muted);
}
#content .card.academic-item .news-info i,
.single-post .card.academic-item .news-info i { margin-left: 8px; }
#content .card.academic-item .news-info i:first-child,
.single-post .card.academic-item .news-info i:first-child { margin-left: 0; }

@media (max-width: 767px) {
    #content .card.academic-item,
    .single-post .card.academic-item {
        padding: 0 0 16px;
        min-height: 0;
    }
    #content .card.academic-item .author-image,
    .single-post .card.academic-item .author-image {
        position: static;
        width: 100%;
        height: 190px;
        border-radius: 0;
        margin-bottom: 14px;
    }
    #content .card.academic-item .author-image > *,
    .single-post .card.academic-item .author-image > * { border-radius: 0 !important; }
    #content .card.academic-item > .card-header,
    .single-post .card.academic-item > .card-header { padding: 0 16px 8px; }
    #content .card.academic-item > .card-body,
    .single-post .card.academic-item > .card-body { padding: 0 16px; }
}

/* pagination */
#content .pagination { gap: 6px; flex-wrap: wrap; }
#content .pagination .page-item .page-link,
#content .pagination li a,
#content .pagination li span {
    border-radius: var(--m-r-sm);
    border: 1px solid var(--m-line);
    color: var(--m-body);
    font-weight: 600;
    min-width: 38px;
    text-align: center;
    transition: background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease),
                border-color var(--m-dur) var(--m-ease);
}
#content .pagination li a:hover {
    background: var(--m-accent-tint);
    border-color: var(--m-accent);
    color: var(--m-brand);
}
#content .pagination .active a,
#content .pagination .active span,
#content .pagination .page-item.active .page-link {
    background: var(--m-accent);
    border-color: var(--m-accent);
    color: #fff;
}

/* ==========================================================================
   8. Buttons + forms
   ========================================================================== */

.button,
.btn {
    border-radius: var(--m-r-pill);
    font-weight: 700;
    letter-spacing: .2px;
    transition: transform var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease),
                background-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease);
}
.button:hover,
.btn:hover { transform: translateY(-1px); box-shadow: var(--m-shadow); }
.button:active,
.btn:active { transform: translateY(0); }

.btn-info,
.btn-info:focus {
    background-color: var(--m-accent);
    border-color: var(--m-accent);
    color: #fff;
}
.btn-info:hover {
    background-color: var(--m-accent-dark);
    border-color: var(--m-accent-dark);
}

.sm-form-control,
.form-control,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
    border-radius: var(--m-r-sm);
    border-color: var(--m-line);
    transition: border-color var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease);
}
.sm-form-control:focus,
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 3px var(--m-accent-tint);
    outline: none;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

#footer .footer-widgets-wrap a { transition: color var(--m-dur) var(--m-ease); }
#footer .footer-widgets-wrap a:hover { color: var(--m-accent); }

#footer .social-icon {
    border-radius: var(--m-r-sm);
    transition: transform var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease);
}
#footer .social-icon:hover {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow);
}

#footer iframe,
#footer #map,
#footer .gmap { border-radius: var(--m-r); overflow: hidden; }

/* ==========================================================================
   10. Back-to-top (element injected by modern.js)
   ========================================================================== */

#m-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--m-r-pill);
    background: var(--m-brand);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--m-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease),
                visibility var(--m-dur) var(--m-ease),
                background-color var(--m-dur) var(--m-ease);
    z-index: 400;
}
#m-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#m-to-top:hover { background: var(--m-brand-dark); }

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 991px) {
    #slider.swiper_wrapper.full-screen,
    #slider.swiper_wrapper { height: 62vh !important; min-height: 380px; }
    #slider .slider-caption h2 { font-size: 30px; }
    #slider .slider-caption p  { font-size: 15.5px; }
}

@media (max-width: 767px) {
    #slider.swiper_wrapper.full-screen,
    #slider.swiper_wrapper { height: 56vh !important; min-height: 320px; }
    #slider .slider-caption h2 { font-size: 21px; line-height: 1.32; }
    #slider .slider-caption p  { font-size: 14.5px; }

    /* Keep the caption clear of the arrows, which sit at the vertical middle
       exactly where the centred caption text is. */
    #slider .slider-caption { padding: 0 58px; }

    #slider .slider-arrow-left,
    #slider .slider-arrow-right {
        opacity: 1;   /* no hover on touch — the affordance must be permanent */
        width: 40px;
        height: 40px;
    }
    #slider .slider-arrow-left  { left: 8px; }
    #slider .slider-arrow-right { right: 8px; }
    #slider .slider-arrow-left i,
    #slider .slider-arrow-right i { font-size: 17px; }

    #slider .slide-number { right: 12px; bottom: 14px; font-size: 12px; }

    #m-to-top { right: 14px; bottom: 14px; }
}

/* ==========================================================================
   13. Motion / accessibility preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .m-reveal { opacity: 1; transform: none; }
}

/* The accessibility ("Maxsus imkoniyatlar") menu puts one of these classes on
   <html>: blackAndWhite, blackAndWhiteInvert, or "photo-control bg-control".
   The first two are whole-page filters and need nothing from us beyond calmer
   text shadows. */
html.blackAndWhite #slider .slider-caption h2,
html.blackAndWhite #slider .slider-caption p,
html.blackAndWhiteInvert #slider .slider-caption h2,
html.blackAndWhiteInvert #slider .slider-caption p { text-shadow: none; }

/* The no-photo mode strips background images from every div, which used to
   leave the slider's white caption text sitting on nothing. The scrim is a
   pseudo-element, so it survives that rule and keeps the text readable —
   flatten it to a solid wash so it reads as an intentional panel. */
html.bg-control #slider .swiper-slide::after {
    background: rgba(10, 17, 14, .82);
}