*, *::before, *::after {
  box-sizing: border-box;          
  margin: 0;                       
  padding: 0;
}

html {
  scroll-behavior: smooth;         
  scroll-padding-top: 5rem;        
}

.body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  min-height: 100vh; 
  width: 100dvw;  
  box-sizing: border-box;          
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
        --max-width:      clamp(320px, 90vw, 100%);
        --font-size-base: clamp(15px, 2.5vw + 0.5rem, 18px);
        --font-size-h1:   clamp(2rem, 6vw + 1rem, 4rem);
        --font-size-h2:   clamp(1.6rem, 5vw + 0.8rem, 3rem);
        --spacing-sm:     clamp(0.5rem, 2vw, 1rem);
        --spacing-md:     clamp(1rem, 4vw, 2rem);
        --spacing-lg:     clamp(2rem, 6vw, 4rem);
        --sprucePine: #003a00; 
        --bluegrass: #005500;
        --kentuckyNight: #000d08;
        --mountainFog: #f0fff8; 
        --stormCloud: #333849;
        --blueRidgeParkway: #002167;
        --midnightBlue: #0d0033;
        --marianaTrench: #00001a;
        --starLight: #e1ceff; 
        
    }

/* Apply base font size */
html { 
    font-size: var(--font-size-base); 
}

body { 
    color: var(--kentuckyNight); 
    background: var(--mountainFog); 
}

/* Accessibility helpers */
@media (prefers-reduced-motion: reduce) {
  * { 
    animation: none !important; 
    transition: none !important; 
    scroll-behavior: auto; 
    }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:  var(--kentuckyNight);
    --color-text: var(--mountainFog);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg:  var(--bluegrass);
    --color-text: var(--kentuckyNight);
  }
}

/* Base styles - mobile first*/

