/**
 * /comAssets/css/site-theme.css
 *
 * Public website styles for logos-institute.org
 * RTL Arabic — Cairo font — warm brown/gold palette inspired by the logo.
 *
 * Sections:
 *   1.  CSS custom properties
 *   2.  Base / reset
 *   3.  Typography
 *   4.  Top navbar
 *   5.  Hero section
 *   6.  Section layout helpers
 *   7.  Institute cards (landing page)
 *   8.  Content cards
 *   9.  Program curriculum tables
 *   10. Faculty cards
 *   11. Registration & fees
 *   12. Contact page
 *   13. Footer
 *   14. Utilities
 *   15. Responsive overrides
 *
 * @version 1.2.0
 */


/* ═══════════════════════════════════════════════════════════════
   1. CSS custom properties
════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand palette ── */
    --brown-dark   : #3e1f0f;   /* deep espresso  */
    --brown-mid    : #6b3a2a;   /* primary brown  */
    --brown-light  : #9c5a3c;   /* warm sienna    */
    --gold-dark    : #8a6512;   /* deep gold      */
    --gold-mid     : #c4962a;   /* primary gold   */
    --gold-light   : #e8c46a;   /* pale gold      */
    --cream-dark   : #e8d5b0;   /* warm tan       */
    --cream-mid    : #f5ecd7;   /* cream          */
    --cream-light  : #faf6f0;   /* off-white      */

    /* ── Institute accent colours ── */
    --logos-primary  : var(--brown-mid);
    --logos-accent   : var(--gold-mid);
    --melkite-primary: #1a3a6b;   /* Byzantine blue  */
    --melkite-accent : #c9a227;   /* Byzantine gold  */
    --biblical-primary: #1a4d2e;  /* deep green      */
    --biblical-accent : #d4a017;  /* scroll gold     */

    /* ── UI tokens ── */
    --text-primary  : #1a0a00;
    --text-secondary: #5a3a1a;
    --text-muted    : #8a6a4a;
    --text-light    : #ffffff;
    --bg-page       : var(--cream-light);
    --bg-section-alt: var(--cream-mid);
    --border-color  : var(--cream-dark);
    --shadow-sm     : 0 2px 8px rgba(62,31,15,.08);
    --shadow-md     : 0 4px 20px rgba(62,31,15,.12);
    --shadow-lg     : 0 8px 40px rgba(62,31,15,.18);

    /* ── Navbar ── */
    --nav-bg        : var(--brown-dark);
    --nav-height    : 68px;
    --nav-text      : rgba(255,255,255,.85);
    --nav-text-hover: #ffffff;
    --nav-active    : var(--gold-light);

    /* ── Spacing ── */
    --section-py    : 5rem;
    --section-py-sm : 3rem;

    /* ── Border radius ── */
    --radius-sm : 8px;
    --radius-md : 14px;
    --radius-lg : 22px;
    --radius-xl : 32px;

    /* ── Transitions ── */
    --transition: 0.25s ease;
}


