/*
    Student Name: Tatiana Khislavskiy
    File Name: contact.html
    Date: 4/18/2026

   YARNEASE STYLESHEET - MAIN STYLES
  
   This stylesheet defines all styles for the Yarnease crochet learning website.
   It includes responsive design for mobile, tablet, and desktop viewports.
   Color scheme uses calming sage green and soft cream tones.
 */

/* 
   CSS CUSTOM PROPERTIES (VARIABLES)
   Define reusable colors and values throughout the site for consistency
*/
:root {
    --primary-color: #8E9775; /* Calm Sage Green - used for primary elements */
    --secondary-color: #FAF3E0; /* Soft Cream - used for backgrounds */
    --text-color: #4A4A4A; /* Dark gray for readable text */
    --accent-color: #E28E8E; /* Dusty Rose - used for highlights and tags */
}


/* 
   UNIVERSAL RESET STYLES
   Remove default browser margins and padding for consistent styling across elements
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set base HTML and body styles */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrollbar on mobile */
}

/* 
   BODY BASE STYLES
   Set font, colors, and spacing for the entire page
*/
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--secondary-color);
    padding-top: 90px; /* Account for fixed header height */
}

/* 
   NAVIGATION BAR (NAVBAR) STYLES
   Fixed header at the top of all pages containing logo and navigation links
*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: fixed; /* Stays at top while scrolling */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000; /* Appears above other content */
}

/* Logo/Branding - clickable link to homepage */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    letter-spacing: 1px;
    text-decoration: none; /* Remove underline from link */
    transition: opacity 0.3s; /* Smooth hover effect */
}

/* Logo hover effect */
.logo:hover {
    opacity: 0.8; /* Slightly fade on hover to indicate it's clickable */
}

/* 
   NAVIGATION LINKS STYLES
   Horizontal menu links for desktop navigation
*/
.nav-links {
    display: flex; /* Arrange items horizontally */
    list-style: none;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s; /* Smooth color change on hover */
}

.nav-links a:hover {
    color: var(--primary-color); /* Change to primary color on hover */
}

/* 
   HAMBURGER MENU STYLES
   Mobile-friendly toggle menu that appears on smaller screens
*/
.nav-toggle {
    display: none; /* Hidden checkbox input */
}

.nav-toggle-label {
    display: none; /* Hidden by default - only visible on mobile */
    cursor: pointer; /* Indicate it's clickable */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    padding: 0;
}

/* Individual lines of the hamburger icon */
.nav-toggle-label span {
    width: 30px;
    height: 3px;
    background: var(--text-color);
    transition: all 0.3s; /* Smooth transitions for any changes */
}

/* 
   MOBILE RESPONSIVE STYLES
   Styles applied on screens 768px and smaller
*/
@media (max-width: 768px) {
    /* Show hamburger menu on mobile */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    /* Make hamburger label visible on mobile devices */
    .nav-toggle-label {
        display: flex;
        order: 2; 
    }

    /* Hide navigation links by default on mobile */
    .nav-links {
        display: none; /* Hidden until hamburger is clicked */
        position: absolute;
        top: 100%;
        right: 5%;
        width: 200px;
        background: #e0e0e0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1001;
        border-radius: 5px;
    }

    /* Style mobile menu items */
    .nav-links li {
        margin: 10px 0;
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    /* Show nav links when checkbox is checked (menu opened) */
    .nav-toggle:checked ~ ul.nav-links {
        display: flex;
    }

}

/* 
   HERO SECTION STYLES
   Large banner image with overlay and call-to-action content
*/
.hero {
    width: 100%;
    margin: 0;
    height: 80vh; /* 80% of viewport height */
    background-image: url('../images/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark overlay on top of hero background image */
.hero-overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black overlay */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main content inside hero section */
.hero-content {
    text-align: center;
    color: #ffffff; 
    max-width: 800px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}

/* 
   BUTTON STYLES
*/
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 0.8rem 2rem;
    text-decoration: none;
    border-radius: 25px; 
    margin-top: 20px;
    transition: background 0.3s; 
}

/* Button hover effect  */
.btn:hover {
    background: #6D7856;
}

/* 
   LAYOUT & CONTAINER STYLES
   Main content structure and spacing
*/
.container {
    max-width: 1100px;
    margin: auto;
    padding: 40px 20px;
}

/* Section spacing */
.section {
    margin-bottom: 60px;
}

/* 
   RESPONSIVE GRID SYSTEM
   Grid layouts that adapt to different screen sizes
   Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns
*/
.grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 20px;
}

/* Gallery grid for image displays */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 20px;
}

