/**
 * NTUA Alumni - Public Styles
 */

/* Variables */
:root {
    /* Brand palette (alumni.ntua.gr) */
    --ntua-brand-navy:    #1B3A6B;
    --ntua-brand-navy-2:  #14294F;   /* darker navy for hover/active */
    --ntua-brand-olive:   #6B7A3F;
    --ntua-brand-gold:    #C5A572;
    --ntua-brand-gold-2:  #B89260;   /* darker gold for hover */
    --ntua-brand-ivory:   #F1EEE6;
    --ntua-brand-dgreen:  #2D4A40;
    --ntua-brand-white:   #FFFFFF;

    /* Plugin-wide font stack — matches the Astra site-wide body font
       (Comfortaa), set 2026-06-13 so plugin UI is typographically consistent
       with the rest of the site. Comfortaa is already enqueued globally by
       Astra, so it's available on every page including /my-account/. */
    --ntua-font: "Comfortaa", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Legacy aliases (kept for backward compatibility with existing rules) */
    --ntua-primary:        var(--ntua-brand-navy);
    --ntua-primary-dark:   var(--ntua-brand-navy-2);
    --ntua-secondary:      #6c757d;
    --ntua-success:        #28a745;
    --ntua-warning:        #ffc107;
    --ntua-danger:         #dc3545;
    --ntua-info:           #17a2b8;
    --ntua-light:          #f8f9fa;
    --ntua-dark:           #343a40;
    --ntua-border:         #dee2e6;
    --ntua-text:           #333;
    --ntua-text-muted:     #6c757d;
    --ntua-radius:         8px;
    --ntua-shadow:         0 2px 4px rgba(0,0,0,0.1);
    --ntua-shadow-lg:      0 4px 12px rgba(0,0,0,0.15);
}

/* Reset & Base */
.ntua-profile-edit,
.ntua-profile-view,
.ntua-directory,
.ntua-dashboard,
.ntua-login-form {
    font-family: var(--ntua-font);
    color: var(--ntua-text);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Notices */
.ntua-notice {
    padding: 20px;
    border-radius: var(--ntua-radius);
    margin-bottom: 20px;
}

.ntua-notice h3 {
    margin: 0 0 10px;
}

.ntua-notice-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Login error banner — designed to be readable when the login page sits
   inside a dark cypress Elementor section. Solid white card, thick red
   accent stripe, dark red title + near-black body. Hidden until JS shows it. */
.ntua-login-error {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px 16px 14px;
    background: #ffffff;                 /* fully opaque, never blends */
    border: 1px solid #fca5a5;
    border-left: 8px solid #b91c1c;      /* thick red accent */
    border-radius: 10px;
    margin: 0 0 22px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18),
                0 2px 6px rgba(185, 28, 28, .25);
    outline: none;
}
.ntua-login-error[hidden] {
    display: none;
}
.ntua-login-error:focus,
.ntua-login-error:focus-visible {
    outline: 3px solid rgba(185, 28, 28, .45);
    outline-offset: 2px;
}
.ntua-login-error-icon {
    font-size: 1.6rem;
    line-height: 1;
    color: #b91c1c;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    margin-top: 2px;
}
.ntua-login-error-body {
    flex: 1;
    min-width: 0;
}
.ntua-login-error-title {
    display: block;
    font-family: var(--ntua-font);
    font-size: 1rem;
    font-weight: 800;
    color: #991b1b;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.ntua-login-error-body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1f2937;                      /* near-black for body text */
}

.ntua-notice-warning {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

.ntua-notice-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.ntua-notice-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

/* Buttons — brand-aligned, Open Sans, consistent across the plugin */
.ntua-btn {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--ntua-font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;     /* Astra defaults often add underline */
    border: 1px solid transparent;
    border-radius: var(--ntua-radius);
    cursor: pointer;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Primary CTA: filled gold, navy text (8:1 contrast, WCAG AAA) */
.ntua-btn-primary {
    background: var(--ntua-brand-gold) !important;
    color: var(--ntua-brand-navy) !important;
    border-color: var(--ntua-brand-gold);
}
.ntua-btn-primary:hover,
.ntua-btn-primary:focus-visible {
    background: var(--ntua-brand-gold-2) !important;
    color: var(--ntua-brand-navy) !important;
    border-color: var(--ntua-brand-gold-2);
    outline: none;
}

/* Secondary CTA: outline gold on light surface */
.ntua-btn-secondary {
    background: transparent !important;
    color: var(--ntua-brand-navy) !important;
    border: 1px solid var(--ntua-brand-gold);
}
.ntua-btn-secondary:hover,
.ntua-btn-secondary:focus-visible {
    background: var(--ntua-brand-gold) !important;
    color: var(--ntua-brand-navy) !important;
    border-color: var(--ntua-brand-gold);
    outline: none;
}

/* Tertiary / inline link-style button */
.ntua-btn-text {
    background: transparent !important;
    color: var(--ntua-brand-navy) !important;
    border-color: transparent;
    padding: 5px 10px;
}
.ntua-btn-text:hover,
.ntua-btn-text:focus-visible {
    color: var(--ntua-brand-navy-2) !important;
    text-decoration: underline !important;
    outline: none;
}

.ntua-btn-large {
    padding: 14px 28px;
    font-size: 16px;
}

.ntua-btn-full {
    width: 100%;
    text-align: center;
}

/* Forms */
.ntua-form-section {
    background: #fff;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.ntua-form-section h2 {
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ntua-primary);
    font-size: 20px;
}

.ntua-form-section h3 {
    margin: 24px 0 16px;
    font-size: 16px;
    color: var(--ntua-secondary);
}

.ntua-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.ntua-form-group {
    flex: 1;
    margin-bottom: 16px;
}

.ntua-form-group-small {
    flex: 0 0 120px;
}

.ntua-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
}

.ntua-form-group input[type="text"],
.ntua-form-group input[type="email"],
.ntua-form-group input[type="tel"],
.ntua-form-group input[type="url"],
.ntua-form-group input[type="number"],
.ntua-form-group input[type="password"],
.ntua-form-group select,
.ntua-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
    transition: border-color 0.2s;
}

.ntua-form-group input:focus,
.ntua-form-group select:focus,
.ntua-form-group textarea:focus {
    outline: none;
    border-color: var(--ntua-primary);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

/* ---- Password field with show/hide toggle + strength meter ---- */

.ntua-pw-wrap {
    position: relative;
    display: block;
}
.ntua-pw-wrap input[type="password"],
.ntua-pw-wrap input[type="text"] {
    /* leave room for the eye button */
    padding-right: 44px;
}
.ntua-pw-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px !important;
    margin: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
    color: var(--ntua-brand-navy, #1B3A6B);
    opacity: 0.55;
    transition: opacity .15s ease, color .15s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ntua-pw-toggle:hover,
.ntua-pw-toggle:focus-visible {
    background: transparent !important;
    opacity: 1;
    color: var(--ntua-brand-gold, #C5A572);
    outline: none;
}
.ntua-pw-toggle[aria-pressed="true"] {
    color: var(--ntua-brand-gold, #C5A572);
    opacity: 1;
}
.ntua-pw-toggle svg {
    display: block;
    pointer-events: none;
}

/* Strength meter pill */
.ntua-pw-strength {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #6b6b6b;
    min-height: 18px;
}
.ntua-pw-strength.is-short    { color: #b91c1c; }
.ntua-pw-strength.is-bad      { color: #c2410c; }
.ntua-pw-strength.is-good     { color: #b45309; }
.ntua-pw-strength.is-strong   { color: #047857; }
.ntua-pw-strength.is-mismatch { color: #b91c1c; }
.ntua-pw-strength::before {
    content: "● ";
}

/* Live requirements checklist */
.ntua-pw-checklist {
    list-style: none;
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid rgba(27, 58, 107, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ntua-pw-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b6b6b;
    transition: color .15s ease;
}
.ntua-pw-check-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b6b6b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.ntua-pw-check.is-met {
    color: #1c5430;
}
.ntua-pw-check.is-met .ntua-pw-check-icon {
    background: #d9f5e0;
    color: #1c5430;
}
.ntua-pw-check.is-pending {
    color: #6b6b6b;
}

/* Visually disable submit when checklist not met (in addition to disabled attr) */
.ntua-btn.is-disabled,
.ntua-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Change-password modal needs extra breathing room — its middle row carries
   a strength meter + a 5-item checklist that visually crowd the field below
   if form rows have the default 14px gap. !important needed because Astra's
   .ntua-form-row global rule has equal specificity (0,1,0) and would win on
   source order. */
#ntuaPasswordModal .ntua-form-row {
    display: block !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
}
#ntuaPasswordModal .ntua-form-row:last-child {
    margin-bottom: 6px !important;
}
#ntuaPasswordModal .ntua-form-row .ntua-pw-wrap {
    display: block !important;
    width: 100%;
    margin: 0;
}
#ntuaPasswordModal .ntua-form-row .ntua-pw-wrap input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
#ntuaPasswordModal .ntua-pw-strength {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
}
#ntuaPasswordModal .ntua-pw-checklist {
    margin: 10px 0 6px 0 !important;
}
#ntuaPasswordModal label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--ntua-brand-navy, #1B3A6B) !important;
    line-height: 1.3 !important;
}

/* ---- Reset password success page ---- */

.ntua-reset-success {
    text-align: center;
    padding: 12px 6px 8px;
}
.ntua-reset-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #d9f5e0;
    color: #1c5430;
    font-size: 38px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ntua-reset-success-title {
    margin: 0 0 10px;
    font-family: var(--ntua-font, "Open Sans", sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ntua-brand-navy, #1B3A6B);
}
.ntua-reset-success-body {
    margin: 0 0 22px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4b5563;
}
.ntua-reset-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ntua-reset-success-actions .ntua-btn {
    width: 100%;
}
@media (min-width: 480px) {
    .ntua-reset-success-actions {
        flex-direction: row;
        justify-content: center;
    }
    .ntua-reset-success-actions .ntua-btn {
        width: auto;
        min-width: 200px;
    }
}

.ntua-help-text {
    font-size: 12px;
    color: var(--ntua-text-muted);
    margin-top: 4px;
}

.ntua-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    cursor: pointer;
}

.ntua-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* Photo Upload */
.ntua-photo-upload {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.ntua-photo-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ntua-light);
    border: 2px solid var(--ntua-border);
}

.ntua-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ntua-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ntua-text-muted);
    font-size: 12px;
}

.ntua-photo-controls input[type="file"] {
    display: none;
}

/* Repeater */
.ntua-repeater {
    margin-bottom: 16px;
}

.ntua-repeater-item {
    position: relative;
    background: var(--ntua-light);
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
    padding: 16px;
    margin-bottom: 12px;
}

.ntua-btn-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--ntua-danger);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 24px;
}

