@charset "UTF-8";
/*
  ================================================================================
  INTRODUCTION TO SCSS (Sass)
  ================================================================================

  What is SCSS?
  -------------
  SCSS (Sassy CSS) is a CSS PREPROCESSOR - it's an enhanced version of CSS that
  gets compiled (converted) into regular CSS that browsers can understand.

  Think of it like this:
  - SCSS = Source code you write (with superpowers)
  - CSS = What the browser actually receives

  Why use SCSS?
  -------------
  1. Variables - Store values once, reuse everywhere
  2. Nesting - Write selectors in a hierarchical way (like HTML)
  3. Mixins - Reusable blocks of CSS (like functions)
  4. Partials - Split CSS into multiple files, then combine them
  5. Operators - Do math in your CSS (width: 100% / 3)

  How it works:
  -------------
  You write .scss files → A compiler processes them → Outputs .css files

  For this project:
  - styles.scss = Your source file (this file)
  - styles.css = The compiled output (what the browser uses)

  To compile SCSS to CSS, you need a tool like:
  - Live Sass Compiler (VS Code extension)
  - npm scripts with sass package
  - Build tools like Vite, Webpack, or Gulp

  ================================================================================
*/
/* ========================================
   1. Variables
   ======================================== */
/* 
  CSS CUSTOM PROPERTIES (CSS Variables)
  --------------------------------------
  These start with -- and are used with var()
  They work in the browser at runtime
  Great for theming and dynamic values

  Tip: Define them on :root so they're available everywhere
*/
:root {
  --orange-500: hsl(25, 97%, 53%);
  --white: hsl(0, 0%, 100%);
  --grey-500: hsl(217, 12%, 63%);
  --grey-500-aa: hsl(217, 12%, 64%);
  --grey-900: hsl(213, 19%, 18%);
  --grey-950: hsl(216, 12%, 8%);
  --rating-button-bg: hsl(213, 19%, 22%);
  --selection-pill-bg: hsl(213, 19%, 21%);
  --attribution-link: hsl(228, 45%, 59%);
}

/*
  SCSS VARIABLES
  --------------
  These start with $ and are compiled away into CSS
  They're replaced with their values BEFORE the browser sees the file
  Great for values you use repeatedly but don't need to change dynamically

  Syntax: $variable-name: value;
  Usage: property: $variable-name;

  Notice: No var() needed - SCSS handles the substitution
*/
/*
  MIXINS - Reusable CSS Blocks
  =============================

  What: Mixins are like functions in programming - they let you reuse
  chunks of CSS without copying and pasting

  Why: DRY (Don't Repeat Yourself) - change once, use everywhere

  How to create:
  @mixin mixin-name($parameter) {
    // CSS properties here
  }

  How to use:
  @include mixin-name(value);

  The @content directive lets you pass in additional CSS rules
*/
/*
  MIXIN: desktop
  --------------
  Creates a media query for desktop screens.
  Instead of writing @media (min-width: 768px) everywhere,
  you just write @include desktop { }

  The @content keyword means "insert whatever CSS is inside the curly braces"
*/
/*
  MIXIN: circle
  -------------
  Creates a perfect circle with centered content.
  Used for the star icon and rating buttons.

  Parameters:
  - $size: The width and height (makes it a square, then border-radius makes it circular)

  What it outputs:
  - width and height (same value = square)
  - border-radius: 50% (square + 50% radius = circle)
  - display: grid + place-items: center (centers content both horizontally and vertically)
*/
/*
  MIXIN: focus-ring
  -----------------
  Creates a consistent focus outline for accessibility.
  Using a mixin ensures all focus states look identical.

  The hsla() function is like hsl() but with alpha (transparency):
  - h = hue (25 = orange)
  - s = saturation (97% = very vibrant)
  - l = lightness (53% = medium brightness)
  - a = alpha (0.45 = 45% opaque, 55% transparent)
*/
/* ========================================
   2. Reset / Base
   ======================================== */
