/* ============================================================================
   avia-biletebi.ge — design layer
   Loaded after app.css (the vendor Bootstrap 3 build). Everything here is ours;
   app.css should not be edited by hand.

   What this file fixes, in order of impact:
   1. Reading measure. Prose ran the full 1140px container at 14px — about 150
      characters per line. Prose is now capped at 74ch; tables and the search
      widget stay wide.
   2. Type size. 14px/1.43 was small for Georgian script; body is 17px/1.75.
   3. Heading scale. H2 was 16px while H3 was 19px — the hierarchy was inverted.
   4. Heading legibility. bpg_mrgvlovani_caps renders every heading in capitals,
      which is slow to read in long Georgian headings. Caps are kept for the H1
      and the logo, where they carry the brand; H2/H3 use the readable face.
   5. Colour. Everything was #333 on white with no accent, so nothing guided the
      eye. Headings are navy, body is a softer near-black.
   ========================================================================= */

:root{
  --ink:#1f2430;          /* body text */
  --ink-soft:#4a5160;     /* secondary text */
  --navy:#22345c;         /* headings */
  --brand:#3b5998;        /* existing brand blue, kept */
  --brand-dark:#2a4170;
  --link:#1d4ed8;
  --link-hover:#12308f;
  --rule:#e3e7ee;
  --surface:#f6f8fb;
  --surface-line:#dde4ef;
  --measure:720px;      /* ~74 characters at 17px; a fixed value so 26px headings
                           cap at the same column as the prose, which "ch" would not */
}

/* ---------- base ----------
   app.css declares body{font-family:'bpg_rioni_arialregular'} with no fallback,
   so every Latin character the Georgian face lacks — "Wizz Air", "ETIAS", digits
   in some contexts — fell through to the browser's default serif. The stack
   below keeps Georgian in bpg_rioni and hands Latin to a matching sans. */
