/*
 * The Hamster Hub — Website Edition
 * Visual/layout layer only. Existing application logic and data integrations are untouched.
 */
:root {
    --ham-bg: #fffaf0;
    --ham-surface: rgba(255,255,255,.96);
    --ham-surface-soft: #fffdf8;
    --ham-text: #2f261f;
    --ham-muted: #766a60;
    --ham-line: #eadfce;
    --ham-accent: #d97706;
    --ham-accent-2: #f59e0b;
    --ham-accent-soft: #fef3c7;
    --ham-shadow: 0 18px 45px rgba(93, 64, 35, .10);
    --ham-shadow-soft: 0 8px 24px rgba(93, 64, 35, .08);
    --ham-radius: 20px;
}

html { scroll-behavior: smooth; }

body.site-web {
    color: var(--ham-text);
    background-color: var(--ham-bg) !important;
    background-image:
        radial-gradient(circle at 8% 4%, rgba(245, 158, 11, .10), transparent 26rem),
        radial-gradient(circle at 92% 18%, rgba(217, 119, 6, .07), transparent 24rem),
        linear-gradient(180deg, #fffdf8 0, #fffaf0 420px, #fff 100%);
    background-attachment: fixed;
    min-width: 320px;
}

body.site-web::before {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #f59e0b, #d97706 42%, #92400e 100%);
    position: fixed;
    inset: 0 0 auto;
    z-index: 9999;
    pointer-events: none;
}

body.site-web .container {
    width: min(100% - 32px, 1240px) !important;
    max-width: 1240px !important;
}

/* Header / primary website navigation */
body.site-web > nav,
body.site-web nav.bg-white {
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid rgba(217,119,6,.14);
    box-shadow: 0 10px 30px rgba(77,51,27,.07) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.site-web > nav > .container > div:first-child,
body.site-web nav > .container > div:first-child {
    min-height: 72px;
}

body.site-web nav a {
    transition: transform .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
body.site-web nav a:hover { transform: translateY(-1px); }
body.site-web nav a[href="index.html"] > div:first-child {
    box-shadow: 0 8px 18px rgba(217,119,6,.20);
}
body.site-web nav .hidden.md\:flex,
body.site-web nav .hidden.lg\:flex {
    gap: .25rem;
    align-items: center;
}

/* Main web canvas */
body.site-web main,
body.site-web > .flex-grow.container,
body.site-web > .container.mx-auto:not(nav .container) {
    position: relative;
}

body.site-web main { padding-top: 2.25rem !important; padding-bottom: 3rem !important; }

body.site-page-index main,
body.site-page-hospitals #hospitals,
body.site-page-boarding #boarding,
body.site-page-donate #donate {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
}

/* Homepage reading experience */
body.site-page-index .guide-content {
    border: 1px solid var(--ham-line);
    border-radius: var(--ham-radius) !important;
    box-shadow: var(--ham-shadow-soft) !important;
    background: var(--ham-surface) !important;
    padding: clamp(1.25rem, 3vw, 2.4rem) !important;
}
body.site-page-index .guide-content h3 {
    color: #9a5505;
    border-bottom-color: #fde1a4;
    scroll-margin-top: 100px;
}
body.site-page-index .guide-content h4 { color: #6f3e13; }
body.site-page-index .guide-content table {
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ham-line);
    border-radius: 14px;
    overflow: hidden;
}
body.site-page-index .guide-content img { max-width: 100%; height: auto; }
body.site-page-index .warning-box,
body.site-page-index .danger-box { border-radius: 14px !important; }

/* Directory pages */
body.site-page-hospitals header,
body.site-page-boarding header {
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
    background: rgba(255,255,255,.78);
    border: 1px solid var(--ham-line);
    border-radius: var(--ham-radius);
    box-shadow: var(--ham-shadow-soft);
}
body.site-page-hospitals #search-hospitals,
body.site-page-boarding #search-boarding {
    background: rgba(255,255,255,.96);
    border: 1px solid #dfd3c2 !important;
    border-radius: 14px !important;
    min-height: 52px;
    box-shadow: 0 6px 18px rgba(78,52,27,.06) !important;
}
body.site-page-hospitals #content-hospitals > div,
body.site-page-boarding #content-boarding > div {
    border-radius: 18px !important;
}

/* Webboard */
body.site-page-articles main { max-width: 1320px !important; }
body.site-page-articles main > div {
    align-items: flex-start;
}
body.site-page-articles aside,
body.site-page-articles section.bg-white {
    border-color: var(--ham-line) !important;
    box-shadow: var(--ham-shadow-soft) !important;
}
body.site-page-articles aside {
    position: sticky;
    top: 94px;
    max-height: calc(100vh - 112px);
    overflow: auto;
    border-radius: 18px;
}
body.site-page-articles section.bg-white { border-radius: 22px !important; }
body.site-page-articles #posts-container > div,
body.site-page-articles #comments-list > div {
    border-radius: 16px !important;
}
body.site-page-articles #search-input {
    min-height: 48px;
    background: #fff !important;
}

