/*
 * Site-level overrides for the Turulav theme.
 * Loaded after theme/css/style.css so these rules win on equal specificity.
 *
 * Brand palette
 *   Primary purple : #210053  (button bg, accents)
 *   Body purple    : #391965  (page background — set by theme)
 *   Brand pink     : #df314d  (hover, focus, links)
 *   Soft pink      : #ff8a9a  (link colour on dark)
 *   White-on-dark  : rgba(255,255,255,.85) for body text
 */

/* --------------------------------------------------------------------------
 * Header
 * --------------------------------------------------------------------------
 * The theme sets .header-section to position:absolute, which means it sits on
 * top of the page content. Theme pages compensate with a hard-coded
 * padding-top: 200px on the banner / page-header. Any page that doesn't use
 * those wrappers has its content hidden behind the header.
 *
 * Put the header back into normal document flow so it always reserves its
 * own height. The .header-fixed class (added by functions.js after a 300px
 * scroll) keeps its own position:fixed rule, so sticky behaviour is intact.
 */
.header-section {
    position: relative;
}

/* The theme styles `.login` as a white pill (paired with the pink `.signup`
 * pill — designed for the original LOG IN / SIGN UP layout). When we reuse
 * `.login` for icon-only header actions (messages, notifications, photos) the
 * white pill is taller than the icofont glyph, so the icon floats in the
 * middle and white slivers show above and below it. Restyle these as flat
 * icon buttons that sit on the header background instead.
 *
 * The text-only LOG IN button (unauthenticated state) gets the same flat
 * treatment for visual consistency with the menu items. */
.header-wrapper .menu-area .login {
    background-color: transparent;
    color: #fff;
    border-radius: 0;
    padding: 10px 12px;
    line-height: 1;
    position: relative;
    transition: color 0.2s ease;
}

.header-wrapper .menu-area .login:hover,
.header-wrapper .menu-area .login:focus {
    background-color: transparent;
    color: #df314d;
}

.header-wrapper .menu-area .login > i {
    font-size: 1.25rem;
    vertical-align: middle;
}

.header-wrapper .menu-area .login .badge {
    position: absolute;
    top: 2px;
    right: -2px;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
    line-height: 1;
}

/* The 200/270px padding existed only to clear the absolute header.
 * With the header in normal flow that becomes a huge empty gap. */
.banner-section {
    padding-top: 60px;
}
@media (min-width: 576px) {
    .banner-section {
        padding-top: 80px;
    }
}

.page-header-section.style-1 {
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (min-width: 992px) {
    .page-header-section.style-1 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* --------------------------------------------------------------------------
 * Form controls (site-wide dark theme)
 * --------------------------------------------------------------------------
 * Bootstrap defaults .form-control to a white background, but the theme sets
 * input text colour to white — so out of the box every input on the site
 * renders white text on white. Re-theme inputs/selects/textareas for the
 * dark purple palette so they're readable everywhere.
 */
.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    height: auto;
    padding: 10px 14px;
    border-radius: 6px;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #df314d;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(223, 49, 77, 0.25);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.6);
}

select.form-control,
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
                      linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

select.form-control option,
.form-select option {
    background: #21054f;
    color: #fff;
}

textarea.form-control {
    min-height: 100px;
}

label,
.form-label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    margin-bottom: 6px;
}

/* Bootstrap 5 dropped .form-group / .form-row — every template still uses
 * them, so without this every field collapses against the next. Restore a
 * sensible bottom margin and put the row-children back on a small gap. */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px;
}

.form-row > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.form-text,
small.text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
}

.invalid-feedback {
    color: #ff8a9a;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #ff8a9a;
}

/* Bootstrap custom checkboxes / switches */
.custom-control-label,
.custom-control-label a {
    color: rgba(255, 255, 255, 0.85);
}

.custom-control-label a {
    text-decoration: underline;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #df314d;
    border-color: #df314d;
}

/* --------------------------------------------------------------------------
 * Cards & list groups (site-wide dark theme)
 * --------------------------------------------------------------------------
 * Bootstrap's .card defaults to white. With the body set to deep purple and
 * default text white, that produced white-on-white panels on any page that
 * uses cards (profile edit, messaging, photos, etc.). Switch cards to a
 * translucent dark surface so they sit on the purple background cleanly.
 */
