/* assets/css/styles.css
   Mobile-first stylesheet for Unee Traders website.
   Updated: glassy header, mobile drawer, improved projects, contact styling, footer animations.
   - Primary color vars at top
   - Breakpoints: 640px, 768px, 1024px, 1280px
*/

/* ================ Design tokens ================ */
:root{
  --color-bg: #ffffff;
  --color-foreground: #0f1724;
  --color-muted: #6b7280;
  --color-primary: #0b4f81;
  --color-accent-2: #0ea5a4;

  /* subtle surface shades (different whites / light blues) */
  --surface-1: #ffffff;         /* pure white */
  --surface-2: #f8fbff;         /* very light blue tint */
  --surface-3: #f2f7fb;         /* slightly warmer */
  --surface-4: #eef6ff;         /* pale blue layer for cards */

  --card-bg: var(--surface-1);
  --color-border: #e6eef9;
  --shadow-soft: 0 10px 30px rgba(12, 22, 36, 0.06);
  --radius-lg: 12px;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --max-width: 1200px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --type-base: 1rem;
  --type-lg: 1.125rem;
  --type-xl: 1.45rem;
  --transition-fast: 180ms ease;
}

/* ================ Base ================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--type-base);
  color:var(--color-foreground);
  background:linear-gradient(180deg,var(--surface-2),var(--surface-3));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

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

/* container */
.container{width:92%; max-width:var(--max-width); margin:0 auto; padding:var(--space-lg) 0;}

/* ================ HEADER (glassy floating) ================ */
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  padding:0.5rem 0;
  backdrop-filter: blur(8px) saturate(120%);
  background: linear-gradient(180deg, rgba(240,248,255,0.7), rgba(255,255,255,0.55));
  border-bottom:1px solid rgba(10,30,60,0.06);
  box-shadow: 0 6px 18px rgba(8,25,50,0.06);
}

/* header inner */
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.brand{display:flex; align-items:center; gap:0.75rem; text-decoration:none; color:var(--color-foreground);}
.brand-badge{width:44px; height:44px; border-radius:10px; display:inline-grid; place-items:center; font-weight:700; color:white; background:linear-gradient(180deg,var(--color-primary),var(--color-accent-2)); box-shadow:0 6px 18px rgba(11,79,129,0.14);}
.brand-text strong{display:block}
.brand-sub{display:block; font-size:0.8rem; color:var(--color-muted); margin-top:0.125rem;}

/* nav */
.primary-nav{display:none;}
.nav-list{list-style:none; margin:0; padding:0; display:flex; gap:0.5rem; align-items:center;}
.nav-list a{color:var(--color-foreground); text-decoration:none; padding:0.5rem 0.85rem; border-radius:10px; font-weight:700;}
.nav-list a:hover, .nav-list a.active{background:var(--surface-4); box-shadow:var(--shadow-soft); color:var(--color-primary);}

/* hamburger (mobile) */
.nav-toggle{display:block; background:none; border:0; padding:0.4rem; border-radius:8px;}
.hamburger{display:none;}
.hamburger{display:inline-flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:20px;height:18px}
.hamburger span{display:block;width:18px;height:2px;border-radius:3px;background:var(--color-foreground)}
/* legacy hamburger hidden */

/* ================ Mobile drawer (floating island on right) ================ */
.mobile-drawer{position:fixed; top:12px; right:12px; width:55vw; max-width:480px; height:calc(100vh - 24px); z-index:150; pointer-events:none; border-radius:14px; box-shadow:0 18px 50px rgba(8,20,40,0.12); overflow:hidden; background:var(--surface-1); opacity:0; transform:translateX(8px); transition:transform 280ms ease, opacity 200ms ease; display:flex; flex-direction:column;}
.mobile-drawer[aria-hidden="false"]{opacity:1; pointer-events:auto; transform:translateX(0);} 
.mobile-drawer .drawer-top{display:flex; align-items:center; justify-content:space-between; padding:1rem; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(238,246,255,0.9)); border-bottom:1px solid rgba(10,30,60,0.04);}
.drawer-left{display:flex; gap:0.75rem; align-items:center;}
.drawer-badge{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:white;background:linear-gradient(180deg,var(--color-primary),var(--color-accent-2));font-weight:800;}
.drawer-meta .drawer-title{font-weight:800}
.drawer-meta .drawer-sub{font-size:0.85rem;color:var(--color-muted)}
.drawer-close{background:none;border:0;font-size:1.25rem;padding:0.25rem; cursor:pointer;}

/* drawer nav items - allow nav area to scroll while CTA is sticky */
.drawer-nav{padding:0.6rem; overflow:auto; flex:1;}
.drawer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.25rem;}
.drawer-list a{display:block;padding:0.6rem 0.8rem;border-radius:10px;background:var(--surface-1);text-decoration:none;color:var(--color-primary);font-weight:800; box-shadow: 0 6px 18px rgba(12,22,36,0.04);font-size:1rem}

