/* ─── Design tokens ─────────────────────────────────────────── */
:root {
    color-scheme: light;

    --p-page:        #ede8df;
    --p-surface:     #fffdf9;
    --p-muted:       #e0d9cf;
    --p-border:      rgba(120, 90, 40, 0.12);
    --p-border-med:  rgba(120, 90, 40, 0.18);
    --p-shadow:      0 8px 32px rgba(100, 70, 20, 0.12);
    --p-shadow-sm:   0 2px 8px  rgba(100, 70, 20, 0.08);
    --p-accent:      #b45309;
    --p-accent-soft: rgba(180, 83, 9, 0.08);
    --p-btn:         linear-gradient(135deg, #f59e0b, #b45309);
    --p-btn-hover:   linear-gradient(135deg, #fbbf24, #92400e);
    --p-input-bg:    #f0ebe1;
    --p-text:        #1c1714;
    --p-text-muted:  #6b6360;
    --p-radius:      18px;
    --p-radius-sm:   12px;

    /* Override Bulma radius vars */
    --bulma-radius:        10px;
    --bulma-radius-medium: 14px;
    --bulma-radius-large:  18px;
}

/* ─── Base ──────────────────────────────────────────────────── */
html { background: var(--p-page); }

body {
    background:
        radial-gradient(ellipse 80% 70% at 50% -30%, rgba(180,83,9,.08), transparent 55%),
        radial-gradient(ellipse 65% 45% at 15% 95%,  rgba(120,53,15,.04), transparent 55%),
        var(--p-page);
    color: var(--p-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Bulma global text overrides */
.title  { color: var(--p-text) !important; }
.subtitle { color: var(--p-text-muted) !important; }
.has-text-grey,
.is-size-7.has-text-grey { color: var(--p-text-muted) !important; }
.help { color: var(--p-text-muted); }

/* Small amber label above titles (like .logo in reference) */
.heading {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--p-accent) !important;
}

/* ─── Navbar ────────────────────────────────────────────────── */
.navbar.is-light,
.footer.has-background-light,
.hero.is-light {
    background-color: transparent !important;
}

.navbar {
    background: rgba(237, 232, 223, 0.88) !important;
    border-bottom: 1px solid var(--p-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar-item { color: var(--p-text); }
.navbar-item.has-text-primary,
.navbar-brand .has-text-primary {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--p-accent) !important;
}
.navbar-item:hover { background-color: var(--p-accent-soft) !important; }

/* ─── Hero ──────────────────────────────────────────────────── */
.puppies-hero {
    border-bottom: 1px solid var(--p-border);
}
.puppies-hero-image {
    max-width: 260px;
    margin-left: auto;
    opacity: 0.9;
}

/* ─── Boxes & Cards ─────────────────────────────────────────── */
.box,
.card,
.dropdown-content {
    background-color: var(--p-surface);
    color: var(--p-text);
}

.box,
.card {
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
}

.message {
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
}

/* ─── Inputs ────────────────────────────────────────────────── */
.input,
.select select,
.textarea {
    background-color: var(--p-input-bg);
    border-color: rgba(120, 90, 40, 0.22);
    border-radius: var(--p-radius-sm);
    color: var(--p-text);
    height: 44px;
    box-shadow: none;
}
.input:focus,
.select select:focus,
.textarea:focus {
    border-color: rgba(180, 83, 9, 0.45);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.10);
}
.input::placeholder { color: var(--p-text-muted); }

/* ─── Buttons ───────────────────────────────────────────────── */
.button.is-primary {
    background: var(--p-btn);
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.28);
}
.button.is-primary:hover {
    background: var(--p-btn-hover);
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.36);
    color: #fff;
}
.button.is-primary:active {
    background: linear-gradient(135deg, #d97706, #78350f);
}

.button.is-light,
.button.is-light:focus {
    background-color: var(--p-surface);
    border-color: var(--p-border-med);
    color: var(--p-text);
    box-shadow: var(--p-shadow-sm);
}
.button.is-light:hover {
    background-color: var(--p-muted);
    border-color: rgba(120, 90, 40, 0.25);
    color: var(--p-text);
}

/* ─── Tags ──────────────────────────────────────────────────── */
.tag.is-light,
.tag.is-info.is-light,
.tag.is-success.is-light,
.tag.is-warning.is-light {
    background-color: var(--p-muted);
    color: var(--p-text);
    border: 1px solid var(--p-border-med);
}
.tag.is-success.is-light { background-color: rgba(21, 128, 61, 0.08); color: #166534; border-color: rgba(21,128,61,.18); }
.tag.is-info.is-light    { background-color: rgba(29, 78, 216, 0.07); color: #1e40af; border-color: rgba(29,78,216,.15); }
.tag.is-warning.is-light { background-color: rgba(217, 119, 6, 0.10); color: #92400e; border-color: rgba(217,119,6,.20); }

/* ─── Breed suggest dropdown ────────────────────────────────── */
.breed-search-control,
.breed-suggest,
.breed-suggest .dropdown-trigger,
.breed-suggest .input { width: 100%; }

.breed-suggest .dropdown-menu {
    width: 100%;
    min-width: 100%;
}
.breed-suggest .dropdown-content {
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    box-shadow: var(--p-shadow);
    max-height: 20rem;
    overflow-y: auto;
}
.breed-suggest-item {
    width: 100%;
    border: 0;
    text-align: left;
    border-radius: 8px;
    color: var(--p-text);
}
.breed-suggest-item:hover { background-color: var(--p-accent-soft); }
.breed-suggest-item[hidden],
.breed-suggest-empty[hidden] { display: none; }
.breed-suggest .help { color: var(--p-text-muted); }

/* ─── Rating cards ──────────────────────────────────────────── */
.rating-details { border: 1px solid var(--p-border); }
.rating-details summary { list-style: none; }
.rating-details summary::-webkit-details-marker { display: none; }
.rating-details summary { cursor: pointer; }

.rating-details .title       { color: var(--p-text); }
.rating-details a.title      { color: var(--p-accent) !important; }
.rating-details a.title:hover { text-decoration: underline; }
.rating-details .has-text-grey { color: var(--p-text-muted) !important; }
.rating-details .button.is-light { color: var(--p-text); border-color: var(--p-border-med); }

/* ─── Kennel profile ────────────────────────────────────────── */
.kennel-profile,
.litter-card,
.litter-card .box { color: var(--p-text); }

.kennel-profile .title,
.litter-card .title,
.litter-card .has-text-weight-semibold { color: var(--p-text); }

.kennel-profile .subtitle,
.litter-card .has-text-grey { color: var(--p-text-muted) !important; }
.kennel-profile .button.is-light { color: var(--p-text); border-color: var(--p-border-med); }

/* ─── Kennel/dog initials avatar ────────────────────────────── */
.kennel-initial,
.dog-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--p-muted), var(--p-surface));
    border: 1px solid var(--p-border);
    color: var(--p-accent);
    font-weight: 800;
}
.kennel-initial { font-size: 2.25rem; }
.dog-initial    { font-size: 1.5rem;  }

/* ─── Footer ────────────────────────────────────────────────── */
.footer {
    background: transparent !important;
    border-top: 1px solid var(--p-border);
    color: var(--p-text-muted);
    padding: 2rem 1.5rem;
}
.footer strong { color: var(--p-text); }

/* ─── HTMX loading states ───────────────────────────────────── */
.shadow-when-pressed.htmx-request,
#rating-results.htmx-request {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .field.has-addons { display: block; }
    .field.has-addons .control,
    .field.has-addons .button { width: 100%; }
    .field.has-addons .control + .control { margin-top: 0.75rem; }
}