/*
  RESET STYLES
  ------------
  Browsers have default styles that vary between browsers.
  A reset normalizes these so your site looks consistent everywhere.

  box-sizing: border-box means padding and border are INCLUDED in width/height
  (This is much more intuitive than the default behavior)
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/*
  color-scheme: dark tells the browser this is a dark theme site.
  This affects default UI elements like scrollbars and form controls.
*/
html {
  color-scheme: dark;
}

/*
  BASE STYLES
  -----------
  These apply to the entire document.
  Notice the SCSS @include syntax - this inserts the media query from our mixin.

  What you write:
  @include desktop { font-size: 0.9375rem; }

  What SCSS compiles to:
  @media (min-width: 48rem) { font-size: 0.9375rem; }
*/
body {
  min-height: 100vh;
  padding: 1.5rem 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  background-color: var(--grey-950);
  color: var(--grey-500);
  font-family: "Overpass", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.57;
}
@media (min-width: 48rem) {
  body {
    font-size: 0.9375rem;
  }
}

/*
  display: block removes the tiny gap that appears below inline images.
  max-width: 100% makes images responsive - they never exceed their container.
*/
img {
  display: block;
  max-width: 100%;
}

/*
  font: inherit ensures form elements use the same font as the body.
  Without this, buttons and inputs might use browser defaults.
*/
button,
input,
textarea,
select {
  font: inherit;
}

/*
  Remove default list styling - we'll style the rating list ourselves.
*/
ol {
  padding: 0;
  list-style: none;
}

/*
  UTILITY CLASSES
  ===============
*/
/*
  [hidden] attribute selector - hides elements completely.
  !important ensures this overrides any other display property.
*/
[hidden] {
  display: none !important;
}

/*
  .visually-hidden - Hides from sighted users but keeps content for screen readers.
  This is the accessibility technique we discussed earlier!

  Each property serves a purpose:
  - position: absolute - removes from normal flow
  - width/height: 1px - makes it tiny
  - clip/clip-path - clips the content so it's not visible
  - overflow: hidden - prevents any spillover
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   3. Layout
   ======================================== */
/*
  LAYOUT
  ------
  main is the container for the entire rating component.

  flex: 1 makes it grow to fill available space
  display: grid + place-items: center centers the content both ways

  SCSS Note: No special SCSS features here - just regular CSS!
  SCSS doesn't change how CSS works, it just adds convenience features.
*/
main {
  flex: 1;
  width: 100%;
  display: grid;
  place-items: center;
}

/* ========================================
   4. Card Component
   ======================================== */
/*
  CARD COMPONENT
  --------------
  This styles both the rating state and thank-you state cards.

  SCSS Feature: Selector grouping
  You can list multiple selectors separated by commas, just like CSS.

  width: min(100%, 20.4375rem) is a modern CSS technique:
  - On mobile: Use 100% of available width
  - On desktop: Cap at 20.4375rem (about 327px)
  This makes the card responsive without media queries!
*/
#rating-state,
#thank-you-state {
  width: min(100%, 20.4375rem);
  padding: 1.5rem;
  border-radius: 0.9375rem;
  /*
    Background gradient creates a subtle top-to-bottom fade:
    - Starts lighter at the top (hsl(213, 19%, 18%))
    - Gets darker toward the bottom (hsl(216, 12%, 8%))
    This adds depth and visual interest
  */
  background: radial-gradient(circle at top, hsl(213, 19%, 18%) 0%, hsl(214, 20%, 16%) 35%, hsl(216, 12%, 8%) 100%);
}
@media (min-width: 48rem) {
  #rating-state,
  #thank-you-state {
    width: 25.75rem;
    padding: 2rem;
    border-radius: 1.875rem;
  }
}

/*
  HEADINGS
  --------
  Styling h1 and h2 together ensures consistency.
  They share the same visual treatment, just different semantic meaning.
*/
h1,
h2 {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}
@media (min-width: 48rem) {
  h1,
  h2 {
    font-size: 1.75rem;
  }
}

