/* =================================================================
 * Samuel Akpo — Portfolio Enhancements
 * ================================================================= */

/* -----------------------------------------------------------------
 * Custom scrollbar
 * ----------------------------------------------------------------- */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:var(--color-1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--color-1-dark)}

/* -----------------------------------------------------------------
 * Design tokens
 * ----------------------------------------------------------------- */
:root{
    --enh-navy        :#0f172a;
    --enh-slate       :#1e293b;
    --enh-card-bg     :#ffffff;
    --enh-card-border :rgba(0,0,0,.07);
    --enh-card-shadow :0 2px 8px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.04);
    --enh-card-shadow-hover:0 4px 16px rgba(0,0,0,.10),0 16px 48px rgba(0,0,0,.08);
    --enh-radius      :12px;
    --enh-radius-sm   :6px;
    --enh-accent      :var(--color-1);
    --enh-transition  :0.25s cubic-bezier(0.4,0,0.2,1);
    --enh-gradient    :linear-gradient(135deg,var(--color-1) 0%,#e85d04 100%);
    --enh-text        :var(--color-gray-19);
    --enh-bg          :var(--color-gray-1);
    --enh-section-bg  :#f8f9fa;
}

/* -----------------------------------------------------------------
 * Dark mode tokens
 * ----------------------------------------------------------------- */
[data-theme="dark"]{
    --enh-card-bg     :#1e293b;
    --enh-card-border :rgba(255,255,255,.08);
    --enh-card-shadow :0 2px 8px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.2);
    --enh-card-shadow-hover:0 4px 20px rgba(0,0,0,.4),0 16px 48px rgba(0,0,0,.3);
    --enh-navy        :#020817;
    --enh-bg          :#0f172a;
    --enh-text        :#e2e8f0;
    --enh-section-bg  :#0f172a;
    --color-body-bg   :#0f172a;
    --color-text      :#e2e8f0;
    --color-text-light:#94a3b8;
    --color-border    :rgba(255,255,255,.1);
}

