/* * ADHISTRAP v2.0 - Final Consolidated Version
 * Optimized for DoctorOnCall International
 * Logic: Parent-Driven Flex + Dynamic Variable Math + Typography Scale
 */

:root {
  /* Spacing System */
  --gap-0: 0;
  --gap-0125: 0.125rem;
  --gap-025: 0.25rem;
  --gap-05: 0.5rem;
  --gap-075: 0.75rem;
  --gap-1: 1rem;
  --gap-1125: 1.125rem;
  --gap-125: 1.25rem;
  --gap-15: 1.5rem;
  --gap-175: 1.75rem;
  --gap-2: 2rem;
  --gap-2125: 2.125rem;
  --gap-225: 2.25rem;
  --gap-25: 2.5rem;
  --gap-275: 2.75rem;
  --gap-3: 3rem;
  --gap-3125: 3.125rem;
  --gap-325: 3.25rem;
  --gap-35: 3.5rem;
  --gap-375: 3.75rem;
  --gap-4: 4rem;
}

/* --- Reset & Base --- */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  scroll-margin-top: calc(var(--scroll-margin-top));
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--doc-gray-1);
  line-height: 1.6;
  background-color: var(--doc-bg);
}

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

/* --- Typography Hierarchy --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--gap-05);
  color: var(--doc-blue);
}

h1 {
  font-size: 1.8rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.4rem;
}

p {
  margin-bottom: var(--gap-1);
}

ul {
  margin-bottom: var(--gap-1);
  padding-left: var(--gap-15);
}

ol {
  margin-bottom: var(--gap-1);
  padding-left: var(--gap-15);
}

table {
  margin-bottom: var(--gap-1);
}

:where(p, ul, ol, table):last-child {
  margin-bottom: 0;
}

.list-type-none {
  list-style-type: none;
}

.list-none {
  list-style: none;
}

/* --- Layout & Container --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gap-1);
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.sticky {
  position: sticky;
}

.m-0-auto {
  margin: 0 auto;
}

.one-liner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* --- Flex System --- */
.flex {
  display: flex;
}

.flex.wrap {
  flex-wrap: wrap;
}

.flex.column {
  flex-direction: column;
}

.flex.row-reverse {
  flex-direction: row-reverse;
}

.flex.v-start {
  align-items: flex-start;
}

.flex.v-center {
  align-items: center;
}

.flex.v-end {
  align-items: flex-end;
}

.flex.justify-content-space-between {
  justify-content: space-between;
}

.flex.justify-content-flex-end {
  justify-content: flex-end;
}

/* Default: All children stack 100% on mobile */
.flex>* {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: min-content;
}

.flex>.grow,
.grow {
  flex-grow: 1;
}

.flex>.shrink,
.shrink {
  flex-shrink: 1;
}

/* --- Basic Column Math (No-Gap Fallback) --- */
.flex.col-2>* {
  flex-basis: 50%;
}

.flex.col-3>* {
  flex-basis: calc(100% / 3);
}

.flex.col-4>* {
  flex-basis: 25%;
}