/*
  Paragraphs use the grey color for softer contrast.
  This creates visual hierarchy - headings pop, body text is subdued.
*/
p {
  color: var(--grey-500);
}

/* ========================================
   5. Rating State Styles
   ======================================== */
/*
  SCSS NESTING - ONE OF THE BEST FEATURES!
  ========================================

  What is nesting?
  Instead of writing the full selector path every time:

  CSS way (repetitive):
  #rating-state .icon-wrapper { }
  #rating-state h1 { }
  #rating-state > p { }

  SCSS way (nested - like HTML structure):
  #rating-state {
    .icon-wrapper { }
    h1 { }
    > p { }
  }

  Benefits:
  - Easier to read - mirrors HTML structure
  - Less typing - no need to repeat parent selectors
  - Better organization - related styles stay together

  Warning: Don't nest too deeply (max 3-4 levels) or it becomes hard to maintain!

  What SCSS compiles this to:
  #rating-state .icon-wrapper { }
  #rating-state h1 { }
  #rating-state > p { }
*/
#rating-state {
  /*
    The .icon-wrapper contains the star icon.
    @include circle(2.5rem) expands to the circle mixin code.

    What you write: @include circle(2.5rem);
    What SCSS outputs:
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      display: grid;
      place-items: center;
  */
}
#rating-state .icon-wrapper {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  background-color: var(--rating-button-bg);
}
@media (min-width: 48rem) {
  #rating-state .icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 1.875rem;
  }
}
#rating-state h1 {
  margin-bottom: 0.75rem;
}
@media (min-width: 48rem) {
  #rating-state h1 {
    margin-bottom: 0.625rem;
  }
}
#rating-state {
  /*
    The > symbol means "direct child only"
    This targets <p> elements that are immediate children of #rating-state
    It won't target <p> elements nested deeper (like inside the form)
  */
}
#rating-state > p {
  margin-bottom: 1.5rem;
}

/* ========================================
   6. Thank-You State Styles
   ======================================== */
/*
  THANK-YOU STATE
  ---------------
  This section shows deeper nesting - notice how we nest 2-3 levels deep.

  HTML structure this mirrors:
  <section id="thank-you-state">
    <div class="illustration-wrapper">
      <img src="...">
    </div>
    <p class="selection-pill">...</p>
    <h2>...</h2>
    <p>...</p>
  </section>
*/
#thank-you-state {
  /* Center everything */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#thank-you-state:focus {
  box-shadow: 0 0 0 2px var(--grey-950), 0 0 0 4px var(--orange-500);
  outline: none;
}
#thank-you-state {
  /*
    NESTING LEVEL 2: Child selector
    This targets .illustration-wrapper inside #thank-you-state

    What SCSS compiles this to:
    #thank-you-state .illustration-wrapper { }
    #thank-you-state .illustration-wrapper img { }
  */
}
#thank-you-state .illustration-wrapper {
  margin-bottom: 2rem;
}
#thank-you-state .illustration-wrapper img {
  width: 9rem;
  height: 6.75rem;
  object-fit: contain;
}
@media (min-width: 48rem) {
  #thank-you-state .illustration-wrapper img {
    width: 10.125rem;
    height: 6.75rem;
  }
}
#thank-you-state {
  /*
    The selection pill shows the selected rating (e.g., "You selected 4 out of 5")
    border-radius: 999px creates a pill shape (fully rounded ends)
  */
}
#thank-you-state .selection-pill {
  margin-bottom: 2rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  background-color: var(--selection-pill-bg);
  color: var(--orange-500);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 48rem) {
  #thank-you-state .selection-pill {
    padding: 0.5rem 1.25rem;
  }
}
#thank-you-state h2 {
  margin-bottom: 0.625rem;
}
#thank-you-state {
  /*
    :last-child pseudo-class targets the last <p> element
    This is the descriptive text at the bottom
  */
}
#thank-you-state > p:last-child {
  max-width: 21rem;
}

