/* ============================================================================
   Openwater brand styles for MkDocs Material — v5
   v5 changes: explicit, aggressive card layout for .grid.cards (the v4 cards
   were inheriting Material defaults inconsistently and the description / link
   were rendering outside the card box). Now everything inside <li> is forced
   into the same visible card.
   ============================================================================ */

/* ---------- Brand palette ---------- */
:root,
[data-md-color-scheme="openwater"] {
  --md-primary-fg-color:        #0891B2;
  --md-primary-fg-color--light: #06B6D4;
  --md-primary-fg-color--dark:  #0A2540;
  --md-accent-fg-color:         #06B6D4;
  --md-accent-fg-color--transparent: rgba(6, 182, 212, 0.1);

  --md-default-bg-color:    #ffffff;
  --md-default-fg-color:    #0F172A;
  --md-default-fg-color--light:  #475569;
  --md-default-fg-color--lighter: #94A3B8;

  --md-typeset-a-color: #0891B2;

  --md-footer-bg-color: #0A2540;
  --md-footer-bg-color--dark: #06283d;
  --md-footer-fg-color: #ffffff;
  --md-footer-fg-color--light: #67E8F9;
  --md-footer-fg-color--lighter: #94A3B8;

  --ow-deep-navy:   #0A2540;
  --ow-ocean-blue:  #164E63;
  --ow-teal:        #0891B2;
  --ow-cyan:        #06B6D4;
  --ow-aqua-light:  #22D3EE;
  --ow-aqua-bright: #67E8F9;
  --ow-light-bg:    #F0F9FF;
  --ow-border:      #E0F2FE;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #06B6D4;
  --md-primary-fg-color--light: #22D3EE;
  --md-primary-fg-color--dark:  #0A2540;
  --md-accent-fg-color:         #67E8F9;
  --md-typeset-a-color:         #67E8F9;
  --md-footer-bg-color:         #0A2540;
}

:root {
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-code-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

body, .md-typeset {
  font-family: var(--md-text-font);
}

.md-typeset code,
.md-typeset pre {
  font-family: var(--md-code-font);
}

/* ---------- WIDER CONTENT ---------- */
.md-grid {
  max-width: 1400px;
}

/* ---------- WHITE HEADER, decluttered ---------- */
.md-header,
.md-header[data-md-state="shadow"] {
  background: #ffffff;
  color: var(--ow-deep-navy);
  box-shadow: 0 2px 10px rgba(8, 145, 178, 0.10);
  border-bottom: 2px solid var(--ow-light-bg);
}

.md-header__title,
.md-header__topic,
.md-header__topic > .md-ellipsis {
  display: none;
}

.md-header__source {
  display: none;
}

.md-search {
  margin-right: 0.25rem;
}

@media screen and (min-width: 60em) {
  .md-search__form {
    background: transparent;
    box-shadow: none;
  }
  .md-search__input {
    background: var(--ow-light-bg);
    color: var(--ow-deep-navy);
    width: 11rem;
    transition: width 0.2s ease, background 0.2s ease;
  }
  .md-search__input:focus {
    width: 18rem;
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--ow-cyan);
  }
}

.md-search__input::placeholder {
  color: var(--md-default-fg-color--light);
}

.md-search__icon[for="__search"] {
  color: var(--ow-deep-navy);
}

.md-header__button,
.md-header__button.md-icon,
.md-header__button.md-logo {
  color: var(--ow-deep-navy);
}

.md-header__button:hover {
  color: var(--ow-teal);
  opacity: 1;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
  width: auto;
}

[data-md-color-scheme="slate"] .md-header {
  background: var(--ow-deep-navy);
  color: #ffffff;
  border-bottom: 1px solid rgba(34, 211, 238, 0.2);
}

[data-md-color-scheme="slate"] .md-header__button {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-search__input {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

/* ---------- Tabs row ---------- */
.md-tabs {
  background: #ffffff;
  color: var(--ow-deep-navy);
  border-bottom: 1px solid var(--ow-light-bg);
}

.md-tabs__link {
  color: var(--ow-deep-navy);
  opacity: 1;
  font-weight: 500;
}

.md-tabs__link:hover {
  color: var(--ow-teal);
  opacity: 1;
}

.md-tabs__link--active {
  color: var(--ow-teal);
  font-weight: 600;
  opacity: 1;
}

[data-md-color-scheme="slate"] .md-tabs {
  background: var(--ow-deep-navy);
  border-bottom: 1px solid rgba(34, 211, 238, 0.2);
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: #ffffff;
  opacity: 0.85;
}

[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: var(--ow-aqua-bright);
  opacity: 1;
}

/* ---------- HOMEPAGE: backup hides for sidebars + back-to-top ---------- */
.md-main:has(.ow-hero) .md-sidebar--primary,
.md-main:has(.ow-hero) .md-sidebar--secondary,
.md-main:has(.ow-hero) .md-top {
  display: none !important;
}

/* ---------- HOMEPAGE: tighter, docs-style hero ---------- */
.md-content .ow-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1.5rem;
  margin-bottom: 0;
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
  color: #ffffff;
  background-image: url("../assets/openwater-3.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-content .ow-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 37, 64, 0.78) 0%,
    rgba(22, 78, 99, 0.82) 50%,
    rgba(8, 145, 178, 0.78) 100%);
  z-index: 1;
}

.md-content .ow-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
}

.md-content .ow-hero h1,
.md-typeset .ow-hero h1 {
  font-size: 2.5rem !important;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  color: #ffffff !important;
}

