/* -------------------------------------------

Name:       Avensora Company Site — Responsive overrides
Version:    1.0

Loaded AFTER style.css, so at equal specificity these rules win.
This file only fills the gaps that style.css leaves; the existing
breakpoints in style.css (1400 / 1200 / 992 / 768 / 576) are left
untouched.

TABLE OF CONTENTS
  1. Standard desktop (1401–1920px) — base type was tuned for very
     large monitors and reads oversized on a normal 1080p/1440p screen.
  2. Tablets / small laptops (≤1200px) — stop horizontal overflow and
     un-cramp the multi-column grids.

------------------------------------------- */


/* ============================================================
   1. STANDARD DESKTOP  (1401px – 1920px)
   ------------------------------------------------------------
   style.css keeps the full base type scale for any screen wider
   than 1400px, so a regular 1920px monitor inherits the sizes
   meant for an oversized display. Scale the headings down across
   this band only — screens wider than 1920px keep the original
   "big screen" look.
   ============================================================ */
@media screen and (min-width: 1401px) and (max-width: 1920px) {

  /* ~20% smaller than the previous pass across the board */
  html,
  body {
    font-size: 13px;   /* base 16 — scales body copy / suptitles */
  }

  h1,
  .avn-h1 {
    font-size: 48px;   /* base 86 */
  }

  h2,
  .avn-h2 {
    font-size: 38px;   /* base 68 */
  }

  h3,
  .avn-h3 {
    font-size: 27px;   /* base 42 */
  }

  h4,
  .avn-h4 {
    font-size: 20px;   /* base 28 */
  }

  h5,
  .avn-h5 {
    font-size: 16px;   /* base 20 */
  }

  h6,
  .avn-h6 {
    font-size: 14px;   /* base 18 */
  }

  .avn-text-xl {
    font-size: 16px;   /* base 22 */
  }

  .avn-text-lg {
    font-size: 14px;   /* base 18 */
  }

  /* --- tighter vertical rhythm ---
     the 120/90px section paddings leave too much air on a 1080p
     screen; pull them in (large monitors >1920px keep the originals). */
  .avn-p-120-120 { padding-top: 80px; padding-bottom: 80px; }
  .avn-p-120-90  { padding-top: 80px; padding-bottom: 60px; }
  .avn-p-120-60  { padding-top: 80px; padding-bottom: 45px; }
  .avn-p-120-30  { padding-top: 80px; padding-bottom: 30px; }
  .avn-p-120-0   { padding-top: 80px; }
  .avn-p-0-120   { padding-bottom: 80px; }
  .avn-p-90-90   { padding-top: 60px; padding-bottom: 60px; }
  .avn-p-90-120  { padding-top: 60px; padding-bottom: 80px; }
  .avn-p-0-90    { padding-bottom: 60px; }

  /* hero / banner breathing room */
  .avn-banner .avn-banner-content { padding-bottom: 80px; }

  /* trim the largest margin-bottom helpers used between blocks */
  .avn-mb-120 { margin-bottom: 80px; }
  .avn-mb-90  { margin-bottom: 60px; }
}


/* ============================================================
   1b. FIX: LOGO ↔ HERO HEADING COLLISION  (1201–2240px)
   ------------------------------------------------------------
   The logo stays where it is. The hero text is bottom-aligned, so
   making the heading smaller and pulling the block together (less
   space under the title/paragraph) lets the whole block settle
   lower — dropping clear of the logo. Screens wider than ~2240px
   already clear it, so they keep the original hero untouched.
   ============================================================ */
@media screen and (min-width: 1201px) and (max-width: 2240px) {

  .avn-banner h1,
  .avn-banner .avn-h1 {
    font-size: 64px;     /* base 86 — smaller so it sits lower */
    line-height: 110%;   /* tuck the two lines closer together */
  }

  /* group the title, paragraph and buttons tighter */
  .avn-banner .avn-mb-60 {
    margin-bottom: 28px; /* was 60 */
  }

  /* drop the whole block down so it clears the corner logo */
  .avn-banner .avn-banner-content {
    padding-bottom: 70px;
  }
}