/* Authentication */
body.site-page-auth {
    background-image:
        radial-gradient(circle at 16% 15%, rgba(245,158,11,.16), transparent 25rem),
        radial-gradient(circle at 84% 35%, rgba(120,53,15,.08), transparent 25rem),
        linear-gradient(140deg, #fffaf0, #fff 60%) !important;
}
body.site-page-auth .auth-card {
    border: 1px solid var(--ham-line);
    border-radius: 24px !important;
    box-shadow: var(--ham-shadow) !important;
}
body.site-page-auth input { min-height: 48px; }

/* Admin — keep all controls/logic, make it desktop dashboard friendly */
body.site-page-admin main { max-width: 1320px !important; }
body.site-page-admin #admin-login > div,
body.site-page-admin #admin-security > div,
body.site-page-admin #admin-panel > div,
body.site-page-admin .tab-view > div {
    border-color: var(--ham-line) !important;
}
body.site-page-admin #admin-login > div,
body.site-page-admin #admin-security > div {
    border-radius: 24px !important;
    box-shadow: var(--ham-shadow) !important;
}
body.site-page-admin #admin-panel .tab-view {
    border-radius: 20px;
}
body.site-page-admin #editor-container {
    border-color: #e5dac9;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.02);
}

/* Submission forms */
body.site-page-sub-hospitals > .flex-grow.container,
body.site-page-sum-homehams > .flex-grow.container,
body.site-page-sub-seller > .flex-grow.container {
    max-width: 900px !important;
}
body.site-page-sub-hospitals form > div,
body.site-page-sum-homehams form > div,
body.site-page-sub-seller form > div,
body.site-page-sub-hospitals .max-w-xl > div:first-child,
body.site-page-sum-homehams .max-w-xl > div:first-child,
body.site-page-sub-seller .max-w-xl > div:first-child {
    border-color: var(--ham-line) !important;
    box-shadow: var(--ham-shadow-soft) !important;
}
body.site-page-sub-hospitals input,
body.site-page-sub-hospitals select,
body.site-page-sum-homehams input,
body.site-page-sum-homehams select,
body.site-page-sub-seller input,
body.site-page-sub-seller select,
body.site-page-sub-seller textarea {
    font-size: 16px;
}

/* Donation page */
body.site-page-donate #donate > div,
body.site-page-donate #donate section {
    border-radius: 20px !important;
}

/* Common cards, forms, controls */
body.site-web input:not([type="radio"]):not([type="checkbox"]),
body.site-web select,
body.site-web textarea {
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
body.site-web input:not([type="radio"]):not([type="checkbox"]):focus,
body.site-web select:focus,
body.site-web textarea:focus {
    box-shadow: 0 0 0 4px rgba(245,158,11,.12) !important;
}
body.site-web button { transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
body.site-web button:active { transform: translateY(1px); }

/* Modals */
body.site-web .modal { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
body.site-web .modal-content,
body.site-web .modal > div {
    border: 1px solid rgba(255,255,255,.36);
    box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

/* Footer */
body.site-web footer {
    margin-top: auto !important;
    border-top: 1px solid rgba(146,64,14,.10);
    background: linear-gradient(180deg, rgba(255,247,237,.86), rgba(254,243,199,.92)) !important;
    color: #5e5146 !important;
}
body.site-page-boarding footer { background: #3c332d !important; color: #fff !important; }

/* Make linked/embedded content behave safely in the website canvas */
body.site-web iframe { max-width: 100%; }
body.site-web img { image-rendering: auto; }
body.site-web .overflow-x-auto { scrollbar-width: thin; scrollbar-color: #d6b98a transparent; }

@media (min-width: 1280px) {
    body.site-web .container { width: min(100% - 56px, 1240px) !important; }
    body.site-page-index main { padding-top: 2.7rem !important; }
}

@media (max-width: 1023px) {
    body.site-page-articles aside { position: static; max-height: none; }
    body.site-web main { padding-top: 1.5rem !important; }
}

@media (max-width: 767px) {
    body.site-web::before { height: 3px; }
    body.site-web .container { width: min(100% - 22px, 1240px) !important; }
    body.site-web nav > .container > div:first-child { min-height: 64px; }
    body.site-web main { padding-left: 0 !important; padding-right: 0 !important; }
    body.site-web .modal { padding: .55rem !important; }
    body.site-web .modal-content { width: 100% !important; height: 94vh !important; border-radius: 16px !important; }
    body.site-page-index .guide-content { border-radius: 16px !important; }
    body.site-page-hospitals header,
    body.site-page-boarding header { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}