.ntua-add-item {
    margin-top: 8px;
}

/* Form Actions */
.ntua-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
}

.ntua-form-message {
    font-size: 14px;
}

.ntua-form-message.success {
    color: var(--ntua-success);
}

.ntua-form-message.error {
    color: var(--ntua-danger);
}

/* Directory */
.ntua-directory-filters {
    background: #fff;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.ntua-search-main {
    display: flex;
    gap: 12px;
}

.ntua-search-main input {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
}

.ntua-filters-toggle {
    margin-top: 12px;
}

.ntua-filters-panel {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ntua-border);
}

.ntua-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.ntua-filter-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
}

.ntua-filter-group select,
.ntua-filter-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
}

.ntua-filter-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ntua-filter-range select {
    flex: 1;
}

.ntua-filters-options {
    display: flex;
    gap: 20px;
    margin-top: 16px;
}

.ntua-filters-actions {
    margin-top: 16px;
}

/* Results */
.ntua-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ntua-results-count {
    font-size: 14px;
    color: var(--ntua-text-muted);
}

.ntua-results-sort select {
    padding: 6px 12px;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
}

/* Alumni Grid */
.ntua-alumni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.ntua-alumni-card {
    background: #fff;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ntua-alumni-card:hover {
    box-shadow: var(--ntua-shadow-lg);
    transform: translateY(-2px);
}

.ntua-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 20px;
}

.ntua-card-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 16px;
    background: var(--ntua-light);
}

.ntua-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ntua-card-content {
    text-align: center;
}

.ntua-card-name {
    font-size: 18px;
    margin: 0 0 4px;
    color: var(--ntua-primary);
}

.ntua-card-school {
    font-size: 13px;
    color: var(--ntua-text-muted);
    margin: 0 0 8px;
}

.ntua-card-position,
.ntua-card-company {
    font-size: 14px;
    margin: 0;
}

.ntua-card-company {
    color: var(--ntua-text-muted);
}

.ntua-card-location {
    font-size: 13px;
    color: var(--ntua-text-muted);
    margin: 8px 0 0;
}

.ntua-card-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.ntua-badge {
    font-size: 16px;
    cursor: help;
}

/* Profile View */
.ntua-profile-header {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--ntua-border);
}

.ntua-profile-photo {
    flex-shrink: 0;
}

.ntua-profile-photo img,
.ntua-profile-photo .ntua-photo-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ntua-primary);
}

.ntua-profile-photo .ntua-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ntua-primary);
    color: #fff;
    font-size: 48px;
    font-weight: bold;
}

.ntua-profile-name {
    font-size: 28px;
    margin: 0 0 4px;
    color: var(--ntua-primary);
}

.ntua-profile-name-en {
    font-size: 16px;
    color: var(--ntua-text-muted);
    margin: 0 0 12px;
}

.ntua-profile-headline {
    font-size: 18px;
    margin: 0 0 8px;
}

.ntua-profile-school {
    font-size: 14px;
    color: var(--ntua-text-muted);
    margin: 0 0 4px;
}

.ntua-profile-year {
    font-weight: bold;
}

.ntua-profile-location {
    font-size: 14px;
    margin: 8px 0;
}

.ntua-profile-badges {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.ntua-profile-badges .ntua-badge {
    background: var(--ntua-light);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
}

.ntua-profile-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.ntua-social-link {
    padding: 6px 12px;
    background: var(--ntua-light);
    border-radius: var(--ntua-radius);
    font-size: 13px;
    text-decoration: none;
    color: var(--ntua-text);
}

.ntua-social-link:hover {
    background: var(--ntua-primary);
    color: #fff;
}

.ntua-profile-section {
    margin-bottom: 30px;
}

.ntua-profile-section h2 {
    font-size: 18px;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ntua-primary);
}

/* Education */
.ntua-education-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ntua-border);
}

.ntua-education-item:last-child {
    border-bottom: none;
}

.ntua-education-icon {
    font-size: 24px;
}

.ntua-education-content h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.ntua-education-content p {
    margin: 0;
    font-size: 14px;
    color: var(--ntua-text-muted);
}

.ntua-education-type {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    background: var(--ntua-light);
    border-radius: 4px;
    font-size: 12px;
}

/* Experience */
.ntua-experience-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
}

.ntua-experience-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
}

.ntua-timeline-dot {
    width: 12px;
    height: 12px;
    background: var(--ntua-primary);
    border-radius: 50%;
}

.ntua-experience-current .ntua-timeline-dot {
    background: var(--ntua-success);
}

.ntua-timeline-line {
    flex: 1;
    width: 2px;
    background: var(--ntua-border);
    margin-top: 8px;
}

.ntua-experience-content h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.ntua-experience-company {
    margin: 0 0 4px;
    color: var(--ntua-text-muted);
}

.ntua-experience-period {
    font-size: 13px;
    color: var(--ntua-text-muted);
    margin: 0 0 8px;
}

.ntua-experience-desc {
    font-size: 14px;
    margin: 0;
}

/* Skills */
.ntua-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ntua-skill-tag {
    padding: 6px 14px;
    background: var(--ntua-light);
    border-radius: 20px;
    font-size: 14px;
}

/* Dashboard */
.ntua-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.ntua-dashboard-welcome h1 {
    margin: 0 0 8px;
    font-size: 28px;
}

.ntua-dashboard-welcome p {
    margin: 0;
    color: var(--ntua-text-muted);
}

.ntua-dashboard-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.ntua-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.ntua-stat-card {
    background: #fff;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
    padding: 20px;
    text-align: center;
}

.ntua-stat-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.ntua-stat-label {
    display: block;
    font-size: 12px;
    color: var(--ntua-text-muted);
    margin-bottom: 4px;
}

.ntua-stat-value {
    font-weight: 600;
    color: var(--ntua-primary);
}

.ntua-action-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.ntua-action-card {
    display: block;
    background: #fff;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ntua-action-card:hover {
    box-shadow: var(--ntua-shadow-lg);
    transform: translateY(-2px);
}

.ntua-action-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 12px;
}

.ntua-action-title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ntua-action-desc {
    display: block;
    font-size: 14px;
    color: var(--ntua-text-muted);
}

.ntua-dashboard-reminder {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: var(--ntua-radius);
    padding: 20px;
    margin-bottom: 30px;
}

.ntua-dashboard-reminder h3 {
    margin: 0 0 8px;
}

.ntua-dashboard-reminder ul {
    margin: 8px 0 16px;
    padding-left: 20px;
}

/* Login */
.ntua-login-form {
    max-width: 400px;
    margin: 40px auto;
    padding: 40px;
    background: #fff;
    border: 1px solid var(--ntua-border);
    border-radius: var(--ntua-radius);
}

.ntua-login-form h2 {
    margin: 0 0 24px;
    text-align: center;
}

.ntua-form-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;            /* row gap (wrap) + column gap (side by side) */
    margin: 4px 0 8px;
}

.ntua-forgot-link {
    font-size: 13px;
    color: var(--ntua-primary);
}

