/* ============================================
   SUNSET CHARTER TOURS - LOGO & PADDING FIXES
   Critical CSS fixes for logo cutoff and site-wide padding
   Version: 1.0.0
   ============================================ */

/* ============================================
   LOGO FIXES - Prevent Cutoff & Proper Sizing
   ============================================ */

/**
 * Custom Logo Container Fixes
 * WordPress outputs logo with .custom-logo-link class
 * These styles ensure the logo has proper space and doesn't get cut off
 * Clickable area is sized to match the logo with small padding for accessibility
 *
 * IMPORTANT: WordPress adds inline styles based on add_theme_support('custom-logo')
 * dimensions. We use !important to override these inline styles and constrain the
 * clickable area to match the actual logo size.
 */
.custom-logo-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* Override WordPress inline width/height styles to fit content */
  width: auto !important;
  height: auto !important;
  /* Clickable area sized to logo with small padding for accessibility */
  padding: 8px 12px;
  /* Position relative to allow logo centering */
  position: relative;
  /* Prevent logo from being too close to edges */
  margin-right: var(--spacing-md);
  /* Ensure logo container doesn't shrink */
  flex-shrink: 0;
}

/**
 * Custom Logo Image Styling
 * Ensures the logo image itself is properly sized and maintains aspect ratio
 */
.custom-logo {
  /* Set maximum height to fit within navbar with breathing room */
  max-height: 60px;
  /* Maintain aspect ratio */
  width: auto;
  height: auto;
  /* Prevent any distortion */
  object-fit: contain;
  /* Add subtle transition for smooth loading */
  transition: transform var(--transition-fast);
  /* Prevent any cutoff issues */
  display: block;
}

/**
 * Logo hover effect (optional enhancement)
 */
.custom-logo-link:hover .custom-logo {
  transform: scale(1.02);
}

/**
 * Fallback logo (text-based) improvements
 * When no custom logo is set, these styles improve the text logo
 */
.logo {
  padding: var(--spacing-sm) 0;
  margin-right: var(--spacing-md);
}

/**
 * Navigation bar adjustments for logo
 * Ensures navbar has enough height and proper alignment
 */
.navbar .container {
  /* Add horizontal padding to prevent edge cutoff */
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
  /* Ensure vertical centering with logo */
  align-items: center;
}

/**
 * Mobile logo adjustments
 * Reduce logo size on mobile to fit better with menu button
 * Maintain large clickable area on mobile for easy tapping
 */
@media (max-width: 768px) {
  .custom-logo {
    max-height: 48px;
  }

  .custom-logo-link {
    /* Clickable area sized to logo with small padding for touch targets */
    padding: 6px 10px;
    margin-right: var(--spacing-sm);
  }

  .navbar .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
}

/**
 * Tablet adjustments
 */
@media (min-width: 769px) and (max-width: 1024px) {
  .custom-logo {
    max-height: 56px;
  }
}

/* ============================================
   SITE-WIDE PADDING FIXES
   Add breathing room around entire site perimeter
   ============================================ */

/**
 * Main content wrapper padding
 * Adds consistent padding around all main content areas
 */
#main-content,
main,
.site-content {
  /* Prevent content from touching browser edges on all sides */
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  /* Add top padding to separate from fixed navbar */
  padding-top: var(--spacing-sm);
  /* Add bottom padding for footer separation */
  padding-bottom: var(--spacing-sm);
}

/**
 * Enhanced container padding for nested containers
 * Ensures proper spacing even in nested layouts
 */
.container {
  /* Override base container padding for more breathing room */
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/**
 * Section padding enhancements
 * Adds extra horizontal padding to sections
 */
.section {
  /* Add horizontal padding in addition to vertical */
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/**
 * Hero section padding fix
 * Ensures hero content doesn't touch edges
 */
.hero-content {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

/**
 * Desktop enhancements (wider screens)
 * Add more generous padding on larger screens
 */
@media (min-width: 1025px) {
  #main-content,
  main,
  .site-content {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .container {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
}

/**
 * Tablet padding adjustments
 */
@media (min-width: 769px) and (max-width: 1024px) {
  #main-content,
  main,
  .site-content {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

/**
 * Mobile padding adjustments
 * Reduce padding on mobile for optimal use of screen space
 */
@media (max-width: 768px) {
  #main-content,
  main,
  .site-content {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .section {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .hero-content {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

/* ============================================
   CIRCULAR LOGO OPTIMIZATION
   Specific styles to accommodate circular logo designs
   ============================================ */

/**
 * Circular logo container
 * Provides square aspect ratio container for circular logos
 */
.custom-logo-link.circular-logo {
  /* Add extra padding for circular designs */
  padding: var(--spacing-xs) var(--spacing-sm);
}

/**
 * Circular logo image styling
 * Ensures circular logos display perfectly
 */
.circular-logo .custom-logo {
  /* Ensure square dimensions for perfect circles */
  max-height: 64px;
  max-width: 64px;
  /* Apply border radius for circular appearance (if needed) */
  border-radius: 50%;
  /* Add subtle shadow for depth */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/**
 * Mobile circular logo adjustments
 */
@media (max-width: 768px) {
  .circular-logo .custom-logo {
    max-height: 50px;
    max-width: 50px;
  }
}

/* ============================================
   ADDITIONAL LAYOUT FIXES
   Prevent overflow and ensure proper spacing
   ============================================ */

/**
 * Body overflow fix
 * Already set in design-tokens.css but reinforcing here
 */
body {
  overflow-x: hidden;
  /* Add subtle padding on body level as final safety net */
  padding: 0 var(--spacing-xs);
}

/**
 * Fix for full-width sections that might break padding
 * Ensures full-width sections still respect horizontal padding
 */
.full-width-section {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 1025px) {
  .full-width-section {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

/**
 * WordPress admin bar accommodation
 * Adjusts spacing when admin bar is visible
 */
.admin-bar .navbar {
  /* Account for WordPress admin bar on desktop */
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .navbar {
    /* Account for WordPress admin bar on mobile */
    top: 46px;
  }
}

/* ============================================
   FOOTER PADDING FIX
   Ensure footer has proper spacing
   ============================================ */
.footer {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 1025px) {
  .footer {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

/* ============================================
   CARD & GRID SPACING IMPROVEMENTS
   Ensure cards and grid items have proper spacing
   ============================================ */

/**
 * Card grid container padding
 */
.grid {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

/**
 * Calendar grid padding fix
 */
.calendar-grid {
  /* Add margin instead of padding to prevent event cutoff */
  margin: 0 var(--spacing-xs);
}

@media (max-width: 768px) {
  .calendar-grid {
    margin: 0;
  }
}

/* ============================================
   FILTER BAR SPACING
   Ensure filter bar respects site padding
   ============================================ */
.filter-bar {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

@media (max-width: 768px) {
  .filter-bar {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   Ensure focus states are visible with new padding
   ============================================ */

/**
 * Enhanced focus states for logo
 */
.custom-logo-link:focus {
  outline: 3px solid var(--color-sky-blue);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/**
 * Skip link positioning with new layout
 */
.skip-link:focus {
  /* Ensure skip link appears with proper padding */
  left: var(--spacing-md);
  top: var(--spacing-sm);
}

/* ============================================
   PRINT STYLES
   Maintain proper spacing in print view
   ============================================ */
@media print {
  body {
    padding: 0;
  }

  .container {
    padding: 0 1rem;
  }

  #main-content,
  main,
  .site-content {
    padding: 0;
  }
}

/* ============================================
   END OF LOGO & PADDING FIXES
   ============================================ */