/* ================================================
   Penguin Support — UI palettes + theme picker
   ================================================

   Two palettes, selected per-user via the account-menu theme picker and
   rendered server-side as data-palette="..." on <html>:

     - "house"   → Guinco Nautilus: deep navy #051c2c + brass gold #c2a25a,
                   serif display headings, brass hairline detailing.
                   THE DEFAULT for anonymous visitors and all users who
                   haven't opted out. Spec: .claude/skills/guinco-theme.
     - "classic" → the original Penguin orange (#fcb040). Zero rules here
                   target it — an unset/other attribute falls through to
                   the untouched base styles (kill switch by design).

   Every Nautilus rule below is gated under [data-palette="house"] so the
   palette is purely additive. data-theme on <html> stays reserved for the
   Nexus Portal Theme Protocol (nexus-embed.js strips data-palette when
   embedded so the two systems never fight).

   Legibility rules (guinco-theme hard rule #1):
     --nx-gold        #c2a25a  fills, rules, borders, large decorative icons
     --nx-gold-strong #9c7c33  gold TEXT on light backgrounds (contrast-safe)
     --nx-gold-bright #cdb074  gold text/accents on navy (dark surfaces)
*/

/* ------------------------------------------------
   1. Theme picker control (both palettes)
   ------------------------------------------------ */
.user-dropdown__theme-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #6b7280;
    margin: 2px 0 6px;
}

.theme-options {
    display: flex;
    gap: 8px;
}

