/* c:\q\css\quote-actions.css */

/* --- Favorites Grid Styles --- */
.favorites-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.qc-fav-card {
    background-color: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-card, 8px);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
    color: rgb(var(--color-text));
}

.qc-fav-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.qc-fav-text {
    font-family: var(--font-serif, serif);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.qc-fav-meta {
    margin-bottom: 1.5rem;
}

.qc-fav-author {
    font-weight: bold;
    display: block;
    margin-bottom: 0.25rem;
}

.qc-fav-source {
    font-size: 0.875rem;
    color: rgb(var(--color-muted));
    display: block;
}

.qc-fav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgb(var(--color-border));
    padding-top: 1rem;
}

.qc-fav-date {
    font-size: 0.75rem;
    color: rgb(var(--color-muted));
}

.qc-fav-remove-btn {
    background-color: transparent;
    color: rgb(var(--color-brand));
    border: 1px solid rgb(var(--color-brand));
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-btn, 9999px);
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.qc-fav-remove-btn:hover {
    background-color: rgb(var(--color-brand));
    color: rgb(var(--color-bg));
}

/* --- Quote Actions Styles --- */
.qc-quote-actions-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.qc-action-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    color: rgb(var(--color-muted));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.qc-action-btn:hover {
    background-color: rgba(var(--color-brand), 0.1);
    color: rgb(var(--color-brand));
}

.qc-action-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.qc-btn-source-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-muted));
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

.qc-btn-source-toggle:hover {
    color: rgb(var(--color-brand));
}

.qc-btn-source-toggle svg {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.3s;
}

.qc-btn-source-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.qc-share-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.5rem;
    background-color: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-card, 8px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    z-index: 50;
    display: none;
    flex-direction: column;
    padding: 0.5rem;
}

.qc-share-dropdown.show {
    display: flex;
}

.qc-share-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    color: rgb(var(--color-text));
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.qc-share-item:hover {
    background-color: rgba(var(--color-brand), 0.1);
}

.qc-share-item svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.qc-source-content {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--color-border));
    font-size: 0.875rem;
    color: rgb(var(--color-muted));
    display: none;
}

.qc-source-content.show {
    display: block;
}

.qc-divider {
    width: 1px;
    height: 1rem;
    background-color: rgb(var(--color-border));
    margin: 0 0.25rem;
}


/* ==========================================================================
   QUOTESCOSMOS EDITORIAL DESIGN SYSTEM (ROLLING STONE / ARCHIVAL PRINT)
   Warm Paper-White (#FAF9F6), Stark Ink Black (#0D0D0D), Editorial Crimson (#D91424)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@8..144,400..800&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..600&display=swap');

:root,
html,
html[data-theme="default"],
html[data-theme="light"],
html[data-theme="dark"]:not(.user-forced-dark) {
  --color-bg: 250 249 246 !important;
  --color-surface: 255 255 255 !important;
  --color-text: 13 13 13 !important;
  --color-muted: 82 81 78 !important;
  --color-brand: 217 20 36 !important;
  --color-accent: 13 13 13 !important;
  --color-border: 226 223 217 !important;

  --bg: #FAF9F6 !important;
  --surface: #FFFFFF !important;
  --surface-2: #F3F1EC !important;
  --text: #0D0D0D !important;
  --muted: #52514E !important;
  --brand: #D91424 !important;
  --accent: #0D0D0D !important;
  --border: #E2DFD9 !important;

  --qc-bg: #FAF9F6 !important;
  --qc-surface: #FFFFFF !important;
  --qc-surface-2: #F3F1EC !important;
  --qc-surface-hover: #F3F1EC !important;
  --qc-text: #0D0D0D !important;
  --qc-text-muted: #52514E !important;
  --qc-muted: #52514E !important;
  --qc-border: #E2DFD9 !important;
  --qc-violet: #D91424 !important;
  --qc-pink: #0D0D0D !important;
  --qc-amber: #D91424 !important;
  --qc-primary: #D91424 !important;
  --qc-accent: #0D0D0D !important;

  --font-sans: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --font-display: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif !important;
}

html[data-theme="obsidian"],
html.user-forced-dark {
  --color-bg: 10 10 10 !important;
  --color-surface: 18 18 18 !important;
  --color-text: 245 245 240 !important;
  --color-muted: 163 161 154 !important;
  --color-brand: 230 25 43 !important;
  --color-accent: 245 245 240 !important;
  --color-border: 38 38 38 !important;

  --bg: #0A0A0A !important;
  --surface: #121212 !important;
  --surface-2: #1A1A1A !important;
  --text: #F5F5F0 !important;
  --muted: #A3A19A !important;
  --brand: #E6192B !important;
  --accent: #F5F5F0 !important;
  --border: #262626 !important;

  --qc-bg: #0A0A0A !important;
  --qc-surface: #121212 !important;
  --qc-surface-2: #1A1A1A !important;
  --qc-surface-hover: #1E1E1E !important;
  --qc-text: #F5F5F0 !important;
  --qc-text-muted: #A3A19A !important;
  --qc-muted: #A3A19A !important;
  --qc-border: #262626 !important;
  --qc-violet: #E6192B !important;
  --qc-pink: #F5F5F0 !important;
  --qc-amber: #E6192B !important;
}

body {
  background-color: var(--bg, #FAF9F6) !important;
  color: var(--text, #0D0D0D) !important;
  font-family: var(--font-sans) !important;
  border-top: 3px solid #D91424 !important;
  background-image: none !important;
}

/* Wordmark lockup: Google Sans Flex 700+ so capital Q has distinctive geometric tail */
.brand-name,
.qc-logo-text,
header a[aria-label*="Home"] span,
header .font-display,
.site-logo,
.logo-text,
.navbar-brand {
  font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  font-variation-settings: 'wght' 700, 'opsz' 32 !important;
  letter-spacing: -0.03em !important;
  color: var(--text, #0D0D0D) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.brand-name::after,
.qc-logo-text::after {
  content: "." !important;
  color: #D91424 !important;
  font-weight: 800 !important;
}

/* Hide legacy cartoon/neon logo icons */
header a[aria-label*="Home"] img,
.brand-logo-icon,
.qc-logo-icon {
  display: none !important;
}

/* Editorial Quote Typography */
blockquote,
.quote-text,
.qotd-text,
.verse-text,
.sacred-verse-text {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif !important;
  color: var(--text, #0D0D0D) !important;
}

/* Editorial Print Cards & Containers */
.quote-card,
.hub-card,
.person-card,
.topic-card,
.verse-card,
.chapter-card,
.worldview-card,
.bento-card {
  background: var(--surface, #FFFFFF) !important;
  border: 1px solid var(--border, #E2DFD9) !important;
  border-top: 2px solid var(--text, #0D0D0D) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease !important;
}

.quote-card:hover,
.hub-card:hover,
.person-card:hover,
.topic-card:hover,
.verse-card:hover,
.chapter-card:hover,
.worldview-card:hover,
.bento-card:hover {
  border-top-color: #D91424 !important;
}

/* Eliminate AI-slop neon gradients and glows */
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-b {
  background-image: none !important;
}