/*
 * aX Sync front-end styles
 *
 * Colours are defined as CSS custom properties below.
 * To customise for a specific install, override these variables in
 * Elementor → Site Settings → Custom CSS  (or WP Customizer → Additional CSS):
 *
 *   :root {
 *       --axsync-primary:  #YOUR_NAVY;
 *       --axsync-accent:     #YOUR_BLUE;
 *       --axsync-border:   #YOUR_BORDER_GREY;
 *       --axsync-text:     #YOUR_BODY_TEXT;
 *       --axsync-muted:    #YOUR_LABEL_GREY;
 *       --axsync-bg:       #YOUR_CARD_BG;
 *   }
 *
 * No plugin code needs editing between installs.
 */

:root {
    --axsync-primary: #003660;   /* dark navy  — headings, course name, card date */
    --axsync-accent:  #0076BD;   /* accent colour — buttons, left border, hover tint */
    --axsync-border:  #dddddd;   /* light grey — card borders, row separators     */
    --axsync-text:    #080808;   /* near black — body text                        */
    --axsync-muted:   #6D6E71;   /* grey       — column labels, secondary text    */
    --axsync-bg:      #ffffff;   /* white      — card backgrounds                 */
    --axsync-warning: #F75F40;   /* warning/urgency — low seats indicator         */
}

/* =========================================================================
   SHARED — Apply button + Fully Booked badge
   ========================================================================= */

