/* faz_tile_nav.css
 * Every size/spacing value used to be hardcoded inline inside the QWeb
 * loop — meaning "make the label bigger" meant editing the template and
 * redeploying. Pulled out into CSS custom properties here instead: any
 * future size/color tweak is a one-line edit to this file, no template
 * change, no module upgrade needed (static assets serve fresh from
 * disk immediately).
 *
 * Loaded site-wide via the same website.layout inheritance that loads
 * tile_nav_breadcrumb.js (see views/portal/website_layout_inherit.xml)
 * — needed everywhere, not just on tile-grid pages, since the circular
 * back button can appear on any destination page.
 */

:root {
    /* Tile grid — bumped up from the original 0.85rem/0.75rem/2rem
       defaults as a visible confirmation these variables are genuinely
       live (the first deploy correctly kept the OLD values unchanged,
       which is why nothing looked different — that was the refactor
       working correctly, not failing). Adjust these three freely from
       here on; no template or module change needed, ever, for a size
       tweak again. */
    --faz-tile-title-size: 1rem;
    --faz-tile-title-ar-size: 0.9rem;
    --faz-tile-icon-size: 2.4rem;
    --faz-tile-min-height: 120px;
    --faz-tile-radius: 12px;
    --faz-tile-title-color: #FFFFFF;
    --faz-tile-title-ar-color: #E8E4D8;

    /* Circular back button */
    --faz-back-btn-size: 52px;
    --faz-back-btn-icon-size: 1.3rem;
    --faz-back-btn-bg: #161A17;
    --faz-back-btn-color: #C9A227;
}

/* ---- Tile grid (Home + every drill-down level) ---------------------- */

.faz-tile-card {
    text-decoration: none;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    border-radius: var(--faz-tile-radius);
    min-height: var(--faz-tile-min-height);
}

.faz-tile-icon {
    font-size: var(--faz-tile-icon-size);
    color: var(--faz-tile-title-color);
}

.faz-tile-title {
    color: var(--faz-tile-title-color);
    font-size: var(--faz-tile-title-size);
    font-weight: bold;
    margin-top: 8px;
}

.faz-tile-title-ar {
    color: var(--faz-tile-title-ar-color);
    font-size: var(--faz-tile-title-ar-size);
    margin-top: 2px;
}

/* ---- Circular "back to menu" button (replaces the old full-width bar) */

.faz-back-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: var(--faz-back-btn-size);
    height: var(--faz-back-btn-size);
    border-radius: 50%;
    background: var(--faz-back-btn-bg);
    color: var(--faz-back-btn-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    z-index: 1050;
    text-decoration: none;
    font-size: var(--faz-back-btn-icon-size);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.faz-back-btn:hover {
    transform: scale(1.08);
    color: var(--faz-back-btn-color);
}

.faz-back-btn-dismiss {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #8A9691;
    color: #111111;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}