.ntua-login-register {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ntua-border);
    text-align: center;
}

.ntua-login-register p {
    margin: 0 0 12px;
    color: var(--ntua-text-muted);
}

/* Register CTA on the login page: the section background renders cypress
   (#2D4A40-ish), so the default navy text on transparent has poor contrast.
   Scope a white-text override here; hover (gold-fill) stays as-is. */
.ntua-login-register .ntua-btn-secondary,
.ntua-login-register .ntua-btn-secondary:visited,
.ntua-login-register .ntua-btn-secondary:active {
    color: #fff !important;
    border-color: var(--ntua-brand-gold) !important;
}
.ntua-login-register .ntua-btn-secondary:hover,
.ntua-login-register .ntua-btn-secondary:focus-visible {
    /* keep default: gold fill, navy text */
    color: var(--ntua-brand-navy) !important;
    background: var(--ntua-brand-gold) !important;
}

/* Forgot-password + Reset-password pages render the secondary CTA over a
   WHITE form card (not the cypress login section), so white text is
   invisible. The wrapper gets a `--on-white` modifier in those templates
   so we can target it independently of body classes (which Astra+Elementor
   strip of slug-based info). Override to gold; hover keeps gold-fill. */
.ntua-login-wrapper--on-white .ntua-login-register .ntua-btn-secondary,
.ntua-login-wrapper--on-white .ntua-login-register .ntua-btn-secondary:visited,
.ntua-login-wrapper--on-white .ntua-login-register .ntua-btn-secondary:active {
    color: var(--ntua-brand-gold) !important;
    border-color: var(--ntua-brand-gold) !important;
}
.ntua-login-wrapper--on-white .ntua-login-register .ntua-btn-secondary:hover,
.ntua-login-wrapper--on-white .ntua-login-register .ntua-btn-secondary:focus-visible {
    /* same hover treatment as login page register button */
    color: var(--ntua-brand-navy) !important;
    background: var(--ntua-brand-gold) !important;
}

/* Loading */
.ntua-loading {
    text-align: center;
    padding: 40px;
    color: var(--ntua-text-muted);
}

.ntua-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ntua-border);
    border-top-color: var(--ntua-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Load More */
.ntua-load-more {
    text-align: center;
    margin-top: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .ntua-form-row {
        flex-direction: column;
    }
    
    .ntua-form-group-small {
        flex: 1;
    }
    
    .ntua-profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .ntua-profile-photo {
        margin: 0 auto;
    }
    
    .ntua-profile-badges,
    .ntua-profile-social {
        justify-content: center;
    }
    
    .ntua-search-main {
        flex-direction: column;
    }
    
    .ntua-filters-options {
        flex-direction: column;
    }
    
    .ntua-alumni-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
 * [ntua_alumni_dashboard] — read-only My Account page
 * ================================================================= */

.ntua-myaccount {
    font-family: var(--ntua-font);
    color: var(--ntua-brand-dgreen);
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.ntua-myaccount-header {
    margin: 0 0 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ntua-brand-gold);
}
.ntua-myaccount-greeting {
    margin: 0 0 4px;
    font-family: var(--ntua-font);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ntua-brand-navy);
    line-height: 1.2;
}
.ntua-myaccount-greeting span {
    color: var(--ntua-brand-gold);
}
.ntua-myaccount-sub {
    margin: 0;
    color: #555;
    font-size: 0.92rem;
}

.ntua-myaccount-section {
    margin-top: 28px;
    padding: 22px 24px 18px;
    background: #fff;
    border: 1px solid rgba(27, 58, 107, .08);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(27, 58, 107, .04);
}

.ntua-myaccount-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(197, 165, 114, .35);
}

.ntua-myaccount-section-title {
    margin: 0;
    font-family: var(--ntua-font);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ntua-brand-navy);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.ntua-myaccount-section-subtitle {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b6b6b;
    letter-spacing: 0.1px;
    text-transform: none;
    font-style: italic;
}
/* When the section has no header wrapper (just a title), match spacing */
.ntua-myaccount-section > .ntua-myaccount-section-title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(197, 165, 114, .35);
}

.ntua-myaccount-viewall {
    color: var(--ntua-brand-gold) !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .15s ease;
}
.ntua-myaccount-viewall:hover,
.ntua-myaccount-viewall:focus-visible {
    color: var(--ntua-brand-navy-2) !important;
    outline: none;
}

/* ---- Registration data (definition list with zebra rows) ---- */

.ntua-myaccount-dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.ntua-myaccount-dl-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 4px;
}
.ntua-myaccount-dl-row:nth-child(even) {
    background: rgba(241, 238, 230, .35);     /* very light ivory zebra */
}
.ntua-myaccount-dl-row dt {
    margin: 0;
    font-weight: 600;
    color: var(--ntua-brand-navy);
    font-size: 0.92rem;
}
.ntua-myaccount-dl-row dd {
    margin: 0;
    color: #2a2a2a;
    font-size: 0.95rem;
    word-break: break-word;
}
.ntua-myaccount-dl-row dd a {
    color: var(--ntua-brand-navy) !important;
    text-decoration: underline;
}
.ntua-myaccount-dl-row dd a:hover {
    color: var(--ntua-brand-gold) !important;
}

.ntua-myaccount-empty {
    margin: 0;
    padding: 12px 16px;
    color: #6B1F1F;
    background: #FBEAEA;
    border-radius: 8px;
    font-size: 0.95rem;
}

/* ---- News / Events feed lists ---- */

.ntua-myaccount-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ntua-myaccount-feed-item {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ntua-myaccount-feed-item + .ntua-myaccount-feed-item {
    border-top: 1px solid rgba(27, 58, 107, .06);
}
.ntua-myaccount-feed-link {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 12px;
    color: var(--ntua-brand-navy) !important;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
    border-radius: 6px;
}
.ntua-myaccount-feed-link:hover,
.ntua-myaccount-feed-link:focus-visible {
    background: var(--ntua-brand-ivory);
    color: var(--ntua-brand-navy-2) !important;
    outline: none;
}
.ntua-myaccount-feed-title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}
.ntua-myaccount-feed-date {
    flex-shrink: 0;
    color: var(--ntua-brand-gold);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* ---- Row list (Νέα / Εκδηλώσεις tabs + Για εσάς sections) ----
   Layout: 100x100 thumb left → title → date → arrow far right. */

.ntua-feed-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ntua-feed-row {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ntua-feed-row-link {
    display: grid;
    grid-template-columns: 100px 1fr auto 28px;
    grid-template-areas: "thumb title date arrow";
    column-gap: 16px;
    align-items: center;
    padding: 8px 14px 8px 8px;
    background: #fff;
    border: 1px solid rgba(27, 58, 107, .08);
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--ntua-brand-navy) !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ntua-feed-row-link:hover,
.ntua-feed-row-link:focus-visible {
    border-color: var(--ntua-brand-gold);
    box-shadow: 0 4px 14px rgba(27, 58, 107, .08);
    transform: translateY(-1px);
    outline: none;
}

.ntua-feed-row-thumb {
    grid-area: thumb;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ntua-brand-ivory);
    position: relative;
    flex-shrink: 0;
}
.ntua-feed-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ntua-feed-row-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ntua-brand-gold);
    font-size: 1.8rem;
    font-weight: 700;
    font-family: var(--ntua-font);
}

.ntua-feed-row-title {
    grid-area: title;
    font-family: var(--ntua-font);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ntua-brand-navy);
    line-height: 1.35;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ntua-feed-row-date {
    grid-area: date;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ntua-brand-gold);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ntua-feed-row-arrow {
    grid-area: arrow;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ntua-brand-gold);
    text-align: center;
    transition: transform .15s ease, color .15s ease;
}
.ntua-feed-row-link:hover .ntua-feed-row-arrow,
.ntua-feed-row-link:focus-visible .ntua-feed-row-arrow {
    transform: translateX(3px);
    color: var(--ntua-brand-gold-2);
}

/* ---- Testimonial grid (Αναμνήσεις Αποφοίτων) — SQUARE photo + name ----
   2026-06-13: switched from round 96px avatars to a square image grid,
   5 per row, name underneath (per PM/SV request). The base ul.ntua-feed-grid
   rule lives further down (3-col for news/events); here we override columns
   only for the testimonials variant so the two layouts stay independent. */

