/* ==========================================================================================================
   FIA public website - compatibility layer for the original page markup
   Loaded (by views/layouts/site.php) only on pages whose HTML still uses the original Bootstrap-3 style grid, the
   "services_listing" cards and the wing-page dialogs. It maps those classes onto the design tokens of css/fia.css so that
   every page shares one visual language. New templates should use the fia-* components and never need this file.
   ========================================================================================================== */

/* ---------------------------------------------------------------------------------------- grid (flexbox) */
.fia-site .container { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.fia-site .container .container, .fia-site .container .fia-wrap, .fia-site .fia-wrap .container { max-width: none; padding-inline: 0; }
.fia-site .container::after, .fia-site .clearfix::after { content: ""; display: table; clear: both; }
.fia-site .row { display: flex; flex-wrap: wrap; margin-inline: -12px; row-gap: 24px; }
.fia-site .row > [class*="col-"] { flex: 0 0 100%; min-width: 0; max-width: 100%; padding-inline: 12px; }
.fia-site .padding0, .fia-site .row > [class*="col-"].padding0 { padding-inline: 0; }
@media (min-width: 768px) {
    .fia-site .row > .col-sm-6 { flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 992px) {
    .fia-site .row > .col-lg-1  { flex-basis: 8.3333%;  max-width: 8.3333%; }
    .fia-site .row > .col-lg-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
    .fia-site .row > .col-lg-3  { flex-basis: 25%;      max-width: 25%; }
    .fia-site .row > .col-lg-4, .fia-site .row > .col-md-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
    .fia-site .row > .col-lg-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
    .fia-site .row > .col-lg-6  { flex-basis: 50%;      max-width: 50%; }
    .fia-site .row > .col-lg-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
    .fia-site .row > .col-lg-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
    .fia-site .row > .col-lg-9  { flex-basis: 75%;      max-width: 75%; }
    .fia-site .row > .col-lg-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
    .fia-site .row > .col-lg-12, .fia-site .row > .col-md-12 { flex-basis: 100%; max-width: 100%; }
    .fia-site .row > .col-lg-offset-1 { margin-left: 8.3333%; }
    .fia-site .row > .col-lg-offset-2 { margin-left: 16.6667%; }
    .fia-site .row > .col-lg-offset-3 { margin-left: 25%; }
}
.fia-site .text-center { text-align: center; }

/* ------------------------------------------------------------------- headings and running text of wing pages */
.fia-site .maicontainer { margin: 0; padding: 0; }
.fia-site .maicontainer h2 { margin: clamp(44px, 6vw, 72px) 0 28px; padding-top: 20px; border-top: 2px solid var(--navy-900); font-size: clamp(1.5rem, 1.25rem + .9vw, 1.875rem); text-align: start; }
.fia-site .maicontainer h2 span { font: inherit; color: inherit; }
.fia-site .maicontainer .row:first-child h2, .fia-site .maicontainer .container > h2:first-child { margin-top: 0; }
.fia-site .maicontainer h5 { margin: 0 0 12px; color: var(--gold-700); font: 700 .75rem/1.4 var(--font-text); letter-spacing: .15em; text-transform: uppercase; }
.fia-site .first_para, .fia-site .second_para { max-width: 70ch; margin: 0 0 1.1em; padding: 0; color: var(--text); font-size: 1.0625rem; line-height: 1.8; text-align: start; }
.fia-site .first_para { font-size: 1.1875rem; }
.fia-site .heading { color: var(--ink); text-align: start; }
.fia-site .mega-menu-title { margin: 0 0 12px; }
.fia-site .mega-menu-title h3 { margin: 0; padding-top: 14px; border-top: 1px solid var(--navy-900); color: var(--gold-700); font: 700 .75rem/1.4 var(--font-text); letter-spacing: .15em; text-transform: uppercase; }
.fia-site .how-to-complain { margin: 0 0 14px; padding: 0; color: var(--text); font-size: .96875rem; line-height: 1.7; text-align: start; }
.fia-site ul.how-to-complain, .fia-site ol.how-to-complain { padding-left: 1.2em; }
.fia-site .how-to-complain li { margin-bottom: .55em; }
.fia-site .how-to-complain li::marker, .fia-site .modal-body li::marker { color: var(--gold-600); }
/* a list inside a list item (class "sublist"): the original had it as a sibling of the item, separated by the item's bottom margin - keep that gap */
.fia-site .how-to-complain li > .sublist { margin-top: .55em; }
.fia-content--prose .how-to-complain li > .sublist { margin-top: calc(.55 * 1.0625rem); }          /* text pages set their list items larger (fia.css), and the gap followed the item's size */
.fia-site :is(h3, h4).how-to-complain { margin: 1.4em 0 .5em; color: var(--ink); font: 650 1.0625rem/1.35 var(--font-head); }

/* --------------------------------------------------------------------------- cards (services_listing) */
.fia-site .part2 { float: none !important; width: 100% !important; height: 100%; margin: 0; padding: 0 !important; }
.fia-site .row > [class*="col-"] > .part2 { margin-bottom: 0; }
/* Stacked rows and cards. The original separated them with an inline padding-top on .part2, which is neutralised above, so the
   separation is restored here as a margin between siblings. Blocks inside a card panel (.list1 / .list4) space themselves. */
.fia-site :not(.list1):not(.list4) > :is(.row, .part2) + :is(.row, .part2) { margin-top: 28px; }
.fia-site .row:has(> [class*="col-"]:only-child:empty) { display: none; }                                   /* decorative empty rows */
.fia-site .row:has(> [class*="col-"]:only-child:empty) + :is(.row, .part2) { margin-top: 0; }
.fia-site .services_listing, .fia-site .services_listing2 {
    position: relative; height: 100%; margin: 0 !important; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3);
    transition: border-color .25s ease, box-shadow .3s var(--ease);
}
.fia-site .services_listing2 { background: transparent; border: 0; }
.fia-site .services_listing::before { content: ""; position: absolute; left: 28px; top: -1px; width: 32px; height: 2px; background: var(--gold-500); transition: width .4s var(--ease); }
.fia-site .services_listing:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }
.fia-site .services_listing:hover::before { width: 64px; }
.fia-site .services_listing .services_listing { background: var(--paper); box-shadow: none; }
.fia-site .services_listing .list1, .fia-site .services_listing .list4 { height: 100%; }
.fia-site .services_listing .list1 > h2, .fia-site .services_listing .list4 > h2 { margin: 0; padding: 30px 28px 14px; border-top: 0; }
.fia-site .services_listing .list1 > .row, .fia-site .services_listing .list4 > .row { padding: 14px 16px 22px; }
.fia-site .services_listing .list1 > .row, .fia-site .services_listing .list4 > .row { height: 100%; margin: 0; }
.fia-site .services_listing > :is(.list1, .list4) > h2 + .row { padding-top: 6px; }                       /* the heading already leaves 14px */
/* running text, pictures and tables placed straight into a card panel: inset like the heading, with air around pictures */
.fia-site .services_listing > :is(.list1, .list4) > p.how-to-complain { padding-inline: 28px !important; }
.fia-site .services_listing > :is(.list1, .list4) > p:last-child { margin-bottom: 26px; }
.fia-site .services_listing > :is(.list1, .list4) > .row[style*="padding-bottom"]:last-child { padding-bottom: 24px !important; }   /* match the side inset (the markup says 10px) */
.fia-site .services_listing > :is(.list1, .list4) > img { margin-block: 18px; }
.fia-site .hover_effect { display: flex; flex-direction: column; padding: 28px !important; margin: 0 !important; }
.fia-site .hover_effect > div:not(.row) { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 0 !important; text-align: start !important; }
.fia-site .hover_effect > div:not(.row):last-child { flex: 1; }          /* only the last block takes up spare height, so an icon block never drifts away from its text */
.fia-site .hover_effect > div > br { display: none; }
.fia-site .hover_effect a { text-transform: none !important; }
.fia-site .hover_effect > div > a:first-child, .fia-site .hover_effect > div > p:first-child {
    margin: 0 0 6px; color: var(--ink) !important; font: 650 1.1875rem/1.35 var(--font-head); letter-spacing: -.012em;
}
.fia-site .hover_effect a > span, .fia-site .hover_effect p > span { color: inherit; font: inherit; }
.fia-site .fia-caps { text-transform: uppercase; }                                                        /* card('...', 4, ['caps' => true]) */
.fia-site .hover_effect > div > a:first-child:hover { color: var(--blue-600) !important; }
.fia-site .hover_effect .click-more { margin-top: auto !important; align-self: flex-start; }
.fia-site .hover_effect .how-to-complain { padding-left: 1.2em !important; padding-right: 0 !important; }
.fia-site p.how-to-complain, .fia-site .hover_effect p.how-to-complain { padding-left: 0 !important; }
.fia-site .zoom-effect-container { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 16px; float: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); }
.fia-site .image-card { position: static; display: block; width: auto; text-align: center; }
.fia-site .image-card img { width: 30px; height: 30px; object-fit: contain; }

