/* Receptsamling – följer docs/04-design_guide.md (MkDocs Design Guide).
   Avsnitt 3 färger, 4 typografi, 5 layout, 6 komponenter. */

/* ---- Brand colours (guide 3.1, DS-001/DS-002) ----
   One brand teal #00897b with own hex values instead of the theme defaults.
   The deep-orange accent differs between light and dark mode. */
[data-md-color-primary="teal"] {
  --md-primary-fg-color: #00897b;
  --md-primary-fg-color--light: #4db6ac;
  --md-primary-fg-color--dark: #00695c;
}

[data-md-color-accent="deep-orange"] {
  --md-accent-fg-color: #d84315;
  --md-accent-fg-color--transparent: rgba(216, 67, 21, 0.1);
}

[data-md-color-scheme="slate"][data-md-color-accent="deep-orange"] {
  --md-accent-fg-color: #ffab76;
  --md-accent-fg-color--transparent: rgba(255, 171, 118, 0.1);
}

/* ---- Rounded cards, figures and frames, 12 px (guide 1 and 6.1) ---- */
.md-typeset figure img,
.md-typeset img.rig,
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid > .card {
  border-radius: 12px;
}

/* Figure: full width, max 960 px, centred (guide 6.1: { .rig }). */
.md-typeset .rig {
  display: block;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
}

/* "At a glance" tiles (guide 6.1). */
.md-typeset .glance .big { font-size: 1.6rem; }

/* Mermaid diagrams: centred, scroll sideways on phones. */
.md-typeset .mermaid { text-align: center; overflow-x: auto; }

/* Numbers in tables line up (guide 4). */
.md-typeset table { font-variant-numeric: tabular-nums; }

@media screen and (max-width: 44.984em) {
  .md-typeset .glance .big { font-size: 1.2rem; }
  .md-typeset .glance.grid.cards > ul { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Responsive layout (guide 5.1) ----
   Phone portrait: nothing scrolls sideways, tables become stacked cards, code wraps.
   Desktop landscape: the page uses the full screen width. */
@media screen and (max-width: 44.984em) {
  .md-content__inner { margin-left: 0.5rem; margin-right: 0.5rem; }

  .md-content__inner > pre,
  .md-content__inner > .highlight,
  .md-content__inner > .highlight + .result {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  .md-content__inner > .tabbed-set .tabbed-labels {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    scroll-padding-inline-start: 0.5rem;
  }
  [dir="ltr"] .md-content__inner > .tabbed-set .tabbed-labels ~ .tabbed-control--prev { margin-left: -0.5rem; }
  [dir="ltr"] .md-content__inner > .tabbed-set .tabbed-labels ~ .tabbed-control--next { margin-right: -0.5rem; }

  .md-typeset img,
  .md-typeset svg,
  .md-typeset video,
  .md-typeset iframe { max-width: 100%; height: auto; }

  .md-typeset { overflow-wrap: anywhere; }

  .md-typeset pre > code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .md-typeset__scrollwrap { margin: 1em 0; padding: 0; overflow-x: visible; }
  .md-typeset__table { display: block; width: 100%; padding: 0; }

  .md-typeset table[data-stacked]:not([class]),
  .md-typeset table[data-stacked]:not([class]) tbody,
  .md-typeset table[data-stacked]:not([class]) tr,
  .md-typeset table[data-stacked]:not([class]) td { display: block; width: 100%; }

  .md-typeset table[data-stacked]:not([class]) { font-size: 0.72rem; border: 0; box-shadow: none; }

  .md-typeset table[data-stacked]:not([class]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .md-typeset table[data-stacked]:not([class]) tr {
    margin: 0 0 0.7rem;
    border: 0.05rem solid var(--md-default-fg-color--lightest);
    border-radius: 12px;
    overflow: hidden;
  }

  .md-typeset table[data-stacked]:not([class]) td {
    padding: 0.4rem 0.75rem 0.5rem;
    border: 0;
    border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
    text-align: left !important;
  }
  .md-typeset table[data-stacked]:not([class]) td:last-child { border-bottom: 0; }

  /* First cell is the card title. */
  .md-typeset table[data-stacked]:not([class]) td:first-child {
    background: var(--md-code-bg-color);
    font-weight: 700;
  }
  .md-typeset table[data-stacked]:not([class]) td:empty { display: none; }

  .md-typeset table[data-stacked]:not([class]) td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.05rem;
    font-size: 0.56rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
  }
}

@media screen and (min-width: 76.25em) {
  .md-grid { max-width: none; }
  .md-main__inner { margin-left: 0.4rem; margin-right: 0.4rem; }

  .md-typeset__table { display: block; width: 100%; }
  .md-typeset table:not([class]) { display: table; width: 100%; }
}

/* ---- Home page: hero and large image cards (guide 6.1) ---- */
.ws-home { --ws-line: rgba(30, 50, 70, .14); --ws-shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 8px 24px rgba(20, 30, 50, .08); }
[data-md-color-scheme="slate"] .ws-home { --ws-line: #00897b; --ws-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35); }

.ws-hero {
  position: relative; overflow: hidden; border-radius: 12px; margin: .4rem 0 1.4rem;
  padding: 2.6rem 2rem 2.4rem; color: #fff;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 22px),
    linear-gradient(120deg, #00897b 0%, #00695c 55%, #004d40 100%);
  background-size: 44px 100%, 100% 100%;
  animation: ws-stripes 14s linear infinite;
}
.ws-hero::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 171, 118, .55), rgba(255, 171, 118, 0) 65%);
  animation: ws-glow 7s ease-in-out infinite alternate;
}
.ws-hero__text { position: relative; z-index: 1; max-width: 40rem; }
.md-typeset .ws-hero h1 { margin: 0 0 .4rem; color: #fff; font-weight: 700; font-size: 2.6rem; letter-spacing: -.01em; }
.ws-hero p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.5; opacity: .95; }
.ws-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 !important; }
.md-typeset .ws-hero__chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; font-weight: 600; font-size: .85rem;
  color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
  transition: background .2s, transform .2s;
}
.md-typeset .ws-hero__chips a:hover { background: rgba(255, 255, 255, .3); transform: translateY(-2px); }

