/* Mobile-First CSS Architecture for yermaw.shop under construction page */

/* Performance optimizations */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Optimize font loading and rendering */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* CSS Custom Properties for consistent theming */
:root {
    /* Color Palette */
    --color-primary: #3498db;
    --color-primary-dark: #2980b9;
    --color-secondary: #2c3e50;
    --color-text: #333;
    --color-text-light: #000000;
    --color-text-muted: #080808;
    --color-success: #27ae60;
    --color-error: #e74c3c;
    --color-border: #ddd;
    --color-bg-light: #f8f9fa;
    --color-bg-error: #fdf2f2;
    --color-bg-success: #f0f9f0;
    
    /* Typography Scale */
    --font-size-xs: clamp(0.8rem, 1.5vw, 0.9rem);
    --font-size-sm: clamp(0.9rem, 2vw, 1rem);
    --font-size-base: clamp(1rem, 2vw, 1.1rem);
    --font-size-lg: clamp(1.1rem, 2.5vw, 1.4rem);
    --font-size-xl: clamp(1.5rem, 3vw, 2rem);
    --font-size-2xl: clamp(2rem, 4vw, 3rem);
    --font-size-3xl: clamp(2.5rem, 6vw, 4rem);
    
    /* Spacing Scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    
    /* Layout Constraints */
    --container-max-width: 1200px;
    --content-max-width: 600px;
    --form-max-width: 500px;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* Basic reset and foundation styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background: linear-gradient(to bottom, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    
    /* CSS Grid Layout for main page structure */
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-areas: 
        "main"
        "footer";
}

/* Rolling Hills Background - Three Tiered Layers with Parallax Effect
 * 
 * Layer 1 (Back): Furthest hills, slowest movement (-0.2x scroll speed)
 * Layer 2 (Middle): Middle distance hills, medium movement (-0.35x scroll speed)  
 * Layer 3 (Front): Closest hills, fastest movement (-0.5x scroll speed)
 * 
 * This creates a realistic parallax effect where closer objects move faster
 * than distant objects when scrolling, mimicking natural depth perception.
 */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 100vh;
    z-index: -4;
    background: 
        /* Sky gradient */
        linear-gradient(to bottom, #87CEEB 0%, #98D8E8 30%, #B0E0E6 60%, #E0F6FF 100%);
}

/* Back hills layer (furthest, slowest movement) */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 250%;
    height: 45vh;
    z-index: -3;
    background: 
        /* Distant hills with muted colors */
        radial-gradient(ellipse 1000px 200px at 15% 100%, #8FBC8F 0%, #8FBC8F 35%, transparent 35%),
        radial-gradient(ellipse 800px 180px at 45% 100%, #9ACD32 0%, #9ACD32 40%, transparent 40%),
        radial-gradient(ellipse 900px 190px at 75% 100%, #8FBC8F 0%, #8FBC8F 37%, transparent 37%),
        radial-gradient(ellipse 1100px 210px at 105% 100%, #7CFC00 0%, #7CFC00 33%, transparent 33%),
        radial-gradient(ellipse 700px 170px at 135% 100%, #9ACD32 0%, #9ACD32 42%, transparent 42%);
    transform: translateX(var(--hills-back-offset, 0px));
    transition: transform 0.1s ease-out;
}

/* Create middle hills layer using a pseudo-element on container */
.container::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 220%;
    height: 55vh;
    z-index: -2;
    background: 
        /* Middle distance hills */
        radial-gradient(ellipse 900px 250px at 25% 100%, #90EE90 0%, #90EE90 38%, transparent 38%),
        radial-gradient(ellipse 700px 220px at 55% 100%, #98FB98 0%, #98FB98 43%, transparent 43%),
        radial-gradient(ellipse 800px 240px at 85% 100%, #90EE90 0%, #90EE90 40%, transparent 40%),
        radial-gradient(ellipse 1000px 260px at 115% 100%, #ADFF2F 0%, #ADFF2F 36%, transparent 36%),
        radial-gradient(ellipse 600px 200px at 145% 100%, #98FB98 0%, #98FB98 46%, transparent 46%);
    transform: translateX(var(--hills-middle-offset, 0px));
    transition: transform 0.1s ease-out;
}

/* Create front hills layer using a pseudo-element on container */
.container::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 65vh;
    z-index: -1;
    background: 
        /* Front hills with vibrant colors */
        radial-gradient(ellipse 800px 300px at 20% 100%, #90EE90 0%, #90EE90 40%, transparent 40%),
        radial-gradient(ellipse 600px 250px at 60% 100%, #98FB98 0%, #98FB98 45%, transparent 45%),
        radial-gradient(ellipse 700px 280px at 90% 100%, #90EE90 0%, #90EE90 42%, transparent 42%),
        radial-gradient(ellipse 900px 320px at 130% 100%, #8FBC8F 0%, #8FBC8F 38%, transparent 38%),
        radial-gradient(ellipse 500px 200px at 160% 100%, #98FB98 0%, #98FB98 48%, transparent 48%);
    transform: translateX(var(--hills-front-offset, 0px));
    transition: transform 0.1s ease-out;
}

/* Main Container - CSS Grid Layout with centered content */
.container {
    grid-area: main;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-sm);
    
    /* CSS Grid for main content sections */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-content: center;
    min-height: calc(100vh - 120px); /* Account for footer */
    
    /* Grid areas for semantic layout */
    grid-template-areas:
        "logo"
        "message"
        "signup"
        "social";
}

/* Visually hidden class for accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Enhanced focus indicators for accessibility */
[data-focus-visible="true"] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ensure focus indicators are visible in dark mode */
@media (prefers-color-scheme: dark) {
    [data-focus-visible="true"] {
        outline-color: var(--color-secondary);
    }
}

/* Logo Component Styles */
.logo-section {
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-area {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.logo-image {
    width: clamp(400px, 50vw, 800px);
    height: auto;
    max-width: 100%;
    display: block;
    
    /* Performance optimizations for images */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    will-change: transform;
}

.logo-fallback {
    display: none;
}

.logo-text {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-secondary);
    text-transform: lowercase;
    letter-spacing: -0.02em;
}

/* Main Message Section Styles */
.main-message {
    grid-area: message;
    text-align: center;
    
    /* Flexbox for content alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.headline {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.description {
    font-size: var(--font-size-lg);
    color: #000000;
    max-width: var(--content-max-width);
    line-height: 1.6;
}

.call-to-action {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    font-weight: 500;
    max-width: var(--form-max-width);
    line-height: 1.5;
}

/* Email Signup Form Styles */
.email-signup {
    grid-area: signup;
    
    /* Flexbox for form centering */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.signup-form {
    width: 100%;
    max-width: 600px; /* Increased from 500px for wider appearance */
    
    /* Flexbox for form layout */
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.email-input {
    padding: var(--space-md) var(--space-sm); /* Increased vertical padding for wider appearance */
    font-size: var(--font-size-base);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: #fff;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    width: 100%;
}

.email-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.email-input[aria-invalid="true"] {
    border-color: var(--color-error);
}

.email-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.submit-button {
    padding: var(--space-md) var(--space-xl); /* Increased padding to match wider input */
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #fff;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-normal), transform var(--transition-fast);
    min-width: 160px; /* Increased from 140px */
    position: relative;
    
    /* Flexbox for button content alignment */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
}

.submit-button:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

.submit-button:active:not(:disabled) {
    transform: translateY(0);
}

.submit-button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    transform: none;
}

.submit-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.loading-spinner {
    display: none;
}

/* Enhanced loading spinner animation */
.spinner-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    margin: 0 1px;
    animation: spinner-bounce 1.4s ease-in-out infinite both;
}

.spinner-dot:nth-child(1) { animation-delay: -0.32s; }
.spinner-dot:nth-child(2) { animation-delay: -0.16s; }
.spinner-dot:nth-child(3) { animation-delay: 0s; }

@keyframes spinner-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.message-area {
    min-height: 2rem;
    
    /* Flexbox for message alignment */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.error-message,
.success-message {
    display: none;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.error-message {
    background-color: var(--color-bg-error);
    color: var(--color-error);
    border: 1px solid #fadbd8;
}

.success-message {
    background-color: var(--color-bg-success);
    color: var(--color-success);
    border: 1px solid #d5f4e6;
}

/* Social Media Section Styles - Horizontal row at bottom */
.social-media {
    grid-area: social;
    
    /* Flexbox for section layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    text-align: center;
}

.social-heading {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-secondary);
    text-align: center;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: nowrap;
    width: 100%;
}

.social-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    min-width: 100px;
    gap: var(--space-xs);
    white-space: nowrap;
}

.social-link:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-light);
    transform: translateY(-2px);
}

.social-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.social-icon {
    font-size: 1.5rem;
    display: block;
}

.social-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Footer Styles */
.footer {
    grid-area: footer;
    
    /* Flexbox for footer content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding: var(--space-lg) var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    border-top: 1px solid #eee;
    background-color: #fafafa;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS AND MEDIA QUERIES
   ========================================================================== */

/* Mobile First - Base styles above apply to mobile (320px+) */

/* Tablet Breakpoint (768px+) */
@media (min-width: 768px) {
    :root {
        /* Adjust spacing for larger screens */
        --space-xl: 4rem;
        --space-2xl: 5rem;
    }
    
    /* Container adjustments for tablet */
    .container {
        padding: var(--space-xl) var(--space-lg);
        gap: var(--space-2xl);
        
        /* Adjust grid template for better tablet layout */
        grid-template-areas:
            "logo"
            "message"
            "signup"
            "social";
    }
    
    /* Logo section tablet adjustments */
    .logo-area {
        min-height: 500px;
    }
    
    /* Main message tablet adjustments */
    .main-message {
        gap: var(--space-lg);
    }
    
    /* Email form tablet adjustments - horizontal layout */
    .form-group {
        flex-direction: row;
        align-items: stretch;
        gap: var(--space-sm);
    }
    
    .email-input {
        flex: 1;
    }
    
    .submit-button {
        flex-shrink: 0;
        min-width: 160px;
    }
    
    /* Social media tablet adjustments */
    .social-links {
        gap: var(--space-xl);
    }
    
    .social-link {
        min-width: 120px;
        padding: var(--space-sm) var(--space-lg);
    }
}

/* Desktop Breakpoint (1024px+) */
@media (min-width: 1024px) {
    :root {
        /* Further spacing adjustments for desktop */
        --space-xl: 5rem;
        --space-2xl: 6rem;
    }
    
    /* Container adjustments for desktop */
    .container {
        padding: var(--space-2xl) var(--space-xl);
        gap: var(--space-2xl);
        
        /* Two-column layout for desktop */
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "logo logo"
            "message message"
            "signup social";
        align-items: start;
    }
    
    /* Logo section desktop adjustments */
    .logo-area {
        min-height: 600px;
    }
    
    /* Main message desktop adjustments */
    .main-message {
        gap: var(--space-xl);
        grid-column: 1 / -1; /* Span full width */
    }
    
    /* Email signup desktop adjustments */
    .email-signup {
        justify-content: center;
        align-items: center;
    }
    
    .signup-form {
        max-width: 500px; /* Slightly smaller on desktop but still wider than original */
    }
    
    /* Social media desktop adjustments */
    .social-media {
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .social-heading {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
        gap: var(--space-2xl);
    }
    
    .social-link {
        min-width: 140px;
        padding: var(--space-md) var(--space-xl);
    }
}

/* Portrait orientation fix for tall screens (like 1920x1080 vertical) */
@media (orientation: portrait) and (min-width: 1024px) and (min-height: 1800px) {
    .container {
        /* Single-column centered layout for tall portrait screens */
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "message"
            "signup"
            "social";
        justify-items: center; /* Center all grid items */
    }
    
    /* Center the signup form */
    .email-signup {
        justify-content: center;
        width: 100%;
    }
    
    /* Center the social media section */
    .social-media {
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    
    .social-heading {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* Large Desktop Breakpoint (1200px+) */
@media (min-width: 1200px) {
    /* Container adjustments for large desktop */
    .container {
        /* Single-column centered layout for very large screens */
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "message"
            "signup"
            "social";
        max-width: var(--container-max-width);
        justify-items: center; /* Center all grid items */
    }
    
    /* Center the signup form */
    .email-signup {
        justify-content: center;
        width: 100%;
    }
    
    /* Center the social media section */
    .social-media {
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    
    .social-heading {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* High-resolution display adjustments */
@media (min-resolution: 2dppx) {
    /* Ensure crisp rendering on high-DPI displays */
    .logo-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .submit-button:hover:not(:disabled) {
        transform: none;
    }
    
    .social-link:hover {
        transform: none;
    }
    
    /* Disable rolling hills animation for users who prefer reduced motion */
    body::after {
        transform: translateX(0) !important;
        transition: none !important;
    }
    
    .container::before,
    .container::after {
        transform: translateX(0) !important;
        transition: none !important;
    }
    
    /* Disable Scottish flag animation for users who prefer reduced motion */
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #e0e0e0;
        --color-text-light: #b0b0b0;
        --color-text-muted: #888;
        --color-secondary: #4a90e2;
        --color-border: #444;
        --color-bg-light: #2a2a2a;
        --color-bg-error: #3a1a1a;
        --color-bg-success: #1a3a1a;
    }
    
    body {
        background-color: #1a1a1a;
        color: var(--color-text);
    }
    
    .email-input {
        background-color: #2a2a2a;
        color: var(--color-text);
    }
    
    .footer {
        background-color: #0f0f0f;
        border-top-color: #333;
    }
}

/* Print styles */
@media print {
    .container {
        display: block;
        padding: 1rem;
    }
    
    .email-signup,
    .social-media {
        display: none;
    }
    
    .main-message {
        margin-bottom: 2rem;
    }
    
    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
}