/* ----------------------------------------------------------------------------- buttons of the old markup */
.fia-site .click-more, .fia-site .know-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 0 18px; border: 1px solid var(--navy-900); border-radius: var(--r-2);
    background: transparent; color: var(--navy-900) !important; font: 600 .875rem/1 var(--font-text); text-align: center; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fia-site .click-more::after { content: ""; width: 14px; height: 14px; background: currentColor; transition: transform .25s var(--ease);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat; }
.fia-site .click-more:hover, .fia-site .know-more:hover { background: var(--navy-900); color: #fff !important; }
.fia-site .click-more:hover::after { transform: translateX(3px); }
.fia-site .btn, .fia-site .btn-default {
    display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--white);
    color: var(--navy-900); font: 600 .875rem/1 var(--font-text); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fia-site .btn:hover, .fia-site .btn-default:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

/* -------------------------------------------------------------------------------------------- tables */
.fia-site .table { width: 100%; margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--r-3); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--white); font-size: .96875rem; }
.fia-site .table > thead > tr > th { padding: 14px 18px; border: 0; background: var(--navy-900); color: #fff; font: 600 .75rem/1.3 var(--font-text); letter-spacing: .1em; text-align: start; text-transform: uppercase; vertical-align: middle; }
.fia-site .table > tbody > tr > td, .fia-site .table > tbody > tr > th { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--text); vertical-align: top; text-align: start; }
.fia-site .table > tbody > tr:first-child > td { border-top: 0; }
.fia-site .table-hover > tbody > tr { transition: background-color .2s ease; }
.fia-site .table-hover > tbody > tr:hover { background: var(--paper); }
.fia-site .table a { font-weight: 600; }
.fia-site .fia-table-scroll { margin: 0 0 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fia-site .fia-table-scroll > .table { margin: 0; }
@media (max-width: 767px) { .fia-site .fia-table-scroll > .table { min-width: 520px; } }

/* ------------------------------------------------------------------------------ pages that need a tweak */
.fia-site .hero-image { background-size: cover; background-position: center; }
.fia-site .modal .row { margin-inline: -12px; }
/* dialog titles are <h2>: keep the page-section look of ".maicontainer h2" out of them; the small gold line under a title is an <h3> */
.fia-site .maicontainer .modal-title { margin: 0; padding: 0; border: 0; font-size: 1.375rem; }
.fia-site .modal-subtitle { margin: 0 0 12px; color: var(--gold-700); font: 700 .75rem/1.4 var(--font-text); letter-spacing: .15em; text-transform: uppercase; }
.fia-site .modal .services_listing { background: var(--paper); }

@media (max-width: 991px) {
    .fia-site .hover_effect { padding: 24px !important; }
    .fia-site .row > [class*="col-"] + [class*="col-"] { margin-top: 0; }
}