@charset "UTF-8";
/*
  sample-stylesheet.css: a complete, commented CSS stylesheet.
  Free to use for testing and teaching. From 99helpers.com/file-types/css
  It styles sample-demo.html, which sits next to it, but every rule is
  explained here, so you can read it on its own.
*/

/* 1. Cascade layers: name them once, in order. Rules in a later layer win
      over rules in an earlier one, however specific the earlier ones are. */
@layer reset, base, components, utilities;

/* 2. Custom properties (CSS variables): defined once on :root, used below
      with var(). Change a value here and it changes everywhere. */
:root {
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #475569;
  --card: #f1f5f9;
  --border: #e2e8f0;
  --accent: #046eff;
  --radius: 12px;
  --space: 1rem;
  color-scheme: light dark;
}

/* 3. A media query: the same variables get dark values when the device is
      set to dark mode. Nothing else in the file has to change. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --fg: #e2e8f0;
    --muted: #94a3b8;
    --card: #111a2e;
    --border: #1e293b;
    --accent: #60a5fa;
  }
}

/* 4. A small reset, in the lowest layer */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
}

/* 5. Element selectors and inheritance: the font and colour set on body
      flow down to everything inside it unless something overrides them. */
@layer base {
  body {
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--fg);
    background: var(--bg);
  }
  h1, h2 { line-height: 1.2; }
  a { color: var(--accent); }
  a:hover, a:focus-visible { text-decoration-thickness: 3px; }
  code { background: var(--card); padding: 0.1em 0.35em; border-radius: 4px; }
}

@layer components {
  .wrap { max-width: 52rem; margin: 0 auto; padding: 2rem var(--space); }

  /* 6. Grid layout: auto-fit with minmax() lets the cards reflow from one
        column to several as the window widens, with no media query. */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space);
  }

  /* 7. Nesting: rules inside a rule apply to its descendants, and & stands
        for the parent selector. Native in current browsers since 2023. */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space);
    transition: transform 0.2s ease;

    & h2 { margin-top: 0; font-size: 1.15rem; }
    &:hover { transform: translateY(-3px); }
  }

  /* 8. Specificity: in the same layer, the more specific selector wins,
        even when the less specific rule comes later in the file. */
  .card .price { font-size: 1.6rem; font-weight: 700; } /* (0,2,0): wins */
  .price { font-size: 1rem; }                          /* (0,1,0): loses */

  /* 9. Pseudo-elements and :has(): ::before adds content that isn't in the
        HTML, and :has() styles a card by what it contains. */
  .tag::before { content: "#"; color: var(--muted); }
  .card:has(.tag-new) { border-color: var(--accent); border-width: 2px; }

  /* The status line in the demo page: if this rule runs, the CSS loaded. */
  .css-off { display: none; }
  .css-check::after { content: "Stylesheet: loaded (this text comes from the CSS file)"; color: var(--accent); font-weight: 600; }

  /* 10. Animation: keyframes, then switched off for people who have asked
         their device for reduced motion. */
  @keyframes pulse {
    50% { opacity: 0.35; }
  }
  .dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse 2s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .dot { animation: none; }
    .card { transition: none; }
  }

  /* 11. A feature query and a container query: the header switches to two
         columns when its container (not the window) is wide enough. */
  @supports (container-type: inline-size) {
    .hero-box { container-type: inline-size; }
    @container (min-width: 40rem) {
      .hero { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space); align-items: center; }
    }
  }
}

/* 12. Utilities in the last layer: they beat the components above whatever
       their specificity. Unlayered rules would beat all layers. */
@layer utilities {
  .muted { color: var(--muted); }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* 13. Print styles: what changes when the page is printed or saved as PDF. */
@media print {
  .dot { display: none; }
  .card { break-inside: avoid; border-color: #999; }
  a::after { content: " (" attr(href) ")"; }
}