.ntua-feed-grid--testimonials {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
}
.ntua-feed-card {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ntua-feed-card--testimonial .ntua-feed-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(27, 58, 107, .08);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--ntua-brand-navy) !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ntua-feed-card--testimonial .ntua-feed-card-link:hover,
.ntua-feed-card--testimonial .ntua-feed-card-link:focus-visible {
    border-color: var(--ntua-brand-gold);
    box-shadow: 0 6px 18px rgba(27, 58, 107, .12);
    transform: translateY(-2px);
    outline: none;
}
.ntua-feed-card--testimonial .ntua-feed-card-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 0;
    border: 0;
    overflow: hidden;
    background: var(--ntua-brand-ivory);
    position: relative;
}
.ntua-feed-card--testimonial .ntua-feed-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.ntua-feed-card--testimonial .ntua-feed-card-link:hover .ntua-feed-card-photo img {
    transform: scale(1.04);
}
.ntua-feed-card--testimonial .ntua-feed-card-photo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ntua-brand-gold);
    font-size: 2.4rem;
    font-weight: 700;
    font-family: var(--ntua-font);
    background: linear-gradient(135deg, var(--ntua-brand-ivory) 0%, #e8e4d8 100%);
}
.ntua-feed-card--testimonial .ntua-feed-card-name {
    display: block;
    font-family: var(--ntua-font);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ntua-brand-navy);
    line-height: 1.3;
    text-align: center;
    padding: 12px 10px 14px;
}

@media (max-width: 1100px) {
    .ntua-feed-grid--testimonials { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 800px) {
    .ntua-feed-grid--testimonials { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 520px) {
    .ntua-feed-grid--testimonials { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
    .ntua-feed-row-link {
        grid-template-columns: 72px 1fr 28px;
        grid-template-areas:
            "thumb title arrow"
            "thumb date  arrow";
        column-gap: 12px;
        row-gap: 4px;
        padding: 8px;
    }
    .ntua-feed-row-thumb {
        width: 72px;
        height: 72px;
    }
    .ntua-feed-row-date {
        font-size: 0.74rem;
    }
    .ntua-feed-card--testimonial .ntua-feed-card-name {
        font-size: 0.82rem;
    }
}

/* ---- Responsive: stack registration rows on small screens ---- */

@media (max-width: 640px) {
    .ntua-myaccount {
        padding: 16px 12px 40px;
    }
    .ntua-myaccount-greeting {
        font-size: 1.4rem;
    }
    .ntua-myaccount-section {
        padding: 18px 16px 14px;
    }
    .ntua-myaccount-dl-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 10px;
    }
    .ntua-myaccount-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .ntua-myaccount-feed-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .ntua-myaccount-feed-date {
        order: -1;          /* date above title on mobile */
        font-size: 0.78rem;
    }
}

/* =================================================================
 * [ntua_user_menu] — header user dropdown / login + register CTA
 *
 * Designed for a DARK header (live: #2F4F4F / brand: #2D4A40).
 * Resting state is fully visible without hover. Hover/focus reinforce.
 *
 * Brand palette (from :root):
 *   --ntua-brand-navy   #1B3A6B
 *   --ntua-brand-olive  #6B7A3F
 *   --ntua-brand-gold   #C5A572
 *   --ntua-brand-gold-2 #B89260
 *   --ntua-brand-ivory  #F1EEE6
 *   --ntua-brand-dgreen #2D4A40
 *
 * Specificity strategy: every selector is anchored on
 *   .ntua-user-menu[data-state="…"] → (0,3,…)
 * which beats Astra's anchor defaults (typ. (0,1,1)) without !important,
 * except for the few properties that themes set with !important themselves
 * (background-color on hovered links, text-decoration on anchors).
 * ================================================================= */

.ntua-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ntua-font);
    line-height: 1.2;
}

/* Shared icon styling (currentColor so it follows the link/button colour) */
.ntua-user-menu .ntua-user-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent !important;     /* kill Astra/Elementor button bg */
    color: inherit;
    flex-shrink: 0;
}
.ntua-user-menu .ntua-user-menu-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ====================================================================
 * LOGGED-OUT — Σύνδεση (gold outline) + Εγγραφή (gold filled)
 * ==================================================================== */
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: var(--ntua-font);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;       /* Astra adds underlines on links */
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* Σύνδεση — gold text + gold border, transparent (visible on dark header) */
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login {
    color: var(--ntua-brand-gold) !important;
    background: transparent !important;
    border: 1.5px solid var(--ntua-brand-gold);
}
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login:hover,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login:focus-visible {
    /* Fill flip: gold background, navy text */
    color: var(--ntua-brand-navy) !important;
    background: var(--ntua-brand-gold) !important;
    border-color: var(--ntua-brand-gold);
    outline: none;
}
/* Icon follows currentColor — gold at rest, navy on hover via inherit */
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login:hover,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login:focus-visible {
    /* color is set above; .ntua-user-menu-icon inherits via "color: inherit" */
}

/* Εγγραφή — gold filled, navy text (WCAG AAA contrast 8.2:1) */
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register {
    color: var(--ntua-brand-navy) !important;
    background: var(--ntua-brand-gold) !important;
    border: 1.5px solid var(--ntua-brand-gold);
}
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register:hover,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register:focus-visible {
    color: var(--ntua-brand-navy) !important;
    background: var(--ntua-brand-gold-2) !important;
    border-color: var(--ntua-brand-gold-2);
    outline: none;
}

/* ====================================================================
 * LOGGED-IN — greeting trigger button
 * ==================================================================== */
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    background: transparent !important;     /* kill Astra/Elementor button bg */
    border: none;
    cursor: pointer;
    border-radius: 8px;
    color: var(--ntua-brand-gold);          /* "Καλώς ήρθες," = gold (visible on dark) */
    font-family: var(--ntua-font);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease;
}
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-trigger:hover,
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-trigger:focus-visible,
.ntua-user-menu[data-state="logged-in"].is-open .ntua-user-menu-trigger {
    color: var(--ntua-brand-navy) !important;
    background: var(--ntua-brand-ivory) !important;
    outline: none;
}

/* "Καλώς ήρθες," — gold at rest, navy on hover (via parent color) */
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-greeting {
    color: inherit;
    font-weight: 500;
}
/* User's name — white at rest (max contrast on dark header), navy on hover.
   Shrunk + max-width so full names ("ΔΗΜΗΤΡΙΟΣ ΒΛΟΓΙΑΝΝΙΤΗΣ") fit the header
   pill without breaking the layout. Truncates with ellipsis past max-width. */
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-name {
    color: var(--ntua-brand-white);
    font-weight: 700;
    margin-left: 4px;
    font-size: 0.78rem;
    letter-spacing: 0.2px;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-trigger:hover .ntua-user-menu-name,
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-trigger:focus-visible .ntua-user-menu-name,
.ntua-user-menu[data-state="logged-in"].is-open .ntua-user-menu-name {
    color: var(--ntua-brand-navy);
}

/* Caret — gold at rest (matches greeting), navy on open (matches trigger flip) */
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-caret {
    display: inline-flex;
    width: 10px;
    height: 8px;
    color: inherit;
    transition: transform .2s ease, color .15s ease;
}
.ntua-user-menu[data-state="logged-in"] .ntua-user-menu-caret svg {
    width: 100%;
    height: 100%;
}
.ntua-user-menu[data-state="logged-in"].is-open .ntua-user-menu-caret {
    transform: rotate(180deg);
}

/* ====================================================================
 * DROPDOWN PANEL — white card surface
 * ==================================================================== */
.ntua-user-menu .ntua-user-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid rgba(27, 58, 107, .12);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(27, 58, 107, .15), 0 2px 6px rgba(0,0,0,.08);
    font-family: var(--ntua-font);
    z-index: 9999;
}
.ntua-user-menu .ntua-user-menu-panel[hidden] {
    display: none;
}
.ntua-user-menu .ntua-user-menu-panel li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ntua-user-menu .ntua-user-menu-panel a {
    display: block;
    padding: 10px 14px;
    color: var(--ntua-brand-navy) !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-family: var(--ntua-font);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}
.ntua-user-menu .ntua-user-menu-panel a:hover,
.ntua-user-menu .ntua-user-menu-panel a:focus-visible {
    background: var(--ntua-brand-ivory) !important;
    color: var(--ntua-brand-navy-2) !important;
    outline: none;
}
.ntua-user-menu .ntua-user-menu-panel .ntua-user-menu-logout {
    color: #8B2D2D !important;              /* subtle dark red for destructive */
    border-top: 1px solid rgba(27, 58, 107, .08);
    margin-top: 4px;
    padding-top: 12px;
}
.ntua-user-menu .ntua-user-menu-panel .ntua-user-menu-logout:hover,
.ntua-user-menu .ntua-user-menu-panel .ntua-user-menu-logout:focus-visible {
    background: #FBEAEA !important;
    color: #6B1F1F !important;
}

/* ====================================================================
 * RESPONSIVE — tighten on small screens
 * ==================================================================== */
@media (max-width: 480px) {
    .ntua-user-menu[data-state="logged-in"] .ntua-user-menu-greeting {
        display: none;
    }
    .ntua-user-menu[data-state="logged-in"] .ntua-user-menu-name {
        margin-left: 0;
    }
    .ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login-label {
        display: none;
    }
    .ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login {
        padding: 8px 12px;
    }
    .ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register {
        padding: 8px 14px;
        font-size: 0.88rem;
    }
}


