/* =================================================================
   Redknopka Game Hub — hub.css  v2.1
   Loaded after Soledad's stylesheet (declared as dependency).
   Uses #rk-hub scoping for specificity. !important only where
   Soledad targets input/a elements directly and wins otherwise.
================================================================= */

#rk-hub {
    --bg:        #faf7f2;
    --surface:   #ffffff;
    --border:    #e8e2d9;
    --text:      #2a2520;
    --muted:     #7a7068;
    --accent:    #8c6a3f;
    --accent-bg: #f5ede0;
    --radius:    10px;
    --serif:     'DM Serif Display', Georgia, serif;
    --sans:      'DM Sans', system-ui, sans-serif;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    padding: 2rem 0 4rem;
    box-sizing: border-box;
}

#rk-hub *,
#rk-hub *::before,
#rk-hub *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ---- Content container ---- */
#rk-hub .rk-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ---- Search ---- */
#rk-hub .rk-search-wrap {
    position: relative;
    max-width: 420px;
    margin-bottom: 3rem;
}

#rk-hub .rk-search-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--muted);
    fill: none;
    pointer-events: none;
    z-index: 1;
}

/* Soledad aggressively styles inputs — needs !important here */
#rk-hub .rk-search {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px 12px 46px !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
}

#rk-hub .rk-search::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
}

#rk-hub .rk-search:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(140, 106, 63, 0.12) !important;
    outline: none !important;
}

/* ---- No results ---- */
#rk-hub .rk-no-games {
    font-size: 15px;
    color: var(--muted);
    padding: 2rem 0;
    display: none;
}

/* ---- Game block ---- */
#rk-hub .rk-game {
    margin-bottom: 4rem;
}

#rk-hub .rk-game[data-hidden="true"] {
    display: none;
}

/* ---- Game header ---- */
#rk-hub .rk-game-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1.5px solid var(--border);
}

#rk-hub .rk-game-thumb {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
    display: block;
}

#rk-hub .rk-game-thumb-placeholder {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 26px;
}

#rk-hub .rk-game-meta {
    flex: 1;
    min-width: 0;
}

#rk-hub .rk-game-title {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 4px;
    display: block;
}

#rk-hub .rk-game-subtitle {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 0;
    display: block;
}

/* ---- Resource pill links — Soledad overrides a{} heavily ---- */
#rk-hub .rk-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

#rk-hub .rk-links .rk-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    background: var(--surface) !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: border-color .15s, color .15s, background .15s;
    box-shadow: none !important;
}

#rk-hub .rk-links .rk-link:hover,
#rk-hub .rk-links .rk-link:focus {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-bg) !important;
    text-decoration: none !important;
}

#rk-hub .rk-links .rk-link svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
}

/* ---- Tool tabs ---- */
#rk-hub .rk-tools-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}

#rk-hub .rk-tool-tab {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 20px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    line-height: 1.4;
}

#rk-hub .rk-tool-tab:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg);
}

#rk-hub .rk-tool-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---- Tool panels ---- */
#rk-hub .rk-tool-panel {
    display: none;
}

#rk-hub .rk-tool-panel.active {
    display: block;
}

#rk-hub .rk-tool-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 1.5rem;
    padding: 14px 18px;
    background: var(--accent-bg);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
}

#rk-hub .rk-tool-embed {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
}

#rk-hub .rk-no-tools {
    font-size: 15px;
    color: var(--muted);
}

/* ================================================================
   Responsive — tablet
================================================================ */
@media (max-width: 680px) {
    #rk-hub { font-size: 15px; }
    #rk-hub .rk-wrap { padding: 0 1.25rem; }
    #rk-hub .rk-game-title { font-size: 22px; }
    #rk-hub .rk-tool-embed { padding: 1.25rem; }
    #rk-hub .rk-search-wrap { max-width: 100%; }
}

/* ================================================================
   Responsive — mobile
================================================================ */
@media (max-width: 480px) {
    #rk-hub { padding: 1.25rem 0 3rem; }
    #rk-hub .rk-wrap { padding: 0 1rem; }
    #rk-hub .rk-game-header { gap: 1rem; }
    #rk-hub .rk-game-thumb,
    #rk-hub .rk-game-thumb-placeholder { width: 52px; height: 52px; font-size: 20px; border-radius: 6px; }
    #rk-hub .rk-game-title { font-size: 20px; }
    #rk-hub .rk-game-subtitle { font-size: 12px; }
    #rk-hub .rk-links .rk-link { font-size: 12px !important; padding: 4px 10px !important; }
    #rk-hub .rk-tool-tab { font-size: 13px; padding: 7px 14px; }
    #rk-hub .rk-tool-embed { padding: 1rem; }
    #rk-hub .rk-tool-description { font-size: 13px; }

    /* Recipe finder inner responsive */
    #ct-finder .ct-panels { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    #ct-finder .ct-divider { display: none !important; }
    #ct-finder .ct-panel { padding: 0 !important; }
    #ct-finder .ct-panel:first-child { padding-bottom: 1.5rem !important; border-bottom: 1px solid #e0e0e0 !important; }
    #ct-finder .ct-grid { grid-template-columns: 1fr !important; }
}