/*
Notes:
-- Unit Conversion --
---------------------
* 1 rem --> 16 px | * 1 rem --> 12 pt

-- CSS Styling Order System --
------------------------------
I use my own custom CSS Architecture for prioritizing maintainability,
which I named it 'FoCoMUR' styling system
* 1.Fo - Foundation  : Reset, Variables, Base Elements
    (e.g., :root, body, h1, etc.)
* 2.Co - Component   : BEM Blocks/Elements
    (e.g., .navbar, .card__image, etc.)
* 3.M - Modifier     : State/theme Overrides
    (e.g., .button--is-active, .image--is-hidden, etc.)
* 4.U - Utilities    : Atomic helpers
    (e.g., .u-margin-top-10, .util-text-center, etc.)
* 5.R - Responsive   : Mobile-first media queries
    (e.g., @media (min-width: 768px) { ... },etc.)
*/

/*  # -------------------------------------------------- #
    #                   Foundation                       #
    # -------------------------------------------------- # */
* {
    /* --- Box Model --- */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* --- Variables --- */
    /* *8-Point Spacing System */
    --space-3xs: 0.125rem;  /* 2px - For Tiny Detail */
    --space-2xs: 0.25rem;   /* 4px - For Small Detail */
    --space-xs: 0.5rem;     /* 8px - Space between small elements */
    --space-sm: 1rem;       /* 16px - Space between items inside a component */
    --space-md: 1.5rem;     /* 24px - Space between paragraph or the suchlike */
    --space-lg: 2rem;       /* 32px - Space padding inside small component */
    --space-xl: 3rem;       /* 48px - Space padding inside section */
    --space-2xl: 4rem;      /* 64px - Big space when needed */
    --space-3xl: 5rem;      /* 80px - More bigger space when needed */
    --space-4xl: 6rem;      /* 96px - Extra big space when needed */
    --space-5xl: 7rem;      /* 128px - Extra big space when needed */
    --space-6xl: 8rem;      /* 160px - Extra big space when needed */

    /* *Typographic Scale System */
    --font-size-xs: 0.75rem;    /* 12px or 9pt */
    --font-size-sm: 0.875rem;   /* 14px or 10.5pt */
    --font-size-base: 1rem;     /* 16px or 12pt */
    --font-size-md: 1.25rem;    /* 20px or 15pt */
    --font-size-lg: 1.5rem;     /* 24px or 18pt */
    --font-size-xl: 2rem;       /* 32px or 24pt */
    --font-size-2xl: 2.5rem;    /* 40px or 30pt */
    --font-size-3xl: 3rem;      /* 48px or 36pt */
    --font-size-4xl: 3.5rem;    /* 56px or 42pt */

    /* *Line Height */
    --line-height-tight: 1.2;   /* Line spacing for heading text (h1,h2,h3,etc.) */
    --line-height-normal: 1.6;  /* Line spacing for body text */
    --line-height-loose: 2;     /* Optional line spacing for large text blocks */

    /* *Radius Value */
    --radius-xs: 0.125rem;  /* 2px - For small elements */
    --radius-sm: 0.25rem;   /* 4px - For medium */
    --radius-base: 0.5rem;  /* 8px - For large elements */
    --radius-lg: 0.75rem;   /* 12px - For large elements */
    --radius-xl: 1rem;      /* 16px - For extra large elements */
    --radius-2xl: 1.5rem;   /* 24px - For extra large elements */

    /* *Coloring */
    --color-light-gray: rgb(230, 230, 230);
    --color-light-blue: rgb(32, 114, 202);
    --color-light-red: rgb(251, 70, 70);
    --color-light-violet: rgb(207, 159, 255);
    --color-solid-black: rgb(0, 0, 0);
    --color-solid-white: rgb(255, 255, 255);
    --color-solid-gray: rgb(160, 160, 160);
}

html {
    /* --- Box Model --- */
    padding: 0 var(--space-lg) 0;

    /* --- Interaction, Animation, & Misc --- */
    scroll-behavior: smooth;
}

body {
    /* --- Typography --- */
    font-family: 'Arial', sans-serif;
    line-height: var(--line-height-normal);
    background-color: var(--color-solid-white);
}

/*  # -------------------------------------------------- #
    #                   Component                        #
    # -------------------------------------------------- # */

.page-container {
    /* --- Layout & Positioning --- */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);

    /* --- Box Model --- */
    max-width: 1200px;
    margin: var(--space-md) auto;
    padding: var(--space-md);
}

/* =# --- Grid 1 --- */

/* ==# Grid 1 - Theme & Reusable Ruleset #- */
.input-group {
    /* --- Layout & Positioning --- */
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    /* --- Box Model --- */
    margin-bottom: var(--space-lg);
}

