/**
 * Semantic Ordered List Styling for FAA Order JO 7110.65
 * Provides proper styling for 6-level nested ordered lists
 * Overrides conflicting rules from atc_faa_ol.css
 */

/* ==================================================================
   Level 1: a., b., c., ... (lower-alpha)
   Override .usa-content > ol { list-style: none } from atc_faa_ol.css
   Uses native browser list numbering with explicit counter-reset for Firefox
   ================================================================== */
.usa-content ol.level-one,
ol.level-one {
  list-style-type: lower-alpha !important;
  padding-left: 2em;
  margin: 1rem 0;
  counter-reset: list-item;  /* Explicit reset for Firefox compatibility */
}

/* Override legacy counter styles to prevent double numbering */
ol.level-one > li::before,
ol.level-two > li::before {
  content: none !important;
  margin: 0 !important;
  float: none !important;
  counter-increment: none !important;
}

/* Override display: block from atc_faa_ol.css - list items need display: list-item for markers */
.usa-content ol.level-one > li,
.usa-content ol.level-two > li,
ol.level-one > li,
ol.level-two > li {
  display: list-item !important;
  padding-left: 0;
}

ol.level-one > li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Bold markers for level 1 */
ol.level-one > li::marker {
  font-weight: bold;
}

/* ==================================================================
   Level 2: 1., 2., 3., ... (decimal)
   Uses native browser list numbering with explicit counter-reset for Firefox
   ================================================================== */
.usa-content ol.level-one > li > ol.level-two,
ol.level-one > li > ol.level-two,
ol.level-two {
  list-style-type: decimal !important;
  padding-left: 2em;
  margin: 0.5rem 0;
  counter-reset: list-item;  /* Explicit reset for Firefox compatibility */
}

ol.level-two > li {
  margin-bottom: 0.4rem;
}

/* Bold markers for level 2 */
ol.level-two > li::marker {
  font-weight: bold;
}

/* ==================================================================
   Level 3: (a), (b), (c), ... (parenthetical lower-alpha)
   High specificity selectors to override atc_faa_ol.css deep nesting
   ================================================================== */
.usa-content ol.level-two > li > ol.level-three,
ol.level-two > li > ol.level-three {
  list-style-type: none !important;
  padding-left: 2em;
  margin: 0.5rem 0;
  counter-reset: level-three-counter !important;
}

ol.level-three > li,
.usa-content ol.level-three > li {
  display: list-item !important;
  margin-bottom: 0.4rem;
  counter-increment: level-three-counter !important;
  position: relative;
}

/* High specificity override for ::before - must beat .usa-content > ol > li > ol > li > ol > li:before */
.usa-content ol.level-one > li > ol.level-two > li > ol.level-three > li::before,
.usa-content ol.level-two > li > ol.level-three > li::before,
.usa-content ol.level-three > li::before,
ol.level-three > li::before {
  content: '(' counter(level-three-counter, lower-alpha) ') ' !important;
  position: absolute !important;
  left: -2em !important;
  width: 2em !important;
  text-align: right !important;
  padding-right: 0.5em !important;
  font-weight: bold !important;
}

/* ==================================================================
   Level 4: (1), (2), (3), ... (parenthetical decimal)
   High specificity selectors to override atc_faa_ol.css deep nesting
   ================================================================== */
.usa-content ol.level-three > li > ol.level-four,
ol.level-three > li > ol.level-four {
  list-style-type: none !important;
  padding-left: 2em;
  margin: 0.5rem 0;
  counter-reset: level-four-counter !important;
}

ol.level-four > li,
.usa-content ol.level-four > li {
  display: list-item !important;
  margin-bottom: 0.4rem;
  counter-increment: level-four-counter !important;
  position: relative;
}

/* High specificity override for ::before */
.usa-content ol.level-one > li > ol.level-two > li > ol.level-three > li > ol.level-four > li::before,
.usa-content ol.level-three > li > ol.level-four > li::before,
.usa-content ol.level-four > li::before,
ol.level-four > li::before {
  content: '(' counter(level-four-counter, decimal) ') ' !important;
  position: absolute !important;
  left: -2em !important;
  width: 2em !important;
  text-align: right !important;
  padding-right: 0.5em !important;
  font-weight: bold !important;
}