/* ═══════════════════════════════════════════════════════════════
   2. Base / reset
════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size      : 16px;
}

body {
    font-family     : 'Cairo', 'Segoe UI', sans-serif;
    background-color: var(--bg-page);
    color           : var(--text-primary);
    direction       : rtl;
    text-align      : right;
    padding-top     : var(--nav-height);
    line-height     : 1.75;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height   : auto;
    display  : block;
}

a {
    color          : var(--brown-mid);
    text-decoration: none;
    transition     : color var(--transition);
}

a:hover {
    color: var(--gold-dark);
}


/* ═══════════════════════════════════════════════════════════════
   3. Typography
════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color      : var(--brown-dark);
    line-height: 1.4;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.2rem; }

.section-title {
    font-size    : clamp(1.6rem, 3vw, 2.4rem);
    font-weight  : 800;
    color        : var(--brown-dark);
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-size    : 1.05rem;
    color        : var(--text-muted);
    margin-bottom: 2.5rem;
    max-width    : 640px;
    margin-inline: auto;
}

.section-divider {
    width           : 60px;
    height          : 4px;
    background      : linear-gradient(90deg, var(--gold-mid), var(--gold-light));
    border-radius   : 99px;
    margin-block    : 1rem 2rem;
    margin-inline   : auto;
}

/* Verse banner */
.verse-banner {
    position   : relative;
    z-index    : 1;
    background : linear-gradient(135deg, var(--cream-mid), var(--cream-dark));
    border-top : 3px solid var(--gold-mid);
    border-bottom: 1px solid var(--cream-dark);
    padding    : 0.75rem 1.5rem;
    text-align : center;
    font-size  : 0.95rem;
    color      : var(--brown-dark);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   4. Top navbar
════════════════════════════════════════════════════════════════ */

.site-navbar {
    position        : fixed;
    top             : 0;
    inset-inline    : 0;
    z-index         : 1050;
    height          : var(--nav-height);
    background-color: var(--nav-bg);
    display         : flex;
    align-items     : center;
    box-shadow      : 0 2px 12px rgba(0,0,0,.25);
    transition      : background-color var(--transition), box-shadow var(--transition);
}

.site-navbar.scrolled {
    background-color: rgba(62,31,15,.97);
    box-shadow      : 0 4px 20px rgba(0,0,0,.3);
}

.site-navbar .container {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    width          : 100%;
    max-width      : 1280px;
    margin-inline  : auto;
    padding-inline : 1.25rem;
}

/* Brand */
.site-navbar .navbar-brand {
    display    : flex;
    align-items: center;
    gap        : 0.75rem;
    color      : var(--nav-text-hover) !important;
    font-size  : 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.site-navbar .navbar-brand img {
    width : 40px;
    height: 40px;
    object-fit: contain;
}

/* Nav links */
.site-navbar .nav-links {
    display    : flex;
    align-items: center;
    gap        : 0.25rem;
    list-style : none;
    margin     : 0;
    padding    : 0;
}

.site-navbar .nav-links a {
    display      : block;
    padding      : 0.4rem 0.85rem;
    color        : var(--nav-text);
    font-size    : 0.95rem;
    font-weight  : 600;
    border-radius: var(--radius-sm);
    transition   : color var(--transition), background-color var(--transition);
    white-space  : nowrap;
}

.site-navbar .nav-links a:hover,
.site-navbar .nav-links a.active {
    color           : var(--nav-text-hover);
    background-color: rgba(255,255,255,.1);
}

.site-navbar .nav-links a.active {
    color: var(--gold-light);
}

/* CTA button in nav */
.site-navbar .nav-cta {
    background   : linear-gradient(135deg, var(--gold-mid), var(--gold-dark));
    color        : #ffffff !important;
    border-radius: var(--radius-sm);
    padding      : 0.45rem 1.1rem !important;
}

.site-navbar .nav-cta:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-mid)) !important;
}

/* Hamburger toggle */
.site-navbar .nav-toggle {
    display         : none;
    flex-direction  : column;
    justify-content : center;
    gap             : 5px;
    background      : none;
    border          : none;
    cursor          : pointer;
    padding         : 6px;
    border-radius   : var(--radius-sm);
}

.site-navbar .nav-toggle span {
    display         : block;
    width           : 24px;
    height          : 2px;
    background-color: var(--nav-text-hover);
    border-radius   : 99px;
    transition      : transform var(--transition), opacity var(--transition);
}

/* Mobile nav drawer */
.site-navbar .nav-drawer {
    display         : none;
    position        : fixed;
    top             : var(--nav-height);
    inset-inline    : 0;
    background-color: var(--brown-dark);
    padding         : 1rem 1.25rem 1.5rem;
    box-shadow      : 0 8px 20px rgba(0,0,0,.3);
    z-index         : 1049;
}

.site-navbar .nav-drawer.open {
    display: block;
}

.site-navbar .nav-drawer .nav-links {
    flex-direction: column;
    align-items   : stretch;
    gap           : 0.25rem;
}

.site-navbar .nav-drawer .nav-links a {
    padding  : 0.65rem 1rem;
    font-size: 1.05rem;
}


/* ═══════════════════════════════════════════════════════════════
   5. Hero section
════════════════════════════════════════════════════════════════ */

.site-hero {
    position        : relative;
    background-color: var(--brown-dark);
    background-image: linear-gradient(160deg, var(--brown-dark) 0%, var(--brown-mid) 60%, var(--brown-light) 100%);
    color           : #ffffff;
    padding         : 5rem 1.25rem 4rem;
    text-align      : center;
    overflow        : hidden;
}

