/* =============================================================
   MARION SUSAN NAFULA — PORTFOLIO HOMEPAGE
   style.css — base styles & components (mobile-first, unscoped)
   Responsive breakpoints live in responsive.css
   ============================================================= */

/* -------------------------------------------------------------
   0. DESIGN TOKENS
   ------------------------------------------------------------- */
:root{
  --navy:        #0F172A;   /* header / footer / headings */
  --navy-light:  #1E293B;
  --blue:        #2563EB;   /* icon accent */
  --blue-tint:   #E9F0FD;   /* icon circle backgrounds */
  --gold:        #F5A524;   /* buttons / eyebrows / accents */
  --gold-dark:   #DB8F14;
  --cream:       #FAF6EF;   /* hero section background */
  --cream-arc:   #EFE1C9;   /* decorative arc behind portrait */
  --bg:          #FFFFFF;
  --bg-light:    #F8FAFC;
  --bg-tint:     #EEF2FA;   /* core-expertise band */
  --border:      #E2E8F0;
  --text-body:   #52607A;
  --text-muted:  #94A3B8;
  --white:       #FFFFFF;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 10px 30px -12px rgba(15,23,42,0.14);
  --shadow-soft: 0 4px 14px rgba(15,23,42,0.06);
  --container: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--text-body);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-head);
  color: var(--navy);
  line-height:1.25;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* Visible keyboard focus for accessibility */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--gold-dark);
  margin-bottom:10px;
}

.section-head{
  text-align:center;
  max-width:680px;
  margin: 0 auto 48px;
  padding: 0 12px;
}

.section-head h2{
  font-size:2rem;
  font-weight:700;
  margin-bottom:14px;
}

.divider{
  width:56px;
  height:3px;
  background:var(--gold);
  margin: 0 auto 18px;
  border-radius:2px;
}

.section-head p{
  color:var(--text-body);
  font-size:1rem;
}

section{ padding: 88px 0; }

/* -------------------------------------------------------------
   Reusable buttons
   ------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight:600;
  font-size:.95rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); }

.btn-gold{
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 8px 20px -6px rgba(245,165,36,.55);
}
.btn-gold:hover{ background: var(--gold-dark); }

.btn-navy{
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 8px 20px -6px rgba(15,23,42,.35);
}
.btn-navy:hover{ background: var(--navy-light); }

.btn-outline{
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline:hover{ background: var(--navy); color:var(--white); }

.icon-circle{
  width:56px; height:56px;
  border-radius:50%;
  background: var(--blue-tint);
  color: var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  margin-bottom:18px;
}

/* -------------------------------------------------------------
   1. HEADER / NAVIGATION SHARED ON ALL PAGES
   ------------------------------------------------------------- */
header{
  position: sticky;
  top:0;
  z-index: 500;
  background: var(--navy);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 24px;
}

/* =========================================================
   NAVIGATION LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;

    width: 50px;
    height: auto;
    flex-shrink: 0;

}

.logo img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    object-fit: contain;
}

/* =========================================================
   NAVIGATION LINKS
========================================================= */ 
.nav-links{
  display:flex;
  align-items:center;
  gap:38px;
}
.nav-links a{
  color: rgba(255,255,255,.82);
  font-size:.92rem;
  font-weight:500;
  padding-bottom:6px;
  border-bottom:2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover{ color:var(--white); }
.nav-links a.active{
  color:var(--white);
  border-bottom-color: var(--gold);
}

.nav-cta{ display:flex; align-items:center; gap:18px; }

.nav-toggle{
  display:none;
  color:var(--white);
  font-size:1.4rem;
  line-height:1;
}


/* -------------------------------------------------------------
   8. FOOTER SHARED ON ALL PAGES
   ------------------------------------------------------------- */
footer{
  background: var(--navy);
  color: rgba(255,255,255,.72);
  margin-top: 90px;
}

.footer-top{
  padding: 60px 0 40px;
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr 1.3fr;
  gap: 30px;
}

.footer-top h4{
  color: var(--white);
  font-size:.98rem;
  margin-bottom:18px;
  position:relative;
  padding-bottom:10px;
}
.footer-top h4::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:26px; height:2px;
  background: var(--gold);
}

.footer-brand p{
  font-size:.86rem;
  margin: 14px 0 20px;
  max-width:240px;
  color: rgba(255,255,255,.6);
}

.social-row{ display:flex; gap:10px; }
.social-row a{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
  color: var(--white);
  transition: background .15s ease, border-color .15s ease;
}
.social-row a:hover{ background: var(--gold); border-color: var(--gold); color:var(--navy); }

.footer-top ul li{ margin-bottom:12px; }
.footer-top ul li a{
  font-size:.87rem;
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(255,255,255,.68);
  transition: color .15s ease;
}
.footer-top ul li a:hover{ color: var(--gold); }
.footer-top ul li i{ color: var(--gold); font-size:.78rem; }

.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.86rem;
  margin-bottom:14px;
  color: rgba(255,255,255,.68);
}
.footer-contact i{ color: var(--gold); margin-top:2px; }

.dev-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-md);
  padding: 22px;
}
.dev-card .dev-icon{
  width:36px; height:36px;
  border-radius:8px;
  background: rgba(245,165,36,.15);
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
  font-size:.85rem;
}
.dev-card h4{ margin-bottom:8px; padding-bottom:0; }
.dev-card h4::after{ display:none; }
.dev-card p{
  font-size:.82rem;
  color: rgba(255,255,255,.6);
  margin-bottom:16px;
}
.dev-card .btn{ width:100%; padding:11px 18px; font-size:.86rem; }

.footer-bottom{
  border-top: 1px solid rgba(245,165,36,.28);
  padding: 20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:.82rem;
  color: rgba(255,255,255,.55);
}