/* Card component - used in grid layouts */
.gallery-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border-bottom: 4px solid var(--primary-color); 
}

/* Image in gallery cards */
.gallery-image {
    width: 100%;
    min-height: 180px;
    background: #f4f4f4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

/* Standard card component */
.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border-bottom: 4px solid var(--primary-color); /* Accent border at bottom */
}

/* 
   FOOTER STYLES
   Bottom section of every page with site info, links, and social media
*/
.site-footer {
    background-color: #ffffff;
    padding: 60px 0 20px 0;
    border-top: 1px solid #eee;
    color: #555;
}

/* Grid layout for footer items */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 40px;
    margin-bottom: 40px;
}

/* Individual footer items */
.footer-item h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-logo {
    height: 40px;
    margin-bottom: 15px;
}

/* Footer navigation links */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: #777;
    transition: color 0.3s;
}

/* Change link color on hover */
.footer-links a:hover {
    color: var(--primary-color);
}

/* Footer email link styling */
.footer-email {
    display: inline-block;
    margin-top: 10px;
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1rem;
    border-bottom: 2px solid transparent;
    transition: border 0.3s;
}

.footer-email:hover {
    border-bottom: 2px solid var(--primary-color);
}

/* Social media icons container */
.social-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.social-icon {
    display: inline-block;
    text-decoration: none;
}

.social-icon img {
    width: 36px;
    height: 36px;
}

/* Mobile social icons styling */
@media (max-width: 768px) {
    .social-icons {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .social-icon {
        font-size: 0.9rem;
        padding: 6px 10px;
    }
}

/* Footer bottom copyright section */
.footer-bottom {
    text-align: center;
    border-top: 1px solid #f4f4f4;
    padding-top: 20px;
    font-size: 0.9rem;
    color: #aaa;
}


/* Tablet & Desktop Layout (768px and wider) */
@media (min-width: 768px) {
    /* Footer changes to 3-column layout on larger screens */
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr; /* Left column wider for branding */
    }
}

/* Tablet Layout (768px and wider) */
@media (min-width: 768px) {
    /* Grid changes from 1 to 2 columns on tablets */
    .grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
    /* Larger hero heading on tablets */
    .hero-content h1 {
        font-size: 3.5rem;
    }
}

/* Desktop Layout (1024px and wider) */
@media (min-width: 1024px) {
    /* Grid changes to 3 columns on desktop */
    .grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
    /* Gallery uses 4 columns on desktop for better use of wide space */
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
    }
}


/* 
   MATERIALS SECTION STYLES
*/

/* Section header styling  */
.section-header {
    text-align: center;
    margin-bottom: 30px;
}

/* Material cards  */
.material-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.3s ease; /* effect on hover */
}

/* Card hover effect  */
.material-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Icon styling  */
.icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: block;
}

/* list styling */
.material-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-top: 10px;
}

.material-card li {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* Add checkmark before each list item */
.material-card li::before {
    content: "✔";
    color: var(--primary-color);
    margin-right: 10px;
    font-weight: bold;
}

/* 
   TUTORIAL SECTION STYLES
*/

/* Tutorial grid layout - stacked on mobile, side-by-side on desktop */
.tutorial-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
}

/* tutorial card  */
.tutorial-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Responsive Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    background: #e9e9e9;
}


/* Responsive iframe styling */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Tutorial information  */
.tutorial-info {
    padding: 25px;
}

/* Tutorial list styling */
.steps {
    margin-top: 15px;
    padding-left: 20px;
    color: #666;
}

.steps li {
    margin-bottom: 8px;
}