/* ========================================
   7. Form Elements
   ======================================== */
/*
  FORM STYLES
  -----------
  This shows nesting with attribute selectors and pseudo-classes.

  The # symbol means "select by ID" - same as CSS!
*/
#rating-form {
  /*
    fieldset is a form element that groups related inputs.
    min-inline-size: 0 prevents flex/grid layout issues.
    (This is a technical fix for a browser quirk)
  */
}
#rating-form fieldset {
  min-inline-size: 0;
  padding: 0;
  border: 0;
}
#rating-form {
  /*
    NESTING WITH PSEUDO-CLASSES
    ---------------------------
    &:not([hidden]) means:
    "Select #rating-error element that does NOT have the hidden attribute"

    The & symbol refers to the parent selector (#rating-error in this case)

    What SCSS compiles this to:
    #rating-form #rating-error:not([hidden]) { }

    Why use &? It lets you build on the parent selector!
  */
}
#rating-form #rating-error:not([hidden]) {
  margin-bottom: 1rem;
  color: var(--orange-500);
  font-weight: 700;
}
#rating-form {
  /*
    RATING OPTIONS - The 5 circular buttons
    --------------------------------------
    This nests multiple levels deep - notice how organized it stays!
  */
}
#rating-form .rating-options {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 48rem) {
  #rating-form .rating-options {
    margin-bottom: 2rem;
  }
}
#rating-form .rating-options {
  /*
    Each label is styled as a circular button.
    The actual <input> is visually hidden, the <label> is clickable.
  */
}
#rating-form .rating-options label {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--rating-button-bg);
  color: var(--grey-500-aa);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  /*
    TRANSITIONS - Smooth animations
    -------------------------------
    transition: property duration timing-function

    This animates background-color and color over 0.3 seconds.
    When you hover, the color change is smooth, not instant!
  */
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (min-width: 48rem) {
  #rating-form .rating-options label {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1rem;
  }
}
#rating-form {
  /*
    SUBMIT BUTTON
    -------------
    button[type="submit"] is an attribute selector.
    It targets <button> elements where type equals "submit".

    This is more specific than just button {} 
    (in case you had other button types)
  */
}
#rating-form button[type=submit] {
  width: 100%;
  min-height: 2.8125rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--orange-500);
  color: var(--grey-950);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================
   8. Interactive States
   ======================================== */
/*
  INTERACTIVE STATES
  ------------------
  These styles define what happens when users interact with elements:
  - :hover - When mouse is over the element
  - :focus-visible - When element receives keyboard focus
  - :active - When element is being clicked/pressed
  - :checked - When radio button is selected

  ACCESSIBILITY NOTE:
  Always provide visible focus states! Keyboard users need to see where they are.
*/
/*
  RATING BUTTONS - Interactive states
  -----------------------------------
  Notice we're outside #rating-form now, targeting .rating-options directly.
  This is fine because .rating-options is unique enough on its own.
*/
.rating-options {
  /*
    HOVER STATE
    -----------
    When user hovers over a rating button:
    - Background becomes orange
    - Text becomes white

    The transition property (defined earlier) makes this change smooth!
  */
}
.rating-options label:hover {
  background-color: var(--orange-500);
  color: var(--white);
}
.rating-options label {
  /*
    ACTIVE STATE
    ------------
    When user clicks (but hasn't released yet):
    - transform: translateY(1px) moves the button down 1px
    This creates a "pressed" effect, like a real button!
  */
}
.rating-options label:active {
  transform: translateY(1px);
}
.rating-options {
  /*
    FOCUS STATE - ACCESSIBILITY!
    ----------------------------
    input:focus-visible + label means:
    "When the input receives keyboard focus, style the next label"

    The + is the "adjacent sibling selector" - it targets the element
    immediately after the input (which is the label).

    Why :focus-visible instead of :focus?
    - :focus-visible only shows for keyboard navigation
    - It won't show when clicking with a mouse (cleaner UX)

    @include focus-ring inserts our mixin's box-shadow!
  */
}
.rating-options input:focus-visible + label {
  box-shadow: 0 0 0 2px var(--grey-950), 0 0 0 4px var(--orange-500);
  position: relative;
  z-index: 1;
}
.rating-options {
  /*
    CHECKED STATE - Selected rating
    -------------------------------
    input:checked + label means:
    "When the radio input is checked, style the next label"

    This makes the selected rating button white with dark text.
    The user can see which option they picked!
  */
}
.rating-options input:checked + label {
  background-color: var(--white);
  color: var(--grey-950);
}