/* =============================================================
   DEVELOPER CONTACT MODAL
   ============================================================= */

/* -------------------------------------------------------------
   MODAL CONTAINER
   ------------------------------------------------------------- */

.developer-modal {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* Active state added by JavaScript */

.developer-modal.active {
    visibility: visible;
    opacity: 1;
}


/* -------------------------------------------------------------
   DARK OVERLAY
   ------------------------------------------------------------- */

.developer-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, 0.72);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* -------------------------------------------------------------
   MODAL CONTENT
   ------------------------------------------------------------- */

.developer-modal-content {
    position: relative;
    z-index: 2;

    width: min(100%, 480px);

    background: var(--white);

    border-radius: 20px;

    padding: 34px;

    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);

    transform: translateY(20px) scale(0.97);

    transition: transform 0.25s ease;
}


/* Modal entrance animation */

.developer-modal.active .developer-modal-content {
    transform: translateY(0) scale(1);
}


/* -------------------------------------------------------------
   CLOSE BUTTON
   ------------------------------------------------------------- */

.developer-modal-close {
    position: absolute;

    top: 16px;
    right: 16px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: #f1f3f7;
    color: var(--navy);

    font-size: 1rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.developer-modal-close:hover {
    background: var(--navy);
    color: var(--white);

    transform: rotate(90deg);
}


/* -------------------------------------------------------------
   MODAL HEADER
   ------------------------------------------------------------- */

.developer-modal-header {
    text-align: center;

    padding: 0 20px 24px;
}


/* Icon */

.developer-modal-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--navy);
    color: var(--gold);

    font-size: 1.25rem;
}


/* Heading */

.developer-modal-header h3 {
    margin: 0 0 10px;

    color: var(--navy);

    font-family: var(--font-head);

    font-size: 1.45rem;
}


/* Description */

.developer-modal-header p {
    margin: 0;

    color: var(--text-muted);

    font-size: 0.9rem;

    line-height: 1.6;
}


/* -------------------------------------------------------------
   CONTACT OPTIONS
   ------------------------------------------------------------- */

.developer-contact-options {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


/* Individual option */

.developer-contact-option {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--white);

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.developer-contact-option:hover {
    border-color: var(--gold);

    background: #fffaf0;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}


/* -------------------------------------------------------------
   CONTACT OPTION ICON
   ------------------------------------------------------------- */

.contact-option-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--navy);
    color: var(--gold);

    font-size: 1rem;
}


/* -------------------------------------------------------------
   CONTACT OPTION TEXT
   ------------------------------------------------------------- */

.contact-option-text {
    display: flex;
    flex-direction: column;

    gap: 3px;

    flex: 1;
}


.contact-option-text strong {
    color: var(--navy);

    font-size: 0.92rem;
}


.contact-option-text small {
    color: var(--text-muted);

    font-size: 0.76rem;

    line-height: 1.4;
}


/* -------------------------------------------------------------
   ARROW
   ------------------------------------------------------------- */

.contact-option-arrow {
    color: var(--gold-dark);

    font-size: 0.8rem;

    transition: transform 0.2s ease;
}


.developer-contact-option:hover .contact-option-arrow {
    transform: translateX(4px);
}


/* -------------------------------------------------------------
   MODAL FOOTER NOTE
   ------------------------------------------------------------- */

.developer-modal-note {
    margin: 20px 0 0;

    padding-top: 18px;

    border-top: 1px solid var(--border);

    color: var(--text-muted);

    font-size: 0.76rem;

    line-height: 1.5;

    text-align: center;
}

/* -------------------------------------------------------------
   4. CTA BANNER — Experience-page variant

   Layout:
   Gold accent line → icon → text → action button

   The shared .cta-banner styles live in style.css.
   These rules intentionally override them only for
   the Experience page.
   ------------------------------------------------------------- */

.exp-cta {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    min-height: 150px;

    padding: 70px 38px;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(255, 255, 255, 0.06),
            transparent 35%
        ),
        var(--navy);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------
   DECORATIVE BACKGROUND
   ------------------------------------------------------------- */

.exp-cta::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -80px;
    top: -80px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


/* -------------------------------------------------------------
   LEFT CONTENT GROUP
   ------------------------------------------------------------- */

.exp-cta .cta-left {
    display: flex;
    align-items: center;

    gap: 22px;

    flex: 1;

    min-width: 0;
}


/* -------------------------------------------------------------
   GOLD ACCENT LINE
   ------------------------------------------------------------- */

.exp-cta .cta-accent-line {
    flex: 0 0 3px;

    width: 3px;
    height: 64px;

    background: var(--gold);

    border-radius: 3px;
}


/* -------------------------------------------------------------
   CTA ICON
   ------------------------------------------------------------- */

.exp-cta .cta-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    color: var(--gold);

    font-size: 1.35rem;

    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.02);
}


/* -------------------------------------------------------------
   CTA TEXT
   ------------------------------------------------------------- */

.exp-cta .cta-left > div:last-child {
    max-width: 650px;
}


.exp-cta h2 {
    margin: 0 0 7px;

    color: var(--white);

    font-family: 'Playfair Display', serif;

    font-size: 1.35rem;
    font-weight: 700;

    line-height: 1.25;
}


.exp-cta p {
    margin: 0;

    max-width: 620px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.84rem;

    line-height: 1.6;
}


/* -------------------------------------------------------------
   CTA BUTTON
   ------------------------------------------------------------- */

.exp-cta > .btn {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    white-space: nowrap;

    padding: 12px 24px;

    border-radius: 6px;

    font-size: 0.78rem;
    font-weight: 700;
}


/* -------------------------------------------------------------
   HOVER EFFECT
   ------------------------------------------------------------- */

.exp-cta > .btn:hover {
    transform: translateY(-2px);
}