/* ==========================================================================
   Array Corp — Card Components & Layout Enhancements
   Applied on top of colors.css and extra.css
   Follows John Tyler's color-usage-rules.md and color-application-spec.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CARD GRID — Linked-section card layout for hub/landing pages
   Usage in markdown:
     <div class="card-grid" markdown>
       <a class="card" href="path/">
         <span class="card-title">Title</span>
         <span class="card-desc">Description text</span>
       </a>
     </div>
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.card-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--md-default-fg-color) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 72px;
  position: relative;
}

.card-grid .card:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Chevron arrow on right side */
.card-grid .card::after {
  content: "›";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--md-default-fg-color--lighter);
  transition: color 0.2s ease, transform 0.2s ease;
}

.card-grid .card:hover::after {
  color: var(--md-primary-fg-color);
  transform: translateY(-50%) translateX(2px);
}

.card-grid .card .card-title {
  font-weight: 600;
  font-size: 0.7rem; /* 14px @ 20px root — matches text-body, the live ActionCard label size */
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.card-grid .card .card-desc {
  font-size: 0.65rem; /* 13px @ 20px root — matches the muted meta-text size seen on live Card components */
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  padding-right: 1.5rem;
}

/* Card without description — single-line, vertically centered */
.card-grid .card:not(:has(.card-desc)) {
  min-height: 56px;
}

.card-grid .card:not(:has(.card-desc)) .card-title {
  padding-right: 1.5rem;
}

/* Responsive: stack on mobile */
@media screen and (max-width: 768px) {
  .card-grid,
  .card-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   2. PREV / NEXT PAGE NAVIGATION
   Bottom-of-page previous/next navigation cards
   Usage:
     <div class="page-nav">
       <a class="page-nav-prev" href="path/">
         <span class="page-nav-label">Previous</span>
         <span class="page-nav-title">Page Title</span>
       </a>
       <a class="page-nav-next" href="path/">
         <span class="page-nav-label">Next</span>
         <span class="page-nav-title">Page Title</span>
       </a>
     </div>
   -------------------------------------------------------------------------- */

.page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.page-nav a {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--md-default-fg-color) !important;
  transition: border-color 0.2s ease;
  position: relative;
}

.page-nav a:hover {
  border-color: var(--md-primary-fg-color);
}

.page-nav-prev {
  text-align: left;
  padding-left: 2.25rem !important;
}

.page-nav-prev::before {
  content: "‹";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--md-default-fg-color--lighter);
}

.page-nav-next {
  text-align: right;
  padding-right: 2.25rem !important;
}

.page-nav-next::before {
  content: "›";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--md-default-fg-color--lighter);
}

.page-nav-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.15rem;
}