/* Hero background image — will be replaced with real photo */
.site-hero::before {
    content            : '';
    position           : absolute;
    inset              : 0;
    background-color   : rgba(62,31,15,.55);
    pointer-events     : none;
    z-index            : 0;
}

.site-hero .hero-inner {
    position: relative;
    z-index : 1;
    max-width: 680px;
    margin-inline: auto;
}

.site-hero .hero-logo {
    width        : 130px;
    height       : 130px;
    object-fit   : contain;
    margin-inline: auto;
    margin-bottom: 1.5rem;
    filter       : drop-shadow(0 4px 16px rgba(0,0,0,.5));
    border-radius: var(--radius-md);
    background   : rgba(255,255,255,.08);
    padding      : 6px;
}

.site-hero h1 {
    color        : #ffffff;
    margin-bottom: 0.25rem;
    font-size    : clamp(2rem, 5vw, 3rem);
}

.site-hero .hero-tagline {
    color        : var(--gold-light);
    font-size    : 1.1rem;
    font-weight  : 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.site-hero .hero-subtitle {
    font-size    : 1.05rem;
    color        : rgba(255,255,255,.85);
    margin-bottom: 2.25rem;
    line-height  : 1.9;
}

.site-hero .hero-actions {
    display        : flex;
    gap            : 1rem;
    justify-content: center;
    flex-wrap      : wrap;
}

/* Stats strip */
.stats-bg {
    background: var(--brown-dark);
    border-top : 1px solid rgba(255,255,255,.08);
}

.stats-bg .stats-strip {
    padding-block: 2rem;
}

.stats-bg .stat-item .stat-number {
    color: var(--gold-light);
}

.stats-bg .stat-item .stat-label {
    color: rgba(255,255,255,.65);
}

.stat-divider {
    width           : 1px;
    height          : 48px;
    background      : rgba(255,255,255,.15);
    align-self      : center;
}


/* ═══════════════════════════════════════════════════════════════
   5b. About split
════════════════════════════════════════════════════════════════ */

.about-split {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 3.5rem;
    align-items          : center;
}

.about-visual .about-img-wrap {
    position     : relative;
    border-radius: var(--radius-lg);
    overflow     : hidden;
    aspect-ratio : 4 / 3;
    background   : var(--cream-dark);
    box-shadow   : var(--shadow-lg);
}

/* Placeholder until real image is supplied */
.img-placeholder {
    width          : 100%;
    height         : 100%;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 0.75rem;
    background     : linear-gradient(135deg, var(--cream-mid), var(--cream-dark));
    color          : var(--text-muted);
}

.img-placeholder i {
    font-size: 3.5rem;
    opacity  : 0.4;
}

.img-placeholder span {
    font-size  : 0.9rem;
    font-weight: 600;
    opacity    : 0.5;
}

.about-badge {
    position        : absolute;
    bottom          : 1.25rem;
    right           : 1.25rem;
    background      : var(--brown-dark);
    color           : var(--gold-light);
    padding         : 0.5rem 1rem;
    border-radius   : var(--radius-sm);
    font-weight     : 700;
    font-size       : 0.9rem;
    display         : flex;
    align-items     : center;
    gap             : 0.5rem;
    box-shadow      : var(--shadow-md);
}

.about-text p {
    color        : var(--text-secondary);
    margin-bottom: 1rem;
    font-size    : 1.02rem;
}

.about-features {
    list-style: none;
    padding   : 0;
    margin    : 1.5rem 0 0;
}

.about-features li {
    display    : flex;
    align-items: center;
    gap        : 0.75rem;
    padding    : 0.5rem 0;
    font-size  : 0.97rem;
    color      : var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.about-features li:last-child {
    border-bottom: none;
}

.about-features i {
    color     : var(--gold-mid);
    font-size : 1.1rem;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   5c. Goals grid
════════════════════════════════════════════════════════════════ */

.goals-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 1.5rem;
    direction            : rtl;
}

@media (max-width: 991px) {
    .goals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .goals-grid {
        grid-template-columns: 1fr;
    }
}

.goal-card {
    background   : #ffffff;
    border-radius: var(--radius-md);
    box-shadow   : var(--shadow-sm);
    padding      : 2rem 1.5rem;
    text-align   : center;
    transition   : transform var(--transition), box-shadow var(--transition);
}

.goal-card:hover {
    transform : translateY(-4px);
    box-shadow: var(--shadow-md);
}

.goal-icon-wrap {
    width          : 64px;
    height         : 64px;
    border-radius  : 50%;
    background     : linear-gradient(135deg, var(--cream-mid), var(--cream-dark));
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-inline  : auto;
    margin-bottom  : 1.25rem;
    font-size      : 1.6rem;
    color          : var(--gold-mid);
    box-shadow     : 0 4px 12px rgba(196,150,42,.2);
}

.goal-card h4 {
    font-size    : 1.05rem;
    color        : var(--brown-dark);
    margin-bottom: 0.5rem;
}

.goal-card p {
    font-size  : 0.9rem;
    color      : var(--text-muted);
    line-height: 1.7;
    margin     : 0;
}


/* ═══════════════════════════════════════════════════════════════
   5d. CTA banner
════════════════════════════════════════════════════════════════ */

.cta-banner {
    background   : linear-gradient(135deg, var(--brown-dark) 0%, var(--brown-mid) 100%);
    padding-block: 4rem;
}

.cta-banner .container {
    max-width    : 1200px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.cta-inner {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 2rem;
    flex-wrap      : wrap;
}

.cta-text h2 {
    color        : #ffffff;
    font-size    : clamp(1.4rem, 3vw, 2rem);
    margin-bottom: 0.5rem;
}

.cta-text p {
    color  : rgba(255,255,255,.75);
    margin : 0;
    font-size: 1rem;
}

.cta-actions {
    display  : flex;
    gap      : 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   Responsive additions
════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .about-split {
        grid-template-columns: 1fr;
    }

    .about-visual {
        max-width: 480px;
        margin-inline: auto;
    }

    .cta-inner {
        flex-direction: column;
        text-align    : center;
    }
}


/* ═══════════════════════════════════════════════════════════════
   6. Section layout helpers
════════════════════════════════════════════════════════════════ */

.site-section {
    padding-block: var(--section-py);
}

.site-section.alt {
    background-color: var(--bg-section-alt);
}

.site-section .container {
    max-width    : 1200px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.section-header {
    text-align   : center;
    margin-bottom: 3rem;
}


/* ═══════════════════════════════════════════════════════════════
   7. Institute cards (landing page)
════════════════════════════════════════════════════════════════ */

.institute-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap                  : 1.75rem;
}

.institute-card {
    background   : #ffffff;
    border-radius: var(--radius-lg);
    box-shadow   : var(--shadow-md);
    overflow     : hidden;
    display      : flex;
    flex-direction: column;
    transition   : transform var(--transition), box-shadow var(--transition);
}

.institute-card:hover {
    transform : translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.institute-card .card-band {
    height    : 6px;
}

.institute-card.logos    .card-band { background: linear-gradient(90deg, var(--logos-primary),   var(--logos-accent)); }
.institute-card.melkite  .card-band { background: linear-gradient(90deg, var(--melkite-primary),  var(--melkite-accent)); }
.institute-card.biblical .card-band { background: linear-gradient(90deg, var(--biblical-primary), var(--biblical-accent)); }

.institute-card .card-body {
    padding    : 2rem 1.75rem 1.5rem;
    flex       : 1;
    display    : flex;
    flex-direction: column;
    align-items: center;
    text-align : center;
}

.institute-card .card-icon {
    width        : 72px;
    height       : 72px;
    object-fit   : contain;
    margin-bottom: 1.25rem;
    filter       : drop-shadow(0 2px 6px rgba(0,0,0,.1));
}

.institute-card h3 {
    font-size    : 1.25rem;
    margin-bottom: 0.75rem;
}

.institute-card.logos    h3 { color: var(--logos-primary);   }
.institute-card.melkite  h3 { color: var(--melkite-primary);  }
.institute-card.biblical h3 { color: var(--biblical-primary); }

.institute-card p {
    font-size    : 0.95rem;
    color        : var(--text-secondary);
    margin-bottom: 1.5rem;
    flex         : 1;
}

.institute-card .card-footer {
    padding         : 0 1.75rem 1.75rem;
    background      : none;
    border          : none;
}

.institute-card .btn-enter {
    display      : block;
    width        : 100%;
    padding      : 0.65rem 1rem;
    border-radius: var(--radius-sm);
    font-weight  : 700;
    font-size    : 1rem;
    text-align   : center;
    transition   : filter var(--transition), transform var(--transition);
}

.institute-card .btn-enter:hover {
    filter   : brightness(1.1);
    transform: translateY(-1px);
}

.institute-card.logos    .btn-enter { background: var(--logos-primary);   color: #fff; }
.institute-card.melkite  .btn-enter { background: var(--melkite-primary);  color: #fff; }
.institute-card.biblical .btn-enter { background: var(--biblical-primary); color: #fff; }


/* ═══════════════════════════════════════════════════════════════
   8. Content cards (about, goals etc.)
════════════════════════════════════════════════════════════════ */

.content-card {
    background   : #ffffff;
    border-radius: var(--radius-md);
    box-shadow   : var(--shadow-sm);
    padding      : 2rem;
    border-inline-start: 4px solid var(--gold-mid);
}

.goal-list {
    list-style : none;
    padding    : 0;
    margin     : 0;
}

.goal-list li {
    display    : flex;
    gap        : 0.75rem;
    align-items: flex-start;
    padding    : 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.goal-list li:last-child {
    border-bottom: none;
}

.goal-list .goal-icon {
    color      : var(--gold-mid);
    font-size  : 1.25rem;
    margin-top : 0.15rem;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   9. Program curriculum tables
════════════════════════════════════════════════════════════════ */

.program-tabs {
    display        : flex;
    gap            : 0.5rem;
    justify-content: center;
    flex-wrap      : wrap;
    margin-bottom  : 2rem;
}

.program-tab-btn {
    padding      : 0.5rem 1.5rem;
    border-radius: var(--radius-sm);
    border       : 2px solid var(--border-color);
    background   : #ffffff;
    font-weight  : 700;
    font-size    : 0.95rem;
    cursor       : pointer;
    transition   : all var(--transition);
    color        : var(--text-secondary);
}

.program-tab-btn.active,
.program-tab-btn:hover {
    border-color: var(--gold-mid);
    background  : var(--gold-mid);
    color       : #ffffff;
}

.program-panel {
    display: none;
}

.program-panel.active {
    display: block;
}

.curriculum-year {
    margin-bottom: 2rem;
}

.curriculum-year h4 {
    color        : var(--brown-mid);
    font-size    : 1.1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cream-dark);
}

.curriculum-table {
    width          : 100%;
    border-collapse: collapse;
    background     : #ffffff;
    border-radius  : var(--radius-md);
    overflow       : hidden;
    box-shadow     : var(--shadow-sm);
}

.curriculum-table th {
    background  : var(--brown-mid);
    color       : #ffffff;
    padding     : 0.75rem 1rem;
    font-size   : 0.95rem;
    text-align  : center;
    font-weight : 700;
}

.curriculum-table td {
    padding    : 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size  : 0.95rem;
    vertical-align: top;
    text-align : right;
}

.curriculum-table tr:last-child td {
    border-bottom: none;
}

.curriculum-table tr:nth-child(even) td {
    background: var(--cream-light);
}


/* ═══════════════════════════════════════════════════════════════
   10. Faculty cards
════════════════════════════════════════════════════════════════ */

.faculty-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap                  : 1.5rem;
}

.faculty-card {
    background   : #ffffff;
    border-radius: var(--radius-md);
    box-shadow   : var(--shadow-sm);
    overflow     : hidden;
    text-align   : center;
    transition   : transform var(--transition), box-shadow var(--transition);
    cursor       : pointer;
}

.faculty-card:hover {
    transform : translateY(-4px);
    box-shadow: var(--shadow-md);
}

.faculty-card .faculty-photo {
    width       : 100%;
    aspect-ratio: 16 / 9;
    object-fit  : cover;
    object-position: center top;
}

.faculty-card .faculty-body {
    padding: 1rem;
}

.faculty-card .faculty-name {
    font-size    : 1rem;
    font-weight  : 700;
    color        : var(--brown-dark);
    margin-bottom: 0.4rem;
}

.faculty-card .faculty-bio {
    font-size  : 0.85rem;
    color      : var(--text-muted);
    line-height: 1.6;
    display    : -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow   : hidden;
}


/* ═══════════════════════════════════════════════════════════════
   11. Registration & fees
════════════════════════════════════════════════════════════════ */

.semester-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap                  : 1.25rem;
    margin-bottom        : 2rem;
}

.semester-card {
    background   : #ffffff;
    border-radius: var(--radius-md);
    box-shadow   : var(--shadow-sm);
    padding      : 1.5rem;
    text-align   : center;
    border-top   : 4px solid var(--gold-mid);
}

.semester-card .sem-icon {
    font-size    : 2rem;
    margin-bottom: 0.5rem;
}

.semester-card h4 {
    color        : var(--brown-mid);
    font-size    : 1.05rem;
    margin-bottom: 0.4rem;
}

.semester-card p {
    font-size: 0.875rem;
    color    : var(--text-muted);
    margin   : 0;
}

.fee-table {
    width          : 100%;
    border-collapse: collapse;
    background     : #ffffff;
    border-radius  : var(--radius-md);
    overflow       : hidden;
    box-shadow     : var(--shadow-sm);
}

.fee-table th {
    background: var(--brown-mid);
    color     : #ffffff;
    padding   : 0.75rem 1.25rem;
    font-weight: 700;
}

.fee-table td {
    padding     : 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.fee-table tr:last-child td {
    border-bottom: none;
}

.payment-methods {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap                  : 1rem;
    margin-top           : 1.5rem;
}

.payment-method {
    background   : #ffffff;
    border-radius: var(--radius-md);
    padding      : 1.25rem;
    text-align   : center;
    box-shadow   : var(--shadow-sm);
    border       : 1px solid var(--border-color);
}

.payment-method .pm-name {
    font-weight  : 700;
    color        : var(--brown-mid);
    font-size    : 1rem;
    margin-bottom: 0.25rem;
}

.payment-method .pm-detail {
    font-size: 0.85rem;
    color    : var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   12. Contact page
════════════════════════════════════════════════════════════════ */

.contact-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 2rem;
}

.contact-info .info-item {
    display      : flex;
    align-items  : flex-start;
    gap          : 1rem;
    padding      : 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.contact-info .info-item:last-child {
    border-bottom: none;
}

.contact-info .info-icon {
    font-size  : 1.4rem;
    color      : var(--gold-mid);
    flex-shrink: 0;
    margin-top : 0.1rem;
}

.contact-info .info-label {
    font-weight: 700;
    color      : var(--brown-dark);
    font-size  : 0.9rem;
}

.contact-info .info-value {
    font-size: 0.95rem;
    color    : var(--text-secondary);
    direction: ltr;
    text-align: left;
}

.contact-form .form-control {
    border-radius   : var(--radius-sm);
    border          : 1px solid var(--border-color);
    padding         : 0.75rem 1rem;
    font-family     : 'Cairo', sans-serif;
    font-size       : 0.95rem;
    background-color: #ffffff;
    color           : var(--text-primary);
    width           : 100%;
    transition      : border-color var(--transition), box-shadow var(--transition);
}

.contact-form .form-control:focus {
    outline     : none;
    border-color: var(--gold-mid);
    box-shadow  : 0 0 0 3px rgba(196,150,42,.15);
}

.contact-form textarea.form-control {
    min-height: 130px;
    resize    : vertical;
}

.contact-form .form-label {
    font-weight  : 600;
    font-size    : 0.9rem;
    color        : var(--text-secondary);
    margin-bottom: 0.4rem;
    display      : block;
}

.contact-form .form-group {
    margin-bottom: 1.25rem;
}

.whatsapp-list {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.whatsapp-list li {
    display      : flex;
    align-items  : center;
    gap          : 0.75rem;
    padding      : 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size    : 0.95rem;
}

.whatsapp-list li:last-child {
    border-bottom: none;
}

.whatsapp-list .wa-icon {
    color    : #25d366;
    font-size: 1.2rem;
}

.whatsapp-list .wa-name {
    font-weight: 600;
    color      : var(--brown-dark);
}

.whatsapp-list .wa-number {
    direction : ltr;
    color     : var(--text-muted);
    font-size : 0.875rem;
    margin-inline-start: auto;
}


/* ═══════════════════════════════════════════════════════════════
   13. Footer
════════════════════════════════════════════════════════════════ */

.site-footer {
    background-color: var(--brown-dark);
    color           : rgba(255,255,255,.75);
    padding-block   : 3rem 1.5rem;
}

.site-footer .footer-grid {
    display              : grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap                  : 2.5rem;
    max-width            : 1200px;
    margin-inline        : auto;
    padding-inline       : 1.25rem;
    margin-bottom        : 2.5rem;
}

.site-footer .footer-brand img {
    width        : 56px;
    margin-bottom: 0.75rem;
}

.site-footer .footer-brand p {
    font-size  : 0.9rem;
    line-height: 1.7;
    color      : rgba(255,255,255,.65);
}

.site-footer h5 {
    color        : var(--gold-light);
    font-size    : 0.95rem;
    font-weight  : 700;
    margin-bottom: 1rem;
}

.site-footer .footer-links {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.site-footer .footer-links li {
    margin-bottom: 0.5rem;
}

.site-footer .footer-links a {
    color    : rgba(255,255,255,.65);
    font-size: 0.9rem;
    transition: color var(--transition);
}

.site-footer .footer-links a:hover {
    color: var(--gold-light);
}

.site-footer .footer-social {
    display: flex;
    gap    : 0.75rem;
    margin-top: 1rem;
}

.site-footer .social-btn {
    width          : 38px;
    height         : 38px;
    border-radius  : 50%;
    background     : rgba(255,255,255,.1);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : rgba(255,255,255,.8);
    font-size      : 1rem;
    transition     : background var(--transition), color var(--transition);
}

.site-footer .social-btn:hover {
    background: var(--gold-mid);
    color     : #ffffff;
}

.site-footer .footer-bottom {
    border-top    : 1px solid rgba(255,255,255,.1);
    padding-top   : 1.25rem;
    text-align    : center;
    font-size     : 0.85rem;
    color         : rgba(255,255,255,.45);
    max-width     : 1200px;
    margin-inline : auto;
    padding-inline: 1.25rem;
}


/* ═══════════════════════════════════════════════════════════════
   14. Utilities
════════════════════════════════════════════════════════════════ */

/* Buttons */
.btn-primary-site {
    display      : inline-flex;
    align-items  : center;
    gap          : 0.5rem;
    padding      : 0.7rem 1.75rem;
    border-radius: var(--radius-sm);
    font-weight  : 700;
    font-size    : 1rem;
    background   : linear-gradient(135deg, var(--brown-mid), var(--brown-dark));
    color        : #ffffff;
    border       : none;
    cursor       : pointer;
    transition   : filter var(--transition), transform var(--transition);
}

.btn-primary-site:hover {
    color    : #ffffff;
    filter   : brightness(1.12);
    transform: translateY(-1px);
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-mid), var(--gold-dark));
    color     : #ffffff;
}

.btn-outline-site {
    background   : transparent;
    border       : 2px solid rgba(255,255,255,.6);
    color        : #ffffff;
    padding      : 0.65rem 1.75rem;
    border-radius: var(--radius-sm);
    font-weight  : 700;
    font-size    : 1rem;
    cursor       : pointer;
    transition   : all var(--transition);
}

.btn-outline-site:hover {
    background  : rgba(255,255,255,.1);
    border-color: #ffffff;
    color       : #ffffff;
}

/* Alert / notice */
.site-notice {
    background   : var(--cream-mid);
    border-inline-start: 4px solid var(--gold-mid);
    border-radius: var(--radius-sm);
    padding      : 1rem 1.25rem;
    font-size    : 0.95rem;
    color        : var(--brown-dark);
}

/* Stats strip */
.stats-strip {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
    gap            : 2rem;
    padding-block  : 2.5rem;
}

.stat-item {
    text-align: center;
}

.stat-item .stat-number {
    font-size  : 2.2rem;
    font-weight: 800;
    color      : var(--gold-mid);
    line-height: 1;
}

.stat-item .stat-label {
    font-size: 0.9rem;
    color    : var(--text-muted);
    margin-top: 0.25rem;
}


/* ═══════════════════════════════════════════════════════════════
   15. Responsive overrides
════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    :root {
        --section-py: var(--section-py-sm);
    }

    .site-navbar .nav-links {
        display: none;
    }

    .site-navbar .nav-toggle {
        display: flex;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
    }

    .institute-grid {
        grid-template-columns: 1fr;
    }

    .faculty-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-strip {
        gap: 1.25rem;
    }
}