[data-theme="dark"] body{background:#0f172a;color:#e2e8f0}
[data-theme="dark"] .s-about{color:#e2e8f0}
[data-theme="dark"] .s-about__list li{background:#1e293b;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .s-blog{background:#0f172a}
[data-theme="dark"] .section-header .text-display-title,
[data-theme="dark"] .enh-project-card__title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4{color:#f1f5f9}
[data-theme="dark"] p,[data-theme="dark"] .attention-getter{color:#94a3b8}
[data-theme="dark"] .pull-quote{background:#1e293b;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .pull-quote blockquote p{color:#cbd5e1}
[data-theme="dark"] .s-blog__post{background:#1e293b;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .enh-contact-form input,
[data-theme="dark"] .enh-contact-form textarea{background:#1e293b;border-color:rgba(255,255,255,.12);color:#e2e8f0}
[data-theme="dark"] .enh-contact-form label{color:#94a3b8}
[data-theme="dark"] .enh-skill-bar-label{color:#94a3b8}
[data-theme="dark"] .enh-skill-bar-wrap{background:rgba(255,255,255,.1)}
[data-theme="dark"] .enh-stat__label{color:rgba(255,255,255,.4)}

/* -----------------------------------------------------------------
 * Body & base
 * ----------------------------------------------------------------- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .3s,color .3s}

/* -----------------------------------------------------------------
 * Dark mode toggle button
 * ----------------------------------------------------------------- */
.enh-dark-toggle{
    background:none;
    border:1.5px solid rgba(255,255,255,.2);
    border-radius:99px;
    color:var(--color-gray-14);
    cursor:pointer;
    font-size:1.6rem;
    height:3.2rem;
    width:3.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    transition:all var(--enh-transition);
    line-height:1;
}
.enh-dark-toggle:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}

/* -----------------------------------------------------------------
 * Open to work badge
 * ----------------------------------------------------------------- */
.enh-open-badge{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    background:rgba(22,163,74,.15);
    border:1px solid rgba(22,163,74,.35);
    color:#16a34a;
    border-radius:99px;
    padding:.4em 1.1em;
    font-size:1.3rem;
    font-weight:700;
    letter-spacing:.04em;
}
.enh-open-badge::before{
    content:'';
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#16a34a;
    animation:enh-pulse 1.8s infinite;
    flex-shrink:0;
}
@keyframes enh-pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(1.3)}
}

/* -----------------------------------------------------------------
 * Typing cursor
 * ----------------------------------------------------------------- */
.enh-cursor{
    display:inline-block;
    width:3px;
    height:.85em;
    background:var(--color-1);
    border-radius:2px;
    margin-left:2px;
    vertical-align:middle;
    animation:enh-blink .7s step-end infinite;
}
@keyframes enh-blink{0%,100%{opacity:1}50%{opacity:0}}

/* -----------------------------------------------------------------
 * Navigation refined
 * ----------------------------------------------------------------- */
.s-header__menu-links a{position:relative;transition:color var(--enh-transition);letter-spacing:.04em}
.s-header__menu-links a::after{content:'';position:absolute;bottom:4px;left:1.2rem;right:1.2rem;height:2px;background:var(--enh-gradient);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--enh-transition)}
.s-header__menu-links a:hover::after,.s-header__menu-links .current a::after{transform:scaleX(1)}
.s-header__menu-links a:hover{color:#ffffff}

/* -----------------------------------------------------------------
 * Scroll-reveal animation
 * ----------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .65s ease,transform .65s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* -----------------------------------------------------------------
 * Section header accent
 * ----------------------------------------------------------------- */
.section-header[data-num]::before{background:var(--enh-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.12}
.section-header .text-display-title::after{content:'';display:block;width:48px;height:3px;background:var(--enh-gradient);border-radius:2px;margin-top:1.2rem}

/* -----------------------------------------------------------------
 * Stats row
 * ----------------------------------------------------------------- */
.enh-stats{display:flex;gap:2.4rem;flex-wrap:wrap;margin:var(--vspace-2) 0 var(--vspace-3);padding:var(--vspace-1_5) var(--vspace-2);background:var(--enh-navy);border-radius:var(--enh-radius)}
.enh-stat{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:120px}
.enh-stat__number{font-family:var(--font-2);font-size:clamp(2.8rem,4vw,4.4rem);font-weight:400;line-height:1;background:var(--enh-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.4rem}
.enh-stat__label{font-size:1.3rem;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.08em;text-transform:uppercase}

/* -----------------------------------------------------------------
 * About text
 * ----------------------------------------------------------------- */
.s-about .attention-getter:first-of-type{font-size:clamp(1.8rem,2.2vw,2.2rem);line-height:1.65;font-weight:400;color:var(--color-3)}

/* -----------------------------------------------------------------
 * Experience list cards
 * ----------------------------------------------------------------- */
.s-about__list li{border-radius:var(--enh-radius-sm);padding:var(--vspace-0_75) var(--vspace-1);margin-bottom:var(--vspace-0_625);background:var(--enh-card-bg);border:1px solid var(--enh-card-border);box-shadow:var(--enh-card-shadow);transition:box-shadow var(--enh-transition),transform var(--enh-transition);position:relative;overflow:hidden}
.s-about__list li::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--enh-gradient);border-radius:3px 0 0 3px}
.s-about__list li:hover{box-shadow:var(--enh-card-shadow-hover);transform:translateX(3px)}
.s-about__list li span[style*="color:#888"]{display:inline-block;background:rgba(199,62,29,.09);color:var(--color-1)!important;font-size:1.15rem!important;font-weight:600;letter-spacing:.04em;padding:.15em .7em;border-radius:99px;margin-left:.5em}

/* -----------------------------------------------------------------
 * Certifications
 * ----------------------------------------------------------------- */
#certifications .s-about__list li{display:flex;align-items:center;gap:1rem}
#certifications .s-about__list li::after{content:'↗';margin-left:auto;font-size:1.4rem;color:var(--color-1);opacity:0;transition:opacity var(--enh-transition);flex-shrink:0}
#certifications .s-about__list li:hover::after{opacity:1}
#certifications .s-about__list li a{font-weight:500;color:var(--color-3);text-decoration:none;border-bottom:none;transition:color var(--enh-transition);flex:1}
#certifications .s-about__list li a:hover{color:var(--color-1)}
#certifications .s-about__list li span[style*="color:#888"]{font-size:1.1rem!important;background:rgba(47,53,43,.07);color:var(--color-2-light)!important;padding:.1em .6em;border-radius:99px;white-space:nowrap;margin-left:0}

/* -----------------------------------------------------------------
 * Skills proficiency bars
 * ----------------------------------------------------------------- */
.enh-skills{display:flex;flex-direction:column;gap:var(--vspace-0_75)}
.enh-skill-group{display:flex;flex-direction:column;gap:.5rem}
.enh-skill-bar-label{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-2-lighter);margin-bottom:.2rem}
.enh-skill-bar-wrap{width:100%;background:rgba(0,0,0,.07);border-radius:99px;height:6px;overflow:hidden;margin-bottom:.6rem}
.enh-skill-bar{height:100%;background:var(--enh-gradient);border-radius:99px;width:0%;transition:width .9s cubic-bezier(.4,0,.2,1)}
.enh-skill-tags{display:flex;flex-wrap:wrap;gap:.6rem}
.enh-skill-group__label{display:none} /* hidden — bar label replaces it */

/* Skill tags */
.enh-tag{display:inline-block;padding:.35em .9em;border-radius:99px;font-size:1.3rem;font-weight:500;line-height:1.4;transition:all var(--enh-transition);cursor:default;border:1px solid transparent}
.enh-tag--cloud{background:rgba(199,62,29,.08);color:var(--color-1-dark);border-color:rgba(199,62,29,.2)}
.enh-tag--cloud:hover{background:var(--color-1);color:white;border-color:var(--color-1)}
.enh-tag--devops{background:rgba(47,53,43,.07);color:var(--color-2);border-color:rgba(47,53,43,.15)}
.enh-tag--devops:hover{background:var(--color-2);color:white;border-color:var(--color-2)}
.enh-tag--lang{background:rgba(15,23,42,.06);color:var(--enh-navy);border-color:rgba(15,23,42,.12)}
.enh-tag--lang:hover{background:var(--enh-navy);color:white}
.enh-tag--iac{background:rgba(125,60,152,.07);color:#7d3c98;border-color:rgba(125,60,152,.18)}
.enh-tag--iac:hover{background:#7d3c98;color:white}
.enh-tag--container{background:rgba(0,114,195,.07);color:#0072c3;border-color:rgba(0,114,195,.18)}
.enh-tag--container:hover{background:#0072c3;color:white}
.enh-tag--monitor{background:rgba(39,174,96,.08);color:#1a7a3f;border-color:rgba(39,174,96,.2)}
.enh-tag--monitor:hover{background:#27ae60;color:white}

/* -----------------------------------------------------------------
 * Project cards
 * ----------------------------------------------------------------- */
.enh-project-card{background:var(--enh-card-bg);border-radius:var(--enh-radius);border:1px solid var(--enh-card-border);box-shadow:var(--enh-card-shadow);padding:var(--vspace-1_5);display:flex;flex-direction:column;gap:var(--vspace-0_625);transition:box-shadow var(--enh-transition),transform var(--enh-transition);position:relative;overflow:hidden}
.enh-project-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--enh-gradient);border-radius:var(--enh-radius) var(--enh-radius) 0 0;transform:scaleX(0);transform-origin:left;transition:transform var(--enh-transition)}
.enh-project-card:hover::before{transform:scaleX(1)}
.enh-project-card:hover{box-shadow:var(--enh-card-shadow-hover);transform:translateY(-4px)}
.enh-project-card__icon{width:48px;height:48px;border-radius:var(--enh-radius-sm);background:var(--enh-gradient);display:flex;align-items:center;justify-content:center;color:white;font-size:2.2rem;margin-bottom:var(--vspace-0_375);flex-shrink:0}
.enh-project-card__title{font-family:var(--font-1);font-size:var(--text-md);font-weight:700;color:var(--color-3);margin:0;line-height:1.3}
.enh-project-card__body{font-size:var(--text-sm);color:var(--color-text-light);line-height:1.7;flex:1;margin:0}
.enh-project-card__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.enh-project-card__tag{font-size:1.15rem;font-weight:600;letter-spacing:.04em;padding:.2em .7em;border-radius:99px;background:rgba(199,62,29,.08);color:var(--color-1-dark);border:1px solid rgba(199,62,29,.15)}
.enh-project-card__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:var(--vspace-0_5);align-items:center}
.enh-project-card__actions .btn--stroke{border-radius:var(--enh-radius-sm)}
.enh-project-card__preview-btn{background:rgba(199,62,29,.06);border-color:rgba(199,62,29,.25)!important}
.enh-projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:calc(var(--gutter)*2);margin-top:var(--vspace-2)}
.enh-repos-loading{color:var(--color-text-light);font-style:italic;font-size:var(--text-sm);padding:var(--vspace-1) 0}

/* -----------------------------------------------------------------
 * Testimonials
 * ----------------------------------------------------------------- */
.pull-quote{background:var(--enh-card-bg);border-radius:var(--enh-radius);border:1px solid var(--enh-card-border);box-shadow:var(--enh-card-shadow);padding:var(--vspace-1_75) var(--vspace-1_5) var(--vspace-1_25);position:relative;transition:box-shadow var(--enh-transition),transform var(--enh-transition);margin:0}
.pull-quote:hover{box-shadow:var(--enh-card-shadow-hover);transform:translateY(-4px)}
.pull-quote::before{content:'\201C';position:absolute;top:var(--vspace-0_75);left:var(--vspace-1_25);font-family:var(--font-2);font-size:7rem;line-height:1;color:var(--color-1);opacity:.15;pointer-events:none}
.pull-quote blockquote{border:none;padding:0;margin:0}
.pull-quote blockquote p{font-size:var(--text-sm);line-height:1.75;color:var(--color-3);font-style:italic;margin-bottom:var(--vspace-0_75)}
.pull-quote blockquote footer{display:flex;align-items:center;gap:.8rem}
.pull-quote blockquote footer::before{content:'';display:inline-block;width:24px;height:2px;background:var(--enh-gradient);border-radius:2px;flex-shrink:0}
.pull-quote blockquote cite{font-size:1.3rem;font-weight:600;font-style:normal;letter-spacing:.04em;color:var(--color-1)}

/* -----------------------------------------------------------------
 * Blog posts
 * ----------------------------------------------------------------- */
.s-blog__post{background:var(--enh-card-bg);border-radius:var(--enh-radius);border:1px solid var(--enh-card-border);box-shadow:var(--enh-card-shadow);padding:var(--vspace-1_25) var(--vspace-1_5);transition:box-shadow var(--enh-transition),transform var(--enh-transition);position:relative;overflow:hidden}
.s-blog__post::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--enh-gradient)}
.s-blog__post:hover{box-shadow:var(--enh-card-shadow-hover);transform:translateY(-3px)}
.s-blog__post-title a{text-decoration:none;color:var(--color-3);transition:color var(--enh-transition)}
.s-blog__post-title a:hover{color:var(--color-1)}

/* -----------------------------------------------------------------
 * Contact form
 * ----------------------------------------------------------------- */
.enh-contact-form{max-width:720px}
.enh-form-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}
.enh-form-field{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}
.enh-form-field label{font-size:1.2rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-2)}
.enh-form-field input,
.enh-form-field textarea{width:100%;padding:1.2rem 1.4rem;border:1.5px solid var(--enh-card-border);border-radius:var(--enh-radius-sm);font-family:var(--font-1);font-size:var(--text-sm);color:var(--color-3);background:var(--enh-card-bg);outline:none;transition:border-color var(--enh-transition),box-shadow var(--enh-transition)}
.enh-form-field input:focus,
.enh-form-field textarea:focus{border-color:var(--color-1);box-shadow:0 0 0 3px rgba(199,62,29,.12)}
.enh-form-field textarea{resize:vertical;line-height:1.6;min-height:140px}
.enh-form-status{margin-top:1.6rem;font-size:1.4rem;font-weight:500;min-height:2.4rem}
.enh-form-status.success{color:#16a34a}
.enh-form-status.error{color:#dc2626}
.enh-form-status.sending{color:var(--color-text-light)}

/* -----------------------------------------------------------------
 * Reading progress bar (blog pages only)
 * ----------------------------------------------------------------- */
#reading-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--enh-gradient);z-index:9999;transition:width .1s linear;border-radius:0 2px 2px 0}

/* -----------------------------------------------------------------
 * Blog page styles
 * ----------------------------------------------------------------- */
.enh-back-link{display:inline-flex;align-items:center;gap:.6rem;font-size:1.3rem;font-weight:600;color:var(--color-1);text-decoration:none;letter-spacing:.04em;margin-bottom:var(--vspace-1_5);transition:gap var(--enh-transition)}
.enh-back-link:hover{gap:1rem}
.enh-blog-meta{font-size:1.3rem;color:var(--color-text-light);margin-bottom:var(--vspace-1);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.enh-blog-meta strong{color:var(--color-3)}
.enh-blog-meta .enh-tag{cursor:default}

/* -----------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------- */
.s-footer{background:var(--enh-navy)!important;color:rgba(255,255,255,.75)}
.s-footer .section-header.light-on-dark .text-display-title{color:#ffffff}
.s-footer .section-header.light-on-dark .text-display-title::after{background:var(--enh-gradient)}
.s-footer .attention-getter{color:rgba(255,255,255,.65);font-size:var(--text-sm);line-height:1.7}
.s-footer h5{color:rgba(255,255,255,.40);font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--vspace-0_5)}
.s-footer .link-list li a{color:rgba(255,255,255,.70);transition:color var(--enh-transition);border-bottom:1px solid rgba(255,255,255,.15);text-decoration:none}
.s-footer .link-list li a:hover{color:#ffffff;border-bottom-color:var(--color-1)}
.s-footer__buttons .btn--primary{background:var(--enh-gradient)!important;border-color:transparent!important;border-radius:var(--enh-radius-sm)}
.s-footer__buttons .btn--stroke{border-color:rgba(255,255,255,.25)!important;color:rgba(255,255,255,.8)!important;border-radius:var(--enh-radius-sm);transition:all var(--enh-transition)}
.s-footer__buttons .btn--stroke:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.5)!important;color:#ffffff!important}
.ss-copyright span{color:rgba(255,255,255,.35);font-size:1.3rem}

/* -----------------------------------------------------------------
 * Back to top
 * ----------------------------------------------------------------- */
.ss-go-top a{background:var(--enh-gradient)!important;border-radius:50%;box-shadow:0 4px 20px rgba(199,62,29,.35);transition:transform var(--enh-transition),box-shadow var(--enh-transition)}
.ss-go-top a:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(199,62,29,.45)}
.ss-go-top a svg path{fill:#ffffff!important}

/* -----------------------------------------------------------------
 * Block title bar
 * ----------------------------------------------------------------- */
.s-about__block-title::before{background:var(--enh-gradient)!important;width:4px!important;border-radius:4px}

/* -----------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------- */
@media screen and (max-width:900px){
    .enh-stats{gap:var(--vspace-1);padding:var(--vspace-1_25)}
    .enh-stat{min-width:80px}
    .enh-projects-grid{grid-template-columns:1fr}
    .enh-form-row{grid-template-columns:1fr}
}
@media screen and (max-width:600px){
    .enh-stats{flex-direction:row;flex-wrap:wrap}
    .enh-stat{flex:1 1 calc(50% - 1.2rem)}
    .enh-contact-form{max-width:100%}
}