.theme-option {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #1e1e1e;
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-option:hover {
    border-color: #9ca3af;
}

.theme-option[aria-pressed="true"] {
    border-color: #1e1e1e;
    box-shadow: inset 0 0 0 1px #1e1e1e;
    font-weight: 600;
}

[data-palette="house"] .theme-option[aria-pressed="true"] {
    border-color: #c2a25a;
    box-shadow: inset 0 0 0 1px #c2a25a;
}

.theme-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.theme-swatch--nautilus {
    background: linear-gradient(135deg, #051c2c 50%, #c2a25a 50%);
}

.theme-swatch--classic {
    background: linear-gradient(135deg, #1e1e1e 50%, #fcb040 50%);
}

/* Admin dropdown hosts the same picker inside .user-dropdown-menu */
.user-dropdown-menu .user-dropdown__theme {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}

/* ------------------------------------------------
   2. Nautilus tokens
   ------------------------------------------------ */
[data-palette="house"] {
    --nx-navy: #051c2c;
    --nx-navy-2: #0a2c45;
    --nx-gold: #c2a25a;
    --nx-gold-strong: #9c7c33;
    --nx-gold-bright: #cdb074;
    --nx-gold-soft: rgba(194, 162, 90, 0.4);
    --nx-gold-faint: rgba(194, 162, 90, 0.12);
    --nx-cream: #faf8f3;
    --nx-on-accent: #051c2c;
}

/* ------------------------------------------------
   3. Signature detailing (serif display, brass rules)
   ------------------------------------------------ */
[data-palette="house"] h1,
[data-palette="house"] h2 {
    font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
    letter-spacing: -0.005em;
}

[data-palette="house"] main h2 {
    border-bottom: 1.5px solid var(--nx-gold-soft);
    padding-bottom: 0.28em;
}

/* Masthead brass rail (inset shadow = no layout shift) */
[data-palette="house"] .site-header {
    box-shadow: inset 0 -2px 0 var(--nx-gold-soft), 0 2px 10px rgba(0, 0, 0, 0.1);
}

[data-palette="house"] :focus-visible {
    outline-color: var(--nx-gold);
}

/* Tracked uppercase micro-labels */
[data-palette="house"] .footer-copyright,
[data-palette="house"] .footer-menu a,
[data-palette="house"] .read-more {
    letter-spacing: 0.13em;
}

/* ------------------------------------------------
   4. Public site (styles.css overrides)
   ------------------------------------------------ */
[data-palette="house"] a:hover {
    color: var(--nx-gold-strong);
}

[data-palette="house"] .nav-menu a:hover,
[data-palette="house"] .nav-menu a.active,
[data-palette="house"] .search-toggle:hover,
[data-palette="house"] .footer-menu a:hover,
[data-palette="house"] .breadcrumbs a:hover,
[data-palette="house"] .mobile-nav a:hover,
[data-palette="house"] .blog-card h3 a:hover,
[data-palette="house"] .category-card:hover h3 a,
[data-palette="house"] .sidebar-widget a:hover,
[data-palette="house"] .read-more,
[data-palette="house"] .hub-view-all,
[data-palette="house"] .hub-edit-favorites,
[data-palette="house"] .hub-ticket-number,
[data-palette="house"] .hub-article-item a:hover,
[data-palette="house"] .hub-section-header h2 i,
[data-palette="house"] .hub-fav-item i:first-child {
    color: var(--nx-gold-strong);
}

[data-palette="house"] .header-search input:focus,
[data-palette="house"] .form-group input:focus,
[data-palette="house"] .form-group textarea:focus,
[data-palette="house"] .form-group select:focus,
[data-palette="house"] .support-form input:focus,
[data-palette="house"] .support-form textarea:focus,
[data-palette="house"] .support-form select:focus,
[data-palette="house"] .file-upload:hover {
    border-color: var(--nx-gold);
}

[data-palette="house"] .hero-divider,
[data-palette="house"] .upload-progress-fill {
    background: var(--nx-gold);
}

[data-palette="house"] .btn {
    background-color: var(--nx-navy);
}

[data-palette="house"] .btn:hover {
    background-color: var(--nx-gold);
    color: var(--nx-on-accent);
}

[data-palette="house"] .announcements-title {
    color: var(--nx-navy);
}

[data-palette="house"] .announcement-content,
[data-palette="house"] .about-content blockquote {
    border-left-color: var(--nx-gold);
}

/* Engraved card edge (guinco-theme signature) */
[data-palette="house"] .category-card,
[data-palette="house"] .blog-card,
[data-palette="house"] .hub-cat-card {
    border-left: 2px solid var(--nx-gold-soft);
}

/* Keep the hub category cards reading as tappable under the house palette:
   gold-tinted "open" chevron at rest, brass border + chevron on hover. */
[data-palette="house"] .hub-cat-card::after {
    color: rgba(5, 28, 44, 0.32);
}

[data-palette="house"] .hub-cat-card:hover {
    border-color: var(--nx-gold);
}

[data-palette="house"] .hub-cat-card:hover::after {
    color: var(--nx-gold);
}

[data-palette="house"] .category-card:hover .category-icon {
    background: var(--nx-navy);
}

[data-palette="house"] .sidebar-widget h4 {
    border-bottom-color: var(--nx-gold-soft);
}

/* Avatar chip: navy with cream initials, brass ring when open */
[data-palette="house"] .user-menu .user-avatar {
    background: var(--nx-navy);
    color: var(--nx-cream);
}

[data-palette="house"] .user-menu .user-avatar:hover,
[data-palette="house"] .user-menu[data-open="true"] .user-avatar {
    border-color: var(--nx-gold);
}

/* Hub dashboard */
[data-palette="house"] .hub-hero {
    background: linear-gradient(135deg, var(--nx-navy) 0%, var(--nx-navy-2) 100%);
    box-shadow: inset 0 -2px 0 var(--nx-gold-soft);
}

[data-palette="house"] .hub-hero h1 {
    color: var(--nx-gold-bright);
}

[data-palette="house"] .hub-cat-card > i:first-child,
[data-palette="house"] .pull-to-refresh i {
    color: var(--nx-gold);
}

[data-palette="house"] .fav-toggle:hover,
[data-palette="house"] .fav-toggle.is-fav {
    color: var(--nx-gold);
}

[data-palette="house"] .hub-cta-card {
    background: linear-gradient(135deg, var(--nx-navy), var(--nx-navy-2));
    box-shadow: 0 4px 16px rgba(5, 28, 44, 0.3), inset 0 0 0 1px var(--nx-gold-soft);
}

[data-palette="house"] .hub-cta-card:hover {
    box-shadow: 0 6px 24px rgba(5, 28, 44, 0.4), inset 0 0 0 1px var(--nx-gold);
}

/* Mobile chrome */
[data-palette="house"] .bottom-tab-bar .tab-item.active,
[data-palette="house"] .bottom-tab-bar .tab-item:active {
    color: var(--nx-navy);
}

[data-palette="house"] .action-drawer-trigger {
    background: var(--nx-navy);
    /* The base "+" icon color is near-black; on the navy house background it
       vanished, leaving an indistinct black dot. Use bright gold so the "+"
       (and the ×-rotate on open) is clearly visible = obviously a button. */
    color: var(--nx-gold-bright);
}

[data-palette="house"] .action-drawer-item:hover {
    background: var(--nx-gold);
    color: var(--nx-on-accent);
}

[data-palette="house"] .scroll-top:hover {
    background: var(--nx-gold);
    color: var(--nx-on-accent);
}

/* Notification bell "Mark all read" (color moved out of inline style) */
[data-palette="house"] .notif-header a[data-action="mark-all"] {
    color: var(--nx-gold-strong);
}

/* ------------------------------------------------
   5. Back Office (admin.css overrides)
   ------------------------------------------------ */
[data-palette="house"] .admin-sidebar {
    background: var(--nx-navy);
}

[data-palette="house"] .sidebar-collapse-toggle:hover,
[data-palette="house"] .sidebar-collapse-toggle:focus {
    background: var(--nx-gold-faint);
    color: var(--nx-gold-bright);
}

[data-palette="house"] .sidebar-nav a:hover,
[data-palette="house"] .sidebar-nav a.active {
    background: var(--nx-gold-faint);
    color: var(--nx-gold-bright);
}

[data-palette="house"] .sidebar-nav a.active {
    box-shadow: inset 2px 0 0 var(--nx-gold);
}

[data-palette="house"] .sidebar-footer a:hover {
    color: var(--nx-gold-bright);
}

[data-palette="house"] .admin-topbar {
    box-shadow: inset 0 -2px 0 var(--nx-gold-soft), 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-palette="house"] .user-dropdown .user-avatar,
[data-palette="house"] .user-avatar-sm {
    background: var(--nx-navy);
    color: var(--nx-cream);
}

[data-palette="house"] .back-link:hover,
[data-palette="house"] .stat-link:hover,
[data-palette="house"] .data-table a:hover {
    color: var(--nx-gold-strong);
}

[data-palette="house"] .stat-orange .stat-icon {
    background: var(--nx-navy);
}

[data-palette="house"] .badge-status-open {
    background: var(--nx-navy);
}

[data-palette="house"] .badge-featured {
    background: var(--nx-gold-strong);
}

[data-palette="house"] .admin-main .btn,
[data-palette="house"] .admin-content .btn {
    background: var(--nx-navy);
}

[data-palette="house"] .action-card i,
[data-palette="house"] .history-icon,
[data-palette="house"] .category-item i,
[data-palette="house"] .admin-pull-to-refresh i {
    color: var(--nx-gold);
}

/* Table action buttons (view/edit eye icons). admin.css's `.data-table a`
   (#1e1e1e) outranks `.btn`'s white text — dark-on-orange was readable in
   Classic, but on the house navy button the glyph disappeared. Force the
   cream glyph, and flip to navy-on-gold on hover (these selectors outrank
   both `.data-table a:hover` and the generic house .btn:hover). */
[data-palette="house"] .data-table a.btn,
[data-palette="house"] .data-table .btn {
    color: var(--nx-cream);
}

[data-palette="house"] .data-table a.btn:hover,
[data-palette="house"] .data-table .btn:hover {
    background: var(--nx-gold);
    color: var(--nx-on-accent);
}

[data-palette="house"] .pagination-btn:hover:not(.disabled):not(.active) {
    border-color: var(--nx-gold);
    color: var(--nx-gold-strong);
}

[data-palette="house"] .pagination-btn.active {
    background: var(--nx-navy);
    border-color: var(--nx-navy);
}

/* [UPDATED 2026-06-15] The admin bottom tab bar background is near-black
   (#1e1e1e), so a navy active item blended into the bar — the selected tab
   looked unreadable. Use gold for the active item (matches the base admin.css
   intent) so the current tab clearly stands out on the dark bar. */
[data-palette="house"] .admin-tab-item.active,
[data-palette="house"] .admin-tab-item:active {
    color: var(--nx-gold);
}

[data-palette="house"] .skip-link:focus {
    outline-color: var(--nx-gold);
}