/* ================================================================
   icons.css — Self-hosted icon system (no CDN needed)
   Uses CSS + Unicode for all icons used on SEBS website
   ================================================================ */

/* Base icon class */
[class*="fa-"] { 
    display: inline-block; 
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', sans-serif;
}

/* ── If Font Awesome CDN fails, use emoji/unicode fallbacks ─── */
.icon-fallback [class*="fa-"]::before { content: ''; }

/* Navigation & UI */
.fa-bars::before          { content: '☰'; font-size: 1.1em; }
.fa-xmark::before         { content: '✕'; }
.fa-chevron-down::before  { content: '▾'; }
.fa-chevron-right::before { content: '›'; font-size: 1.2em; }

/* Social Media */
.fa-facebook-f::before    { content: 'f'; font-weight: bold; font-family: serif; }
.fa-instagram::before     { content: '📷'; font-size: 0.85em; }
.fa-youtube::before       { content: '▶'; }

/* Notice & Info */
.fa-bullhorn::before      { content: '📢'; font-size: 0.85em; }
.fa-bell::before          { content: '🔔'; font-size: 0.85em; }
.fa-circle-info::before   { content: 'ℹ'; font-size: 1.1em; }
.fa-triangle-exclamation::before { content: '⚠'; }
.fa-check-circle::before  { content: '✓'; font-weight: bold; }
.fa-circle-exclamation::before { content: '!'; font-weight: bold; }
.fa-circle-xmark::before  { content: '✗'; font-weight: bold; }
.fa-circle-check::before  { content: '✓'; font-weight: bold; }

/* Contact */
.fa-house::before         { content: '🏠'; font-size: 0.85em; }
.fa-phone::before         { content: '📞'; font-size: 0.85em; }
.fa-envelope::before      { content: '✉'; font-size: 0.85em; }
.fa-location-dot::before  { content: '📍'; font-size: 0.85em; }
.fa-clock::before         { content: '🕐'; font-size: 0.85em; }

/* Academic */
.fa-graduation-cap::before { content: '🎓'; font-size: 0.85em; }
.fa-book-open::before     { content: '📖'; font-size: 0.85em; }
.fa-book::before          { content: '📚'; font-size: 0.85em; }

/* Admin & Actions */
.fa-plus::before          { content: '+'; font-weight: bold; font-size: 1.1em; }
.fa-trash::before         { content: '🗑'; font-size: 0.85em; }
.fa-upload::before        { content: '↑'; font-weight: bold; font-size: 1.1em; }
.fa-floppy-disk::before   { content: '💾'; font-size: 0.85em; }
.fa-pen-to-square::before { content: '✏'; font-size: 0.9em; }
.fa-gear::before          { content: '⚙'; font-size: 0.9em; }
.fa-key::before           { content: '🔑'; font-size: 0.85em; }
.fa-right-to-bracket::before { content: '→'; font-weight: bold; }
.fa-right-from-bracket::before { content: '←'; font-weight: bold; }
.fa-globe::before         { content: '🌐'; font-size: 0.85em; }
.fa-gauge::before         { content: '📊'; font-size: 0.85em; }
.fa-images::before        { content: '🖼'; font-size: 0.85em; }
.fa-film::before          { content: '🎬'; font-size: 0.85em; }
.fa-sitemap::before       { content: '🏛'; font-size: 0.85em; }
.fa-users::before         { content: '👥'; font-size: 0.85em; }
.fa-user-plus::before     { content: '👤+'; font-size: 0.8em; }
.fa-star::before          { content: '★'; color: rgb(177,28,28); }
.fa-money-bill-wave::before { content: '💰'; font-size: 0.85em; }
.fa-file-pen::before      { content: '📝'; font-size: 0.85em; }
.fa-calendar-days::before { content: '📅'; font-size: 0.85em; }
.fa-table::before         { content: '⊞'; font-size: 0.9em; }
.fa-table-cells::before   { content: '⊟'; font-size: 0.9em; }
.fa-search::before, .fa-magnifying-glass::before { content: '🔍'; font-size: 0.85em; }
.fa-print::before         { content: '🖨'; font-size: 0.85em; }
.fa-paper-plane::before   { content: '✈'; font-size: 0.85em; }
.fa-sliders::before       { content: '⚙'; font-size: 0.9em; }
.fa-user-graduate::before { content: '🎓'; font-size: 0.85em; }
.fa-chalkboard-user::before { content: '👨‍🏫'; font-size: 0.85em; }
.fa-school::before        { content: '🏫'; font-size: 0.85em; }
.fa-crown::before         { content: '👑'; font-size: 0.85em; }
.fa-building::before      { content: '🏢'; font-size: 0.85em; }
.fa-shoe-prints::before   { content: '👣'; font-size: 0.85em; }
.fa-share-nodes::before   { content: '🔗'; font-size: 0.85em; }
.fa-list::before          { content: '☰'; font-size: 0.9em; }
.fa-arrow-left::before    { content: '←'; font-weight: bold; }

/* ── SOCIAL ICON CIRCLES (always work) ────────────────────── */
.facebook, .instagram, .youtube {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff !important;
    text-decoration: none;
    transition: transform 0.2s;
}
.facebook  { background: rgb(24,119,242); }
.instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.youtube   { background: #FF0000; }

/* Override FA icons inside social circles with letter fallbacks */
.facebook::after  { content: 'f'; font-family: serif; font-size: 18px; font-weight: bold; }
.instagram::after { content: '◉'; font-size: 16px; }
.youtube::after   { content: '▶'; font-size: 16px; }

/* Hide the <i> tag inside social links since we use ::after */
.facebook i, .instagram i, .youtube i { display: none; }