/* Starphir Design Solutions - Responsive Styles */
/* Updated Dec 2025 - Grid-based star nav, fixed logo, performance sections */

/* Large Tablets and Small Desktops */
@media (max-width: 992px) {
  :root {
    --font-size-h1: 54px;
    --font-size-h2: 42px;
    --font-size-h3: 33px;
  }

  .nav-links {
    gap: var(--spacing-lg);
  }

  .nav-link {
    font-size: 24px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  /* Star Navigation - Smaller grid */
  .star-section {
    padding-top: calc(var(--spacing-2xl) + 50px);
  }

  .star-nav {
    max-width: 700px;
    gap: var(--spacing-md);
  }

  .star-logo {
    width: 450px;
  }

  .star-link {
    font-size: 28px;  /* Plan 6: 25% increase from 22px */
  }

  /* Interior fixed logo - smaller on tablet (LEGACY) */
  .interior-fixed-logo {
    height: 80px;
    bottom: 80px;
    left: 80px;
  }

  /* Plan 6: Scale down interior star nav on tablet */
  .interior-star-logo {
    height: 120px;  /* Scaled from 150px */
  }

  .interior-star-link {
    font-size: 28px;  /* Match .star-link tablet size */
  }

  .interior-star-section {
    padding-left: 0;  /* Already at 0 */
  }

  .main--interior {
    margin-left: 180px;  /* Reduced after moving nav left */
  }

  /* Layouts collapse to single column */
  .two-column,
  .contact-wrapper,
  .metrics-grid,
  .performance-columns {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
}

/* Tablets */
@media (max-width: 768px) {
  :root {
    --nav-height: 70px;
    --slideshow-height: 250px;
  }

  /* Mobile Navigation */
  .nav {
    padding: 0 var(--spacing-md);
  }

  .nav-toggle {
    display: flex;
    z-index: 150;
  }

  .nav-toggle span {
    width: 30px;
    height: 3px;
  }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-gray-top);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    transform: translateX(-100%);
    transition: transform var(--transition-medium);
    z-index: 140;
  }

  .nav-links.active {
    transform: translateX(0);
  }

  .nav-link {
    font-size: var(--font-size-h3);
  }

  .nav-link[data-tooltip]::before {
    bottom: auto;
    top: 100%;
    margin-top: var(--spacing-xs);
  }

  .search-container {
    position: fixed;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 145;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
  }

  .nav-links.active ~ .search-container,
  .search-container.active {
    opacity: 1;
    visibility: visible;
  }

  .search-input {
    width: 280px;
    font-size: 18px;
  }

  /* Hamburger Animation */
  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  /* Star Navigation - Grid layout around logo on mobile */
  .star-section {
    padding: var(--spacing-xl) var(--spacing-md);
    padding-top: calc(var(--spacing-xl) + 30px);
    min-height: auto;
  }

  .star-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "home      .      whoweare"
      "contact   logo   performance"
      "wow       .      expertise";
    align-items: center;
    justify-items: center;
    row-gap: 25px;  /* 25px above and below logo */
    column-gap: var(--spacing-sm);
    max-width: 100%;
    width: 100%;
  }

  /* Logo - 20% smaller (350px → 280px) */
  .star-logo {
    grid-area: logo;
    width: 280px;
    order: unset;
  }

  .star-link {
    font-size: 22px;
    padding: var(--spacing-xs) var(--spacing-sm);
    position: static;
    justify-self: center;
    transform: none;  /* Remove desktop transforms */
    white-space: nowrap;
    order: unset;
  }

  /* Grid area assignments with position adjustments */
  .star-link--home {
    grid-area: home;
    justify-self: end;
    transform: translateX(80px);  /* 80px right */
  }

  .star-link--who {
    grid-area: whoweare;
    justify-self: start;
    transform: translateX(-80px);  /* 80px left */
  }

  .star-link--contact {
    grid-area: contact;
    justify-self: end;
    transform: translateY(-25px);  /* 25px up */
  }

  .star-link--performance {
    grid-area: performance;
    justify-self: start;
    white-space: normal;
    text-align: left;
    max-width: 120px;
    font-size: 18px;
    line-height: 1.2;
    transform: translateY(-25px);  /* 25px up */
  }

  .star-link--wow {
    grid-area: wow;
    justify-self: end;
    transform: translateX(80px);  /* 80px right */
  }

  .star-link--expertise {
    grid-area: expertise;
    justify-self: start;
    transform: translateX(-80px);  /* 80px left */
  }

  /* Interior fixed logo - smaller and repositioned (LEGACY) */
  .interior-fixed-logo {
    height: 60px;
    bottom: 60px;
    left: 20px;
  }

  /* Plan 6: Hide interior star navigation on mobile */
  .interior-star-section {
    display: none;
  }

  /* Plan 6: Show nav links in hamburger menu on mobile */
  .nav--interior .nav-links {
    display: flex;
  }

  /* Plan 6: Remove content margin on mobile */
  .main--interior {
    margin-left: 0;
  }

  /* Section nav wrapping */
  .section-nav {
    justify-content: center;
  }

  /* ===================
     FULL-WIDTH SLIDESHOW
     =================== */
  .slideshow {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  /* Container */
  .container {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  /* ===================
     FULL-WIDTH SITEMAP
     =================== */
  .footer {
    padding-left: 0;
    padding-right: 0;
  }

  .footer-content {
    max-width: 100%;
    width: 100%;
  }

  .sitemap-links {
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    padding: 0 var(--spacing-md);
  }

  /* Form */
  .form-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  /* ===================
     JUMP NAVIGATION - 65px HIGHER (25px + 40px)
     =================== */
  .industry-section {
    scroll-margin-top: calc(var(--nav-height) + var(--spacing-xl) + 105px);  /* 40px + 25px + 40px */
  }

  .testimonials-section {
    scroll-margin-top: calc(var(--nav-height) + var(--spacing-xl) + 105px);
  }
}

/* Mobile Phones */
@media (max-width: 576px) {
  :root {
    --font-size-h1: 42px;
    --font-size-h2: 36px;
    --font-size-h3: 30px;
    --font-size-body: 24px;
    --font-size-small: 18px;
    --slideshow-height: 200px;
  }

  /* Logo - 20% smaller (280px → 224px) */
  .star-logo {
    width: 224px;
  }

  .star-link {
    font-size: 18px;
  }

  .star-link--performance {
    font-size: 15px;
    max-width: 100px;
  }

  /* Interior fixed logo - hide on very small screens */
  .interior-fixed-logo {
    height: 50px;
    bottom: 50px;
    left: 15px;
  }

  /* Performance cards */
  .performance-card {
    padding: var(--spacing-md);
  }

  .stat-highlight {
    font-size: var(--font-size-body);
  }

  .quote-item {
    padding: var(--spacing-md);
  }

  .quote-text {
    font-size: var(--font-size-small);
  }

  .contact-info address {
    font-size: var(--font-size-small);
  }
}

/* Very small phones */
@media (max-width: 380px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 30px;
    --font-size-h3: 26px;
    --font-size-body: 21px;
  }

  /* Logo - 20% smaller (240px → 192px) */
  .star-logo {
    width: 192px;
  }

  .star-link {
    font-size: 16px;
  }

  .star-link--performance {
    font-size: 13px;
    max-width: 85px;
  }

  /* Hide interior fixed logo on very small screens */
  .interior-fixed-logo {
    display: none;
  }

  .section-nav {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .section-nav a {
    padding: var(--spacing-md);
  }
}

/* ===================
   WOW! PAGE RESPONSIVE
   =================== */

/* Large screens - full layout */
@media (min-width: 1025px) {
  /* Quotes shifted 250px (was 350px, moved left by 100px) */
  .wow-section-title,
  .wow-quotes-list {
    transform: translateX(250px) translateY(-40px);
  }

  .wow-personal-section h2 {
    transform: translateX(250px) translateY(-40px); /* Align with quotes on large screens */
  }

  /* Fixed header restored to original position (no left offset) */
  .wow-fixed-header {
    left: 0;
  }

  /* Genius image moved to right edge of screen */
  .wow-thinkers-image {
    right: 0;
  }
}

/* Tablets and smaller desktops */
@media (max-width: 1024px) {
  /* Image stacks above quotes instead of fixed on side */
  .wow-thinkers-image {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 750px; /* Match new larger size */
    height: auto;
    margin: var(--spacing-xl) auto;
    display: block;
  }

  .wow-content-wrapper {
    margin-right: 0; /* Remove side margin */
  }

  .wow-section-title,
  .wow-quotes-list {
    transform: none; /* Remove left shift */
  }

  .wow-personal-section h2 {
    transform: none; /* Remove shift on smaller screens */
  }

  .wow-container {
    max-width: var(--max-width);
  }
}

@media (max-width: 768px) {
  .wow-fixed-header {
    padding: var(--spacing-md) var(--spacing-lg);
    left: 0;  /* Plan 6: Reset left position on mobile (star nav hidden) */
  }

  .wow-fixed-header h1 {
    font-size: var(--font-size-h2);
  }

  .wow-fixed-header h2 {
    font-size: var(--font-size-body);
  }

  .wow-fixed-header p {
    font-size: var(--font-size-small);
  }

  /* ===================
     WOW! PAGE - SECOND FIXED HEADER WITH GENIUS IMAGE
     =================== */

  /* Main content positioned below both headers */
  .wow-main {
    padding-top: calc(var(--nav-height) + 230px + 320px + 30px);  /* nav + first header + 50px + image header + 30px gap */
    position: relative;
  }

  /* Genius image as second fixed header */
  .wow-thinkers-image {
    position: fixed;
    top: calc(var(--nav-height) + 230px);  /* Below first fixed header + 50px down */
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 320px;  /* Increased by 40px (was 280px) */
    object-fit: contain;
    z-index: 79;
    opacity: 1;
    margin: 0;
    display: block;
    background: linear-gradient(180deg,
      rgba(0, 37, 116, 0.98) 0%,
      var(--color-blue-bottom) 100%
    );
    padding: var(--spacing-md);
    box-shadow: var(--shadow-medium);
  }

  /* Reduce space between Famous Quotes title and first quote to 20px */
  .wow-section-title {
    margin-bottom: 20px;
  }

  .wow-quotes-list {
    position: relative;
    z-index: 80;
  }

  .wow-container {
    position: relative;
    z-index: 75;
  }

  .wow-personal-section {
    position: relative;
    z-index: 80;
  }
}

@media (max-width: 576px) {
  .wow-fixed-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .wow-main {
    padding-top: calc(var(--nav-height) + 210px + 260px + 30px);  /* Adjusted for smaller header + 50px down */
  }

  .wow-thinkers-image {
    top: calc(var(--nav-height) + 210px);  /* Below smaller first header + 50px down */
    max-height: 260px;  /* Increased by 40px (was 220px) */
  }
}

/* ===================
   EXPERTISE PAGE RESPONSIVE
   =================== */
@media (max-width: 992px) {
  .parts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .parts-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .expertise-card {
    padding: var(--spacing-lg);
  }
}

@media (max-width: 576px) {
  .expertise-card {
    padding: var(--spacing-md);
  }

  .expertise-intro-text {
    font-size: var(--font-size-small);
  }

  .expertise-details li {
    font-size: var(--font-size-small);
  }
}

/* ===================
   HANDYMAN BUTTON RESPONSIVE
   Plan 10: Font sizes increased 25%
   Plan 10A: Button positioned in star-section, uses top instead of bottom
   =================== */
@media (max-width: 768px) {
  .handyman-button {
    top: 630px;       /* Plan 10A: Moved down 600px (was 30px) */
    right: 20px;
    font-size: 23px;  /* Plan 10: 25% larger (was 18px) */
  }
}

@media (max-width: 576px) {
  .handyman-button {
    top: 620px;       /* Plan 10A: Moved down 600px (was 20px) */
    right: 15px;
    font-size: 20px;  /* Plan 10: 25% larger (was 16px) */
  }
}

@media (max-width: 380px) {
  .handyman-button {
    top: 615px;       /* Plan 10A: Moved down 600px (was 15px) */
    right: 10px;
    font-size: 18px;  /* Plan 10: 25% larger (was 14px) */
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .interior-fixed-logo {
    transition: none;
  }
}