/* settings.css — Shared settings panel and button styles for all pages
   This file defines the interactive settings panel that appears in the top-right corner
   and provides theming controls, language selection, and button styling. */

/* ===== ROOT VARIABLES ===== */
/* Define global CSS custom property (CSS variable) for border radius */
:root {
  --radius: 10px;  /* Default border radius for panels and buttons, makes corners slightly rounded */
}

/* ===== BUTTON STYLING ===== */
/* Base button styles - applies to ALL <button> elements across the site */
button {
  font-family: inherit;  /* Inherit the font from parent/body (keeps consistent with page typography) */
  font-size: 0.95rem;  /* Slightly smaller than body text (usually 16px, so ~15.2px) */
  padding: 8px 12px;  /* Vertical padding 8px, horizontal 12px (gives breathing room for text) */
  border-radius: 8px;  /* Rounded corners for modern look */
  border: 1px solid rgba(0,0,0,0.06);  /* Very subtle dark border (6% opacity) for definition */
  background: var(--accent, #0078d4);  /* Use page's accent color from CSS variable, fallback to blue */
  color: #fff;  /* White text for contrast against colored background */
  cursor: pointer;  /* Show pointing hand cursor on hover to indicate interactivity */
  /* Smooth transitions for three properties when they change: */
  transition: transform .08s ease,  /* Quick 80ms transform animation (for vertical movement) */
              background .12s ease,  /* 120ms background color fade */
              box-shadow .12s ease;  /* 120ms shadow fade */
}

/* Button hover state - lifts button up slightly and darkens it */
button:hover {
  transform: translateY(-1px);  /* Move button up by 1 pixel (creates lift effect) */
  filter: brightness(.95);  /* Darken button slightly (multiply brightness by 95%) */
}

/* Button focus state - important for keyboard accessibility */
button:focus {
  /* Create a visible outline ring around the button when focused via keyboard */
  outline: 3px solid color-mix(in srgb, var(--accent, #0078d4) 20%, transparent);  
  /* ↑ Mix accent color at 20% opacity with transparent to create semi-transparent ring */
  outline-offset: 3px;  /* Push outline 3px away from button edge (creates gap/halo effect) */
}

/* Secondary button variant - transparent background with colored text */
button.secondary {
  background: transparent;  /* No background fill (see-through) */
  color: var(--accent);  /* Text uses accent color instead of white */
  border: 1px solid rgba(0,0,0,0.06);  /* Subtle border to define edges */
}

/* ===== SETTINGS BUTTON (GEAR ICON) ===== */
/* The circular button in the top-right corner that opens settings panel */
.settings-btn {
  position: absolute;  /* Position relative to nearest positioned ancestor (usually body or header) */
  right: 1rem;  /* 1rem (~16px) from right edge */
  top: 1rem;  /* 1rem from top edge */
  z-index: 70;  /* High stacking order to appear above other content (higher than panel's z-index:60) */
  width: 48px;  /* Fixed width for circular button */
  height: 48px;  /* Same as width = perfect circle */
  padding: 0;  /* Remove default button padding (we're using flexbox to center icon) */
  display: inline-flex;  /* Use flexbox for centering icon */
  align-items: center;  /* Center icon vertically */
  justify-content: center;  /* Center icon horizontally */
  border-radius: 50%;  /* Make it circular (50% = perfect circle on square element) */
  background: rgba(255, 255, 255, 0.95);  /* Semi-transparent white background */
  color: var(--accent);  /* Icon color uses page accent */
  border: 1px solid rgba(255, 255, 255, 0.2);  /* Subtle light border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);  /* Multiple shadows for depth */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth animation with easing */
  backdrop-filter: blur(10px);  /* Glass effect - blurs background behind button */
  -webkit-backdrop-filter: blur(10px);  /* Safari support for blur */
  font-size: 1.25rem;  /* Larger icon */
}

/* Settings button hover state - lifts higher with stronger shadow */
.settings-btn:hover {
  transform: scale(1.05) rotate(90deg);  /* Slightly enlarge and rotate gear icon */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);  /* Enhanced shadow on hover */
  background: rgba(255, 255, 255, 1);  /* Fully opaque white */
}

/* Settings button focus state - ensures keyboard accessibility */
.settings-btn:focus {
  outline: none;  /* Remove default outline */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(59, 130, 246, 0.5);  /* Focus ring */
}

/* ===== SETTINGS PANEL (DROPDOWN) ===== */
/* The panel that drops down from the settings button, contains theme toggle and language selector */
.settings-panel {
  position: absolute;  /* Position relative to nearest positioned ancestor */
  right: 1rem;  /* Aligned with settings button (1rem from right edge) */
  top: 5rem;  /* Below settings button (leaving space for button + gap) */
  z-index: 60;  /* High stacking order to appear above other content */
  width: 280px;  /* Fixed width for panel */
  padding: 16px;  /* Consistent padding around content */
  border-radius: 16px;  /* More rounded corners for modern look */
  background: rgba(255, 255, 255, 0.95);  /* Semi-transparent white background */
  color: var(--fg, #111);  /* Use theme foreground (text) color, fallback dark gray */
  border: 1px solid rgba(255, 255, 255, 0.2);  /* Subtle light border */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);  /* Multiple shadows for depth */
  backdrop-filter: blur(20px);  /* Glass effect - blurs background behind panel */
  -webkit-backdrop-filter: blur(20px);  /* Safari support for blur */
  display: none;  /* Hidden by default (JavaScript toggles .show class) */
  opacity: 0;  /* Start invisible for animation */
  transform: translateY(-10px);  /* Start slightly above for slide-down effect */
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth fade and slide */
}

/* When panel is shown (JavaScript adds this class on settings button click) */
.settings-panel.show {
  display: block;  /* Make panel visible */
  opacity: 1;  /* Fade in */
  transform: translateY(0);  /* Slide to final position */
}

/* Settings row - container for each setting (label + control) */
.settings-row {
  display: flex;  /* Use flexbox for horizontal layout */
  justify-content: space-between;  /* Push label to left, control to right */
  align-items: center;  /* Center items vertically */
  margin: 12px 0;  /* 12px vertical spacing between rows */
  padding: 12px;  /* Add internal padding */
  border-radius: 12px;  /* Rounded corners */
  background: rgba(0, 0, 0, 0.02);  /* Very subtle background */
  transition: background 0.2s ease;  /* Smooth background transition */
}

.settings-row:hover {
  background: rgba(0, 0, 0, 0.04);  /* Slightly darker on hover */
}

/* Labels inside settings panel */
.settings-panel label {
  font-size: 0.95rem;  /* Slightly smaller than body text */
  font-weight: 500;  /* Medium weight for better readability */
  color: var(--fg, #111);  /* Use theme foreground color */
}

/* Language selector dropdown */
.lang-select {
  width: 100%;  /* Full width of parent row */
  max-width: 120px;  /* Limit width for better appearance */
  padding: 8px 12px;  /* Inner padding for text */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid rgba(0, 0, 0, 0.1);  /* Subtle border */
  background: rgba(255, 255, 255, 0.8);  /* Semi-transparent white */
  color: var(--fg, #111);  /* Theme foreground color */
  font-size: 0.9rem;  /* Slightly smaller text */
  font-weight: 500;  /* Medium weight */
  cursor: pointer;  /* Pointer cursor on hover */
  transition: all 0.2s ease;  /* Smooth transitions */
}

.lang-select:hover {
  border-color: rgba(0, 0, 0, 0.2);  /* Darker border on hover */
  background: rgba(255, 255, 255, 1);  /* Fully opaque on hover */
}

.lang-select:focus {
  outline: none;  /* Remove default outline */
  border-color: var(--accent, #3b82f6);  /* Accent color border on focus */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);  /* Focus ring */
}

/* ===== CLOSE BUTTON ===== */
/* Special styling for the "Close" button inside settings panel */
.settings-panel button#settingsClose {
  padding: 6px 10px;  /* Smaller padding than regular buttons */
  font-size: 0.9rem;  /* Smaller font size */
  border-radius: 6px;  /* Smaller border radius */
  background: transparent;  /* No background (ghost button style) */
  color: var(--muted, #6b6b6b);  /* Muted text color */
  border: 1px solid rgba(0,0,0,0.06);  /* Very subtle border */
}

/* Close button hover state */
.settings-panel button#settingsClose:hover {
  background: rgba(0,0,0,0.04);  /* Very light dark background on hover */
  color: #fff;  /* Change text to white on hover */
}

/* ===== LUNCH LINK STYLING ===== */
/* Special link style used for clickable items (e.g., restaurant links) */
.lunch-link {
  display: block;  /* Make link take full width of container */
  padding: 8px;  /* Padding around link text */
  border-radius: 8px;  /* Rounded corners */
  transition: background .12s ease;  /* Smooth 120ms background color transition */
}

/* Lunch link hover state - tinted background using accent color */
.lunch-link:hover {
  /* Mix accent color at 8% with white background (creates subtle tint) */
  background: color-mix(in srgb, var(--accent, #0078d4) 8%, #fff);
}

/* ===== RESPONSIVE DESIGN ===== */
/* Adjustments for smaller screens (mobile devices) */
@media (max-width: 600px) {
  /* Smaller settings button on mobile */
  .settings-btn {
    width: 44px;  /* Reduced from 48px */
    height: 44px;  /* Reduced from 48px */
    right: 0.75rem;  /* Closer to edge */
    top: 0.75rem;  /* Closer to top edge */
    font-size: 1.1rem;  /* Slightly smaller icon */
  }
  
  /* Smaller settings panel on mobile */
  .settings-panel {
    right: 0.75rem;  /* Aligned with button */
    top: 4.5rem;  /* Adjusted for smaller button */
    width: calc(100vw - 2rem);  /* Full width minus margins */
    max-width: 320px;  /* Maximum width */
  }
}

/* ===== DARK MODE OVERRIDES ===== */
/* Special styling adjustments when dark mode is active */
body.dark .settings-btn {
  background: rgba(26, 29, 41, 0.95);  /* Dark semi-transparent background */
  color: rgba(255, 255, 255, 0.9);  /* Light icon color */
  border-color: rgba(255, 255, 255, 0.1);  /* Light border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);  /* Enhanced shadows */
}

body.dark .settings-btn:hover {
  background: rgba(26, 29, 41, 1);  /* Fully opaque on hover */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);  /* Stronger shadows */
}

body.dark .settings-panel {
  background: rgba(26, 29, 41, 0.95);  /* Dark semi-transparent background */
  border-color: rgba(255, 255, 255, 0.1);  /* Light border */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);  /* Enhanced shadows */
}

body.dark .settings-row {
  background: rgba(255, 255, 255, 0.03);  /* Very subtle light background */
}

body.dark .settings-row:hover {
  background: rgba(255, 255, 255, 0.05);  /* Slightly lighter on hover */
}

body.dark .lang-select {
  background: rgba(255, 255, 255, 0.05);  /* Dark background */
  border-color: rgba(255, 255, 255, 0.1);  /* Light border */
  color: rgba(255, 255, 255, 0.9);  /* Light text */
}

body.dark .lang-select:hover {
  background: rgba(255, 255, 255, 0.08);  /* Slightly lighter on hover */
  border-color: rgba(255, 255, 255, 0.2);  /* Brighter border */
}