.card {
    background-color: rgba(33, 0, 83, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.card-header,
.card-footer {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: #fff;
    margin: 0;
}

.card-body {
    color: rgba(255, 255, 255, 0.9);
}

.list-group {
    background: transparent;
}

.list-group-item {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.list-group-item a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.list-group-item a:hover {
    color: #df314d;
}

/* --------------------------------------------------------------------------
 * Tables (site-wide dark theme)
 * --------------------------------------------------------------------------
 * Bootstrap's .table defaults to color:#212529 with dark border colours, so on
 * the deep-purple body background every staff/moderation table (dashboard,
 * report queue, audit log, user lists, verification queues, etc.) rendered as
 * dark text on a dark background. Re-theme tables to match the rest of the
 * site, and override the Bootstrap CSS variables so striped/hover/active row
 * states stay readable too.
 */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-color: rgba(255, 255, 255, 0.9);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-table-hover-color: #fff;
    --bs-table-active-bg: rgba(255, 255, 255, 0.1);
    --bs-table-active-color: #fff;
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}

.table > thead {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

.table > thead th {
    border-bottom-color: rgba(255, 255, 255, 0.18);
    font-weight: 600;
}

.table code {
    color: #ff8a9a;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
}

.table a {
    color: #ff8a9a;
}

.table a:hover {
    color: #df314d;
}

/* --------------------------------------------------------------------------
 * Unified button styling (site-wide)
 * --------------------------------------------------------------------------
 * One button look, applied uniformly. The theme's .lab-btn and every
 * Bootstrap .btn variant (.btn-primary, .btn-secondary, .btn-outline-*, etc.)
 * all render identically: solid deep-purple with white text, fills brand
 * pink on hover. No primary/secondary distinction — every action button on
 * the site looks the same.
 *
 * .btn-link stays as a plain text link (otherwise text-only links lose all
 * styling). .btn-sm and .btn-xs keep the same colours but with smaller
 * padding/font, for compact contexts (badges, pagination, etc.).
 */
.lab-btn,
.btn,
.btn-default,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    display: inline-block;
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 0.95rem;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid #210053;
    background-color: #210053;
    color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.15s ease;
}

.lab-btn:hover,
.lab-btn:focus,
.btn:hover,
.btn:focus,
.btn-default:hover,
.btn-default:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-danger:hover,
.btn-danger:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #df314d;
    border-color: #df314d;
    color: #fff;
    box-shadow: 0 4px 12px rgba(223, 49, 77, 0.35);
    transform: translateY(-1px);
    text-decoration: none;
}

.lab-btn i,
.btn i {
    color: inherit;
}

/* Sizing variants — same colour, smaller footprint */
.lab-btn.btn-sm,
.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-width: 1px;
}

.btn-xs {
    padding: 3px 10px;
    font-size: 0.75rem;
    border-radius: 3px;
    border-width: 1px;
}

.lab-btn.w-100,
.btn.w-100 {
    width: 100%;
}

/* Plain text links (Bootstrap .btn-link) — kept text-only on purpose so a
 * "Clear filters" or "Cancel" link doesn't read as a primary action. */
.btn-link,
.btn.btn-link {
    background: none;
    border: none;
    color: #ff8a9a;
    padding: 4px 8px;
    text-decoration: none;
    text-transform: none;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

.btn-link:hover,
.btn-link:focus,
.btn.btn-link:hover,
.btn.btn-link:focus {
    color: #df314d;
    text-decoration: underline;
    background: none;
    box-shadow: none;
    transform: none;
    border-color: transparent;
}

/* Disabled state */
.lab-btn:disabled,
.btn:disabled,
.lab-btn.disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
 * Flash messages container
 * --------------------------------------------------------------------------
 * Flash messages render in their own container between the header and the
 * page content. Most pages wrap content in <section class="padding-tb">
 * which has 80-120px top padding — that piles on top of the alert and
 * leaves a giant empty gap below it. Compress the following section's top
 * padding when a flash alert is present, so the alert sits naturally above
 * the page content. */
.flash-messages {
    padding-top: 18px;
    margin-bottom: 0;
}

.flash-messages + section,
.flash-messages + main > section:first-child {
    padding-top: 24px;
}

/* --------------------------------------------------------------------------
 * Alert links
 * --------------------------------------------------------------------------
 * The theme sets `a { color: #fff }` globally. Bootstrap alerts have light
 * backgrounds (yellow/blue/green/red) and dark contextual text colours, so
 * a white link inside an alert is invisible. Force alert links to inherit
 * the alert's own text colour and underline them so they read as links. */
.alert a,
.alert a:visited {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.alert a:hover,
.alert a:focus {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}

/* Footer newsletter subscribe button — the theme sets line-height:56px on
 * this specific button, which combined with the unified-button padding makes
 * it ~76px tall. Match the theme selector so the override wins on cascade. */
.footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item-3 .fm-item-content form button,
.footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item-3 .fm-item-content form .lab-btn {
    line-height: 1.4;
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
 * Auth pages (signup, login, password reset, verification, etc.)
 * --------------------------------------------------------------------------
 * The auth templates reference .log-reg / .log-reg-inner but those classes
 * were never carried over from the source theme — so the forms rendered with
 * no card, no spacing, and no input styling. Give them a card wrapper that
 * matches the rest of the site. (Inputs, labels and buttons inherit from the
 * site-wide rules above.)
 */
.log-reg {
    padding: 80px 0;
}

.log-reg-inner {
    background: rgba(33, 0, 83, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

@media (max-width: 575.98px) {
    .log-reg-inner { padding: 28px 22px; }
}

.log-reg-inner .section-header {
    text-align: center;
    margin-bottom: 28px;
}

.log-reg-inner .section-header h2,
.log-reg-inner .section-header .title {
    color: #fff;
    margin-bottom: 8px;
}

.log-reg-inner .section-header p {
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0;
}

.log-reg-inner .form-group {
    margin-bottom: 20px;
}

.log-reg-inner a {
    color: #ff8a9a;
}

.log-reg-inner a:hover {
    color: #df314d;
}

.log-reg-inner .lab-btn {
    margin-top: 6px;
}