/*
   STYLE.CSS
   EZ University Fair 2026
   Fonts: Syne (headings) + DM Sans (body)
   Colors: #cc0000 red, #f2f2f2 light grey background, white card
*/


/*
   GOOGLE FONTS IMPORT
   Syne is used for all headings and the navbar title
   DM Sans is used for all body text, labels, inputs and buttons
   Both are loaded from Google Fonts in index.html
   We reference them here by name
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border-box means padding is included inside the element width
       so a 600px element with 40px padding stays 600px total */
}

body {
    font-family: 'DM Sans', sans-serif;
    /* DM Sans is our base font for everything
       sans-serif is the fallback if DM Sans fails to load */
    background-color: #f2f2f2;
    /* light grey background, softer than pure white */
    color: #1a1a1a;
    /* near black for all text, softer than pure #000000 */
    min-height: 100vh;
    /* ensures the body always fills the full screen height
       vh stands for viewport height, 100vh = 100% of screen height */
}


/*
   NAVBAR
   Red bar at the top with logo, fair name and date
*/

.navbar {
    background-color: #cc0000;
    display: flex;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 110px;
    padding-left: 40px;
    /* pushes the logo away from the left border */
}

.navbar-logo {
    height: 100%;
    width: auto;
    border-radius: 12px;
    /* slight rounding so it does not look stuck */
    object-fit: cover;
    display: block;
    margin: 16px 0;
    /* adds space above and below so it does not touch the top and bottom borders */
}

/*
   HERO SECTION
   The section above the form with the heading,
   description and fair details
*/

.hero {
    background-color: #cc0000;
    /* hero continues the red from the navbar for a strong first impression */
    padding: 64px 40px 80px;
    /* more padding at the bottom to create space before the form card overlaps */
}

.hero-inner {
    max-width: 640px;
    /* keeps the hero content from stretching too wide on large screens */
    margin: 0 auto;
    /* centers the inner content horizontally */
}

.hero-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    /* white at 15% opacity creates a subtle pill badge */
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    /* 100px makes it a perfect pill shape */
    margin-bottom: 20px;
}

.hero-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    /* large and bold, the most important text on the page */
    color: white;
    line-height: 1.1;
    /* tight line height for large headings looks intentional not cramped */
    margin-bottom: 20px;
}

.hero-subh {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    /* white at 80% opacity, secondary to the heading */
    line-height: 1.7;
    /* generous line height makes body text comfortable to read */
    margin-bottom: 40px;
    max-width: 500px;
    /* shorter than the heading for visual variety */
}

.hero-details {
    display: flex;
    align-items: center;
    gap: 0;
    /* no gap, we use dividers between items instead */
    background: rgba(0, 0, 0, 0.15);
    /* dark overlay creates a frosted panel effect on the red background */
    border-radius: 12px;
    padding: 20px 24px;
}

.hero-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    /* each item takes equal space in the row */
}

.hero-detail-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-detail-value {
    font-family: 'Syne', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
}

.hero-detail-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    /* subtle vertical line between detail items */
    margin: 0 24px;
}


/*
   FORM SECTION
   The white lifted card that holds the registration form
   it sits below the hero and overlaps it slightly
*/

.form-section {
    padding: 0 24px 64px;
    /* no top padding so the card can overlap the hero */
    margin-top: -32px;
    /* negative margin pulls the card up over the hero bottom edge
       this creates the overlapping card effect */
    display: flex;
    justify-content: center;
    /* centers the card horizontally */
}

.form-card {
    background: white;
    border-radius: 16px;
    /* more rounded than standard to look modern */
    padding: 40px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
    /* lifted shadow, more pronounced than a flat card
       values: 0 horizontal, 8px vertical offset, 40px blur, 10% black */
}

.form-card-header {
    margin-bottom: 32px;
    /* space between the header text and the first form field */
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
    /* subtle divider line between header and form fields */
}

.form-card-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #1a1a1a;
    /* dark heading inside the white card, not red
       red is used in the hero, dark is used in the card for contrast */
    margin-bottom: 8px;
}