/* =================================================================
 * NTUA Modal — used by Account / Password / Interests / Onboarding
 * ================================================================= */

.ntua-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--ntua-brand-dgreen) 80%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: var(--ntua-font);
    animation: ntua-modal-fade .15s ease;
}
.ntua-modal[hidden] { display: none; }

@keyframes ntua-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ntua-modal-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(27, 58, 107, .25), 0 4px 16px rgba(0,0,0,.1);
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
    animation: ntua-modal-pop .2s ease;
}
/* Wide variant — Account modal (extra fields, locked block) */
.ntua-modal--wide .ntua-modal-card {
    max-width: 820px;
}

@keyframes ntua-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ntua-modal-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    background: var(--ntua-brand-dgreen);   /* κυπαρίσσι — was navy */
    color: #fff;
    border-bottom: 3px solid var(--ntua-brand-gold);
}

.ntua-modal-card header h2 {
    margin: 0;
    font-family: var(--ntua-font);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

/* Modal X — defeat Astra/Elementor blue button defaults.
   White X on the dgreen header (rest); gold X on hover/focus. */
.ntua-modal-close,
.ntua-modal-close:visited {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    width: 32px;
    height: 32px;
    border-radius: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    padding: 0;
    transition: color .15s ease, transform .15s ease;
    text-shadow: none !important;
}
.ntua-modal-close:hover,
.ntua-modal-close:focus,
.ntua-modal-close:focus-visible,
.ntua-modal-close:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ntua-brand-gold) !important;
    outline: none;
    transform: scale(1.1);
}

.ntua-modal-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}

.ntua-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid rgba(27,58,107,.08);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: #fafafa;
}

/* Status row inside modal body (success/error messages) */
.ntua-modal-status {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    display: none;
}
.ntua-modal-status.is-success {
    display: block;
    background: #d9f5e0;
    color: #1c5430;
    border: 1px solid #9bd9af;
}
.ntua-modal-status.is-error {
    display: block;
    background: #fbeaea;
    color: #6B1F1F;
    border: 1px solid #ecb1b1;
}

/* Form rows shared between modals */
.ntua-modal .ntua-form-row {
    margin-bottom: 14px;
}
.ntua-modal .ntua-form-row label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ntua-brand-navy);
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}
.ntua-modal .ntua-form-row input[type="text"],
.ntua-modal .ntua-form-row input[type="email"],
.ntua-modal .ntua-form-row input[type="tel"],
.ntua-modal .ntua-form-row input[type="url"],
.ntua-modal .ntua-form-row input[type="password"],
.ntua-modal .ntua-form-row select,
.ntua-modal .ntua-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--ntua-font);
    font-size: 0.95rem;
    color: var(--ntua-brand-dgreen);
    background: #fff;
    border: 1.5px solid rgba(27,58,107,.18);
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ntua-modal .ntua-form-row input:focus,
.ntua-modal .ntua-form-row select:focus,
.ntua-modal .ntua-form-row textarea:focus {
    outline: none;
    border-color: var(--ntua-brand-gold);
    box-shadow: 0 0 0 3px rgba(197,165,114,.18);
}
.ntua-modal .ntua-form-row textarea {
    min-height: 90px;
    resize: vertical;
}

/* Read-only block — Ονοματεπώνυμο + Σχολή + Έτος + Username in account modal.
   Approved-by-Γραμματεία fields presented as a definition list, with a header
   row explaining they are locked. */
.ntua-modal-locked-block {
    margin: 0 0 18px;
    padding: 14px 16px 12px;
    background: var(--ntua-brand-ivory);
    border-radius: 10px;
    border: 1px dashed rgba(27, 58, 107, .22);
}
.ntua-modal-locked-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(27, 58, 107, .08);
}
.ntua-modal-locked-head .lock {
    color: var(--ntua-brand-gold);
    font-size: 16px;
}
.ntua-modal-locked-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b6b6b;
    font-style: italic;
    letter-spacing: 0.2px;
}
.ntua-modal-locked-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 8px;
}
.ntua-modal-locked-list .ntua-modal-locked-row {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: baseline;
    gap: 10px;
}
.ntua-modal-locked-list dt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b6b6b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ntua-modal-locked-list dd {
    margin: 0;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--ntua-brand-navy);
    line-height: 1.3;
    word-break: break-word;
}

@media (max-width: 720px) {
    .ntua-modal-locked-list {
        grid-template-columns: 1fr;
    }
    .ntua-modal-locked-list .ntua-modal-locked-row {
        grid-template-columns: 110px 1fr;
    }
}


/* Interest group section (Θεματικά / Σχολές) */
.ntua-interest-group {
    margin: 0 0 22px;
}
.ntua-interest-group + .ntua-interest-group {
    padding-top: 18px;
    border-top: 1px solid rgba(27, 58, 107, .08);
}
.ntua-interest-group-title {
    margin: 0 0 4px;
    font-family: var(--ntua-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ntua-brand-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ntua-interest-group-intro {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: #6b6b6b;
    line-height: 1.45;
}

/* Interests chip grid (used in onboarding + edit) */
/* Interests checklist — stacked vertically, one per row, no pill borders.
   The faux checkbox (drawn via label::before) keeps the visual cue for
   selected/unselected state; the row itself is plain text on hover. */
.ntua-interest-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.ntua-interest-chip {
    position: relative;
    margin: 0;
    padding: 0;
}
.ntua-interest-chip input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ntua-interest-chip label {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--ntua-brand-dgreen);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: color .12s ease;
}

.ntua-interest-chip label::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(27,58,107,.35);
    border-radius: 4px;
    background: #fff;
    transition: background-color .12s ease, border-color .12s ease;
}

.ntua-interest-chip label:hover {
    color: var(--ntua-brand-navy);
}
.ntua-interest-chip label:hover::before {
    border-color: var(--ntua-brand-gold);
}

.ntua-interest-chip input:checked + label {
    color: var(--ntua-brand-navy);
    font-weight: 700;
}
.ntua-interest-chip input:checked + label::before {
    background: var(--ntua-brand-navy);
    border-color: var(--ntua-brand-navy);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8l3.5 3.5L13 5' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.ntua-interest-chip input:focus-visible + label::before {
    box-shadow: 0 0 0 3px rgba(197,165,114,.45);
}

body.ntua-modal-open {
    overflow: hidden;
}

@media (max-width: 540px) {
    .ntua-modal { padding: 12px; }
    .ntua-modal-card { max-height: calc(100vh - 24px); }
    .ntua-modal-card header { padding: 14px 16px; }
    .ntua-modal-body { padding: 16px; }
    .ntua-modal-footer { padding: 12px 16px; }
}


/* =================================================================
 * Control Center — sidebar + main + tabs + greeting + interest chips
 * ================================================================= */

/* SIDEBAR (vertical nav, designed for a 30%-ish column) */

.ntua-cc-sidebar {
    font-family: var(--ntua-font);
    background: #fff;
    border: 1px solid rgba(27, 58, 107, .10);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 1px 6px rgba(27, 58, 107, .04);
}

