/* css/responsive.css */
/* Media queries and responsive adjustments */

/* --- Tablet & Smaller Desktop --- */
@media (max-width: 1024px) {
  :root {
    /* Slightly reduce base font size */
    font-size: 15px;
    /* Reduce some spacing */
    --space-lg: 1.25rem;
    --space-xl: 1.75rem;
    --space-xxl: 2.5rem;
  }
  .container {
    --container-width-desktop: 960px; /* Adjust max width */
    padding: 0 var(--space-sm);
  }
  .controls-container {
    /* Adjust grid for potentially fewer columns */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
  }
  .logo-text {
    /* font-size: clamp(42px, 10vw, 120px); */ /* Let dynamic font size handle it */
  }
  .previewContainer {
    min-height: 250px; /* Adjust default height */
  }
  .preview-size-small { min-height: 180px; }
  .preview-size-medium { min-height: 250px; }
  .preview-size-large { min-height: 380px; }
  .preview-size-x-large { min-height: 500px; }

  .footer-content {
      gap: var(--space-md);
      justify-content: center; /* Center items on smaller screens */
      text-align: center;
  }
  .manic-logo { width: 100%; text-align: center; justify-content: center; }
  .footer-links { justify-content: center; width: 100%; }

}

/* --- Mobile (Portrait & Landscape) --- */
@media (max-width: 767px) {
  :root {
    /* Further reduce base font size */
    font-size: 14px;
    /* Further reduce spacing */
    --space-md: 0.85rem; /* Slightly increased from 0.75 */
    --space-lg: 1.1rem; /* Slightly increased from 1 */
    --space-xl: 1.6rem; /* Slightly increased */
  }
  body {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
  .container {
    padding: 0 var(--space-md); /* Use slightly larger padding */
    gap: var(--space-md);
  }
  header {
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    justify-content: center; /* Center header items */
    text-align: center;
  }
  .logo-brand { text-align: center; flex-basis: 100%; }
  .brand-links { text-align: center; flex-basis: 100%; }

  .controls-wrapper {
    border-radius: 0; /* Remove radius for edge-to-edge */
    /* --- REMOVE NEGATIVE MARGINS --- */
    /* margin-left: calc(-1 * var(--space-md)); */ /* Bleed to edge */
    /* margin-right: calc(-1 * var(--space-md)); */
    border-left: none;
    border-right: none;
    box-shadow: none; /* Remove shadow if edge-to-edge */
  }

  /* --- Tabs - Vertical Stack Layout --- */
  .tabs {
    display: block; /* Change from flex to block */
    overflow-x: visible; /* Remove horizontal scroll */
    border-bottom: 1px solid var(--border-color); /* Keep border below the whole block */
    padding-right: 0; /* Remove padding needed for scrolling */
    mask-image: none; /* Remove mask */
    -webkit-mask-image: none;
  }

  .tab {
    display: block; /* Make each tab a block element */
    width: 100%; /* Tabs take full width */
    text-align: left; /* Align text left */
    padding: 12px var(--space-md); /* Adjust padding */
    border-bottom: 1px solid var(--border-color); /* Separator line */
    border-left: 3px solid transparent; /* Space for active indicator */
    /* border-bottom-color: transparent; */ /* Let default border show */
    margin-bottom: 0; /* Remove margin */
    flex-shrink: 1; /* Allow shrinking if somehow needed */
    white-space: normal; /* Allow text wrapping if needed */
  }

  .tab:last-child {
    border-bottom: none; /* No separator after the last tab */
  }

  /* Active state for vertical tabs */
  .tab.active {
    color: var(--accent-color);
    border-left-color: var(--accent-color); /* Use left border as indicator */
    background-color: var(--hover-bg-strong); /* Highlight background */
    border-bottom-color: var(--border-color); /* Ensure bottom border shows if not last */
  }
  .tab.active:last-child {
    border-bottom-color: transparent;
  }

  .tab:hover,
  .tab:focus-visible {
    /* border-bottom-color: var(--border-color); */ /* Keep bottom border on hover */
    border-left-color: var(--border-highlight); /* Indicate hover on left */
    background-color: var(--hover-bg-subtle);
  }
  /* .tab:last-child:hover, .tab:last-child:focus-visible { */
  /* border-bottom-color: transparent; */
  /* } */
  .tab.active:hover,
  .tab.active:focus-visible {
    border-left-color: var(--accent-color); /* Keep active color */
  }
  .tab.active::after {
    opacity: 0 !important; /* Ensure no bottom line pseudo element */
  }

  /* Show info button on mobile */
  .info-button {
    display: flex; /* Use display directly */
    top: 6px; /* Adjust position */
    right: 6px;
    transform: none; /* Remove translateY */
  }
  .info-button-visible { /* Ensure it stays flex if already visible */
    display: flex;
  }

  .tab-content {
    padding: var(--space-md);
  }
  .controls-container {
    /* Force single column */
    grid-template-columns: 1fr;
    gap: var(--space-lg); /* Increase gap slightly for touch */
  }
  /* Specific controls needing adjustment */
  .range-container { flex-wrap: wrap; } /* Allow value to wrap below slider */
  .range-value-display { min-width: 45px; text-align: center; flex-basis: 100%; margin-top: var(--space-sm); }

  /* --- MOBILE INPUT ZOOM FIX --- */
  input[type="text"],
  input[type="number"],
  input[type="color"],
  select,
  textarea {
      font-size: 16px !important; /* Prevent iOS zoom */
  }
  /* Adjust padding if 16px makes them too tall */
  input[type="text"],
  input[type="number"],
  select {
      padding-top: 8px;
      padding-bottom: 8px;
      height: auto; /* Allow height to adjust */
      min-height: 42px; /* Ensure minimum touch size */
  }
  textarea {
       min-height: 80px;
  }

  .button-container {
    gap: var(--space-md); /* Increase gap */
    /* Stack buttons vertically */
    flex-direction: column;
    align-items: stretch; /* Make buttons full width */
  }
  button, .button { width: 100%; padding: 12px 20px; /* Increase padding for touch */ }

  /* --- ADJUSTED Preview Container Styles --- */
  .previewContainer {
    padding: var(--space-md);
    min-height: 200px; /* Increase default min-height slightly */
    border-left: none;
    border-right: none;
    /* --- REMOVE NEGATIVE MARGINS --- */
    /* margin-left: calc(-1 * var(--space-md)); */
    /* margin-right: calc(-1 * var(--space-md)); */
    border-radius: 0; /* Remove radius */
    box-shadow: none; /* Remove shadow if edge-to-edge */
  }
  /* Adjust specific size classes */
  .preview-size-small { min-height: 160px; }
  .preview-size-medium { min-height: 200px; }
  .preview-size-large { min-height: 300px; }
  .preview-size-x-large { min-height: 400px; }

  .logo-text {
    /* Adjust clamp for smaller screens */
    font-size: var(--dynamic-font-size, clamp(36px, 14vw, 100px)); /* Adjusted clamp */
    padding: var(--space-xs);
    max-width: calc(100% - var(--space-xs) * 2);
  }

  .size-indicator {
    bottom: var(--space-xs);
    right: var(--space-xs);
    font-size: calc(var(--font-size-xs) * 0.9);
    padding: 2px 5px;
  }

  footer { margin-top: var(--space-lg); padding-top: var(--space-md); }
  .footer-content { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}


/* --- Print Styles --- */
@media print {
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Simple print font */
    line-height: 1.3;
    /* REMOVED: color: #000 !important; */
    /* REMOVED: background: #fff !important; */
    /* REMOVED: padding: 0 !important; */
    /* REMOVED: margin: 0 !important; */
  }

  header, footer, .promo-banner, .sponsor-banner {
    display: none; /* Hide header and footer */
  }

  .size-indicator, .info-button, .no-print {
    display: none !important; /* Hide UI elements - !important might be needed here */
  }

  .container {
    padding: 1cm; /* Add print margins */
    max-width: none;
    border: none;
    box-shadow: none;
    display: block; /* Simplify layout */
    width: 100%;
    margin: 0;
  }

  .controls-wrapper {
      display: none !important; /* Hide all controls - !important needed here */
  }

  .previewContainer {
    /* Use a simple border for print */
    border: 1px solid #ccc;
    box-shadow: none;
    min-height: auto;
    /* Set a plain white background FOR PRINTING ONLY */
    background-color: #fff;
    background-image: none; /* Ensure no pattern/gradient prints */
    padding: 1cm;
    width: 100%;
    page-break-inside: avoid; /* Try to keep preview on one page */
  }

  /* Hide overlays for print */
  .previewContainer::before,
  .previewContainer::after {
    display: none !important;
  }

  .logo-container {
      display: block; /* Simplify layout */
      text-align: center; /* Center logo */
      border: none; /* Remove dynamic border for print */
      box-shadow: none;
      width: auto;
      height: auto;
  }

  .logo-text {
    /* Let the text render with its applied styles as much as possible */
    /* Resetting only things that definitely won't print well */
    text-shadow: none;
    /* Keep background/color as set by user for potential color printing */
    /* background: none; */
    /* color: #000; */
    /* -webkit-text-fill-color: initial; */
    /* text-fill-color: initial; */
    animation: none;
    border: none; /* Ensure no borders on text itself */
    box-shadow: none;
    filter: none;
    display: inline-block; /* Ensure it renders */
    font-size: 36pt; /* Set a reasonable fixed size for print */
    padding: 0;
    margin: 0 auto; /* Center if block */
    max-width: 100%;
    line-height: 1.2;
  }

  a {
      color: #000; /* Black links */
      text-decoration: none;
  }
  /* Optional: Show URL for external links in print */
  /* a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; } */
}