/* ==================================================================
   Level 5: [a], [b], [c], ... (bracketed lower-alpha)
   High specificity selectors to override atc_faa_ol.css deep nesting
   ================================================================== */
.usa-content ol.level-four > li > ol.level-five,
ol.level-four > li > ol.level-five {
  list-style-type: none !important;
  padding-left: 2em;
  margin: 0.5rem 0;
  counter-reset: level-five-counter !important;
}

ol.level-five > li,
.usa-content ol.level-five > li {
  display: list-item !important;
  margin-bottom: 0.4rem;
  counter-increment: level-five-counter !important;
  position: relative;
}

/* High specificity override for ::before */
.usa-content ol.level-one > li > ol.level-two > li > ol.level-three > li > ol.level-four > li > ol.level-five > li::before,
.usa-content ol.level-four > li > ol.level-five > li::before,
.usa-content ol.level-five > li::before,
ol.level-five > li::before {
  content: '[' counter(level-five-counter, lower-alpha) '] ' !important;
  position: absolute !important;
  left: -2em !important;
  width: 2em !important;
  text-align: right !important;
  padding-right: 0.5em !important;
  font-weight: bold !important;
}

/* ==================================================================
   Level 6: [1], [2], [3], ... (bracketed decimal)
   High specificity selectors to override atc_faa_ol.css deep nesting
   ================================================================== */
.usa-content ol.level-five > li > ol.level-six,
ol.level-five > li > ol.level-six {
  list-style-type: none !important;
  padding-left: 2em;
  margin: 0.5rem 0;
  counter-reset: level-six-counter !important;
}

ol.level-six > li,
.usa-content ol.level-six > li {
  display: list-item !important;
  margin-bottom: 0.4rem;
  counter-increment: level-six-counter !important;
  position: relative;
}

/* High specificity override for ::before */
.usa-content ol.level-one > li > ol.level-two > li > ol.level-three > li > ol.level-four > li > ol.level-five > li > ol.level-six > li::before,
.usa-content ol.level-five > li > ol.level-six > li::before,
.usa-content ol.level-six > li::before,
ol.level-six > li::before {
  content: '[' counter(level-six-counter, decimal) '] ' !important;
  position: absolute !important;
  left: -2em !important;
  width: 2em !important;
  text-align: right !important;
  padding-right: 0.5em !important;
  font-weight: bold !important;
}

/* ==================================================================
   Semantic Block Styling (NOTE, EXAMPLE, PHRASEOLOGY, etc.)
   HTML5 compliant styling using CSS classes
   ================================================================== */

/* Base styles for all semantic blocks */
/* IMPORTANT: Semantic blocks must be left-aligned, NOT indented with parent elements */
.note-box, .reference-box, .caution-box, .example-box, .phraseology-box, .warning-box, .interpretation-box {
  margin: 1rem 0;
  margin-left: 0 !important;  /* Override any parent indentation */
  margin-right: 0;
  padding: 0.75rem 1rem;
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
  /* Break out of parent indentation by setting explicit positioning */
  position: relative;
  left: 0;
  clear: both;  /* Ensure blocks start on a new line */
}

/* Block title styling - separate line with bold/italic */
.block-title {
  display: block;
  font-weight: 700;
  font-style: italic;
  margin: 0 0 0.25rem 0;
  padding: 0;
}