.ntua-cc-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(197, 165, 114, .35);
}
.ntua-cc-sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ntua-brand-gold);
    color: var(--ntua-brand-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ntua-cc-sidebar-userinfo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ntua-cc-sidebar-greeting {
    font-size: 0.78rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ntua-cc-sidebar-name {
    font-weight: 700;
    color: var(--ntua-brand-navy);
    /* Smaller font so two-word ονοματεπώνυμα fit the sidebar column. */
    font-size: 0.86rem;
    line-height: 1.25;
    /* Allow wrap to 2 lines if needed; ellipsis on the 2nd. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ntua-cc-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ntua-cc-sidebar-list li { margin: 0; padding: 0; list-style: none; }
.ntua-cc-sidebar-divider {
    height: 1px;
    background: rgba(27, 58, 107, .08);
    margin: 6px 0;
}

/* Sidebar buttons — Astra/Elementor would force blue bg on :active. Kill all
   theme button state colors with !important, on every interactive state. */
.ntua-cc-sidebar-btn,
.ntua-cc-sidebar-btn:visited,
.ntua-cc-sidebar-btn:active {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 8px;
    text-align: left;
    color: var(--ntua-brand-dgreen) !important;
    text-decoration: none !important;
    font-family: var(--ntua-font);
    font-size: 0.93rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.ntua-cc-sidebar-btn:hover,
.ntua-cc-sidebar-btn:focus,
.ntua-cc-sidebar-btn:focus-visible {
    background: var(--ntua-brand-ivory) !important;
    background-color: var(--ntua-brand-ivory) !important;
    color: var(--ntua-brand-navy) !important;
    outline: none;
}
.ntua-cc-sidebar-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ntua-cc-sidebar-logout,
.ntua-cc-sidebar-logout:visited,
.ntua-cc-sidebar-logout:active {
    color: #8B2D2D !important;
}
.ntua-cc-sidebar-logout:hover,
.ntua-cc-sidebar-logout:focus,
.ntua-cc-sidebar-logout:focus-visible {
    background: #FBEAEA !important;
    background-color: #FBEAEA !important;
    color: #6B1F1F !important;
}

/* MAIN AREA (greeting + chips + tabs) */

.ntua-cc-main {
    font-family: var(--ntua-font);
    color: var(--ntua-brand-dgreen);
}

/* First-login: "you have a temporary password" sticky banner shown until
   _ntua_must_change_password user meta is cleared by class-ajax::change_password */
.ntua-cc-pw-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff7ed;
    border: 1px solid #f5b063;
    border-left: 5px solid #d97706;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0 0 24px;
    color: #7c2d12;
    line-height: 1.55;
}
.ntua-cc-pw-banner__icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #d97706;
    color: #fff;
    font-weight: 800;
    font-family: var(--ntua-font);
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.ntua-cc-pw-banner__body {
    flex: 1;
    font-size: 14px;
}
.ntua-cc-pw-banner__body strong {
    color: #7c2d12;
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
}
.ntua-cc-pw-banner__body em {
    font-style: normal;
    font-weight: 600;
    color: #b45309;
}
.ntua-cc-pw-banner__cta {
    flex-shrink: 0;
    background: #d97706;
    color: #fff !important;
    border: 0;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 700;
    font-family: var(--ntua-font);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.ntua-cc-pw-banner__cta:hover,
.ntua-cc-pw-banner__cta:focus,
.ntua-cc-pw-banner__cta:active {
    background: #b45309 !important;
    color: #fff !important;
}
@media (max-width: 640px) {
    .ntua-cc-pw-banner { flex-wrap: wrap; }
    .ntua-cc-pw-banner__cta { width: 100%; }
}

.ntua-cc-greeting {
    margin: 0 0 22px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid rgba(27, 58, 107, .08);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(27, 58, 107, .04);
}
.ntua-cc-greeting h1 {
    margin: 0 0 12px;
    font-family: var(--ntua-font);
    /* Reduced from 1.65rem so full ονοματεπώνυμα fit on one line. */
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ntua-brand-navy);
    line-height: 1.25;
    word-break: break-word;
}
.ntua-cc-greeting h1 span {
    color: var(--ntua-brand-dgreen);
}

.ntua-cc-interests-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.ntua-cc-interests-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}
.ntua-cc-interest-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ntua-cc-interest-chip {
    display: inline-block;
    padding: 4px 12px;
    background: var(--ntua-brand-ivory);
    color: var(--ntua-brand-navy);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}
.ntua-cc-interests-edit {
    background: transparent;
    border: 0;
    color: var(--ntua-brand-gold);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color .12s ease, color .12s ease;
}
.ntua-cc-interests-edit:hover,
.ntua-cc-interests-edit:focus-visible {
    background: var(--ntua-brand-ivory);
    color: var(--ntua-brand-navy);
    outline: none;
}
.ntua-cc-interests-empty {
    margin: 0;
    color: #777;
    font-size: 0.9rem;
}

/* TABS — Astra/Elementor give <button> a blue background by default; kill it
   with !important and apply brand-aligned styles. */

.ntua-cc-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(27, 58, 107, .08);
    flex-wrap: wrap;
}
.ntua-cc-tab {
    background: transparent !important;
    border: 0 !important;
    padding: 12px 22px;
    margin: 0;
    font-family: var(--ntua-font) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #6b6b6b !important;
    cursor: pointer;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px;
    border-radius: 8px 8px 0 0 !important;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    text-shadow: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Hover — ivory bg with navy text, prominent (no longer "faint") */
.ntua-cc-tab:hover {
    background: var(--ntua-brand-ivory) !important;
    color: var(--ntua-brand-navy) !important;
    border-bottom-color: rgba(197, 165, 114, .35) !important;
    outline: none;
}
.ntua-cc-tab:focus-visible {
    background: var(--ntua-brand-ivory) !important;
    color: var(--ntua-brand-navy) !important;
    outline: 2px solid var(--ntua-brand-gold) !important;
    outline-offset: -2px;
}
/* Active — gold filled with navy text, gold bottom accent (kept) */
.ntua-cc-tab.is-active,
.ntua-cc-tab.is-active:hover,
.ntua-cc-tab.is-active:focus-visible {
    background: var(--ntua-brand-gold) !important;
    color: var(--ntua-brand-navy) !important;
    border-bottom-color: var(--ntua-brand-gold) !important;
    font-weight: 700 !important;
}

/* Featured tab ("Για εσάς") — bolder visual presence even at rest, since
   it's the personalised landing and we want users to discover it. */
.ntua-cc-tab--featured {
    font-weight: 700 !important;
    color: var(--ntua-brand-dgreen) !important;
    background: color-mix(in srgb, var(--ntua-brand-gold) 14%, transparent) !important;
    border-color: var(--ntua-brand-gold) !important;
}
.ntua-cc-tab--featured:hover,
.ntua-cc-tab--featured:focus-visible {
    background: color-mix(in srgb, var(--ntua-brand-gold) 24%, transparent) !important;
    color: var(--ntua-brand-navy) !important;
}
.ntua-cc-tab__star {
    display: inline-block;
    margin-right: 6px;
    color: var(--ntua-brand-gold);
    font-size: 0.95em;
    transform: translateY(-1px);
    transition: color .15s ease, transform .25s ease;
}
.ntua-cc-tab--featured.is-active .ntua-cc-tab__star {
    color: var(--ntua-brand-navy);
}
.ntua-cc-tab--featured:hover .ntua-cc-tab__star {
    transform: translateY(-1px) rotate(72deg);
}

/* "Για εσάς" group headings inside the tab panel */
.ntua-cc-pane .ntua-myaccount-section + .ntua-myaccount-section {
    margin-top: 24px;
}

.ntua-cc-panes {
    background: #fff;
    border: 1px solid rgba(27, 58, 107, .08);
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 1px 6px rgba(27, 58, 107, .04);
}
.ntua-cc-pane {
    /* Hide via [hidden]; visible when .is-active */
}
.ntua-cc-pane.is-active {
    display: block;
}
.ntua-cc-pane[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .ntua-cc-greeting { padding: 18px 16px; }
    .ntua-cc-greeting h1 { font-size: 1.1rem; }
    .ntua-cc-tabs { gap: 0; }
    .ntua-cc-tab { padding: 10px 12px; font-size: 0.88rem; flex: 1; text-align: center; }
    .ntua-cc-panes { padding: 14px 12px; }
}

/* ====================================================================
 * HEADER CTAs — white, smaller, search as icon-only on the right
 * (added 2026-06-03 per SV request)
 *
 * Targets:
 *   .ntua-user-menu-login    (Σύνδεση)
 *   .ntua-user-menu-register (Εγγραφή)
 *   .ntua-search-trigger     (Αναζήτηση → magnifier-only)
 *
 * All three become white-on-transparent with a thin white border, smaller
 * footprint, pill shape (round for the search icon). On hover they fill
 * with white and the text/icon flips to navy for clear feedback against
 * the dark cypress header background (#2F4F4F).
 * ==================================================================== */

/* All 3 header CTAs (Σύνδεση, Εγγραφή, Search) share the same visual
   language: white background, brand-green text/icon at rest. On hover the
   colors flip — green bg + white text/icon — for unambiguous feedback. */
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register {
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
    border-width: 1px !important;
    color: var(--ntua-brand-dgreen) !important;
    border-color: #ffffff !important;
    background: #ffffff !important;
}
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login:hover,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login:focus-visible,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register:hover,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register:focus-visible {
    /* Fill flip: gold bg, dark-green text */
    color: var(--ntua-brand-dgreen) !important;
    background: var(--ntua-brand-gold) !important;
    border-color: var(--ntua-brand-gold) !important;
}

/* Search trigger: hide the "Αναζήτηση" label, round icon-only button.
   White bg + brand-green magnifier. Position is handled manually in
   Elementor (placed after the social icons by the user). */
.ntua-search-trigger > span {
    display: none !important;
}
.ntua-search-trigger {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
    gap: 0 !important;
    color: var(--ntua-brand-dgreen) !important;
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
}
.ntua-search-trigger:hover,
.ntua-search-trigger:focus-visible {
    /* Fill flip: gold bg, dark-green icon */
    color: var(--ntua-brand-dgreen) !important;
    background: var(--ntua-brand-gold) !important;
    border-color: var(--ntua-brand-gold) !important;
}
.ntua-search-trigger svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ====================================================================
 * THESEIS ERGASIAS — Jobs tab on /my-account/
 * Compact list of titles → external career-net links. Each row opens in
 * a new tab. School-tagged jobs come first (user's own school), then
 * general announcements (badge "Γενική").
 * ==================================================================== */
.ntua-cc-jobs {
    font-family: var(--ntua-font);
    color: var(--ntua-brand-dgreen);
}
.ntua-cc-jobs-intro {
    font-size: 0.88rem;
    color: #5f5e5a;
    margin: 0 0 16px;
}
.ntua-cc-jobs-intro a {
    color: var(--ntua-brand-navy);
    text-decoration: underline;
}
.ntua-cc-jobs-empty {
    text-align: center;
    color: #5f5e5a;
    padding: 24px 16px;
    font-size: 0.95rem;
}
.ntua-cc-jobs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ntua-cc-jobs-item {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ntua-cc-jobs-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid rgba(27, 58, 107, .08);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--ntua-brand-navy);
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.ntua-cc-jobs-link:hover,
.ntua-cc-jobs-link:focus-visible {
    background: var(--ntua-brand-ivory);
    border-color: var(--ntua-brand-gold);
    outline: none;
    transform: translateY(-1px);
}
.ntua-cc-jobs-badge {
    flex-shrink: 0;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ntua-cc-jobs-badge--general {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fbbf24;
}
.ntua-cc-jobs-title {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ntua-brand-navy);
}
.ntua-cc-jobs-date {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--ntua-brand-gold);
    font-weight: 700;
    white-space: nowrap;
}
.ntua-cc-jobs-ext {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: var(--ntua-brand-olive);
    font-weight: 700;
}
@media (max-width: 640px) {
    .ntua-cc-jobs-link { flex-wrap: wrap; gap: 8px; }
    .ntua-cc-jobs-date { width: 100%; order: 99; }
}

/* ====================================================================
 * MY ACCOUNT layout polish (2026-06-04 r2)
 *  - Full-width main area with 5% gutters
 *  - 20px breathing room below chips row + tabs row
 *  - New 4-column "grid" layout for feed posts (image on top)
 * ==================================================================== */

/* Full-width breakout — applied to the Elementor SECTION/CONTAINER that
   wraps the control center, NOT to .ntua-cc-main itself. Reason: the
   sidebar and main area live in sibling columns inside that section. If
   we widened .ntua-cc-main directly, it would overflow its column and
   visually overlap the sidebar. Expanding the parent section instead
   lets both columns grow proportionally with a 5vw gutter on the outside.
   Uses :has() — supported in all modern browsers (Chrome 105+, Safari
   15.4+, Firefox 121+). On older browsers the layout falls back to the
   default boxed Elementor section width (no harm done). */
.elementor-section:has(.ntua-cc-main),
.e-con:has(.ntua-cc-main) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    box-sizing: border-box !important;
}
/* Inside the widened section, let the inner container (which Elementor
   caps at 1140px or similar by default) also expand. */
.elementor-section:has(.ntua-cc-main) > .elementor-container,
.e-con:has(.ntua-cc-main) > .e-con-inner {
    max-width: none !important;
    width: 100% !important;
}

/* 20px breathing room below the chips row + below the tab strip. */
.ntua-cc-interests-row {
    margin-bottom: 20px !important;
}
.ntua-cc-tabs {
    margin-bottom: 20px !important;
}

/* "grid" layout for feed-block: 3 columns, image on top, title + date
   below. Used by news / events / for-you sections. (Dropped from 4 to 3
   on 2026-06-11 per PM feedback — larger cards, more eye-catching.) */
ul.ntua-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ntua-feed-grid-item {
    list-style: none;
    margin: 0;
}
.ntua-feed-grid-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(27, 58, 107, .08);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ntua-feed-grid-link:hover,
.ntua-feed-grid-link:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(27, 58, 107, .12);
    border-color: var(--ntua-brand-gold);
    outline: none;
}
.ntua-feed-grid-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ntua-brand-ivory);
}
.ntua-feed-grid-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.ntua-feed-grid-link:hover .ntua-feed-grid-thumb {
    transform: scale(1.04);
}
.ntua-feed-grid-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ntua-brand-gold);
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ntua-brand-ivory) 0%, #e8e4d8 100%);
}
.ntua-feed-grid-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.ntua-feed-grid-title {
    font-family: var(--ntua-font);
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--ntua-brand-navy);
    margin: 0;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ntua-feed-grid-date {
    margin-top: auto;
    font-size: 0.78rem;
    color: var(--ntua-brand-gold);
    font-weight: 700;
    letter-spacing: 0.3px;
}