/* Layout containers and common elements*/
.body {
        display: flex; 
        flex-direction: column;
        justify-content: space-between;
        margin: 0; 
        min-height: fit-content;
        width: 100%;
        align-items: center;
    }

    .header {
        width: 100%;
        max-width: var(--max-width);
        padding: var(--spacing-md);
        box-sizing: border-box;
        text-align: center;
        height: fit-content + 2vh;
    }



    .mainContainer {
        flex: 1; 
        width: 100%;
        max-width: var(--max-width);
        padding: var(--spacing-md);
        box-sizing: border-box;
    }

    .container {
        border-radius: 8px;
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
        box-shadow: 3px 3px #001d08;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }


    .imageContainer {
        height: 35vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .containerTitle {
        align-self: center;
        text-align: center;
    }

    .containerImg {
        align-self: center;
        max-height: 30vh;
        width: auto;
        max-width: 90%;
    }

    .buttonsContainer {
        margin: 5px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .searchForm {
        width: clamp (150px, 80%, 400px);
        border-radius: 10px;
        padding: var(--spacing-sm); 
        margin: var(--spacing-sm);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .moviePoster {
        border-radius: 8px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        max-width: 200px;
        width: 100%;
        height: auto;
        margin-bottom: var(--spacing-sm);
    }

    .button.imageButton , .button , .textInput {
        font-size: 1rem;
        align-self: center;
        text-align: center;
        padding: 10px;
        margin: 10px;
    }



    .aside {
        width: 100%;
        min-height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: var(--max-width);
        padding: var(--spacing-md);
        box-sizing: border-box;
        text-align: center;
    }

    .aside.socialLinks {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }

    /* Greeting (local time message) */
      .greeting,
      .localTime {
        font-size: clamp(1.2rem, 4vw + 0.6rem, 1.5rem);
        font-weight: 600;
        margin: var(--spacing-sm);
        padding: var(--spacing-sm); 
        color: var(--mountainFog);  
        text-align: center;
        align-self: center;
      }

      .localTime {
        text-align: center;
        align-self: center;
      }

      /* Social links container */
      .socialLinks {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: clamp(1rem, 4vw, 2rem);           
        margin: var(--spacing-md) 0;
        padding: 0;
        list-style: none;  
      }

      .socialLinks li {
        margin: 0;
      }

      /* Social icon styling (works with inline SVG or <img class="social-icon">) */
      .social-icon {
        width:          clamp(2rem, 6vw, 2.8rem);
        height:         auto;
        fill:           white;               
        color:          white;
        transform:      scale(1);    
        isolation:      isolate;                             
        transition: transform 0.2s ease, color 0.2s ease;
      }

      /* Hover/focus interaction */
      .socialLinks a:hover .social-icon,
      .socialLinks a:focus .social-icon {
        transform: scale(1.18);                
        color: var(--starLight);               /* hover glow */
      }

      /* Optional: slight platform-specific hover tint (subtle) */
      .socialLinks a[href*="x.com"]:hover .social-icon    { color: #1da1f2; }
      .socialLinks a[href*="github"]:hover .social-icon   { color: #f0f6fc; }
      .socialLinks a[href*="linkedin"]:hover .social-icon { color: #0a66c2; }

      /* Make links more touch-friendly */
      .socialLinks a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-sm);
        border-radius: 10px;                   
        background-color: var(--marianaTrench);
        transition: background 0.2s ease;
      }

      .socialLinks a:hover,
      .socialLinks a:focus {
        background: rgba(51, 56, 73, 0.1);     /* --stormCloud faint overlay */
      }
          

  

    .footer {
        margin: 25px; 
        box-sizing: border-box;
        text-align: center;
        max-width: 100%;
        font-size: clamp(1.2rem, 2vw + 0.2rem, 1.5rem);
      }



/* Navigation menu base styles*/
        .topnav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative; 
            padding: 1rem 1.5rem;
            background: var(--midnightBlue);        
            color: var(--mountainFog);
            min-height: 10vh;
            width: 100%; 
        }
    
       

        .hamburger {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        z-index: 1000;
        position: absolute;
        right: 1.5rem;
        top: 0.5rem;
        }

        
        .hamburger span {
        display: block;
        width: 28px;
        height: 3px;
        background: white;
        margin: 6px 0;
        transition: all 0.3s ease;
        }

        .navLinks {
        display: none;               
        flex-direction: column;
        left: 0;
        width: 100%;
        padding: 1rem;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        max-height: fit-content;
        }

        .navLinks a { 
            color: white;
            text-decoration: none;
            padding: 1rem 0;
            font-size: 1.4rem;
            border-bottom: 1px solid var(--blueRidgeParkway)
        }

        .nav-links a:hover, .nav-links a:focus {
        background: var(--stormCloud);
        }

        .navLinks.active {
            display: flex;
            flex-direction: column;
        }

        

/* Small tablet / landscape mobile – rarely needed */
@media (min-width: 480px) { 
    .mainContainer {
        padding: var(--spacing-md);
    }
    .container { 
        padding: var(--spacing-md); 
    }
}

/* Tablet / narrow desktop – switch to Grid here */
@media (min-width: 768px) {
  .body {
    display: grid;
    grid-template-columns: 1fr minmax(auto, var(--max-width)) 1fr;
    justify-items: center;
    grid-template-areas: 
      "nav nav nav"
      "header header header"
      "main main main"
      "aside aside aside"
      "footer footer footer";
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto 1fr auto auto;
  }

    .topnav {
        display: flex;  /* always visible */
        flex-direction: row;
        justify-content: space-evenly;
        height: clamp(fit-content, 10vh, 12vh);
        grid-area: nav;
        width: 100%;
    }

    .navLinks {
        display: flex;               
        flex-direction: row;
        justify-content: space-evenly;
        width: clamp(fit-content, 60%, 100%);
        background: none;
        padding: 0;
        box-shadow: none;
        max-height: fit-content;

    }
  
    .hamburger {
        display: none; 
    }

    .header {
        grid-area: header;
        width: 100%;
        max-width: var(--max-width);
    }

    .mainContainer {
        grid-area: main;
        height: clamp(fit-content, 60vh, 80vh);
        padding: 0;
        width: 100%; 
        max-width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;
        margin-bottom: var(--spacing-sm);
        box-sizing: border-box;
    }

    .container {
        min-height: 95vh;  
        margin: var(--spacing-sm); 
        padding: var(--spacing-sm); 
        width: 100%;
        max-width: var(--max-width);
        box-sizing: border-box;
    }

    .aside {
        grid-area: aside;
        width: 100%;
        max-width: var(--max-width);
    }

  .footer {
        grid-area: footer;
        width: 100%;
        max-width: var(--max-width);
    }

}

/* Standard desktop */
@media (min-width: 1024px) {
  .container {
    padding: var(--spacing-lg);
    margin: var(--spacing-md);
  }
  .aside {
    padding: var(--spacing-md);
    }
  .footer {
    padding: var(--spacing-md);
    }
}