/* Rules shared by several pages, identical everywhere they appear.
   Loaded on every page by layouts/master.blade.php, before the page styles. */

.sorting-options .btn.active {
    background-color: var(--bs-secondary);
    color: white;
    border-color: var(--bs-secondary);
}

.heart-beat {
    animation: heartBeat 0.8s ease;
}

/* Decorative quote marks (.quote-icon): colour + opacity .25 set on the <i> in the views
   (quote: its category colour; proverb: brand blue). A hovered card brings it up a little. */
.quote-icon i {
    transition: opacity 0.3s ease;
}

.card:hover .quote-icon i {
    opacity: 0.4 !important;
}

/* Brand colour helpers for decorative icons, badges and buttons.
   The theme's primary (--bs-primary) is #0d6efd, not the brand blue, hence these. */
.text-brand { color: #1066E7 !important; }
.text-brand-light { color: #4D91FF !important; }
.text-brand-dark { color: #0D1B2E !important; }
.bg-brand { background-color: #1066E7 !important; color: #fff !important; }
.bg-soft-brand { background-color: rgba(16, 102, 231, .1) !important; }
.bg-soft-brand-light { background-color: rgba(77, 145, 255, .12) !important; }

.btn-brand,
.btn-outline-brand:hover,
.btn-outline-brand:focus,
.btn-outline-brand.active {
    color: #fff !important;
    background-color: #1066E7 !important;
    border-color: #1066E7 !important;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: #0D1B2E !important;
    border-color: #0D1B2E !important;
}

.btn-outline-brand {
    color: #1066E7 !important;
    background-color: transparent;
    border-color: #1066E7 !important;
}

/* Sidebar lists of quotes/proverbs (resources/views/components/sidebar-item.blade.php).
   --item-color is the category colour, or the brand blue. */
.sidebar-item {
    border-radius: .5rem;
    transition: background-color .2s ease;
}

.sidebar-item:hover,
.sidebar-item:focus {
    background-color: rgba(16, 102, 231, .04);
}

.sidebar-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--item-color, #1066E7);
}

/* Soft circle in the item colour, under the mark */
.sidebar-item__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: currentColor;
    opacity: .1;
}

.sidebar-item__text {
    color: #3c4858;
    font-size: .9rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The whole item is the link: on hover the text turns blue (no arrow) */
.sidebar-item__text {
    transition: color .2s ease;
}

.sidebar-item:hover .sidebar-item__text,
.sidebar-item:focus .sidebar-item__text {
    color: #1066E7;
}

/* Quote/proverb cards: «أشهر الأمثال…», «أمثال مختارة…», «المزيد من أقوال…»
   (resources/views/components/proverb-tile.blade.php, quote-tile.blade.php).
   --tile-color is the category colour, or the brand blue. */
.content-tile {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.content-tile:hover,
.content-tile:focus-within {
    border-color: rgba(16, 102, 231, .45) !important;
    box-shadow: 0 6px 18px rgba(16, 102, 231, .08);
    transform: translateY(-2px);
}

.content-tile__icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tile-color, #1066E7);
    font-size: 1.25rem;
}

/* Soft circle in the tile colour, under the mark */
.content-tile__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: currentColor;
    opacity: .1;
}

.content-tile__text {
    font-weight: 600;
    line-height: 1.7;
}

.content-tile:hover .content-tile__text a {
    color: #1066E7 !important;
}

/* Above the card's stretched link, so they open their own page */
.content-tile__link {
    position: relative;
    z-index: 2;
    color: #1066E7;
    text-decoration: none;
}

.content-tile__link:hover {
    text-decoration: underline;
}

/* Call-to-action card in the brand blues (resources/views/components/brand-cta.blade.php) */
.brand-cta {
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, #0D1B2E 0%, #1066E7 100%);
    color: #fff;
}

.brand-cta__title {
    color: #fff;
    font-weight: 700;
}

.brand-cta__text {
    color: rgba(255, 255, 255, .78);
    max-width: 560px;
    margin-inline: auto;
}

.brand-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.brand-cta__btn--main {
    color: #1066E7 !important;
    font-weight: 600;
}

.brand-cta__btn--main:hover,
.brand-cta__btn--main:focus {
    background-color: #EAF2FE;
    border-color: #EAF2FE;
}

/* The theme forces dark text on outline-light (style-rtl.css: .btn.btn-outline-light { color: #3c4858 !important }):
   unreadable on blue, so it is overridden inside this card only */
.brand-cta .btn.btn-outline-light {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .6) !important;
    background-color: transparent;
}

.brand-cta .btn.btn-outline-light:hover,
.brand-cta .btn.btn-outline-light:focus {
    color: #1066E7 !important;
    background-color: #fff;
    border-color: #fff !important;
}

/* Smaller variant for a sidebar */
.brand-cta--compact {
    padding: 2rem 1.25rem;
}

.brand-cta--compact .brand-cta__title {
    font-size: 1.25rem;
}

.brand-cta--compact .brand-cta__text {
    font-size: .9rem;
    line-height: 1.8;
}

/* Phones: stacked, full-width buttons */
@media (max-width: 575.98px) {
    .brand-cta {
        padding: 2.25rem 1.25rem;
    }

    .brand-cta__actions {
        flex-direction: column;
    }

    .brand-cta__btn {
        width: 100%;
    }
}