/*
 * ANITS — Custom Stylesheet
 * Framework: UIkit 3
 * --------------------------------------------------------
 * Table of Contents:
 *   1. Design Tokens
 *   2. Skip Navigation (Accessibility)
 *   3. Navbar
 *   4. Hero Section
 *   5. About Section
 *   6. Services Section
 *   7. Contact Section
 *   8. CTA Section
 *   9. Footer
 *  10. Back to Top
 *  11. Utilities
 *  12. Reduced Motion
 * --------------------------------------------------------
 */

/* ========================================================
   1. Design Tokens
   ======================================================== */

:root {
    /* Brand colours */
    --anits-blue:        #1e87f0;
    --anits-purple:      #5c35d4;
    --anits-orange:      #f0700a;
    --anits-teal:        #00a8c6;
    --anits-green:       #28a745;
    --anits-violet:      #8e24aa;
    --anits-rose:        #d81b60;
    --anits-amber:       #f5a623;

    /* Service card tints (background for icon pills) */
    --tint-blue:         #e8f4fe;
    --tint-purple:       #eeebfb;
    --tint-orange:       #fef0e4;
    --tint-teal:         #e0f7fb;
    --tint-green:        #e6f7ea;
    --tint-violet:       #f4e8f9;
    --tint-rose:         #fce8f2;
    --tint-amber:        #fef6e7;

    /* Typography */
    --text-muted:        #666;
    --text-body:         #333;

    /* Spacing */
    --card-border-radius: 4px;
    --icon-pill-size:     46px;
    --icon-pill-radius:   10px;
}

/* ========================================================
   2. Skip Navigation (Accessibility)
   ======================================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--anits-blue);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: 4px;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* ========================================================
   3. Navbar
   ======================================================== */

.anits-navbar {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.anits-logo {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--anits-blue) !important;
    text-decoration: none;
}

.anits-logo:hover {
    opacity: 0.85;
}

.anits-navbar .uk-navbar-nav > li > a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-body);
    transition: color 0.15s;
}

.anits-navbar .uk-navbar-nav > li > a:hover,
.anits-navbar .uk-navbar-nav > li.uk-active > a {
    color: var(--anits-blue);
}

.anits-nav-cta {
    font-size: 0.85rem !important;
    padding: 6px 18px !important;
    height: auto !important;
    line-height: 1.5 !important;
    border-radius: 20px !important;
    margin-left: 12px;
}

/* ========================================================
   4. Hero Section
   ======================================================== */

.hero-section {
    padding-top: 80px; /* compensate for sticky nav height */
}

.hero-section img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}

.hero-section .uk-label {
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-section h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

/* ========================================================
   5. About Section
   ======================================================== */

.about-section img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ========================================================
   6. Services Section
   ======================================================== */

/* Remove the double padding added by services.php legacy wrapper */
.services-section .uk-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* Section badge */
.anits-section-badge {
    display: inline-block;
    background: var(--anits-blue);
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Service cards */
.anits-service-card {
    border-top: 3px solid transparent;
    height: 100%;
    transition: box-shadow 0.2s, transform 0.2s;
}

.anits-service-card:hover {
    transform: translateY(-3px);
}

/* Per-card accent colours */
.anits-service-card--blue   { border-top-color: var(--anits-blue); }
.anits-service-card--purple { border-top-color: var(--anits-purple); }
.anits-service-card--orange { border-top-color: var(--anits-orange); }
.anits-service-card--teal   { border-top-color: var(--anits-teal); }
.anits-service-card--green  { border-top-color: var(--anits-green); }
.anits-service-card--violet { border-top-color: var(--anits-violet); }
.anits-service-card--rose   { border-top-color: var(--anits-rose); }
.anits-service-card--amber  { border-top-color: var(--anits-amber); }

/* Icon pill container */
.anits-icon-pill {
    width: var(--icon-pill-size);
    height: var(--icon-pill-size);
    border-radius: var(--icon-pill-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.anits-icon-pill--blue   { background: var(--tint-blue);   color: var(--anits-blue); }
.anits-icon-pill--purple { background: var(--tint-purple); color: var(--anits-purple); }
.anits-icon-pill--orange { background: var(--tint-orange); color: var(--anits-orange); }
.anits-icon-pill--teal   { background: var(--tint-teal);   color: var(--anits-teal); }
.anits-icon-pill--green  { background: var(--tint-green);  color: var(--anits-green); }
.anits-icon-pill--violet { background: var(--tint-violet); color: var(--anits-violet); }
.anits-icon-pill--rose   { background: var(--tint-rose);   color: var(--anits-rose); }
.anits-icon-pill--amber  { background: var(--tint-amber);  color: var(--anits-amber); }

.anits-service-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.anits-service-card p {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Digital Transformation capstone card */
.anits-dt-card {
    margin-top: 28px;
}

.anits-dt-icon-pill {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.anits-dt-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
}

.anits-dt-card p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    max-width: 560px;
    margin: 0;
}

/* ========================================================
   7. Contact Section
   ======================================================== */

.contact-section .uk-card {
    height: 100%;
}

.contact-section .uk-card h3 {
    margin-bottom: 16px;
}

.contact-section .uk-card p {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form labels */
.anits-form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 5px;
    letter-spacing: 0.01em;
}

/* Form response message */
#contact-response {
    display: none;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-top: 16px;
}

#contact-response.success {
    display: block;
    background: #e6f7ea;
    color: #1a5e2a;
    border: 1px solid #28a745;
}

#contact-response.error {
    display: block;
    background: #fce8e8;
    color: #7b1212;
    border: 1px solid #dc3545;
}

/* ========================================================
   8. CTA Section
   ======================================================== */

.cta-section {
    /* Intentionally minimal — UIkit secondary provides the background */
}

/* ========================================================
   9. Footer
   ======================================================== */

.anits-footer {
    /* UIkit secondary section provides the dark background */
}

.anits-footer-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s;
}

.anits-footer-links a:hover {
    color: #fff;
}

.anits-footer-links li {
    margin-bottom: 6px;
}

.anits-footer p {
    font-size: 0.875rem;
}

/* ========================================================
  10. Back to Top Button
   ======================================================== */

.anits-totop {
    background: var(--anits-blue);
    color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.anits-totop.uk-active {
    opacity: 1;
    pointer-events: auto;
}

.anits-totop:hover {
    background: #1670c4;
    transform: translateY(-2px);
}

/* ========================================================
  11. Utilities
   ======================================================== */

.uk-section-muted .uk-text-lead {
    color: var(--text-muted);
}

/* Ensure section heading lead text stays readable on muted bg */
.uk-section-muted p.uk-text-lead {
    color: #555;
}

/* ========================================================
  12. Reduced Motion
   ======================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .anits-service-card:hover {
        transform: none;
    }
}