/* Desktop View for Tutorials - side-by-side layout */
@media (min-width: 1024px) {
    .tutorial-card {
        flex-direction: row; /* Video on left, text on right */
        align-items: center;
    }
    
    .video-container {
        flex: 1;
        padding-bottom: 30%; /* Adjusted for side-by-side layout */
    }
    
    .tutorial-info {
        flex: 1;
    }
}

/* 
   PERSONAL STORY / ABOUT SECTION STYLES
*/

/* Story flex layout - stacked on mobile, side-by-side on desktop */
.story-flex {
    display: flex;
    flex-direction: column; /* Stacked for mobile */
    gap: 50px;
    align-items: center;
    padding: 80px 20px;
}

/* Left column: story text content */
.story-text {
    flex: 1.2; 
}

.story-text h2 {
    color: var(--primary-color);
    font-size: 2.2rem;
    margin-bottom: 25px;
}

.story-text p {
    font-size: 1.1rem;
    color: #4a4a4a;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Text-style button link */
.btn-text {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
    transition: transform 0.2s ease; 
}

.btn-text:hover {
    transform: translateX(5px); 
}

/* Right column: profile image */
.story-image {
    flex: 0.8;
    display: flex;
    justify-content: center;
}

/* Profile image styling with shadow effect */
.profile-img {
    width: 100%;
    max-width: 450px;
    border-radius: 15px;
    box-shadow: 20px 20px 0px var(--secondary-color); /*  shadow  */
    border: 1px solid #eee;
    object-fit: cover;
}

/* Desktop viewport: side-by-side layout */
@media (min-width: 992px) {
    .story-flex {
        flex-direction: row; /* Side-by-side */
        text-align: left;
    }
}

/* Tablet & Desktop View - arrange side-by-side */
@media (min-width: 768px) {
    .story-flex {
        flex-direction: row; /* Side-by-side */
        text-align: left;
    }
}

/* 
   REVIEW CARD STYLES
*/

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 25px;
    transition: transform 0.3s ease; 
}

.review-card:hover {
    transform: translateY(-5px);
}

/* Review card image styling */
.review-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Tag badges for special labels ("Top Pick") */
.tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent-color);
    color: white;
    padding: 5px 12px;
    border-radius: 20px; 
    font-size: 0.8rem;
    font-weight: bold;
}

/* Special styling for "Top Pick" tag */
.top-pick {
    background: var(--primary-color); 
}

.rating {
    color: #f1c40f;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.review-card h3 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.review-card p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1; 
}

/* Button for Shop Links */
.review-card .btn-small {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.review-card .btn-small:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Review Form Styles */
.review-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.review-form label {
    font-weight: 600;
    color: var(--text-color);
}

.review-form input[type="text"],
.review-form input[type="email"],
.review-form select,
.review-form textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.review-form textarea {
    resize: vertical;
}

.rating-input {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rating-input input[type="radio"] {
    margin-right: 5px;
}

.review-form button {
    align-self: flex-start;
}

/* Mobile responsive for review form */
@media (max-width: 768px) {
    .rating-input {
        flex-direction: column;
        gap: 5px;
    }
}

.terms-link {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

/* Terms Page Styling */
.terms-body {
    line-height: 1.8;
    color: var(--text-color);
}

.terms-body h3 {
    color: var(--primary-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

.terms-body p {
    margin: 10px 0;
}

/* 
   SITEMAP PAGE STYLES
   Styles for the HTML sitemap page listing all site pages
*/

/* Sitemap container with organized sections */
.sitemap-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Individual sitemap section with heading and list */
.sitemap-section {
    background: white;
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Section heading styling */
.sitemap-section h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
}

/* Sitemap list styling */
.sitemap-list {
    list-style: none;
    padding: 0;
}

/* Individual sitemap list item */
.sitemap-list li {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

/* Last item in list without bottom border */
.sitemap-list li:last-child {
    border-bottom: none;
}

/* Sitemap link styling */
.sitemap-list a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}

/* Sitemap link hover effect */
.sitemap-list a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Description paragraph for each sitemap item */
.sitemap-list p {
    margin: 8px 0 0 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}