/* =========================================================================
   GermanUSA Airbnb — Base Styles
   =========================================================================
   Modern reset + typography + buttons + forms + utilities.
   Consumes tokens from tokens.css. Loaded after parent theme so these
   rules override supreme-directory / directory-starter defaults.
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--gu-font-sans);
    font-size: var(--gu-text-base);
    font-weight: var(--gu-fw-normal);
    line-height: var(--gu-leading-normal);
    color: var(--gu-text);
    background: var(--gu-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: var(--gu-primary); text-decoration: none; transition: color var(--gu-duration-fast) var(--gu-ease); }
a:hover { color: var(--gu-primary-hover); text-decoration: underline; }

ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

:focus-visible { outline: 2px solid var(--gu-primary); outline-offset: 2px; border-radius: var(--gu-radius-sm); }

::selection { background: var(--gu-gold); color: var(--gu-schwarz); }

hr { border: 0; border-top: 1px solid var(--gu-border); margin: var(--gu-space-8) 0; }

/* ------------------------------------------------------------------------- */
/* Typography                                                                  */
/* ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--gu-fw-bold);
    line-height: var(--gu-leading-tight);
    letter-spacing: var(--gu-tracking-tight);
    color: var(--gu-text);
}

h1 { font-size: var(--gu-text-4xl); font-weight: var(--gu-fw-bold); }
h2 { font-size: var(--gu-text-3xl); }
h3 { font-size: var(--gu-text-2xl); }
h4 { font-size: var(--gu-text-xl); }
h5 { font-size: var(--gu-text-lg); }
h6 { font-size: var(--gu-text-md); }

p { margin: 0 0 var(--gu-space-4); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--gu-text-sm); }

strong, b { font-weight: var(--gu-fw-semibold); }

mark { background: var(--gu-gold-soft); color: var(--gu-text); padding: 0.1em 0.3em; border-radius: var(--gu-radius-sm); }

code, kbd, samp, pre {
    font-family: var(--gu-font-mono);
    font-size: 0.9em;
    background: var(--gu-bg-subtle);
    padding: var(--gu-space-1) var(--gu-space-2);
    border-radius: var(--gu-radius-sm);
}

blockquote {
    margin: var(--gu-space-6) 0;
    padding: var(--gu-space-4) var(--gu-space-6);
    border-left: 4px solid var(--gu-primary);
    background: var(--gu-bg-subtle);
    border-radius: 0 var(--gu-radius) var(--gu-radius) 0;
    font-style: italic;
}

/* ------------------------------------------------------------------------- */
/* Buttons                                                                     */
/* ------------------------------------------------------------------------- */
.gu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gu-space-2);
    padding: var(--gu-space-3) var(--gu-space-5);
    font-family: var(--gu-font-sans);
    font-size: var(--gu-text-sm);
    font-weight: var(--gu-fw-semibold);
    line-height: 1;
    color: var(--gu-text);
    background: var(--gu-bg);
    border: 1px solid var(--gu-border-strong);
    border-radius: var(--gu-radius-pill);
    cursor: pointer;
    transition: all var(--gu-duration) var(--gu-ease);
    text-decoration: none;
    white-space: nowrap;
}
.gu-btn:hover { color: var(--gu-text); border-color: var(--gu-text); text-decoration: none; transform: translateY(-1px); }
.gu-btn:active { transform: translateY(0); }

.gu-btn-primary {
    color: var(--gu-text-inverse);
    background: var(--gu-primary);
    border-color: var(--gu-primary);
}
.gu-btn-primary:hover { color: var(--gu-text-inverse); background: var(--gu-primary-hover); border-color: var(--gu-primary-hover); text-decoration: none; }

.gu-btn-dark {
    color: var(--gu-text-inverse);
    background: var(--gu-dark);
    border-color: var(--gu-dark);
}
.gu-btn-dark:hover { color: var(--gu-text-inverse); background: var(--gu-dark-hover); border-color: var(--gu-dark-hover); text-decoration: none; }

.gu-btn-ghost { background: transparent; border-color: transparent; }
.gu-btn-ghost:hover { background: var(--gu-bg-subtle); border-color: var(--gu-bg-subtle); }

.gu-btn-sm { padding: var(--gu-space-2) var(--gu-space-3); font-size: var(--gu-text-xs); }
.gu-btn-lg { padding: var(--gu-space-4) var(--gu-space-6); font-size: var(--gu-text-base); }

.gu-btn-icon {
    width: 40px; height: 40px; padding: 0; border-radius: var(--gu-radius-pill);
}
.gu-btn-icon.gu-btn-sm { width: 32px; height: 32px; }

