/* Custom CSS for Trinity Workforce Solutions */

/* ─── Root Scale System ───────────────────────────────────────────────────
   Base font-size on :root controls the entire rem scale.
   16px = 100% (default desktop).
   Each breakpoint shrinks it moderately (10–20%) so all rem-based
   sizes — fonts, padding, gaps, border-radius, etc. — shrink in unison.
   ─────────────────────────────────────────────────────────────────────── */
:root {
    font-size: 16px; /* Desktop baseline */

    /* Brand colours as variables for consistency */
    --color-blue:   #1b405f;
    --color-orange: #f78510;
    --color-gray:   #545454;
    --color-light:  #6b7280;
    --color-border: #e5e7eb;
}

/* Laptop: 1025px – 1350px → ~12% smaller */
@media (min-width: 1025px) and (max-width: 1350px) {
    :root { font-size: 14px; }
}

/* Tablet: 768px – 1024px → ~16% smaller */
@media (min-width: 768px) and (max-width: 1024px) {
    :root { font-size: 13.5px; }
}

/* Mobile: below 768px → ~19% smaller */
@media (max-width: 767px) {
    :root { font-size: 13px; }
}

/* ─── Global Reset ───────────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem; /* inherits from :root — scales with breakpoints */
    overflow-x: hidden;
    line-height: 1.6;
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(1.875rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-3.125rem); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(3.125rem); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.05); opacity: 0.8; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-1.25rem); }
}

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

@keyframes shimmer {
    0%   { background-position: -62.5rem 0; }
    100% { background-position:  62.5rem 0; }
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes floatParticle {
    0%, 100% { transform: translate(0, 0) scale(1);               opacity: 0; }
    10%       { opacity: 0.5; }
    90%       { opacity: 0.5; }
    50%       { transform: translate(6.25rem, -6.25rem) scale(1.5); }
}

/* Animation utility classes */
.animate-fade-in-up     { animation: fadeInUp     0.8s ease-out forwards; opacity: 0; }
.animate-fade-in        { animation: fadeIn       0.8s ease-out forwards; opacity: 0; }
.animate-slide-in-left  { animation: slideInLeft  0.8s ease-out forwards; opacity: 0; }
.animate-slide-in-right { animation: slideInRight 0.8s ease-out forwards; opacity: 0; }

/* ─── Hero – Rotating Text ───────────────────────────────────────────────── */
.rotating-text-wrapper {
    position: relative;
    display: inline-block;
    min-height: 1.2em;
}

.rotating-text {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(1.25rem);
    transition: all 0.5s ease;
}

.rotating-text.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
}

/* ─── Particles Background ───────────────────────────────────────────────── */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: floatParticle 15s infinite ease-in-out;
}

/* ─── Floating Elements ──────────────────────────────────────────────────── */
.floating-element                { position: absolute; animation: float 6s ease-in-out infinite; }
.floating-element:nth-child(2)   { animation-delay: 1s;  animation-duration: 7s;   }
.floating-element:nth-child(3)   { animation-delay: 2s;  animation-duration: 8s;   }
.floating-element:nth-child(4)   { animation-delay: 3s;  animation-duration: 6.5s; }

/* ─── Service Cards ──────────────────────────────────────────────────────── */
.service-card {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(247, 133, 16, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before { left: 100%; }
.service-card:hover          { transform: translateY(-0.625rem); }

.service-card .card-expanded {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.service-card:hover .card-expanded { max-height: 18.75rem; }

/* ─── Industry Cards ─────────────────────────────────────────────────────── */
.industry-card       { transform: translateY(0); transition: all 0.3s ease; }
.industry-card:hover { transform: translateY(-0.625rem); }

/* ─── Counter Animation ──────────────────────────────────────────────────── */
.counter { display: inline-block; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; z-index: 1; }

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: -1;
}

.btn:hover::before { width: 18.75rem; height: 18.75rem; }

/* ─── Loading Spinner ────────────────────────────────────────────────────── */
.spinner {
    border: 0.1875rem solid rgba(255, 255, 255, 0.3);
    border-top: 0.1875rem solid var(--color-orange);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    animation: spin 1s linear infinite;
}

/* ─── Toast Notifications ────────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    transform: translateY(1.25rem);
    transition: all 0.3s ease;
    z-index: 9999;
    font-size: 0.9rem;
}

.toast.show    { opacity: 1; transform: translateY(0); }
.toast.success { border-left: 0.25rem solid #10b981; }
.toast.error   { border-left: 0.25rem solid #ef4444; }
.toast.info    { border-left: 0.25rem solid #3b82f6; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal      { transition: all 0.3s ease; }
.modal.show { display: flex !important; }

/* ─── Form Styles ────────────────────────────────────────────────────────── */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0.125rem solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-orange);
    box-shadow: 0 0 0 0.1875rem rgba(247, 133, 16, 0.1);
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-blue);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover { box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.15); }

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.625rem);
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.progress-bar {
    height: 0.25rem;
    background: var(--color-border);
    border-radius: 0.125rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-blue), var(--color-orange));
    transition: width 0.3s ease;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-primary   { background: var(--color-blue);   color: white; }
.badge-secondary { background: var(--color-gray);   color: white; }
.badge-accent    { background: var(--color-orange);  color: white; }

.divider {
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
    margin: 2rem 0;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track  { background: #f1f1f1; }
::-webkit-scrollbar-thumb  { background: var(--color-blue); border-radius: 0.3125rem; }
::-webkit-scrollbar-thumb:hover { background: var(--color-orange); }

/* ─── Responsive fine-tuning ─────────────────────────────────────────────── */

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .service-card:hover .card-expanded { max-height: none; }

    .toast {
        bottom: 1.5rem;
        right: 1.5rem;
        left: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .service-card .card-expanded { max-height: none !important; }

    .toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }

    .card { border-radius: 0.75rem; }
}

/* ─── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .no-print { display: none !important; }
}

/* ─── Accessibility ──────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

*:focus-visible  { outline: 0.125rem solid var(--color-orange); outline-offset: 0.125rem; }
::selection      { background: var(--color-orange); color: white; }
::-moz-selection { background: var(--color-orange); color: white; }