.page-nav-title {
  font-weight: 500;
  font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
  .page-nav {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   3. ADMONITION REFINEMENTS
   Override MkDocs Material and colors.css heavy default admonition styling —
   lighter background, no bold title bar, inline icon.
   Uses [data-md-color-scheme] prefix for higher specificity than colors.css.
   -------------------------------------------------------------------------- */

/* Make all admonitions lighter and more subtle */
[data-md-color-scheme="array"] .md-typeset .admonition,
[data-md-color-scheme="array"] .md-typeset details {
  border-width: 1px !important;
  border-left-width: 4px !important;
  box-shadow: none !important;
  font-size: 0.85rem;
}

/* Remove the heavy title bar background — must beat colors.css specificity */
[data-md-color-scheme="array"] .md-typeset .admonition > .admonition-title,
[data-md-color-scheme="array"] .md-typeset details > summary {
  background-color: transparent !important;
  border-bottom: none !important;
  padding-left: 2.5rem;
  font-weight: 500;
  font-size: 0.85rem;
}

/* Info/note — subtle blue-gray hint-block treatment */
[data-md-color-scheme="array"] .md-typeset .admonition.info,
[data-md-color-scheme="array"] .md-typeset .admonition.note {
  border-color: #6A9BFF !important;
  background-color: #ECF2FF !important;
}

[data-md-color-scheme="array"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="array"] .md-typeset .note > .admonition-title {
  color: #1A3A6B !important;
  background-color: transparent !important;
}

/* Tip/success — subtle green */
[data-md-color-scheme="array"] .md-typeset .admonition.tip,
[data-md-color-scheme="array"] .md-typeset .admonition.success {
  border-color: #20D498 !important;
  background-color: #EAFFF6 !important;
}

[data-md-color-scheme="array"] .md-typeset .tip > .admonition-title,
[data-md-color-scheme="array"] .md-typeset .success > .admonition-title {
  background-color: transparent !important;
  color: #097151 !important;
}

/* Warning — subtle amber */
[data-md-color-scheme="array"] .md-typeset .admonition.warning {
  border-color: #EDB200 !important;
  background-color: #FFFBE5 !important;
}

[data-md-color-scheme="array"] .md-typeset .warning > .admonition-title {
  background-color: transparent !important;
  color: #524000 !important;
}

/* Danger — subtle red */
[data-md-color-scheme="array"] .md-typeset .admonition.danger,
[data-md-color-scheme="array"] .md-typeset .admonition.error {
  border-color: #FF4749 !important;
  background-color: #FFF0ED !important;
}

[data-md-color-scheme="array"] .md-typeset .danger > .admonition-title,
[data-md-color-scheme="array"] .md-typeset .error > .admonition-title {
  background-color: transparent !important;
  color: #8F2224 !important;
}

/* Dark mode admonition overrides */
[data-md-color-scheme="array-dark"] .md-typeset .admonition,
[data-md-color-scheme="array-dark"] .md-typeset details {
  border-width: 1px !important;
  border-left-width: 4px !important;
  box-shadow: none !important;
}

[data-md-color-scheme="array-dark"] .md-typeset .admonition > .admonition-title,
[data-md-color-scheme="array-dark"] .md-typeset details > summary {
  background-color: transparent !important;
}

[data-md-color-scheme="array-dark"] .md-typeset .admonition.info,
[data-md-color-scheme="array-dark"] .md-typeset .admonition.note {
  background-color: rgba(106, 155, 255, 0.08) !important;
  border-color: #6A9BFF !important;
}

[data-md-color-scheme="array-dark"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="array-dark"] .md-typeset .note > .admonition-title {
  color: #93B8FF !important;
  background-color: transparent !important;
}

[data-md-color-scheme="array-dark"] .md-typeset .admonition.tip,
[data-md-color-scheme="array-dark"] .md-typeset .admonition.success {
  background-color: rgba(32, 212, 152, 0.08) !important;
}

[data-md-color-scheme="array-dark"] .md-typeset .admonition.warning {
  background-color: rgba(237, 178, 0, 0.08) !important;
}

[data-md-color-scheme="array-dark"] .md-typeset .admonition.danger,
[data-md-color-scheme="array-dark"] .md-typeset .admonition.error {
  background-color: rgba(229, 57, 53, 0.08) !important;
}

/* --------------------------------------------------------------------------
   4. FIGURE CAPTIONS
   Centered, italic, muted image caption style
   -------------------------------------------------------------------------- */

.md-typeset figure {
  margin: 1.5rem 0;
  text-align: center;
}

.md-typeset figure img {
  max-width: 100%;
  border-radius: 4px;
}

.md-typeset figcaption,
.md-typeset figure em,
.md-typeset .caption {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.5rem;
}

/* Also style standalone italic text directly after images as captions */
.md-typeset p > img + br + em,
.md-typeset p > img:only-child ~ em {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   5. BREADCRUMB STYLING
   Uppercase, small, muted section breadcrumbs
   -------------------------------------------------------------------------- */

.md-typeset .breadcrumb {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-primary-fg-color);
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.md-typeset .breadcrumb a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
}

.md-typeset .breadcrumb a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. TABLE ENHANCEMENTS
   Cleaner borders, subtle header treatment
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.7rem; /* 14px @ 20px root — matches text-body, the real DataTable's ~13px dense-table size */
}

.md-typeset table:not([class]) th {
  background-color: var(--md-default-fg-color--lightest);
  font-weight: 700; /* matches live DataTable header weight */
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--md-default-fg-color--lighter);
}

.md-typeset table:not([class]) td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  vertical-align: top;
}

/* Row hover — from John Tyler's spec: purple-50 @ 40% */
.md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(106, 78, 163, 0.04);
}

/* --------------------------------------------------------------------------
   7. SECTION HEADER (sidebar group labels)
   Uppercase section headers like CHANGELOG, SHIFTY GUIDES
   -------------------------------------------------------------------------- */

.md-nav__item--section > .md-nav__link {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light) !important;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. LAST UPDATED TIMESTAMP
   -------------------------------------------------------------------------- */

.last-updated {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--lighter);
  margin-top: 2rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   9. HOME PAGE HERO (optional — for site landing pages)
   -------------------------------------------------------------------------- */

.home-hero {
  text-align: center;
  padding: 2rem 0 1.5rem;
  margin-bottom: 1rem;
}

.home-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--md-default-fg-color);
}

.home-hero p {
  font-size: 1rem;
  color: var(--md-default-fg-color--light);
  max-width: 600px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   10. HIDE TOC ON HOME / HUB PAGES
   Pages with card-grid components are landing pages that don't need a TOC.
   Uses MkDocs Material's metadata-based hide via page-level front matter.
   -------------------------------------------------------------------------- */

/* Hide right-side TOC when body has no meaningful headings to navigate */
.md-content .card-grid ~ .md-typeset h2:only-of-type {
  margin-top: 2rem;
}