/* ------------------------------------------------------------------------- */
/* Forms                                                                       */
/* ------------------------------------------------------------------------- */
.gu-input, .gu-select, .gu-textarea {
    width: 100%;
    padding: var(--gu-space-3) var(--gu-space-4);
    font-family: var(--gu-font-sans);
    font-size: var(--gu-text-base);
    color: var(--gu-text);
    background: var(--gu-bg);
    border: 1px solid var(--gu-border-strong);
    border-radius: var(--gu-radius);
    transition: border-color var(--gu-duration-fast) var(--gu-ease), box-shadow var(--gu-duration-fast) var(--gu-ease);
}
.gu-input::placeholder, .gu-textarea::placeholder { color: var(--gu-text-muted); }
.gu-input:focus, .gu-select:focus, .gu-textarea:focus {
    outline: none;
    border-color: var(--gu-primary);
    box-shadow: var(--gu-shadow-focus);
}

.gu-label {
    display: block;
    margin-bottom: var(--gu-space-2);
    font-size: var(--gu-text-sm);
    font-weight: var(--gu-fw-medium);
    color: var(--gu-text);
}

.gu-field { margin-bottom: var(--gu-space-4); }

/* ------------------------------------------------------------------------- */
/* Layout utilities                                                            */
/* ------------------------------------------------------------------------- */
.gu-container {
    width: 100%;
    max-width: var(--gu-container);
    margin-inline: auto;
    padding-inline: var(--gu-space-4);
}
@media (min-width: 768px) { .gu-container { padding-inline: var(--gu-space-6); } }
@media (min-width: 1280px) { .gu-container { padding-inline: var(--gu-space-8); } }

.gu-section { padding-block: var(--gu-space-12); }
.gu-section-sm { padding-block: var(--gu-space-8); }
.gu-section-lg { padding-block: var(--gu-space-16); }

.gu-grid { display: grid; gap: var(--gu-space-4); }
.gu-grid-2 { grid-template-columns: repeat(2, 1fr); }
.gu-grid-3 { grid-template-columns: repeat(3, 1fr); }
.gu-grid-4 { grid-template-columns: repeat(4, 1fr); }
.gu-grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 1023px) {
    .gu-grid-3, .gu-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
    .gu-grid-2, .gu-grid-3, .gu-grid-4 { grid-template-columns: 1fr; }
}

.gu-flex { display: flex; gap: var(--gu-space-4); }
.gu-flex-col { flex-direction: column; }
.gu-flex-wrap { flex-wrap: wrap; }
.gu-items-center { align-items: center; }
.gu-justify-between { justify-content: space-between; }
.gu-justify-center { justify-content: center; }
.gu-flex-1 { flex: 1; }

.gu-text-center { text-align: center; }
.gu-text-right { text-align: right; }

.gu-mt-0 { margin-top: 0; }
.gu-mt-2 { margin-top: var(--gu-space-2); }
.gu-mt-4 { margin-top: var(--gu-space-4); }
.gu-mt-8 { margin-top: var(--gu-space-8); }
.gu-mb-0 { margin-bottom: 0; }
.gu-mb-2 { margin-bottom: var(--gu-space-2); }
.gu-mb-4 { margin-bottom: var(--gu-space-4); }
.gu-mb-8 { margin-bottom: var(--gu-space-8); }

/* ------------------------------------------------------------------------- */
/* Component primitives (used by later phases)                                */
/* ------------------------------------------------------------------------- */
.gu-card {
    background: var(--gu-bg);
    border: 1px solid var(--gu-border);
    border-radius: var(--gu-radius-md);
    overflow: hidden;
    transition: box-shadow var(--gu-duration) var(--gu-ease), transform var(--gu-duration) var(--gu-ease);
}
.gu-card:hover { box-shadow: var(--gu-shadow-md); transform: translateY(-2px); }

.gu-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gu-space-1);
    padding: var(--gu-space-1) var(--gu-space-3);
    font-size: var(--gu-text-xs);
    font-weight: var(--gu-fw-semibold);
    line-height: 1.4;
    border-radius: var(--gu-radius-pill);
}
.gu-badge-gold { background: var(--gu-gold); color: var(--gu-schwarz); }
.gu-badge-rot { background: var(--gu-rot); color: var(--gu-text-inverse); }
.gu-badge-soft { background: var(--gu-bg-subtle); color: var(--gu-text-secondary); }

.gu-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--gu-space-2);
    padding: var(--gu-space-2) var(--gu-space-4);
    font-size: var(--gu-text-sm);
    font-weight: var(--gu-fw-medium);
    color: var(--gu-text);
    background: var(--gu-bg);
    border: 1px solid var(--gu-border-strong);
    border-radius: var(--gu-radius-pill);
    cursor: pointer;
    transition: all var(--gu-duration-fast) var(--gu-ease);
}
.gu-pill:hover { border-color: var(--gu-text); box-shadow: var(--gu-shadow-sm); }
.gu-pill[aria-pressed="true"] { background: var(--gu-schwarz); color: var(--gu-text-inverse); border-color: var(--gu-schwarz); }

/* Star rating (gold) */
.gu-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--gu-gold); font-size: var(--gu-text-sm); }
.gu-stars::before { content: "\2605\2605\2605\2605\2605"; letter-spacing: 1px; }
.gu-stars-value { color: var(--gu-text); font-weight: var(--gu-fw-semibold); margin-left: var(--gu-space-1); }

/* Visually hidden (for a11y labels) */
.gu-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}