@media (max-width: 900px) {
    ul.ntua-feed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ntua-cc-main {
        padding-left: 3vw !important;
        padding-right: 3vw !important;
    }
}
@media (max-width: 480px) {
    ul.ntua-feed-grid { grid-template-columns: 1fr; }
}

/* "Δείτε όλα..." footer link — centered standalone link below the grid. */
.ntua-myaccount-section .ntua-myaccount-section-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 24px !important;
    width: 100% !important;
    padding: 0 !important;
}
.ntua-myaccount-section .ntua-myaccount-section-footer > * {
    margin-left: auto !important;
    margin-right: auto !important;
}
.ntua-myaccount-section .ntua-myaccount-section-footer .ntua-myaccount-viewall {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--ntua-brand-gold) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: color .15s ease;
    display: inline-block !important;
}
.ntua-myaccount-section .ntua-myaccount-section-footer .ntua-myaccount-viewall:hover,
.ntua-myaccount-section .ntua-myaccount-section-footer .ntua-myaccount-viewall:focus-visible {
    color: var(--ntua-brand-dgreen) !important;
    text-decoration: underline !important;
    outline: none;
}

/* "Φόρτωσε περισσότερα" button — sits centered below each feed grid.
   Removed from DOM when the server reports no more items. */
.ntua-feed-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding: 4px 0;
}
.ntua-feed-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 2px solid var(--ntua-brand-gold);
    background: transparent;
    color: var(--ntua-brand-dgreen);
    font-family: var(--ntua-font);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.ntua-feed-loadmore-btn:hover:not(:disabled),
.ntua-feed-loadmore-btn:focus-visible:not(:disabled) {
    background: var(--ntua-brand-gold);
    color: var(--ntua-brand-dgreen);
    outline: none;
    transform: translateY(-1px);
}
.ntua-feed-loadmore-btn:disabled {
    cursor: wait;
    opacity: .75;
}
.ntua-feed-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(107, 122, 63, .3);
    border-top-color: var(--ntua-brand-olive);
    border-radius: 50%;
    animation: ntua-feed-spin .8s linear infinite;
}
.ntua-feed-spinner[hidden] {
    display: none;
}
@keyframes ntua-feed-spin {
    to { transform: rotate(360deg); }
}

/* ====================================================================
 * HORIZONTAL ACCOUNT NAV (2026-06-05)
 * Replaces the old vertical left sidebar — now a row of pill buttons
 * directly under the "Καλωσήρθατε, <name>" greeting. The Elementor
 * page should drop the left column and use the control_center shortcode
 * full width.
 * ==================================================================== */
.ntua-cc-nav-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    align-items: center;
}
.ntua-cc-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1.5px solid rgba(27, 58, 107, .15);
    border-radius: 999px;
    background: var(--ntua-brand-ivory) !important;
    color: var(--ntua-brand-navy) !important;
    font-family: var(--ntua-font);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    line-height: 1.2;
}
.ntua-cc-nav-btn:hover,
.ntua-cc-nav-btn:focus-visible,
.ntua-cc-nav-btn:active {
    background: var(--ntua-brand-gold) !important;
    color: var(--ntua-brand-dgreen) !important;
    border-color: var(--ntua-brand-gold) !important;
    outline: none;
    transform: translateY(-1px);
}
.ntua-cc-nav-icon {
    font-size: 1rem;
    line-height: 1;
}
/* SVG icons inside nav buttons inherit the button text colour (currentColor),
   so the password key turns white automatically on the dgreen button. */
.ntua-cc-nav-icon svg {
    display: block;
}
/* "Αλλαγή κωδικού" — κυπαρισσί (dgreen) filled, white text + white key icon. */
.ntua-cc-nav-btn--password {
    background: var(--ntua-brand-dgreen) !important;
    color: var(--ntua-brand-white) !important;
    border-color: var(--ntua-brand-dgreen) !important;
}
.ntua-cc-nav-btn--password:hover,
.ntua-cc-nav-btn--password:focus-visible {
    background: #243c34 !important;   /* slightly darker dgreen on hover */
    color: var(--ntua-brand-white) !important;
    border-color: #243c34 !important;
}
/* Logout pulled right, slightly different tone to mark it as terminal action. */
.ntua-cc-nav-logout {
    margin-left: auto !important;
}
.ntua-cc-nav-logout:hover,
.ntua-cc-nav-logout:focus-visible {
    background: var(--ntua-brand-dgreen) !important;
    color: var(--ntua-brand-ivory) !important;
    border-color: var(--ntua-brand-dgreen) !important;
}
@media (max-width: 768px) {
    .ntua-cc-nav-horizontal {
        gap: 8px;
    }
    .ntua-cc-nav-btn {
        font-size: 0.82rem;
        padding: 8px 12px;
    }
    .ntua-cc-nav-logout {
        margin-left: 0 !important;
    }
}