/* ============================================================
   1c. LOGO SIZE  (≥1201px)
   ------------------------------------------------------------
   Enlarge the corner wordmark. The hero block now sits lower, so
   there's room for a bigger logo without re-introducing the clash.
   ============================================================ */
@media screen and (min-width: 1201px) {

  .avn-frame .avn-frame-top .avn-logo img {
    max-width: 460px;   /* was 360 */
  }
}


/* ============================================================
   1d. STICKY HEADER LOGO
   ------------------------------------------------------------
   The logo in the sticky nav bar (shown on scroll) is sized by
   height. Enlarge it. style.css sets it !important, so we must
   too. The sticky bar is 64px tall, so this still fits cleanly.
   ============================================================ */
.avn-sticky-nav .avn-logo img {
  height: 40px !important;   /* was 28px */
}


/* ============================================================
   1e. MENU OVERLAY — keep the right-hand panel visible
   ------------------------------------------------------------
   style.css hides .avn-menu-right-frame (Projects / Useful links /
   contact details) on screens narrower than 1200px OR shorter than
   800px. The short-height rule is why it disappears on a 1080p
   monitor at 125–150% scaling. Show it on every screen, and let it
   flow naturally where the fixed 100vh / bottom-aligned layout
   would otherwise clip it.
   ============================================================ */
/* Always render the panel (beats both the max-width:1200 and the
   max-height:800 hide rules). */
.avn-menu-frame .avn-menu-right-frame {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

/* On the affected screens (narrow OR short) the left menu's forced
   100vh height and the panel's bottom-pin throw the two columns out
   of alignment. Re-flow the whole overlay: centre it, let each part
   size to its content, and allow it to scroll if it can't fit. The
   tall/wide desktop layout is left exactly as-is. */
@media screen and (max-width: 1200px), screen and (max-height: 800px) {

  .avn-menu-frame .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding-top: 110px;   /* clear the top logo / close bar */
    padding-bottom: 50px;
  }

  .avn-menu-frame .avn-menu-content {
    width: 100%;
  }

  .avn-menu-frame .avn-menu-content > .row {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  /* stop the left menu from claiming the full viewport height */
  .avn-menu-frame .avn-main-menu {
    height: auto;
  }

  /* panel sizes to its content instead of a bottom-pinned 100vh */
  .avn-menu-frame .avn-menu-right-frame {
    height: auto;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  .avn-menu-frame .avn-menu-right-frame .avn-menu-right {
    padding-bottom: 0;
  }

  /* tighten the panel's internal gaps so it fits shorter screens */
  .avn-menu-frame .avn-menu-right .avn-mb-60 {
    margin-bottom: 28px;
  }
}

/* Stacked (≤1200px): panel drops below the main menu — remove the
   column divider/indent and give it a little breathing room. */
@media screen and (max-width: 1200px) {

  .avn-menu-frame .avn-menu-right-frame {
    padding-left: 0;
    border-left: none;
    margin-top: 40px;
  }
}


/* ============================================================
   2. TABLETS / SMALL LAPTOPS  (≤1200px)
   ------------------------------------------------------------
   Horizontal-overflow safety net + tighter chrome so content
   stops touching the edges and 100vw children stop forcing a
   sideways scrollbar.
   ============================================================ */
@media screen and (max-width: 1200px) {

  /* Belt-and-braces against sideways scroll (.avn-wrapper already
     clips, but inner 100vw blocks can still leak on Windows where
     the scrollbar eats into the viewport width). */
  html,
  body {
    overflow-x: hidden;
  }

  /* Media never wider than its column. (max-width only — leaves
     object-fit cards that set their own height alone.) */
  img,
  svg,
  video {
    max-width: 100%;
  }

  /* The fixed UI frame eats a lot of edge space at desktop sizes. */
  .avn-frame {
    padding: 30px 30px 40px 30px;
  }
}


/* ------------------------------------------------------------
   2a. Un-cramp the 4-up service cards
   On the homepage the service grid is col-lg-3 (4 across) from
   992px up, which squeezes the cards on small laptops/tablets.
   Drop to 2-up until the container is wide enough to breathe.
   ------------------------------------------------------------ */
@media screen and (min-width: 992px) and (max-width: 1200px) {

  .avn-services-grid-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
}