.md-content .ow-hero p,
.md-typeset .ow-hero p {
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0 auto 1.75rem;
  max-width: 720px;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
  color: #ffffff;
}

.ow-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  align-items: center;
}

@media (max-width: 720px) {
  .md-content .ow-hero { padding: 3.5rem 1.25rem 2.5rem; min-height: 360px; }
  .md-content .ow-hero h1, .md-typeset .ow-hero h1 { font-size: 1.9rem !important; }
  .md-content .ow-hero p,  .md-typeset .ow-hero p  { font-size: 1.05rem; }
}

/* ---------- BUTTONS ---------- */
.md-typeset .ow-btn,
.md-typeset a.ow-btn,
.ow-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none !important;
  border: 2px solid transparent;
  margin: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.md-typeset .ow-btn:hover,
.md-typeset a.ow-btn:hover {
  text-decoration: none !important;
}

.ow-btn--primary,
.md-typeset a.ow-btn--primary {
  background: var(--ow-cyan);
  color: var(--ow-deep-navy);
}

.ow-btn--primary:hover,
.md-typeset a.ow-btn--primary:hover {
  background: var(--ow-aqua-light);
  color: var(--ow-deep-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(34, 211, 238, 0.4);
}

.ow-btn--ghost,
.md-typeset a.ow-btn--ghost {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border-color: var(--ow-aqua-light);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ow-btn--ghost:hover,
.md-typeset a.ow-btn--ghost:hover {
  background: rgba(34, 211, 238, 0.20);
  border-color: var(--ow-aqua-bright);
  color: #ffffff;
}

/* ---------- Stat strip ---------- */
.ow-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: -32px auto 2.5rem;
  padding: 2rem 2.5rem;
  background: #ffffff;
  border-radius: 16px;
  border-top: 4px solid var(--ow-cyan);
  box-shadow: 0 20px 60px rgba(8, 145, 178, 0.15);
  position: relative;
  z-index: 3;
}

.ow-stats__item { text-align: center; }
.ow-stats__num {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ow-teal), var(--ow-cyan), var(--ow-aqua-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.ow-stats__label {
  display: block;
  margin-top: 0.5rem;
  color: var(--ow-deep-navy);
  font-weight: 500;
  font-size: 0.9rem;
}
.ow-stats__sub {
  display: block;
  margin-top: 0.2rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
}

/* ============================================================================
   GRID CARDS — explicit, aggressive layout (the v5 fix)
   The HTML output is correct (each <li> contains title, hr, description, link)
   but earlier CSS was inheriting Material defaults inconsistently. These
   rules force the layout, padding, and visual containment so every <li>
   renders as a single self-contained card.
   ============================================================================ */

/* The .grid container becomes the explicit grid; .cards modifies it */
.md-typeset .grid.cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.25rem !important;
  margin: 2rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* The <ul> inside .grid.cards is transparent: its <li>s become grid items */
.md-typeset .grid.cards > ul {
  display: contents !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each <li> is a self-contained card */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  display: block !important;
  padding: 1.5rem 1.5rem 1.25rem !important;
  margin: 0 !important;
  border: 2px solid var(--ow-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  list-style: none !important;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-3px);
  border-color: var(--ow-cyan) !important;
  box-shadow: 0 12px 32px rgba(8, 145, 178, 0.15);
}

/* Title (first <p> of each <li>) — bigger, bolder */
.md-typeset .grid.cards > ul > li > p:first-child {
  margin: 0 0 0.5rem !important;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ow-deep-navy);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Inline icon next to the title */
.md-typeset .grid.cards > ul > li > p:first-child .twemoji {
  flex-shrink: 0;
}

.md-typeset .grid.cards > ul > li > p:first-child .twemoji svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--ow-teal);
}

/* The horizontal rule that separates title from body */
.md-typeset .grid.cards > ul > li > hr {
  margin: 0.25rem 0 0.85rem !important;
  border: 0 !important;
  border-top: 1px solid var(--ow-border) !important;
  height: 0;
}

/* Description paragraph(s) */
.md-typeset .grid.cards > ul > li > p:not(:first-child) {
  margin: 0 0 0.85rem !important;
  color: var(--md-default-fg-color--light);
  line-height: 1.55;
}

/* Final paragraph (typically the link) */
.md-typeset .grid.cards > ul > li > p:last-child {
  margin: 0 !important;
}

.md-typeset .grid.cards > ul > li a {
  color: var(--ow-teal);
  font-weight: 600;
  text-decoration: none;
}

.md-typeset .grid.cards > ul > li a:hover {
  color: var(--ow-cyan);
  text-decoration: none;
}

/* Dark mode card overrides */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset .grid > .card {
  background: rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(34, 211, 238, 0.25) !important;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li > p:first-child {
  color: var(--ow-aqua-bright);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li > hr {
  border-top-color: rgba(34, 211, 238, 0.18) !important;
}

/* ---------- Headings ---------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--ow-deep-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: var(--ow-aqua-bright);
}

/* ---------- Admonitions / tables / footer ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-left-width: 4px;
}

.md-typeset table:not([class]) th {
  background: var(--ow-light-bg);
  color: var(--ow-deep-navy);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: rgba(8, 145, 178, 0.18);
  color: var(--ow-aqua-bright);
}

.md-footer {
  background: var(--ow-deep-navy);
}

.md-footer-meta {
  background: #06283d;
}