input[type="text"],
input[type="email"],
textarea {
    /* --- Box Model --- */
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius-sm);

    /* --- Typography --- */
    font-family: inherit; /* Inherit font style from 'body' styling */
    font-size: var(--font-size-base);
}

.rating-group {
    /* --- Layout & Positioning --- */
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: var(--space-xs);

    /* --- Box Model --- */
    margin-bottom: var(--space-xl);
    padding: 0;
    border: none;
}

.rating-item {
    /* --- Layout & Positioning --- */
    display: flex;
    align-items: center;
    gap:var(--space-xs);
}

.rating-item input[type="radio"] {
    /* --- Box Model --- */
    position: absolute; /* Hide the radio button from flow, but keep it functional */
    opacity: 0; /* Hide the input radio button from view */
    width: 0; /* Remove radio button width */
    height: 0; /* Remove radio button height */
}

.rating-item label {
    /* --- Layout & Positioning --- */
    display: block; /* So that padding and dimensions can be added */
    text-align: center;

    /* --- Box Model --- */
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius-base);
    flex-grow: 1; /* So that all buttons have the same width */
}

button[type="submit"] {
    /* --- Box Model --- */
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-sm);
    
    /* --- Typography --- */
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-solid-white);
    
    /* --- Visual --- */
    background-color: var(--color-light-blue);
}

/* ==# Grid 1 - Application-Specific Ruleset #- */
.form-title {
    /* --- Typography --- */
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
}

.form-foreword {
    /* --- Box Model --- */
    margin-bottom: var(--space-lg);

    /* --- Typography --- */
    font-size: var(--font-size-md);
    color: var(--color-light-violet);
}

.rating-legend {
    /* --- Layout & Positioning --- */
    display: block; /* So that it takes the full width */
    margin-bottom: var(--space-xs);
}

.feedback-msg-input-group {
    /* NOTE: Linter placeholder for future overrides. */
    --placeholder: ;
}

.feedback-msg-label {
    /* --- Layout & Positioning --- */
    display: block; /* So that it takes the full width */

    /* --- Box Model --- */
    margin-bottom: var(--space-xs);
}

.feedback-msg-hint {
    /* --- Typography --- */
    font-size: var(--font-size-xs);
    color: var(--color-solid-gray);
}

/* =# --- Grid 2 --- */

/* ==# Grid 2 - Application-Specific Ruleset #- */
.illustration-image {
    /* --- Box Model --- */
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/*  # -------------------------------------------------- #
    #                   Modifier                         #
    # -------------------------------------------------- # */

/* =# Animations & Interaction #- */

/* ==# Input Boxes Color Change */
input[type="text"],
input[type="email"],
textarea {
    transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-light-blue);
    box-shadow: 0 0 0 3px rgba(32, 114, 202, 0.25);
}

/* ==# Rating Item Interaction FX */
.rating-item label {
    /* --- Interaction, Animation, & Misc --- */
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

/* NOTE: Style for labels when hovered (for better user experience) */
.rating-item label:hover {
    border-color: var(--color-light-violet);
    background-color: rgba(207, 159, 255, 0.1);
}

/* NOTE: Style for the label when the radio button is selected (checked) */
.rating-item input[type="radio"]:checked + label {
    background-color: var(--color-light-blue);
    border-color: var(--color-light-blue);
    color: var(--color-solid-white);
}

/* NOTE: Style for the label when the radio button is focused (for keyboard accessibility) */
.rating-item input[type="radio"]:focus + label {
    border-color: var(--color-light-violet);
    box-shadow: 0 0 0 3px rgba(207, 159, 255, 0.5);
}

/* ==# Submit Button Interaction FX */
button[type="submit"] {
    /* --- Interaction, Animation, & Misc --- */
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

button[type="submit"]:hover {
    background-color: var(--color-light-blue);
    transform: translateY(-3px); /* Slightly lifted fx */
}

button[type="submit"]:focus {
    outline: 2px solid var(--color-light-violet);
    outline-offset: 2px;
}

/*  # -------------------------------------------------- #
    #                  Utilities                         #
    # -------------------------------------------------- # */

/*  # -------------------------------------------------- #
    #              Responsive Media                      #
    # -------------------------------------------------- # */

/* =# For 768px and up ~ for small laptop or small tablet and up #- */
@media (min-width: 768px) {

    .page-container {
        /* --- Layout & Positioning --- */
        grid-template-columns: 2fr minmax(250px, 1fr);
        gap: var(--space-md);

        /* --- Box Model --- */
        margin: var(--space-lg) auto;
        padding: var(--space-lg);
    }

    .illustration-image {
        /* --- Box Model --- */
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: var(--radius-lg);
    }
}