/* Block content styling - italic text */
.block-content {
  font-style: italic;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Linked text styling within blocks */
.linked-text {
  color: inherit;
  text-decoration: underline;
}

/* NOTE blocks - Blue theme */
.note-box {
  background-color: #e7f3ff;
  border-left: 4px solid #0066cc;
  font-size: 14.663px;
}
.note-box .block-title {
  color: #0066cc;
}

/* EXAMPLE blocks - Gray theme */
.example-box {
  background-color: #f5f5f5;
  border-left: 4px solid #666666;
  font-size: 14.663px;
}
.example-box .block-title {
  color: #333333;
}

/* PHRASEOLOGY blocks - Amber theme */
.phraseology-box {
  background-color: #fff8e7;
  border-left: 4px solid #cc8800;
  font-size: 14.663px;
}
.phraseology-box .block-title {
  color: #996600;
}

/* REFERENCE blocks - Green theme */
.reference-box {
  background-color: #f0fff0;
  border-left: 4px solid #228b22;
  font-size: 14.663px;
}
.reference-box .block-title {
  color: #228b22;
  text-transform: uppercase;
}

/* CAUTION blocks - Yellow/Warning theme */
.caution-box {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  font-size: 14.663px;
}
.caution-box .block-title {
  color: #856404;
}

/* WARNING blocks - Red/Danger theme */
.warning-box {
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
  font-size: 14.663px;
}
.warning-box .block-title {
  color: #721c24;
}

/* INTERPRETATION blocks - Purple/Indigo theme */
.interpretation-box {
  background-color: #f3e5f5;
  border-left: 4px solid #9c27b0;
  font-size: 14.663px;
}
.interpretation-box .block-title {
  color: #6a1b9a;
  text-transform: uppercase;
}

/* Legacy class compatibility */
aside.note { background-color: #e7f3ff; border-left: 4px solid #0066cc; padding: 1rem; margin: 1rem 0; }
aside.example { background-color: #f5f5f5; border-left: 4px solid #666; padding: 1rem; margin: 1rem 0; }
.phraseology { background-color: #fff8e7; border-left: 4px solid #cc8800; padding: 1rem; margin: 1rem 0; }
.reference { background-color: #f0fff0; border-left: 4px solid #228b22; padding: 1rem; margin: 1rem 0; }
aside.caution { background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 1rem; margin: 1rem 0; }
aside.warning { background-color: #f8d7da; border-left: 4px solid #dc3545; padding: 1rem; margin: 1rem 0; }

/* ==================================================================
   Text Alignment Classes (for converted inline styles)
   ================================================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Table captions need display: block to center properly when inside list items */
p.CLASS_38.text-center {
  display: block !important; /* Override li > p:first-of-type { display: inline } from atc_cust_styles.css */
}

/* ==================================================================
   Vertical Alignment Classes (for converted valign attributes)
   ================================================================== */
.valign-top { vertical-align: top; }
.valign-middle { vertical-align: middle; }
.valign-bottom { vertical-align: bottom; }
.valign-baseline { vertical-align: baseline; }

/* ==================================================================
   Table Border Classes (for converted border attributes)
   ================================================================== */
.table-bordered {
  border: 1px solid #000;
  border-collapse: collapse;
}
.table-bordered td,
.table-bordered th {
  border: 1px solid #000;
  padding: 4px 8px;
}
.table-borderless {
  border: none;
  border-collapse: collapse;
}
.table-borderless td,
.table-borderless th {
  border: none;
}

/* ==================================================================
   Text Wrapping Classes (for converted nowrap attributes)
   ================================================================== */
.nowrap { white-space: nowrap; }

/* ==================================================================
   Scope Indicator Classes (for TERMINAL, EN ROUTE, OCEANIC markers)
   ================================================================== */
.scope-indicator {
  font-style: italic;
  font-weight: normal;
}

/* ==================================================================
   Italic Content Classes (for paragraphs with full italic content)
   ================================================================== */
.italic-content {
  font-style: italic;
}

/* ==================================================================
   Figure and Caption Styles
   ================================================================== */
figure {
  margin: 1.5em auto;
  text-align: center;
  max-width: 100%;
}

figcaption {
  text-align: center;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  font-size: 14px;
}

.fig-number {
  font-weight: 700;  /* Bold for FIG numbers */
  font-style: italic;
  display: inline;
  margin-right: 0.5em;
}

.fig-title {
  font-style: italic;  /* Italic for figure titles */
  font-weight: 400;
  display: inline;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ==================================================================
   Table Caption and Styles
   ================================================================== */
table {
  margin: 1.5em auto;
  border-collapse: collapse;
  max-width: 100%;
}

caption, .table-caption {
  text-align: center;
  margin-bottom: 0.75em;
  font-size: 14px;
  line-height: 1.4;
}

.tbl-number, caption .tbl-number {
  font-weight: 700;  /* Bold for TBL numbers */
  font-style: italic;
  display: inline;
  margin-right: 0.5em;
}

.tbl-title, caption .tbl-title {
  font-style: italic;  /* Italic for table titles */
  font-weight: 400;
  display: inline;
}

/* Center tables that should be centered */
table.centered {
  margin-left: auto;
  margin-right: auto;
}