.form-card-subh {
    font-size: 0.9rem;
    color: #888;
    line-height: 1.6;
}


/*
   FORM LAYOUT
   Controls how fields are arranged inside the card
*/

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* two equal columns side by side */
    gap: 16px;
    /* 16px space between the two columns */
}

.form-group {
    display: flex;
    flex-direction: column;
    /* label stacks on top of the input */
    margin-bottom: 20px;
}


/*
   LABELS
*/

label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 7px;
    letter-spacing: 0.02em;
}


/*
   INPUTS AND SELECTS
*/

input,
select {
    font-family: 'DM Sans', sans-serif;
    /* inputs do not inherit fonts automatically so we set it explicitly */
    font-size: 0.95rem;
    color: #1a1a1a;
    background: #fafafa;
    /* very slightly off white so inputs are visible on the white card */
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    padding: 12px 14px;
    outline: none;
    /* removes the default blue browser focus ring
       we replace it with our own red version below */
    transition: border-color 0.2s, background 0.2s;
    /* smoothly animates border and background when the user focuses the field
       0.2s is fast enough to feel responsive without being jarring */
    width: 100%;
    /* inputs fill their parent container */
    appearance: none;
    /* removes default browser styling on selects like the arrow icon
       we rely on the browser default arrow since we removed appearance
       this just normalizes it across browsers */
}

input::placeholder {
    color: #bbb;
    /* light grey placeholder text, clearly different from real input */
}

input:focus,
select:focus {
    border-color: #cc0000;
    /* red border on focus matches the brand color */
    background: white;
    /* pure white when active, slightly different from the resting state */
}


/*
   SUBMIT BUTTON
*/

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: #cc0000;
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Syne', sans-serif;
    /* Syne on the button gives it weight and importance */
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
    /* we also transition transform for a subtle press effect */
    margin-top: 8px;
}

.submit-btn:hover {
    background-color: #aa0000;
    /* darker red on hover */
}

.submit-btn:active {
    transform: scale(0.99);
    /* very subtle press down effect when clicked
       scale(0.99) shrinks the button by 1% giving tactile feedback */
}


/*
   SUCCESS STATE
   Shown after a successful registration
   the form is hidden and this appears in its place
*/

.success-container {
    text-align: center;
    padding: 16px 0;
}

.success-icon {
    width: 64px;
    height: 64px;
    background-color: #f0faf4;
    border: 2px solid #34a853;
    border-radius: 50%;
    /* 50% makes a perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #34a853;
    margin: 0 auto 20px;
    /* auto left and right centers the circle, 20px pushes content below it down */
}

.success-container h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.success-container p {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 28px;
    line-height: 1.6;
    text-align: center;
    padding: 16px 0;
}

#qr-code {
    display: inline-block;
    padding: 16px;
    background: white;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    margin-bottom: 20px;
}

.attendee-id {
    display: block;
    margin: 0 auto 12px;
    width: fit-content;
    background: #fafafa;
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    padding: 10px 24px;
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #cc0000;
    letter-spacing: 0.12em;
}

.attendee-name {
    font-size: 0.85rem;
    color: #aaa;
}


/*
   RESPONSIVE DESIGN
   Adjusts layout for screens 600px wide or less
   which covers most phones
*/

@media (max-width: 600px) {

    .navbar {
        padding: 0 20px;
        /* less padding on mobile */
    }

    .hero {
        padding: 40px 20px 64px;
        /* less padding on mobile */
    }

    .hero-heading {
        font-size: 2rem;
        /* smaller heading on mobile so it does not overflow */
    }

    .hero-details {
        flex-direction: column;
        /* stack the detail items vertically on mobile */
        gap: 16px;
        align-items: flex-start;
    }

    .hero-detail-divider {
        display: none;
        /* hide the vertical dividers when stacked vertically */
    }

    .form-card {
        padding: 24px;
        /* less padding on mobile */
    }

    .form-row {
        grid-template-columns: 1fr;
        /* single column on mobile, two fields side by side is too cramped */
    }

}