/* CTA pinned to bottom of drawer */
.drawer-cta{position:sticky; bottom:16px; padding:12px 16px; display:flex; justify-content:center; background:transparent; z-index:160}
.drawer-btn{width:100%; max-width:420px; padding:12px 18px; border-radius:12px;}
/* ================ HERO / SLIDER ================ */
.hero{margin:1rem 0;}
.hero-inner{position:relative; overflow:hidden; border-radius:var(--radius-2xl); box-shadow:var(--shadow-soft); background:linear-gradient(180deg,var(--surface-1),var(--surface-2));}
.hero-slider{position:relative; width:100%; height:54vh; min-height:320px;}
.slides{position:relative;width:100%;height:100%;}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 900ms ease, transform 900ms ease; display:block;}
.slide.active{opacity:1; transform:none;}
.slide img{width:100%;height:100%;object-fit:cover; display:block; filter:contrast(1) saturate(0.98);}
.slide-caption{position:absolute; left:4%; bottom:4%; color:var(--color-foreground); max-width:54ch; background:linear-gradient(90deg, rgba(255,255,255,0.86), rgba(255,255,255,0.7)); padding:1rem; border-radius:14px; box-shadow:0 14px 40px rgba(11,79,129,0.06);}
.slide-caption h1{margin:0 0 0.25rem 0; font-size:var(--type-xl)}
.slide-caption p{margin:0 0 0.5rem 0;color:var(--color-muted)}
.slide-actions{display:flex; gap:0.5rem; flex-wrap:wrap}

/* slider controls */
.slider-prev,.slider-next{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.9); border:0; padding:0.5rem; border-radius:999px; cursor:pointer; box-shadow:var(--shadow-soft)}
.slider-prev{left:0.6rem} .slider-next{right:0.6rem}
.slider-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:0.9rem; display:flex; gap:0.5rem;}
.slider-dots button{width:11px;height:11px;border-radius:50%;border:0;background:rgba(0,0,0,0.15);cursor:pointer;}
.slider-dots button.active{background:var(--color-primary)}

/* ================ FEATURES & CARDS ================ */
.features-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem;}
.card{background:var(--surface-1); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-soft); padding:0.75rem;}
.card-media img{width:100%;height:200px;object-fit:cover;border-radius:10px;}
.card-body{padding-top:0.5rem}
.section-title{font-size:1.15rem;margin:0 0 0.5rem 0;}

/* ================ PROJECTS LAYOUT (larger, responsive) ================ */
.projects-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem;}
.project-card{
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,var(--surface-1),var(--surface-4));
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(12,22,36,0.06);
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor:pointer;
}
.project-card:hover{transform:translateY(-8px); box-shadow:0 20px 60px rgba(12,22,36,0.1);}
.project-thumb img{width:100%; height:260px; object-fit:cover; display:block;}
.project-info{padding:0.85rem}
.project-title{margin:0;font-size:1.05rem}
.project-excerpt{margin:0.5rem 0 0;color:var(--color-muted)}

/* ================ MODAL ================ */
.modal{display:none}
.modal[aria-hidden="false"]{display:block; position:fixed; inset:0; z-index:220}
.modal-backdrop{position:fixed; inset:0;background:rgba(2,6,23,0.55)}
.modal-panel{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:94%; max-width:1100px; background:var(--surface-1); border-radius:12px; box-shadow:0 40px 80px rgba(8,20,50,0.35); overflow:hidden}
.modal-close{position:absolute; right:1rem; top:1rem; background:none; border:0; font-size:1.6rem; cursor:pointer}
.modal-content{display:flex; flex-direction:column; gap:1rem; padding:1rem}
.modal-image{width:100%; height:420px; object-fit:cover; border-radius:8px}
.modal-text{padding:0 0.5rem}

/* ================ HR GRID ================ */
.hr-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem}
.hr-card{background:linear-gradient(180deg,var(--surface-1),var(--surface-3)); padding:1rem; border-radius:12px; text-align:center; box-shadow:var(--shadow-soft)}
.hr-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 0.5rem}

/* ================ CONTACT CARDS ================ */
.contact-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem}
.contact-card{display:flex; gap:0.75rem; align-items:center; padding:1rem; background:linear-gradient(180deg,var(--surface-1),var(--surface-4)); border-radius:12px}
.contact-card .icon{flex:0 0 36px; color:var(--color-primary)}
.contact-large{display:block;font-weight:700;color:var(--color-foreground);text-decoration:none}
.muted-note{color:var(--color-muted);font-size:0.95rem;margin-top:0.75rem}

