/*
Theme Name: Seoul Curator
Theme URI: https://kpop-eats.com
Author: Vibrilliant
Author URI: https://vibrilliant.com
Description: The definitive editorial guide to Seoul's culinary underground. Dark mode, editorial style, food-focused design.
Version: 1.0.0
License: Apache-2.0
License URI: https://www.apache.org/licenses/LICENSE-2.0
Text Domain: seoul-curator
*/

/*
 * Design System
 * 
 * Colors:
 * - Primary: #ff4a90 (Pink)
 * - Surface: #151024 (Dark purple)
 * - On Surface: #e8defb (Light text)
 * - Primary Container: #ff4a90
 * - Secondary: #ebb2ff
 * - Surface Container: #221c31
 * 
 * Fonts:
 * - Headlines: Plus Jakarta Sans
 * - Body: Inter
 */

/* Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Colors */
  --color-surface: #151024;
  --color-on-surface: #f2e8ff; //* Updated for WCAG 2.1 AA compliance (4.5:1 ratio) */
  --color-on-surface-variant: #e8e0ff; //* Improved contrast for secondary text */
  --color-primary: #ff4a90;
  --color-primary-container: #ff4a90;
  --color-on-primary: #650030;
  --color-secondary: #ebb2ff;
  --color-secondary-container: #6a2687;
  --color-on-secondary-container: #e399ff;
  --color-tertiary: #8dcff2;
  --color-tertiary-container: #5699b9;
  --color-on-tertiary-container: #002e3f;
  --color-surface-container-lowest: #100b1f;
  --color-surface-container-low: #1d182d;
  --color-surface-container: #221c31;
  --color-surface-container-high: #2c273c;
  --color-surface-container-highest: #373147;
  --color-outline: #ab8790;
  --color-outline-variant: #5c3f46;
  
  /* Fonts */
  --font-headline: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 5rem; /* Fixed header offset */
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 0;
}

h1 {
  font-size: clamp(2.5rem, 8vw, 6.5rem);
}

h2 {
  font-size: clamp(2rem, 5vw, 4rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

/* Links */
a {
  color: var(--color-primary-container);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary);
}

/* Container */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0 3rem;
  }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-container { background-color: var(--color-surface-container); }

/* Hide scrollbar utility */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* WordPress Generated Classes */
.alignwide {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  max-width: 100%;
  width: 100%;
}

/* Accessibility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary);
}
/* ===== MAPS ===== */
.map-container {
    margin: 24px 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-container h2,
.map-container h3 {
    padding: 20px 24px;
    font-size: 20px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kpop-eats-map {
    width: 100%;
    height: 400px;
    background: var(--color-surface-container, #1a1a2e);
}

.map-fallback {
    padding: 24px;
}

.map-address {
    color: var(--color-on-surface-variant, #9ca3af);
    margin: 8px 0 16px;
}

.map-fallback-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.map-actions {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.map-directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary, #ff4a90);
    color: var(--white, #fff);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.map-directions-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 74, 144, 0.4);
}

.map-info-window {
    padding: 8px;
}

.map-info-window h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--dark-charcoal, #2c3e50);
}

.map-info-window p {
    font-size: 14px;
    margin: 0;
    color: var(--medium-gray, #7f8c8d);
}

.map-info-window a {
    color: var(--color-primary, #ff4a90);
    text-decoration: none;
}

.map-info-window a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .kpop-eats-map {
        height: 300px;
    }
    
    .map-actions {
        flex-direction: column;
    }
    
    .map-fallback-actions {
        flex-direction: column;
    }
}