/*
  SUBMIT BUTTON - Interactive states
  ----------------------------------
  Same pattern as rating buttons, different colors.
*/
#rating-form button[type=submit]:hover {
  background-color: var(--white);
  color: var(--grey-950);
}
#rating-form button[type=submit]:focus-visible {
  box-shadow: 0 0 0 2px var(--grey-950), 0 0 0 4px var(--orange-500);
}
#rating-form button[type=submit]:active {
  transform: translateY(1px);
}

/* ========================================
   9. Attribution Footer
   ======================================== */
/*
  ATTRIBUTION FOOTER
  ------------------
  The credit line at the bottom of the page.

  This is a Frontend Mentor requirement - they ask that you credit them
  when using their designs for learning purposes.
*/
.attribution {
  padding-top: 1rem;
  font-size: 0.6875rem;
  text-align: center;
  color: var(--grey-500);
  /*
    NESTING INSIDE A CLASS
    ----------------------
    This targets <a> elements inside .attribution

    What SCSS compiles this to:
    .attribution a { color: hsl(228, 45%, 44%); }

    Nesting keeps related styles together - you can see at a glance
    that this link style only applies within the attribution footer.
  */
}
.attribution a {
  color: var(--attribution-link);
}
.attribution a:focus-visible {
  box-shadow: 0 0 0 2px var(--grey-950), 0 0 0 4px var(--orange-500);
  border-radius: 0.25rem;
}

/*
  ================================================================================
  SCSS SUMMARY - WHAT YOU'VE LEARNED
  ================================================================================

  This file demonstrates the main SCSS features:

  1. VARIABLES ($variable-name)
     - Store values once, reuse everywhere
     - Compiled away - browsers never see them

  2. MIXINS (@mixin and @include)
     - Reusable blocks of CSS (like functions)
     - @content lets you pass in CSS rules
     - Can accept parameters for flexibility

  3. NESTING
     - Write selectors in a hierarchical way
     - Mirrors HTML structure
     - Keeps related styles organized
     - Don't nest more than 3-4 levels deep!

  4. PARENT SELECTOR (&)
     - Refers to the parent in nested rules
     - Allows pseudo-classes like &:hover
     - Builds complex selectors cleanly

  5. PARTIALS (not shown here)
     - Split SCSS into multiple files
     - Files starting with _ are "partials"
     - @use or @import to combine them

  ================================================================================

  SCSS vs. CSS - When to use what?

  Use SCSS when you want:
  ✓ Variables that are compiled away (faster than CSS custom properties)
  ✓ Nesting for better organization
  ✓ Mixins for reusable patterns
  ✓ To split code into multiple files

  Stick with CSS when:
  ✓ You need runtime theming (use CSS custom properties --variable)
  ✓ The project is small and simple
  ✓ You're learning CSS fundamentals (master CSS first!)

  ================================================================================

  NEXT STEPS FOR LEARNING:

  1. Try modifying the variables at the top - see how it affects the whole design
  2. Create a new mixin for a common pattern you notice
  3. Experiment with nesting - but watch out for getting too deep!
  4. Look at the compiled styles.css to see what SCSS produces

  Remember: SCSS is a TOOL, not a replacement for knowing CSS.
  You still need to understand CSS - SCSS just makes it more convenient!

  ================================================================================
*/