.flex.col-5>* {
  flex-basis: 20%;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

.text-decoration-none {
  text-decoration: none;
}

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.white-space-nowrap {
  white-space: nowrap;
}

.line-height-1 {
  line-height: 1;
}

.inline {
  display: inline;
}

.width-100 {
  width: 100%;
}

.gap-0 {
  gap: var(--gap-0);
}

.gap-0>* {
  --parent-gap: var(--gap-0);
}

.row-gap-0 {
  row-gap: var(--gap-0);
}

.row-gap-05 {
  row-gap: var(--gap-05);
}

.row-gap-1 {
  row-gap: var(--gap-1);
}

.row-gap-15 {
  row-gap: var(--gap-15);
}

.row-gap-2 {
  row-gap: var(--gap-2);
}

.gap-0125 {
  gap: var(--gap-0125);
}

.gap-0125>* {
  --parent-gap: var(--gap-0125);
}

.gap-025 {
  gap: var(--gap-025);
}

.gap-025>* {
  --parent-gap: var(--gap-025);
}

.gap-05 {
  gap: var(--gap-05);
}

.gap-05>* {
  --parent-gap: var(--gap-05);
}

.gap-075 {
  gap: var(--gap-075);
}

.gap-075>* {
  --parent-gap: var(--gap-075);
}

.gap-1 {
  gap: var(--gap-1);
}

.gap-1>* {
  --parent-gap: var(--gap-1);
}

.gap-1125 {
  gap: var(--gap-1125);
}

.gap-1125>* {
  --parent-gap: var(--gap-1125);
}

.gap-125 {
  gap: var(--gap-125);
}

.gap-125>* {
  --parent-gap: var(--gap-125);
}

.gap-15 {
  gap: var(--gap-15);
}

.gap-15>* {
  --parent-gap: var(--gap-15);
}

.gap-175 {
  gap: var(--gap-175);
}

.gap-175>* {
  --parent-gap: var(--gap-175);
}

.gap-2 {
  gap: var(--gap-2);
}

.gap-2>* {
  --parent-gap: var(--gap-2);
}

.gap-2125 {
  gap: var(--gap-2125);
}

.gap-2125>* {
  --parent-gap: var(--gap-2125);
}

.gap-225 {
  gap: var(--gap-225);
}

.gap-225>* {
  --parent-gap: var(--gap-225);
}

.gap-25 {
  gap: var(--gap-25);
}

.gap-25>* {
  --parent-gap: var(--gap-25);
}

.gap-275 {
  gap: var(--gap-275);
}

.gap-275>* {
  --parent-gap: var(--gap-275);
}

.gap-3 {
  gap: var(--gap-3);
}

.gap-3>* {
  --parent-gap: var(--gap-3);
}

.gap-3125 {
  gap: var(--gap-3125);
}

.gap-3125>* {
  --parent-gap: var(--gap-3125);
}

.gap-325 {
  gap: var(--gap-325);
}

.gap-325>* {
  --parent-gap: var(--gap-325);
}

.gap-35 {
  gap: var(--gap-35);
}

.gap-35>* {
  --parent-gap: var(--gap-35);
}

.gap-375 {
  gap: var(--gap-375);
}

.gap-375>* {
  --parent-gap: var(--gap-375);
}

.gap-4 {
  gap: var(--gap-4);
}

.gap-4>* {
  --parent-gap: var(--gap-4);
}

/* 2. Universal Column Math 
       Triggers only when a gap class is present to ensure perfect alignment */

.flex.col-2>* {
  flex-basis: calc(50% - (var(--parent-gap, 0px) * 1 / 2));
}

.flex.col-3>* {
  flex-basis: calc((100% / 3) - (var(--parent-gap, 0px) * 2 / 3));
}

.flex.col-4>* {
  flex-basis: calc(25% - (var(--parent-gap, 0px) * 3 / 4));
}

.flex.col-5>* {
  flex-basis: calc(20% - (var(--parent-gap, 0px) * 4 / 5));
}

/* --- Utility Class Generators --- */
.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-05 {
  margin-top: var(--gap-05);
}

.mr-05 {
  margin-right: var(--gap-05);
}

.mb-05 {
  margin-bottom: var(--gap-05);
}

.ml-05 {
  margin-left: var(--gap-05);
}

.mt-1 {
  margin-top: var(--gap-1);
}

.mb-1 {
  margin-bottom: var(--gap-1);
}

.mt-15 {
  margin-top: var(--gap-15);
}

.mb-15 {
  margin-bottom: var(--gap-15);
}

.mt-2 {
  margin-top: var(--gap-2);
}

.mb-2 {
  margin-bottom: var(--gap-2);
}

.mt-3 {
  margin-top: var(--gap-3);
}

.mb-3 {
  margin-bottom: var(--gap-3);
}

.p-0 {
  padding: 0;
}

.p-05 {
  padding: var(--gap-05);
}

.p-1 {
  padding: var(--gap-1);
}

.p-15 {
  padding: var(--gap-15);
}

.p-2 {
  padding: var(--gap-2);
}

.pt-05 {
  padding-top: var(--gap-05);
}

.pb-05 {
  padding-bottom: var(--gap-05);
}

.pt-1 {
  padding-top: var(--gap-1);
}

.pb-1 {
  padding-bottom: var(--gap-1);
}

.pt-15 {
  padding-top: var(--gap-15);
}

.pb-15 {
  padding-bottom: var(--gap-15);
}

.pt-2 {
  padding-top: var(--gap-2);
}

.pb-2 {
  padding-bottom: var(--gap-2);
}

.pt-3 {
  padding-top: var(--gap-3);
}

.pb-3 {
  padding-bottom: var(--gap-3);
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.pl-1 {
  padding-left: var(--gap-1);
}

.pr-1 {
  padding-right: var(--gap-1);
}

.pl-15 {
  padding-left: var(--gap-15);
}

.pr-15 {
  padding-right: var(--gap-15);
}

.pl-2 {
  padding-left: var(--gap-2);
}

.pr-2 {
  padding-right: var(--gap-2);
}

.pl-3 {
  padding-left: var(--gap-3);
}

.pr-3 {
  padding-right: var(--gap-3);
}

.pl-4 {
  padding-left: var(--gap-4);
}

.pr-4 {
  padding-right: var(--gap-4);
}

/* --- Helpers --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.pointer-hover:hover {
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s;
}

.pointer-events-auto {
  pointer-events: auto;
}

.pointer-events-none {
  pointer-events: none;
}

.overflow-y-auto {
  overflow-y: auto;
}

.fs-xl {
  font-size: var(--font-size-xl) !important;
}

.fs-xxl {
  font-size: var(--font-size-xxl) !important;
}