/* ================ FOOTER ================ */
.site-footer{
    background: #ffffff;
    margin-top:2rem;
  padding:2rem 0;
   /* subtle off-white with slight blue tint */
  color: var(--color-foreground);
  border-top: 1px solid rgba(11,79,129,0.06);
}
.footer-inner{display:flex;flex-direction:column;gap:1.25rem; width:92%; max-width:var(--max-width); margin:0 auto}
.footer-top{display:flex;flex-direction:column;gap:18px}
.footer-about{display:flex;gap:0.85rem;align-items:center}
.footer-about .brand-badge{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg, rgba(11,79,129,0.08), rgba(11,79,129,0.02)); color:white; box-shadow:none}
.footer-lead{margin:0.25rem 0 0;color:rgba(15,23,36,0.9)}
.footer-contact h4, .footer-links h4{margin:0 0 0.5rem 0; color:var(--color-foreground)}
.footer-contact p, .footer-contact a{color:rgba(15,23,36,0.8); margin:0 0 0.25rem 0; text-decoration:none}
.footer-links ul{list-style:none;padding:0;margin:0;display:flex;gap:0.5rem;flex-direction:column}
.footer-links a{color:var(--color-primary); text-decoration:none}
.footer-links a:hover{text-decoration:underline; opacity:0.95}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid rgba(11,79,129,0.04); color:rgba(15,23,36,0.7);}
.site-footer .s-dot{display:inline-block;width:10px;height:10px;background:rgba(11,79,129,0.06);border-radius:50%;margin-right:6px}
@media(min-width:640px){
  .footer-top{flex-direction:row;justify-content:space-between;align-items:flex-start}
  .footer-about{flex:0 0 40%}
  .footer-contact{flex:0 0 25%}
  .footer-links{flex:0 0 25%}
}

.lede{color:var(--color-muted); margin:0 0 1rem 0}

/* ================ Responsive breakpoints ================ */
/* >=640px */
@media(min-width:640px){
  .nav-toggle{display:none}
  .primary-nav{display:block}
  .nav-list{gap:0.5rem}
  .features-grid{grid-template-columns:repeat(3,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{flex-direction:row;justify-content:space-between}
  .footer-inner{align-items:stretch}
}

/* >=768px */
@media(min-width:768px){
  .container{width:90%}
  .hero-slider{height:64vh}
  .project-thumb img{height:320px}
  .hr-grid{grid-template-columns:repeat(4,1fr)}
}

/* >=1024px */
@media(min-width:1024px){
  .projects-grid{grid-template-columns:repeat(3,1fr)}
  .hero-slider{height:72vh}
  .modal-content{flex-direction:row}
  .modal-image{width:55%;height:520px}
  .modal-text{width:45%}
}

/* >=1280px */
@media(min-width:1280px){
  .projects-grid{grid-template-columns:repeat(4,1fr)}
  .container{width:85%}
}

/* ================ Small interactions ================ */
/* reveal animations */
[data-animate="true"]{opacity:0; transform:translateY(8px); transition:opacity 700ms ease, transform 700ms ease}
[data-animate="true"].in-view{opacity:1; transform:none}

/* Utilities */
.kv{ display:flex; gap:12px; align-items:center; }
.small{ font-size:13px; color:var(--muted); }

.btn {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* size */
  padding: 13px 28px;
  min-height: 44px; /* mobile tap friendly */

  /* typography */
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;

  /* colors */
  background-color: var(--color-primary); /* updated to royal blue */
  color: #ffffff;

  /* visuals */
  border-radius: 12px;
  text-decoration: none;
  border: none;
  cursor: pointer;

  /* depth */
  box-shadow: 0 10px 25px rgba(11, 79, 129, 0.35);

  /* smoothness */
  transition:
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* hover */
.btn:hover {
  background-color: #083651;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(11, 79, 129, 0.45);
}

/* click / tap */
.btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(11, 79, 129, 0.3);
}

/* focus (keyboard accessibility) */
.btn:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(11, 79, 129, 0.35),
    0 10px 25px rgba(11, 79, 129, 0.35);
}

/* mobile */
@media (max-width: 768px) {
  .btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
    border-radius: 10px;
  }
}

.footer-links a {
  color: var(--color-primary); /* your custom link color */
  text-decoration: none; /* remove underline by default */
  transition: color 0.3s, opacity 0.3s, text-decoration 0.3s; /* smooth hover effects */
}

.footer-links a:hover {
  color: #083651; /* darker shade on hover */
  opacity: 0.85; /* subtle transparency on hover */
  text-decoration: underline; /* underline only on hover */
}

.footer-links a:visited {
  color: #551a8b; /* visited link color */
}

@media(max-width:420px){ .mobile-drawer{width:80vw; right:8px; top:8px; max-width:92%;} }