.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.md-typeset a.ws-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; color: var(--md-default-fg-color);
  background: var(--md-default-bg-color); border: 1px solid var(--ws-line); box-shadow: var(--ws-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.md-typeset a.ws-card:hover, .md-typeset a.ws-card:focus-visible {
  transform: translateY(-5px); border-color: #00897b; box-shadow: 0 2px 4px rgba(20, 30, 50, .08), 0 18px 38px rgba(0, 137, 123, .25);
}
.ws-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e6f2ef; }
.ws-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: transform .6s ease; }
.ws-card:hover .ws-card__img img { transform: scale(1.06); }
.ws-card__body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.ws-card__body strong { font-size: 1.25rem; font-weight: 700; }
.ws-card__body > span:not(.ws-card__go) { font-size: .85rem; line-height: 1.45; color: var(--md-default-fg-color--light); }
.ws-card__go {
  align-self: flex-start; margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-weight: 700; font-size: .85rem; color: #00897b;
}
[data-md-color-scheme="slate"] .ws-card__go { color: #4db6ac; }
.ws-card__go::after { content: "\2192"; transition: transform .25s ease; font-size: 1.1rem; }
.ws-card:hover .ws-card__go::after { transform: translateX(6px); }
.ws-note { margin-top: 1.4rem; font-size: .75rem; color: var(--md-default-fg-color--light); }

@keyframes ws-stripes { to { background-position: 44px 0, 0 0; } }
@keyframes ws-glow { to { transform: translate(-30px, 20px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .ws-hero, .ws-hero::after { animation: none; }
  .md-typeset a.ws-card, .ws-card__img img { transition: none; }
}
@media (max-width: 44.984em) {
  .ws-grid { grid-template-columns: 1fr; }
  .ws-hero { padding: 1.6rem 1.1rem 1.5rem; }
  .md-typeset .ws-hero h1 { font-size: 2rem; }
}

/* Wide screens: the tabs hold the navigation on the start and scan pages. On phone and tablet the
   same sidebar is the menu drawer, so it stays. */
@media (min-width: 76.25em) {
  body:has(.ws-home, #scan-app) .md-sidebar--primary { display: none; }
}

/* ---- Dark mode surfaces (guide 3.2, DS-006) ---- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0b0b0a;
  --md-default-bg-color--light: rgba(11, 11, 10, .54);
  --md-default-bg-color--lighter: rgba(11, 11, 10, .26);
  --md-default-bg-color--lightest: rgba(11, 11, 10, .07);
  --md-default-fg-color: #faf9f5;
  --md-default-fg-color--light: #faf9f5;
  --md-default-fg-color--lighter: #c2c0b6;
  --md-default-fg-color--lightest: #2b2b29;
  --md-typeset-color: #faf9f5;
  --md-typeset-a-color: #4db6ac;
  --md-typeset-table-color: #2b2b29;
  --md-typeset-table-color--light: rgba(250, 249, 245, .04);
  --md-code-bg-color: #141413;
  --md-code-fg-color: #faf9f5;
  --md-footer-bg-color: #050505;
  --md-footer-bg-color--dark: #000;
  --md-footer-fg-color: #faf9f5;
  --md-footer-fg-color--light: #faf9f5;
  --md-footer-fg-color--lighter: #c2c0b6;
  --md-admonition-bg-color: #141413;
  --md-admonition-fg-color: #faf9f5;
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--primary,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title { background-color: #050505; }
[data-md-color-scheme="slate"] .md-typeset a.ws-card { background: #141413; }
[data-md-color-scheme="slate"] .md-tabs__link { opacity: 1; color: #faf9f5; }
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link { font-weight: 600; }

/* ---- Glowing edge on cards and boxes in dark mode (guide 3.3, DS-007) ---- */
[data-md-color-scheme="slate"] {
  --ws-glow: 0 0 3px rgba(0, 137, 123, .9), 0 0 9px rgba(0, 137, 123, .45), 0 0 20px rgba(0, 137, 123, .2),
    inset 0 0 3px rgba(0, 137, 123, .8), inset 0 0 9px rgba(0, 137, 123, .35), inset 0 0 18px rgba(0, 137, 123, .14);
  --ws-glow-soft: 0 0 3px rgba(0, 137, 123, .7), 0 0 8px rgba(0, 137, 123, .3),
    inset 0 0 3px rgba(0, 137, 123, .6), inset 0 0 8px rgba(0, 137, 123, .22);
}
[data-md-color-scheme="slate"] a.ws-card,
[data-md-color-scheme="slate"] .scan-card,
[data-md-color-scheme="slate"] .scan-review,
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details { border: 1px solid #00897b; box-shadow: var(--ws-glow); }
[data-md-color-scheme="slate"] .scan-btn,
[data-md-color-scheme="slate"] .scan-thumb img,
[data-md-color-scheme="slate"] #scan-app input,
[data-md-color-scheme="slate"] #scan-app textarea,
[data-md-color-scheme="slate"] .pwa-status { box-shadow: var(--ws-glow-soft); }

/* Text and number fields a little lighter than the cards around them (guide 3.2) */
[data-md-color-scheme="slate"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
[data-md-color-scheme="slate"] select,
[data-md-color-scheme="slate"] textarea { background-color: #2c2c2a; }

/* ---- Orange for names, white for values (guide 3.4, DS-008) ---- */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4,
.ws-card__body strong, #scan-app label, #scan-app legend,
.md-typeset table:not([class]) td:first-child { color: #d84315; }
[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,
[data-md-color-scheme="slate"] .ws-card__body strong, [data-md-color-scheme="slate"] #scan-app label,
[data-md-color-scheme="slate"] #scan-app legend,
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td:first-child { color: #ffab76; }
/* The large title on the green banner stays white (orange has too little contrast on green). */
.md-typeset .ws-hero h1 { color: #fff; }
/* Checkbox text in the scan form is a value, not a name. */
#scan-app label.scan-check { color: var(--md-default-fg-color); }

/* ---- Home button in the header (guide 6.1, DS-009) ---- */
.ws-home-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.ws-home-btn:hover { opacity: .75; }

/* ---- Page icons in the title and in the menu (guide 6.1, DS-011) ---- */
.ws-title { display: flex; align-items: center; gap: .9rem; }
.ws-title-icon { width: 112px; height: 70px; flex: none; border-radius: 12px; object-fit: cover; border: 1px solid #00897b; }
[data-md-color-scheme="slate"] .ws-title-icon { box-shadow: 0 0 3px rgba(0,137,123,.9), 0 0 10px rgba(0,137,123,.45); }
.md-nav--primary .ws-navlink { display: flex; align-items: flex-start; gap: .75rem; padding-top: .45rem; padding-bottom: .45rem; }
.ws-nav-icon { width: 76px; height: 48px; flex: none; border-radius: 10px; object-fit: cover; border: 1px solid #00897b; }
.ws-nav-text { display: flex; flex-direction: column; min-width: 0; }
.ws-nav-title { font-weight: 600; }
.ws-nav-desc { font-size: .68rem; line-height: 1.35; opacity: .75; white-space: normal; margin-top: .1rem; }
.md-tabs__link.ws-navlink { display: inline-flex; align-items: center; gap: .4rem; }
.ws-nav-icon--tab { width: 40px; height: 25px; border-radius: 5px; }
@media (max-width: 44.984em) { .ws-title-icon { width: 80px; height: 50px; } .ws-title { gap: .7rem; } }
.ws-navlink .md-nav__icon { margin-left: auto; }

/* ---- Printing (guide 8): white page, black text, no app furniture ---- */
@media print {
  .md-typeset .rig { break-inside: avoid; }
  .pwa-status, .pwa-install, .ws-home-btn, .scan-actions { display: none !important; }
  .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { color: #000; }
  .md-typeset .admonition, .md-typeset details, .md-typeset tr { break-inside: avoid; }
}