body{
  font-family:'bpg_rioni_arialregular',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- reading measure ----------
   Prose is capped; tables, the widget and the CTA keep the full column. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.faq-block > h3,
.faq-block > p{
  max-width:var(--measure);
}
/* The search widget spans the full container; everything after it reads in one
   centred column, so the page is not weighted to the left on wide screens. */
@media (min-width:992px){
  .page-content > *:not(.tp-widget),
  .page-content > .table-responsive,
  .page-content .cta-box,
  .page-content .faq-block,
  .page-content .hub-links{margin-left:auto;margin-right:auto}
  .page-content > h1,h1.header{margin-left:auto;margin-right:auto}
  .page-content > .table-responsive{max-width:900px}
}

/* ---------- headings ---------- */
.page-content h1,
h1.header{
  font-family:'bpg_mrgvlovani_caps_2010Rg',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:34px !important;   /* app.css sets h1{font-size:25px!important} */
  line-height:1.25;
  color:var(--navy);
  margin-bottom:28px;
  max-width:var(--measure);
  letter-spacing:-.01em;
}
.page-content h2,
.faq-block h2{
  font-family:'bpg_rioni_arialregular',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-weight:700;
  font-size:26px !important;   /* app.css sets h2{font-size:16px!important} */
  line-height:1.35;
  color:var(--navy);
  margin-top:52px;
  margin-bottom:16px;
}
.page-content h3,
.faq-block h3{
  font-family:'bpg_rioni_arialregular',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.4;
  color:var(--navy);
  margin-top:34px;
  margin-bottom:12px;
}
/* A heading that opens a section should not collide with the block above it. */
.page-content > h2:first-of-type{margin-top:40px}

/* ---------- prose ---------- */
.page-content p{margin-bottom:20px}
.page-content ul,.page-content ol{margin-bottom:24px;padding-left:24px}
.page-content li{margin-bottom:10px;line-height:1.7}
.page-content li > strong:first-child{color:var(--navy)}
.page-content strong{font-weight:700;color:var(--ink)}

/* ---------- links ---------- */
.main-content a:not(.btn):not(.label),
.page-content a:not(.btn):not(.label){
  color:var(--link);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.main-content a:not(.btn):hover,.main-content a:not(.btn):focus,
.page-content a:not(.btn):hover,.page-content a:not(.btn):focus{color:var(--link-hover)}

/* ---------- tables ---------- */
.page-content .table-responsive{
  /* Slightly wider than the prose column so multi-column tables breathe, but not
     the full 1170px container — at that width three short columns read as scattered. */
  max-width:900px;
  margin:28px auto 32px;
  border:1px solid var(--rule);
  border-radius:8px;
  overflow-x:auto;
}
.page-content .table{
  margin-bottom:0;
  font-size:15.5px;
  line-height:1.6;
  border:0;
}
.page-content .table > thead > tr > th{
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:14.5px;
  border:0;
  border-right:1px solid rgba(255,255,255,.14);
  padding:12px 14px;
  vertical-align:middle;
  white-space:normal;
}
.page-content .table > thead > tr > th:last-child{border-right:0}
.page-content .table > tbody > tr > td{
  border:0;
  border-top:1px solid var(--rule);
  padding:11px 14px;
  vertical-align:top;
}
.page-content .table > tbody > tr:first-child > td{border-top:0}
.page-content .table-striped > tbody > tr:nth-of-type(odd){background:#fafbfd}
.page-content .table > tbody > tr:hover{background:#f2f6fc}
.page-content .table td:first-child{font-weight:600;color:var(--navy)}

/* ---------- search widget ----------
   The tp.media widget loads asynchronously, so its space must be reserved or the
   whole page jumps when it arrives. The heights below are measured, not guessed:
   the widget re-lays-out at its own viewport breakpoints (roughly 480, 700, 860
   and 1200), and the homepage variant is 30px taller because it also offers
   hotels. Reserving too much leaves a visible hole; too little brings the jump
   back — re-measure if the widget ever changes. */
.tp-widget{margin:0 0 36px;min-height:466px}
.comp-list.tp-widget{min-height:437px}
@media (min-width:480px){.tp-widget{min-height:390px}.comp-list.tp-widget{min-height:361px}}
@media (min-width:700px){.tp-widget{min-height:316px}.comp-list.tp-widget{min-height:286px}}
@media (min-width:860px){.tp-widget{min-height:240px}.comp-list.tp-widget{min-height:210px}}
@media (min-width:1200px){.tp-widget{min-height:165px}.comp-list.tp-widget{min-height:135px}}

/* ---------- call to action ---------- */
.cta-box{
  max-width:var(--measure);
  margin:44px 0;
  padding:28px 32px;
  background:linear-gradient(180deg,#f4f7fd 0%,#eaf0fa 100%);
  border:1px solid var(--surface-line);
  border-left:4px solid var(--brand);
  border-radius:10px;
  box-shadow:none;
  text-align:left;
}
.cta-box p{font-size:18px;line-height:1.55;margin-bottom:18px;color:var(--navy)}
.cta-box .btn{
  font-family:'bpg_rioni_arialregular',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  padding:13px 26px;
  border-radius:8px;
  background:var(--brand);
  border-color:var(--brand);
  box-shadow:0 1px 2px rgba(34,52,92,.2);
}
.cta-box .btn:hover,.cta-box .btn:focus{background:var(--brand-dark);border-color:var(--brand-dark)}

/* ---------- FAQ ---------- */
.faq-block{
  max-width:var(--measure);
  margin-top:56px;
  padding-top:8px;
  border-top:1px solid var(--rule);
}
.faq-block h2{margin-top:32px}
.faq-block h3{
  font-size:19px;
  margin-top:0;
  margin-bottom:8px;
  padding-left:22px;
  position:relative;
}
.faq-block h3:before{
  content:"?";
  position:absolute;
  left:0;
  top:0;
  color:var(--brand);
  font-weight:700;
}
.faq-block p{
  margin:0 0 4px;
  padding-left:22px;
  color:var(--ink-soft);
}
.faq-block h3 + p{padding-bottom:20px;border-bottom:1px solid var(--rule);margin-bottom:22px}
.faq-block h3 + p:last-child{border-bottom:0}

/* ---------- hub links on the homepage ---------- */
.hub-links{
  max-width:var(--measure);
  list-style:none;
  padding:0;
  margin:24px 0 8px;
}
.hub-links li{margin:0 0 2px}
.hub-links a{
  display:block;
  padding:12px 16px;
  border:1px solid var(--rule);
  border-radius:8px;
  margin-bottom:8px;
  font-size:16px;
  text-decoration:none !important;
  background:#fff;
  transition:background .12s ease,border-color .12s ease;
}
.hub-links a:hover{background:var(--surface);border-color:var(--brand)}

/* ---------- navbar ---------- */
.navbar-inverse{background:var(--brand);border-color:var(--brand)}
.navbar-inverse .navbar-nav > li > a{
  color:#e8eefc;
  font-size:14px;
  padding-top:16px;
  padding-bottom:16px;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus{color:#fff;background:rgba(255,255,255,.10)}
.av-logo{margin:14px 0}
.av-logo a{
  font-family:'bpg_mrgvlovani_caps_2010Rg',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:23px;
  color:#fff !important;
  letter-spacing:.01em;
  text-decoration:none !important;
}
.navbar-inverse .navbar-toggle{border-color:rgba(255,255,255,.4)}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background:rgba(255,255,255,.12)}

/* Bootstrap 3 floats the logo left and the menu right; when they stop fitting the
   menu drops onto its own row, so the bar was 109px tall from 993px up and grew to
   161px around 1100px once the Georgian webfont loaded — wide enough to cover the
   H1 and to register as a layout shift. Laying the bar out as one flex row keeps it
   a single 59px line at every desktop width, so the content offset below is stable. */
@media (min-width:1024px){
  .navbar-inverse > .container{display:flex;align-items:center;gap:18px}
  .navbar-inverse .navbar-header{float:none;flex:0 0 auto;margin:0}
  .navbar-inverse .navbar-collapse{
    float:none;flex:1 1 auto;padding:0;border:0;box-shadow:none;
    display:flex !important;justify-content:flex-end;
  }
  .navbar-inverse .navbar-nav{float:none;display:flex;flex-wrap:nowrap;margin:0}
  .navbar-inverse .navbar-nav > li{float:none}
  .navbar-inverse .navbar-nav > li > a{white-space:nowrap;padding-left:11px;padding-right:11px}
  .av-logo{margin:0}
  .av-logo a{font-size:21px;white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1199px){
  .navbar-inverse .navbar-nav > li > a{font-size:13px;padding-left:8px;padding-right:8px}
  .av-logo a{font-size:18px}
  /* Seven items plus the logo do not fit a 750px container. The Avia.ge link is
     the one nav item that leaves the site, so it is the one to drop here; it stays
     in the footer. */
  .navbar-inverse .navbar-nav > li.nav-external{display:none}
}

/* ---------- footer ---------- */
.footer1{background:var(--surface);border-top:1px solid var(--surface-line);padding:36px 0 20px;margin-top:64px}
.footer-links{gap:8px 32px}
.footer-links-col h3{
  font-family:'bpg_rioni_arialregular',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--navy);
  margin-bottom:10px;
}
.footer-links-col a{color:var(--ink-soft);font-size:14px;padding:5px 0}
.footer-links-col a:hover{color:var(--brand)}
.footer2{background:var(--brand);padding:18px 0 28px}
.footer-main-menu ul li a{font-size:14px}
.copy{font-size:13px;opacity:.85}

/* ---------- small screens ---------- */
@media (max-width:767px){
  body{font-size:16.5px;line-height:1.72}
  .page-content h1,h1.header{font-size:26px !important;margin-top:76px;margin-bottom:20px;max-width:none}
  .page-content h2,.faq-block h2{font-size:22px !important;margin-top:40px}
  .page-content h3,.faq-block h3{font-size:18.5px;margin-top:28px}
  .container{padding-left:16px;padding-right:16px}
  .av-logo{margin:12px 0}
  .av-logo a{font-size:19px}
  .cta-box{padding:22px 20px;margin:32px 0}
  .cta-box .btn{display:block;width:100%;text-align:center}
  .page-content .table{font-size:14.5px}
  .page-content .table > thead > tr > th,
  .page-content .table > tbody > tr > td{padding:10px 11px}
  .footer1{padding:28px 0 12px;margin-top:48px}
}

/* The fixed navbar is 59px tall below 993px and 109px above it; keep the first
   heading clear of it without leaving a hole on phones. */
/* One 53px bar at every desktop width, so one offset. */
@media (min-width:768px){
  h1.header{margin-top:96px}
}

/* ---------- collapsed menu up to 991px ----------
   Bootstrap 3 expands the menu at 768px, but six Georgian labels plus the logo and
   the WhatsApp button do not fit a 750px container — the bar grew to two rows on
   tablets. Keep the hamburger until the flex bar takes over at 1024px. */
@media (max-width:1023px){
  .navbar-inverse .navbar-header{float:none}
  .navbar-inverse .navbar-toggle{display:block;margin-right:0}
  .navbar-inverse .navbar-collapse{
    border-top:1px solid rgba(255,255,255,.15);
    margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px;
  }
  .navbar-inverse .navbar-collapse.collapse{display:none !important}
  .navbar-inverse .navbar-collapse.collapse.in{display:block !important}
  .navbar-inverse .navbar-nav{float:none !important;margin:8px -15px}
  .navbar-inverse .navbar-nav > li{float:none}
  .navbar-inverse .navbar-nav > li > a{padding-top:11px;padding-bottom:11px}
  /* The button in the collapsed list would be a second copy of the compact one. */
  .navbar-inverse .navbar-nav > li.nav-wa{display:none}
}
/* Above 1024px the compact button in the header is redundant. */
@media (min-width:1024px){
  .nav-wa-compact{display:none}
}
@media (max-width:1023px){
  .nav-wa-compact{float:right;margin:9px 12px 0 0}
  .nav-wa-compact .wa-nav{padding:7px 13px;font-size:13.5px;width:auto}
}

/* ---------- WhatsApp contact button ----------
   Replaces the plain phone link that used to sit in the navbar. WhatsApp's brand
   green (#25D366) gives white text only 1.98:1 and the mid green #128C7E only
   4.14:1 — both fail WCAG AA. #0F7A6D is the lightest shade of the same family
   that clears it, at 5.22:1; hover goes to the brand's darkest green. */
.wa-icon{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.18em}

/* in the top bar */
.navbar-inverse .navbar-nav > li.nav-wa{display:flex;align-items:center;margin-left:6px}
.wa-nav{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:#0F7A6D;color:#fff !important;
  font-size:13.5px;font-weight:700;line-height:1.2;
  text-decoration:none !important;white-space:nowrap;
  transition:background .12s ease;
}
.wa-nav:hover,.wa-nav:focus{background:#075E54;color:#fff !important}

/* inside page content and the footer */
.wa-btn{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 22px;border-radius:10px;
  background:#0F7A6D;color:#fff !important;
  font-size:16px;font-weight:700;line-height:1.3;
  text-decoration:none !important;
  box-shadow:0 1px 2px rgba(7,94,84,.25);
  transition:background .12s ease;
}
.wa-btn:hover,.wa-btn:focus{background:#075E54;color:#fff !important}
.wa-btn .wa-num{font-weight:400;font-size:15px}
/* The footer's last lines must clear the floating button in the corner. Below
   1024px the copyright and the footer menu sit where the button lands, so they
   need more room than the wide layout does. */
.footer2{padding-bottom:36px}
@media (min-width:1024px){.footer2{padding-bottom:84px}}
/* Between 1024 and ~1300px the last footer link lands under the button; keep the
   menu clear of the right edge there. */
@media (min-width:1024px) and (max-width:1339px){.footer-main-menu{padding-right:76px}}
@media (max-width:1023px){.footer2{padding-bottom:92px}}

/* The CTA pairs the search button with WhatsApp. */
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

@media (max-width:767px){
  .navbar-inverse .navbar-nav > li.nav-wa{margin:8px 0 4px}
  .wa-nav{width:100%;justify-content:center;padding:11px 14px;font-size:15px}
  .wa-btn{width:100%;justify-content:center;text-align:center}
  .footer-wa{margin:14px 0 8px}
}

/* ---------- floating WhatsApp button ----------
   Fixed bottom-right, so it stays reachable at any scroll position. It is the
   only always-on contact point now, which is why the compact copy was taken out
   of the top bar. On a pointer device it widens to show a label on hover; on
   touch it stays a circle so it covers as little of the page as possible. */
.wa-float{
  position:fixed;
  right:20px;
  bottom:20px;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  z-index:1040;                 /* above content, below the 1050 modal layer */
  display:inline-flex;
  align-items:center;
  gap:0;
  width:58px;
  height:58px;
  padding:0;
  border-radius:999px;
  background:#0F7A6D;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 6px 18px rgba(7,94,84,.34),0 2px 6px rgba(0,0,0,.14);
  overflow:hidden;
  justify-content:center;
  transition:width .18s ease,gap .18s ease,padding .18s ease,background .15s ease,box-shadow .15s ease;
}
.wa-float .wa-icon{width:28px;height:28px;flex:0 0 auto}
.wa-float-label{
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  font-size:15px;
  font-weight:700;
  transition:max-width .18s ease,opacity .14s ease;
}
.wa-float:hover,.wa-float:focus-visible{background:#075E54;color:#fff !important;box-shadow:0 8px 22px rgba(7,94,84,.42),0 2px 6px rgba(0,0,0,.16)}
@media (hover:hover) and (pointer:fine){
  .wa-float:hover,.wa-float:focus-visible{width:auto;gap:10px;padding:0 22px}
  .wa-float:hover .wa-float-label,.wa-float:focus-visible .wa-float-label{max-width:160px;opacity:1}
}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* A gentle pulse the first time it appears, then still. Skipped when the visitor
   asks for reduced motion. */
@keyframes wa-pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.wa-float{animation:wa-pop .32s ease-out both;animation-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .wa-float{animation:none;transition:background .15s ease}
  .wa-float:hover,.wa-float:focus-visible{width:58px;gap:0;padding:0}
  .wa-float:hover .wa-float-label,.wa-float:focus-visible .wa-float-label{max-width:0;opacity:0}
}

@media (max-width:767px){
  .wa-float{right:16px;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));width:54px;height:54px}
  .wa-float .wa-icon{width:26px;height:26px}
}