.axsync-enrol-btn {
    display: inline-block;
    padding: 8px 18px;
    background: var(--axsync-accent);
    color: var(--axsync-bg) !important;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

/* Button hover — 20% darker than the accent colour, no hardcoded value */
.axsync-enrol-btn:hover {
    background: color-mix(in srgb, var(--axsync-accent) 80%, black);
    color: var(--axsync-bg) !important;
}

.axsync-fully-booked {
    display: inline-block;
    padding: 6px 12px;
    background: var(--axsync-border);
    color: var(--axsync-muted);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* =========================================================================
   UPCOMING COURSES TABLE
   Each body row is its own card — left blue accent, rounded ends, no
   internal cell dividers so each row reads as one unified piece.
   ========================================================================= */

.axsync-upcoming-courses {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    font-family: inherit;
    font-size: 14px;
}

/* Column headers — plain small labels, no background */
.axsync-upcoming-courses thead tr,
.axsync-upcoming-courses thead tr th {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

.axsync-upcoming-courses thead th {
    padding: 0 16px 4px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--axsync-muted) !important;
    white-space: nowrap;
    border: none !important;
}

.axsync-upcoming-courses thead th.axsync-col-action {
    width: 110px;
}

/* Body cells — card background, top + bottom borders only (no internal dividers) */
.axsync-upcoming-courses tbody td {
    padding: 14px 16px;
    background: var(--axsync-bg);
    border-top: 1px solid var(--axsync-border) !important;
    border-bottom: 1px solid var(--axsync-border) !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    color: var(--axsync-text);
    transition: background 0.15s ease;
    white-space: nowrap; /* prevent columns like Time breaking mid-value */
}

/* Name column is the only one allowed to wrap */
.axsync-upcoming-courses tbody td.axsync-col-name {
    white-space: normal;
}

/* First cell — left blue accent + left rounding */
.axsync-upcoming-courses tbody td:first-child {
    border-left: 4px solid var(--axsync-accent) !important;
    border-radius: 6px 0 0 6px;
}

/* Last cell — close the right side + right rounding */
.axsync-upcoming-courses tbody td:last-child {
    border-right: 1px solid var(--axsync-border) !important;
    border-radius: 0 6px 6px 0;
}

/* Row hover — light tint derived from accent colour variable */
.axsync-upcoming-courses tbody tr:hover td {
    background: color-mix(in srgb, var(--axsync-accent) 4%, transparent);
}

/* Course name — bold weight, inherits colour like other columns */
.axsync-upcoming-courses .axsync-col-name {
    font-weight: 600;
}

.axsync-upcoming-courses .axsync-col-action {
    text-align: right;
}

/* Seats — available/max with muted max */
.axsync-seats-max {
    opacity: 0.4;
    font-size: 0.9em;
}

/* Flexible-column width priority (desktop only).
   The small data columns stay nowrap and content-sized. Name and Location
   are the two columns that can flex; without hints Location (nowrap) would
   demand its full address width and crush Name. So: let Location wrap, and
   give Name a larger preferred width so it wins the leftover space ~2.5:1.
   Scoped to >=768px so it can't override the mobile stacked-card widths. */
@media ( min-width: 768px ) {
    .axsync-upcoming-courses .axsync-col-name {
        width: 35%;
    }
    .axsync-upcoming-courses .axsync-col-location {
        width: 18%;
    }
    .axsync-upcoming-courses tbody td.axsync-col-location {
        white-space: normal;
    }
}

/* =========================================================================
   UPCOMING COURSES TABLE — responsive collapse
   Below 700px each row becomes a stacked card using data-label attributes.
   ========================================================================= */

@media ( max-width: 767px ) {

    .axsync-upcoming-courses,
    .axsync-upcoming-courses tbody {
        display: block;
        width: 100%;
    }

    /* Hide column headers — labels come from data-label on each cell */
    .axsync-upcoming-courses thead {
        display: none;
    }

    /* Each row becomes a card */
    .axsync-upcoming-courses tbody tr {
        display: block;
        background: var(--axsync-bg);
        border: 1px solid var(--axsync-border);
        border-left: 4px solid var(--axsync-accent);
        border-radius: 6px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    /* Each cell becomes a label + value row.
       Override the desktop first/last-child borders explicitly
       since those use !important and have higher specificity. */
    .axsync-upcoming-courses tbody td,
    .axsync-upcoming-courses tbody td:first-child,
    .axsync-upcoming-courses tbody td:last-child {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 8px 14px !important;
        border-top: none !important;
        border-bottom: 1px solid var(--axsync-border) !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        width: 100%;
        box-sizing: border-box;
        white-space: normal;          /* override desktop nowrap so long values (e.g. Location) wrap */
        overflow-wrap: anywhere;      /* break pathologically long unbroken strings too */
    }

    .axsync-upcoming-courses tbody td:last-child {
        border-bottom: none !important;
        justify-content: flex-start;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Inject data-label as the row label */
    .axsync-upcoming-courses tbody td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--axsync-muted);
        min-width: 110px;
        flex-shrink: 0;
    }

    /* Name row — blue background, white text for label and value */
    .axsync-upcoming-courses tbody td.axsync-col-name {
        background: var(--axsync-accent) !important;
        color: var(--axsync-bg) !important;
        font-weight: 600;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        border-bottom: none !important;
    }

    .axsync-upcoming-courses tbody td.axsync-col-name::before {
        color: color-mix(in srgb, var(--axsync-bg) 75%, transparent) !important;
    }
}

/* =========================================================================
   COURSE DETAIL — card on the enrolment page
   ========================================================================= */

.axsync-course-detail {
    background: var(--axsync-bg);
    border: 1px solid var(--axsync-border);
    border-left: 4px solid var(--axsync-accent);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
}

.axsync-detail-table {
    width: 100%;
    border-collapse: collapse !important;
    font-size: 14px;
    background: transparent !important;
    margin: 0 !important;
}

.axsync-detail-table tr,
.axsync-detail-table th,
.axsync-detail-table td {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.axsync-detail-table tr {
    border-bottom: 1px solid var(--axsync-border) !important;
}

.axsync-detail-table tr:last-child {
    border-bottom: none !important;
}

.axsync-detail-table th {
    padding: 10px 16px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--axsync-muted) !important;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: nowrap;
    width: 130px;
}

.axsync-detail-table td {
    padding: 10px 16px 10px 0 !important;
    font-size: 13px !important;
    color: var(--axsync-text) !important;
    vertical-align: middle !important;
    font-weight: 500;
}

/* Name row — matches the card date header style */
.axsync-detail-name-row {
    border-bottom: 1px solid var(--axsync-border) !important;
}

.axsync-detail-name-row td {
    font-weight: 600 !important;
    font-size: 15px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.axsync-detail-name-row th {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* =========================================================================
   COURSE CARDS — sidebar layout
   [axcelerate-course-cards rto="abv"]
   ========================================================================= */

/* 1. Gap matches table row spacing */
.axsync-course-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.axsync-course-card {
    background: var(--axsync-bg);
    border: 1px solid var(--axsync-border);
    border-left: 4px solid var(--axsync-accent);
    border-radius: 6px;
    padding: 14px 16px;
    transition: background 0.15s ease; /* 1. tint on hover, not shadow */
}

/* 1. Hover tint derived from accent colour variable */
.axsync-course-card:hover {
    background: color-mix(in srgb, var(--axsync-accent) 4%, transparent);
}

.axsync-course-card--full {
    border-left-color: var(--axsync-border);
    opacity: 0.75;
}

/* 4. Date — bold title, inherits colour like other entries */
.axsync-course-card__date {
    font-weight: 600;
    font-size: 14px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--axsync-border);
    line-height: 1.3;
}

.axsync-course-card__meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.axsync-course-card__meta-item {
    font-size: 13px;
    color: var(--axsync-text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

/* 2. Meta labels match table column headers — 11px uppercase grey */
.axsync-course-card__meta-label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--axsync-muted);
    width: 120px;        /* fixed (not min-) so every value column starts at the same x */
    flex-shrink: 0;
    flex-grow: 0;
    padding-top: 1px;    /* optical alignment with value text */
}

/* Footer — button left-aligned, standard width */
.axsync-course-card__footer {
    padding-top: 10px;
    border-top: 1px solid var(--axsync-border);
}

.axsync-course-card__spaces {
    font-size: 12px;
    color: var(--axsync-muted);
    white-space: nowrap;
}

.axsync-course-card__spaces--low {
    color: var(--axsync-warning);
    font-weight: 600;
}

.axsync-course-card .axsync-enrol-btn {
    padding: 8px 20px;
    font-size: 13px;
}

.axsync-course-card .axsync-fully-booked {
    font-size: 11px;
}