/* Testimonial post navigation — boundary case relabel.
 *
 * The ThePlusAddons widget runs through post-types-order (menu_order DESC),
 * which produces the OPPOSITE of the editor's mental model:
 *
 *   Editor expects (user-order ASC by menu_order):
 *     PREV  = lower menu_order  = ← arrow on LEFT
 *     NEXT  = higher menu_order = → arrow on RIGHT
 *
 *   Widget produces (default order DESC by menu_order):
 *     prev anchor = HIGHER menu_order (rendered LEFT with ←)
 *     next anchor = LOWER  menu_order (rendered RIGHT with →)
 *
 * On the middle pages we swap href+img+name between the two anchors via the
 * PHP render_content filter (see ntua-alumni.php::swap_testimonial_nav_html).
 * On the boundary pages only one anchor exists, so there's no payload swap
 * to do — we need to RELABEL the surviving anchor instead:
 *
 *   - On the NEWEST post (only widget-`.post-next` rendered):
 *       widget shows "→ NEXT = older post" on the LEFT.
 *       Editor wants "← PREV = older post" on the LEFT.
 *       → flip the arrow → keep on LEFT.
 *
 *   - On the OLDEST post (only widget-`.post-prev` rendered):
 *       widget shows "← PREV = newer post" on the LEFT.
 *       Editor wants "→ NEXT = newer post" on the RIGHT.
 *       → flip the arrow → push to RIGHT.
 */
.single-alumni_testimonials .tp-post-nav > .post-next:only-child {
    /* keep on the LEFT side (default) */
    margin-left: 0 !important;
    float: left !important;
}
.single-alumni_testimonials .tp-post-nav > .post-next:only-child .next-post-content b {
    font-size: 0;
    position: relative;
}
.single-alumni_testimonials .tp-post-nav > .post-next:only-child .next-post-content b::before {
    content: "←";
    font-size: 1rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

.single-alumni_testimonials .tp-post-nav.tp-row > .post-prev:only-child {
    margin-left: 50% !important;
    float: right !important;
}
.single-alumni_testimonials .tp-post-nav > .post-prev:only-child {
    margin-left: auto !important;
}
.single-alumni_testimonials .tp-post-nav > .post-prev:only-child .prev-post-content b {
    font-size: 0;
    position: relative;
}
.single-alumni_testimonials .tp-post-nav > .post-prev:only-child .prev-post-content b::before {
    content: "→";
    font-size: 1rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

/* ====================================================================
 * MY ACCOUNT hero banner (2026-06-05)
 *   - Below the global header, above all account UI
 *   - Full viewport width with the Averof image as bg
 *   - Brand-tinted overlay so the title stays legible
 *   - Title perfectly centered (both axes)
 *
 * The hero lives inside .ntua-cc-main which already has 5vw side padding;
 * we use negative margins + 100vw to escape that padding and span the
 * whole viewport.
 * ==================================================================== */
.ntua-cc-hero {
    position: relative;
    width: 100vw !important;
    margin-left: -5vw !important;
    margin-right: -5vw !important;
    margin-top: -20px !important;   /* eat any top padding from .ntua-cc-main */
    margin-bottom: 30px !important;
    /* 60vh matches the site-wide inner-page hero convention (Astra/Elementor
       sections use min_height:60vh). ~2× our previous 380px cap, per request.
       Floor of 420px keeps it presentable on short landscape viewports. */
    height: 60vh;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--ntua-brand-dgreen); /* fallback while images load */
}
/* Two stacked background slides. The animation cycle is 16s total —
   each image is fully visible for ~6s, with a 2s crossfade. The two
   slides run the same keyframes shifted by half a cycle so they
   alternate. */
.ntua-cc-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: ntua-cc-hero-fade 16s infinite ease-in-out;
    will-change: opacity;
}
.ntua-cc-hero__slide--1 {
    background-image: url('https://alumni-staging.iwh.gr/wp-content/uploads/2026/06/myaccount.png');
    animation-delay: 0s;
}
.ntua-cc-hero__slide--2 {
    background-image: url('https://alumni-staging.iwh.gr/wp-content/uploads/2026/06/my-account2.jpg');
    animation-delay: -8s; /* half cycle ahead → opposite phase */
}
@keyframes ntua-cc-hero-fade {
    0%, 37.5%   { opacity: 1; }   /* visible 6s */
    50%, 87.5%  { opacity: 0; }   /* hidden  6s */
    100%        { opacity: 1; }   /* back on  */
}
/* Respect users who prefer reduced motion — freeze on the first slide. */
@media (prefers-reduced-motion: reduce) {
    .ntua-cc-hero__slide { animation: none; }
    .ntua-cc-hero__slide--2 { opacity: 0; }
}
/* Overlay removed 2026-06-13 — no text sits on the hero anymore, so the
   photo shows clean with no tint/blur. Rule kept as a no-op in case the
   span lingers in cached markup. */
.ntua-cc-hero__overlay {
    display: none !important;
}
.ntua-cc-hero__title {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--ntua-brand-white);
    font-family: var(--ntua-font);
    font-size: clamp(1.75rem, 4.2vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
}

@media (max-width: 768px) {
    .ntua-cc-hero {
        margin-left: -3vw !important;
        margin-right: -3vw !important;
        height: clamp(180px, 36vw, 260px);
    }
}

/* Header user menu — hide the silhouette icon inside the login button and
 * force matching dimensions with the register button. Both buttons should
 * read as a balanced pair on the homepage menu bar. */
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login .ntua-user-menu-icon {
    display: none !important;
}
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-login,
.ntua-user-menu[data-state="logged-out"] .ntua-user-menu-register {
    min-width: 110px;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 8px 18px;       /* equal padding so the two pills match exactly */
}

/* ====================================================================
 * [ntua_testimonial_nav] — custom prev/next navigation widget for the
 * single alumni_testimonials template. Replaces ThePlusAddons /
 * Elementor Pro post-navigation widgets which order by post_date and
 * collide with post-types-order's menu_order sort.
 * ==================================================================== */
.ntua-tn {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 32px 0;
    padding: 0;
}
.ntua-tn__link {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 18px;
    background: var(--ntua-brand-ivory);
    border-radius: 12px;
    text-decoration: none !important;
    color: var(--ntua-brand-navy);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 3px rgba(27,58,107,.06);
}
.ntua-tn__link:hover,
.ntua-tn__link:focus-visible {
    background: var(--ntua-brand-gold);
    color: var(--ntua-brand-dgreen) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(27,58,107,.14);
    outline: none;
}
.ntua-tn__link--next {
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
}
.ntua-tn__link--prev {
    text-align: left;
}
.ntua-tn__link--empty {
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    visibility: hidden;
}

.ntua-tn__arrow {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ntua-brand-gold);
    flex-shrink: 0;
    transition: color .15s ease, transform .15s ease;
}
.ntua-tn__link:hover .ntua-tn__arrow {
    color: var(--ntua-brand-dgreen);
}
.ntua-tn__link--prev:hover .ntua-tn__arrow--left {
    transform: translateX(-3px);
}
.ntua-tn__link--next:hover .ntua-tn__arrow--right {
    transform: translateX(3px);
}

.ntua-tn__photo-wrap {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--ntua-brand-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ntua-tn__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ntua-tn__photo--placeholder {
    color: var(--ntua-brand-gold);
    font-size: 1.6rem;
    font-weight: 700;
}

.ntua-tn__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ntua-tn__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ntua-brand-gold);
    line-height: 1.2;
}
.ntua-tn__link:hover .ntua-tn__label {
    color: var(--ntua-brand-dgreen);
}
.ntua-tn__name {
    font-size: 1rem;
    font-weight: 700;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

@media (max-width: 600px) {
    .ntua-tn {
        flex-direction: column;
        gap: 10px;
    }
    .ntua-tn__link--empty { display: none; }
    .ntua-tn__link--next { justify-content: flex-start; text-align: left; flex-direction: row; }
    .ntua-tn__photo-wrap { width: 56px; height: 56px; }
}

/* Language switcher (EL|EN) */
.ntua-lang-switcher{display:inline-flex;gap:.5rem;list-style:none;margin:0;padding:0;align-items:center;font-family:var(--ntua-font)}
.ntua-lang-switcher .ntua-lang-item a{display:inline-block;padding:2px 6px;text-decoration:none;color:var(--ntua-brand-ivory);font-weight:600;border-radius:3px;line-height:1}
.ntua-lang-switcher .ntua-lang-item.is-current a{color:var(--ntua-brand-gold)}
.ntua-lang-switcher .ntua-lang-item a:hover{color:var(--ntua-brand-gold)}
.ntua-lang-switcher .ntua-lang-item + .ntua-lang-item{border-left:1px solid rgba(241,238,230,.4);padding-left:.6rem}