/* ============================================================
   GetWardrobe Help Center — Custom Styles
   Brand: #0288d1 (blue), #111111 (dark text), Montserrat font
   ============================================================ */

/* Import Montserrat from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ---- Brand color overrides (light mode) ---- */
:root {
  --md-primary-fg-color:        #0288d1;
  --md-primary-fg-color--light: #29b6f6;
  --md-primary-fg-color--dark:  #01579b;
  --md-accent-fg-color:         #0288d1;
  --md-default-fg-color:        #111111;

  /* Override Material's default font */
  --md-text-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Dark mode overrides ---- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #29b6f6;
  --md-primary-fg-color--light: #4fc3f7;
  --md-primary-fg-color--dark:  #0288d1;
  --md-accent-fg-color:         #29b6f6;
}

/* ---- Typography ---- */
.md-typeset {
  font-family: var(--md-text-font);
  line-height: 1.7;
  color: var(--md-default-fg-color);
}

/* Headings — slightly bolder */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--md-text-font);
  font-weight: 600;
  color: #111111;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #e0e0e0;
}

/* Header bar — match brand blue */
.md-header {
  background-color: var(--md-primary-fg-color);
}

/* ---- Navigation ---- */
/* Active nav item uses brand blue */
.md-nav__link--active {
  color: var(--md-primary-fg-color) !important;
  font-weight: 600;
}

/* ---- Cards (index pages) ---- */
.md-typeset .grid.cards > ul > li {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 16px rgba(2, 136, 209, 0.15);
  transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  border-color: #333;
}

/* ---- Images (screenshots) ---- */
.md-typeset img {
  border-radius: 10px;
  max-width: 360px;             /* Phone screenshots — constrain width */
  display: block;
  margin: 1.5rem auto;          /* Center images */
}

/* Allow full-width images when explicitly marked */
.md-typeset img[src*="wide"],
.md-typeset img[src*="banner"],
.md-typeset .full-width img {
  max-width: 100%;
}

[data-md-color-scheme="slate"] .md-typeset img {
  /* No shadow — transparent screenshots blend with background */
}

/* ---- Admonitions — brand blue tints ---- */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--md-primary-fg-color);
}

.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
  background-color: rgba(2, 136, 209, 0.1);
}

.md-typeset .admonition.example,
.md-typeset details.example {
  border-color: var(--md-primary-fg-color);
}

.md-typeset .admonition.example > .admonition-title,
.md-typeset details.example > summary {
  background-color: rgba(2, 136, 209, 0.08);
}

/* ---- Admonition colors matching Tilda ---- */
/* Tip = blue arrow (Tilda #0288d1) — uses brand blue */
.md-typeset .admonition.tip {
  border-color: #0288d1;
}
.md-typeset .admonition.tip > .admonition-title {
  background-color: rgba(2, 136, 209, 0.1);
}
.md-typeset .admonition.tip > .admonition-title::before {
  background-color: #0288d1;
}

/* Info = green info circle (Tilda #269238) */
.md-typeset .admonition.info {
  border-color: #269238;
}
.md-typeset .admonition.info > .admonition-title {
  background-color: rgba(38, 146, 56, 0.1);
}
.md-typeset .admonition.info > .admonition-title::before {
  background-color: #269238;
}

/* Warning = yellow note (Tilda #ffeb3b) */
.md-typeset .admonition.warning {
  border-color: #f9a825;
}
.md-typeset .admonition.warning > .admonition-title {
  background-color: rgba(249, 168, 37, 0.1);
}
.md-typeset .admonition.warning > .admonition-title::before {
  background-color: #f9a825;
}

/* ---- Content tabs — brand styling ---- */
.md-typeset .tabbed-labels > label.tabbed-alternate:checked,
.md-typeset .tabbed-labels > label:hover {
  color: var(--md-primary-fg-color);
}

/* ---- Footer social links ---- */
.md-social__link {
  color: white;
}

/* ---- Feedback section ---- */
.md-feedback {
  margin-top: 2rem;
}

/* ---- Buttons / links ---- */
.md-typeset a {
  color: var(--md-primary-fg-color);
}

.md-typeset a:hover {
  color: var(--md-primary-fg-color--dark);
}