/* ============================================================================
   AiAY shared components - web mirror of the mobile app's
   components/AiAYButton.tsx and components/AiAYTopicCard.tsx.

   Button / Primary|Secondary (EN + AR)   342x50, radius 16, 15px bold label
   Card / Topic / Default|Selected        165x113, radius 17, name from y=65

   Colours are CSS variables. The defaults below are the brand reference
   values; a chosen mood replaces them (api/themes.py mood_css_vars ->
   partials/mood_theme.html), the same way the app derives them from its
   theme tokens. Loaded on every page by partials/mood_theme.html.
   ============================================================================ */

/* Tajawal Bold - Arabic button labels. (c) 2017 Boutros International,
   SIL Open Font License 1.1. Declared here so every page that has the
   components has the font too. */
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/Tajawal-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --aiay-button-primary: #53321D;
    --aiay-on-button-primary: #FFFFFF;
    --aiay-button-secondary: #F4E8D4;
    --aiay-on-button-secondary: #53321D;
    --aiay-topic-card: #FFFFFF;
    --aiay-topic-card-selected: #FBE8DB;
    --aiay-on-topic-card: #53321D;
    --aiay-focus-ring: rgba(83, 50, 29, 0.35);
}

/* ---------------------------------------------------------------- Button */
.aiay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 342px;
    max-width: 100%;
    height: 50px;
    padding: 0 10px;
    border: 0;
    border-radius: 16px;
    font-family: var(--app-font, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms cubic-bezier(.2, .8, .2, 1), filter 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.aiay-btn--block { width: 100%; }

/* Arabic labels: Tajawal (line-height 18), on RTL pages or lang="ar" buttons */
html[dir='rtl'] .aiay-btn,
.aiay-btn:lang(ar) {
    font-family: var(--app-font-ar, 'Tajawal', sans-serif);
    line-height: 18px;
}

.aiay-btn--primary,
.aiay-btn--primary:visited {
    background: var(--aiay-button-primary);
    color: var(--aiay-on-button-primary);
}

.aiay-btn--secondary,
.aiay-btn--secondary:visited {
    background: var(--aiay-button-secondary);
    color: var(--aiay-on-button-secondary);
}

.aiay-btn:hover { filter: brightness(1.06); }
.aiay-btn--primary:hover { color: var(--aiay-on-button-primary); }
.aiay-btn--secondary:hover { color: var(--aiay-on-button-secondary); filter: brightness(0.98); }
.aiay-btn:active { transform: scale(0.97); }
.aiay-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--aiay-focus-ring); }

.aiay-btn:disabled,
.aiay-btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* Loading: keeps the width, hides the label behind a spinner */
.aiay-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.aiay-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-color: var(--aiay-on-button-primary) transparent var(--aiay-on-button-primary) transparent;
    animation: aiay-spin 0.8s linear infinite;
}
.aiay-btn--secondary.is-loading::after {
    border-color: var(--aiay-on-button-secondary) transparent var(--aiay-on-button-secondary) transparent;
}

/* ------------------------------------------------------------ Topic card */
.aiay-topic-card {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 165px;
    max-width: 100%;
    height: 113px;
    padding: 0;
    border: 0;
    border-radius: 17px;
    background: var(--aiay-topic-card);
    color: var(--aiay-on-topic-card);
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 220ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
}

.aiay-topic-card--block { width: 100%; }

.aiay-topic-card.is-selected,
.aiay-topic-card[aria-pressed='true'],
.aiay-topic-card[aria-checked='true'] {
    background: var(--aiay-topic-card-selected);
    animation: aiay-pop 260ms cubic-bezier(.2, .8, .2, 1);
}

.aiay-topic-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.aiay-topic-card:active { transform: scale(0.97); }
.aiay-topic-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--aiay-focus-ring); }

/* Optional icon, centred in the upper area */
.aiay-topic-card__icon {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--aiay-on-topic-card);
}

/* Topic name: 147px box at (9, 65) */
.aiay-topic-card__name {
    position: absolute;
    top: 65px;
    left: 9px;
    right: 9px;
    min-height: 28px;
    font-family: var(--app-font, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: var(--aiay-on-topic-card);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

html[dir='rtl'] .aiay-topic-card__name { font-family: var(--app-font-ar, 'Tajawal', sans-serif); line-height: 22px; }

.aiay-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 165px));
    gap: 12px;
}

@keyframes aiay-spin { to { transform: rotate(360deg); } }
@keyframes aiay-pop {
    0% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .aiay-btn,
    .aiay-topic-card { transition: none; }
    .aiay-btn:active,
    .aiay-topic-card:active { transform: none; }
    .aiay-topic-card.is-selected,
    .aiay-topic-card[aria-pressed='true'],
    .aiay-topic-card[aria-checked='true'] { animation: none; }
}