/* ==========================================================================
   Material Base — self-contained foundation for Material Design pages.
   Replaces legacy base.css on the Material shell to prevent FA-tofu bullets,
   broken breadcrumbs, and other global rule leaks.
   Load FIRST in the Material stylesheet cascade (after iata-tokens.css).
   ========================================================================== */

/* --- Reset --- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* --- Focus ---
   Every native focusable the app renders itself: links, plain <button>s,
   <summary>, the native inputs. Material's own controls bring their own ring
   (material-theme.css) and fields paint theirs inside the shadow root; this is
   for everything else, which otherwise falls through to the browser default --
   a 1px #005FCC double line in Chrome, different again in Safari, sitting
   beside controls ringed in brand blue.

   Early in the cascade on purpose, so a control with its own treatment (the
   nav tab, the multiselect toggle) overrides it. No border-radius: `outline`
   already follows the element's own radius. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--iata-focus-width) solid var(--iata-focus-color);
    outline-offset: 2px;
}

/* --- Skip link ---
   The link carries `.iata-sr-only` (material-pages.css) for its hidden state --
   clipped to 1x1 rather than `display: none`, which would take it out of the
   tab order and so out of reach of the only user it exists for. This rule is
   only the un-clip: it out-specifies that one (0,2,0 against 0,1,0) whatever
   order the two files load in, and puts the link in the top-left corner, above
   the app bar's `z-index: 100` and below the drawer (1100) and its scrim
   (1090), which own the screen whenever they are open. */
.iata-skip-link:focus-visible {
    background: var(--iata-white);
    border-radius: var(--iata-radius-form);
    clip: auto;
    clip-path: none;
    color: var(--iata-blue-40);
    font-family: var(--iata-txt-font-family);
    height: auto;
    left: var(--iata-gap-s);
    outline: var(--iata-focus-width) solid var(--iata-focus-color);
    outline-offset: 2px;
    padding: var(--iata-gap-s) var(--iata-gap-m);
    top: var(--iata-gap-s);
    width: auto;
    z-index: 1000;
}

/* --- Base elements scoped to the Material shell --- */

.iata-material-shell {
    font-family: var(--iata-txt-font-family);
    color: var(--iata-grey-10);
    line-height: 1.5;
}

.iata-material-shell a {
    color: var(--iata-blue-40);
    text-decoration: none;
}

.iata-material-shell a:hover {
    text-decoration: underline;
}

.iata-material-shell p {
    margin: 0 0 var(--iata-gap-m) 0;
}

.iata-material-shell h1 {
    font-size: var(--iata-txt-heading1-size);
    line-height: var(--iata-txt-heading1-line-height);
    letter-spacing: var(--iata-txt-heading1-tracking);
    font-weight: var(--iata-txt-weight-regular);
    margin: 0 0 var(--iata-gap-m) 0;
}

.iata-material-shell h2 {
    font-size: var(--iata-txt-heading2-size);
    line-height: var(--iata-txt-heading2-line-height);
    font-weight: var(--iata-txt-weight-regular);
    margin: 0 0 var(--iata-gap-s) 0;
}

.iata-material-shell h3 {
    font-size: var(--iata-txt-heading3-size);
    line-height: var(--iata-txt-heading3-line-height);
    font-weight: var(--iata-txt-weight-regular);
    margin: 0 0 var(--iata-gap-s) 0;
}

.iata-material-shell h4 {
    font-size: var(--iata-txt-heading4-size);
    line-height: var(--iata-txt-heading4-line-height);
    font-weight: var(--iata-txt-weight-medium);
    letter-spacing: 0.1px;
    margin: 0 0 var(--iata-gap-xs) 0;
}

.iata-material-shell p {
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    letter-spacing: var(--iata-txt-l-tracking);
    margin: 0 0 var(--iata-gap-m) 0;
}

/* --- Lists — normal bullets, no FA markers --- */

.iata-material-shell ul,
.iata-material-shell ol {
    margin: 0 0 var(--iata-gap-m) 0;
    padding-left: 1.5rem;
}

.iata-material-shell ul {
    list-style: disc;
}

.iata-material-shell ol {
    list-style: decimal;
}

.iata-material-shell li {
    margin-bottom: var(--iata-gap-xs);
}

.iata-material-shell li::before {
    content: none;
}

.iata-material-shell ul li::before {
    content: none;
}

/* --- Breadcrumbs (django-bootstrap-breadcrumbs bootstrap5 template) --- */

.iata-material-shell nav[aria-label="breadcrumb"] {
    padding: 24px 96px 0;
    background: var(--iata-background-01);
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
    font-size: 14px;
    line-height: 24px;
    color: var(--iata-grey-70);
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb li {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb li::before {
    content: none;
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb li:first-child::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-color: var(--iata-grey-40);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb li + li::before {
    content: '>';
    margin: 0 8px;
    color: var(--iata-grey-40);
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb li.active::before {
    color: var(--iata-grey-70);
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb a {
    color: var(--iata-grey-40);
    text-decoration: none;
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb a:hover {
    text-decoration: underline;
}

.iata-material-shell nav[aria-label="breadcrumb"] .breadcrumb .active {
    color: var(--iata-grey-70);
}

/* --- Dialog lists (no bottom margin inside dialogs) --- */

.iata-dialog__content ul,
.iata-dialog__content ol {
    margin-bottom: 0;
}

/* --- Responsive breadcrumbs --- */

@media (max-width: 768px) {
    .iata-material-shell nav[aria-label="breadcrumb"] {
        padding: var(--iata-gap-m) 32px var(--iata-gap-s);
    }
}

@media (max-width: 640px) {
    .iata-material-shell nav[aria-label="breadcrumb"] {
        padding: var(--iata-gap-m) 16px var(--iata-gap-s);
    }
}