/* ===============================
   Portfolio Styles
   Alanoud Ibrahim Alarabid
   =============================== */

/* ----- Root Variables (Design Tokens) ----- */
:root {
  --color-bg: #FAFAFA;
  --color-text: #0B0B0C;
  --color-accent: #bc0a0f;
  --color-sand: #E8E0D9;
  --color-gold: #C6A972;
  --color-muted: #6a6a6a;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.15);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --font-heading: "Playfair Display", "Inter", system-ui, sans-serif;
  --font-body: 'Poppins', sans-serif, system-ui;
  --font-arabic: "Cairo", "Noto Sans Arabic", sans-serif;

  --fs-sm: clamp(0.875rem, 0.8vw, 1rem);
  --fs-base: clamp(1rem, 1vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 2vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 3vw, 2rem);
  --fs-xxl: clamp(2rem, 5vw, 3rem);

  --max-width: 1200px;
  --gutter: 1.5rem;

  --transition: 0.3s ease-in-out;
}

/* Dark mode overrides */
body.dark-mode {
  --color-bg: #0B0B0C;
  --color-text: #FAFAFA;
  --color-muted: #bdbdbd;
  --color-sand: #2c2c2c;
}


/* ----- Reset & Base ----- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  transition: background var(--transition), color var(--transition);
  padding: 1rem 2rem;
}

h1,h2,h3,h4 {
  font-family: var(--font-body);
  margin-top: 0;
  line-height: 1.2;
}
h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
h3 { font-size: var(--fs-lg); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-gold); }

p { margin-bottom: var(--space-3); }


/* ----- Layout Utilities ----- */
.container { max-width: var(--max-width); padding: 0 var(--gutter); margin: 0 auto; }
.grid { display: grid; gap: var(--space-4); }
@media (min-width:768px){ .grid { grid-template-columns: repeat(12,1fr); }}

.contact { margin: 0 auto; text-align: center; }
.experience, .about, .services { text-align: justify; }

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.btn-primary { background: var(--color-accent); color:#fff; }
.btn-primary:hover { background: var(--color-gold); color:var(--color-accent);}
.btn-secondary { border:2px solid var(--color-accent); color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-accent); color:#fff; }
.btn-ghost {
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-align: center;
  display: inline-block;
}
.btn-ghost:hover {
  background: var(--color-bg);
  cursor: pointer;
}

.cta-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}



/* ----- Nav ----- */
.site-header {
  background: var(--color-accent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  position: sticky; top:0; z-index:999;
}
body.dark-mode .site-header { background: rgba(11,11,12,0.85); }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--gutter);
}

.logo { display: flex; align-items: center; height: 80px; }
.logo-img { height: 100%; width: auto; transition: opacity var(--transition); }
.logo-light { display: block; }
.logo-dark { display: none; }
body.dark-mode .logo-light { display: none; }
body.dark-mode .logo-dark { display: block; }

.nav-list {
  display: flex;
  gap: var(--space-3);
}

.nav-list a {
  position: relative;
  color: var(--color-bg);
  font-weight: 500;
  transition: color var(--transition);
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--color-gold);
  transition: width 0.3s ease;
}

.nav-list a:hover::after,
.nav-list a:focus::after,
.nav-list a.active::after {
  width: 100%;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  font-size: var(--fs-lg);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media(max-width:768px){
  .nav-list{ display:none; flex-direction:column; background:var(--color-accent); position:absolute; right:0; top:100%; width:200px; box-shadow:var(--shadow-md); padding: var(--space-3); }
  .nav-list.open{ display:flex; }
  .nav-toggle{ display:block; }
}
@media (max-width: 360px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  .btn { padding: 0.4rem 1rem; font-size: 0.9rem; }
}


body[dir="ltr"] .nav-actions {
  margin-left: auto;
  margin-right: 0;
}


body[dir="rtl"] .nav-actions {
  margin-right: auto;
  margin-left: 0; 
  flex-direction: row-reverse;

}

body[dir="rtl"] .nav {
  flex-direction: row; 
}

#lang-switcher {
  margin-left: 1rem; 
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle .hamburger {
  width: 24px;
  height: 2px;
  background: var(--color-bg);
  display: block;
  position: relative;
  transition: all 0.2s ease;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--color-bg);
  left: 0;
  transition: all 0.2s ease;
}

.nav-toggle .hamburger::before {
  top: -8px;
}

.nav-toggle .hamburger::after {
  top: 8px;
}

/* When menu is open → turn into an X */
.nav-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.nav-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Dark mode: nav links + hamburger */
body.dark-mode .nav-list a { color: #fff; }
body.dark-mode .nav-list a:hover { color: var(--color-gold); }
body.dark-mode .hamburger,
body.dark-mode .hamburger::before,
body.dark-mode .hamburger::after { background: #fff; }



/* Mobile breakpoint */
@media (max-width:768px){
  .nav-list {
    display:none;
    flex-direction:column;
    position:absolute; right:0; top:100%;
    width:200px; padding: var(--space-3);
    background: var(--color-accent);
    box-shadow: var(--shadow-md);
  }
  .nav-list.open { display:flex; }
  .nav-toggle { display:block; }
  body.dark-mode .nav-list { background: #000; }
}




/* Dark mode toggle in navbar */
.nav .dark-mode-toggle {
  background: none;
  border: none;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.nav .dark-mode-toggle:hover {
  background: var(--color-sand);
  color: var(--color-accent);
}

/* Dark mode variant */
body.dark-mode .nav .dark-mode-toggle {
  color: var(--color-accent);
}

body.dark-mode .nav .dark-mode-toggle:hover {
  background: var(--color-sand);
  color: #fff;
}

/* Default moon icon color */
.dark-mode-toggle i.fa-moon {
  color: var(--color-bg);
  transition: color var(--transition);
}

/* Hover state */
.dark-mode-toggle:hover i.fa-moon {
  color: #000; /* black */
}




/* Hero */
.hero{ display:grid; gap:var(--space-5); align-items:center; padding: var(--space-7) 0; }
.hero .subhead{ font-size: var(--fs-lg); color: var(--color-muted); }
.pill-row{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.pill{ background: var(--color-sand); padding: var(--space-1) var(--space-3); border-radius: var(--radius-lg); font-size: var(--fs-sm); font-weight:500; }
.hero-visual{ position:relative; }




/* About - stat blocks */
.stats-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.stat{ background: rgba(255,255,255,0.6); padding: var(--space-3); border-radius: var(--radius-md); text-align:center; box-shadow: var(--shadow-sm); }
body.dark-mode .stat{ background: rgba(20,20,20,0.6); }
.stat-value{ display:block; font-size: var(--fs-lg); font-weight:700; color: var(--color-accent); }
.stat-label{ font-size: var(--fs-sm); color: var(--color-muted); }
/* Stats animation */
.stat {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.stat.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Optional stagger effect */
.stats-grid .stat:nth-child(1) { transition-delay: 0.1s; }
.stats-grid .stat:nth-child(2) { transition-delay: 0.3s; }
.stats-grid .stat:nth-child(3) { transition-delay: 0.5s; }
.stats-grid .stat:nth-child(4) { transition-delay: 0.7s; }

.stat-value::after {
  content: "+";
  margin-left: 2px;
}



/* Skills */
.skills-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr; /* phones → 1 per row */
}

/* Tablets (2 per row) */
@media (min-width: 600px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktops (3 per row) */
@media (min-width: 1024px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.skill-card{
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
  position: relative;
}
body.dark-mode .skill-card{ background: rgba(20,20,20,0.7); }
.skill-card:hover{ transform: translateY(-4px); }
.skill-card h3{ margin-bottom: var(--space-2); }
.bar{
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-sand);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.bar::after{
  content:"";
  position:absolute; top:0; left:0; height:100%;
  width: var(--bar-width,0%);
  background: var(--color-accent);
  transition: width 1s ease-out;
}
.badge{
  display:inline-block;
  background: var(--color-sand);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  margin: 0.2rem;
}
body.dark-mode .badge{ background:#2c2c2c; }




/* Demos */
.demo-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: var(--space-4); align-items: stretch; }
.demo-card{
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}

.demo-card h3 {
  min-height: 3rem; /* force titles to align */
}
.demo-card p {
  flex-grow: 1;     /* description takes available space */
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-card .btn {
  margin-top: auto; /* pushes button to bottom */
}
body.dark-mode .demo-card{ background:#1d1d1d; }

#demo4-video {
  display: none;
}
/* demo cards animation */
.demo-card {
  opacity: 0;
  transform: translateY(-50px) rotateX(-10deg);
  transform-origin: top;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.demo-card.visible {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* Staggered effect (unchanged) */
.demo-grid .demo-card:nth-child(1) { transition-delay: 0.15s; }
.demo-grid .demo-card:nth-child(2) { transition-delay: 0.3s; }
.demo-grid .demo-card:nth-child(3) { transition-delay: 0.45s; }
.demo-grid .demo-card:nth-child(4) { transition-delay: 0.6s; }



/* Timeline cards */
.timeline{ display:grid; gap: var(--space-4); margin-top: var(--space-4); }
.timeline { margin-bottom: var(--space-4); }
.timeline + .btn {  margin-top: var(--space-2); }
.timeline-card{
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-3);
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
}
body.dark-mode .timeline-card{ background: rgba(20,20,20,0.6); }
.timeline-card h3{ margin-bottom: var(--space-1); }
.timeline-card .company{ font-size: var(--fs-sm); color: var(--color-muted); display:block; margin-bottom: var(--space-2); }

/* Timeline animation */
.timeline-card {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.timeline-card.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Alternate left/right slide */
.timeline-card:nth-child(even) {
  transform: translateX(60px);
}
.timeline-card:nth-child(even).visible {
  transform: translateX(0);
}

/* Stagger for flow */
.timeline-card:nth-child(1) { transition-delay: 0.15s; }
.timeline-card:nth-child(2) { transition-delay: 0.3s; }
.timeline-card:nth-child(3) { transition-delay: 0.45s; }
.timeline-card:nth-child(4) { transition-delay: 0.6s; }
.timeline-card:nth-child(5) { transition-delay: 0.75s; }




/* Services */
.service-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: var(--space-4); }
.service-card{
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.dark-mode .service-card{ background: rgba(20,20,20,0.6); }

.service-card h3 {
  min-height: 3rem;
}

.service-card p {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.service-card .cta-group {
  margin-top: auto;
  justify-content: center;  
}
/* Service cards animation */
.service-card {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.service-card.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger the appearance */
.service-grid .service-card:nth-child(1) { transition-delay: 0.15s; }
.service-grid .service-card:nth-child(2) { transition-delay: 0.3s; }
.service-grid .service-card:nth-child(3) { transition-delay: 0.45s; }
.service-grid .service-card:nth-child(4) { transition-delay: 0.6s; }



/* Contact */
form{ display:grid; gap: var(--space-3); max-width:600px; }
.form-field{ display:flex; flex-direction:column; }
input,textarea,select{
  padding: var(--space-2);
  border:1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  font-family:inherit;
  font-size: var(--fs-base);
  transition:border var(--transition);
  background-color: #fff;
}
input:focus,textarea:focus,select:focus{ border-color: var(--color-accent); }

/* Error styling for contact form */
input.error,
textarea.error,
select.error {
  border-color: #e63946;
  box-shadow: 0 0 0 2px rgba(230,57,70,0.2);
  background-color: #fff;
}

.error-message {
  color: #e63946;
  font-size: 0.8rem;
  margin-top: 0.2rem;
  font-style: italic;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  opacity: 1;
  max-height: 40px;
}

input:not(.error) + .error-message,
textarea:not(.error) + .error-message,
select:not(.error) + .error-message {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* Success message styling */
.success-message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background-color: #e6ffed;      /* light green */
  border: 1px solid #2ecc71;      /* green border */
  color: #2d7a46;                 /* darker green text */
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* subtle shadow */
}

.contact-extras{ margin-top: var(--space-3); }

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact-form {
  max-width: 600px;
  width: 100%;
}




/* Footer */
.site-footer{ padding: var(--space-4) 0; font-size: var(--fs-sm); text-align:center; color: var(--color-muted); border-top:1px solid var(--color-sand); }


/* Ensure nav toggle is visible in dark mode */
body.dark-mode .nav-toggle {
  color: var(--color-accent); /* red menu icon */
}



#lang-switcher-container {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
}

#lang-switcher {
  background: none;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
}

body.dark-mode #lang-switcher {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Adjust spacing for RTL */
body[dir="rtl"] #lang-switcher-container {
  margin-right: 0;
  margin-left: 0.5rem;
}

.info-container {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  position: relative;
}

.info-icon {
  font-size: 1rem;
  color: var(--color-accent);
  cursor: pointer;
  margin-left: 0.25rem;
  vertical-align: middle;
  transition: transform 0.2s ease, color 0.3s;
}

.info-icon:hover {
  color: var(--color-gold);
  transform: scale(1.3);
}

/* INFO POPOVER */
.info-popover {
  display: none;
  position: fixed; /* instead of absolute so it is relative to viewport */
  top: 30%; /* adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  background: #333;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  width: 320px;
  max-width: 90vw;
  font-size: 0.85rem;
  box-shadow: var(--shadow-md);
  z-index: 2000; 
  white-space: normal;
}

/* RTL override for info popovers */
html[dir="rtl"] .info-popover {
  left: auto !important;
  right: 50% !important;
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
  transform: translateX(50%);
}

.info-container.active .info-popover {
  display: block;
}

.demo-card .iframe-container {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.demo-card .iframe-container iframe {
  width: 100%;
  height: 200px;  /* adjust height so it fits nicely in card */
  border: 1px solid #ccc;
  border-radius: 8px;
}

.contact-extras {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-base);
}

.contact-item i {
  color: var(--color-accent);
  font-size: 1.2rem;
  transition: color var(--transition);
}

.contact-item a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.contact-item a:hover,
.contact-item i:hover {
  color: var(--color-gold);
}


.modal {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.7);

  /* Center content with flexbox */
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-content {
  width: 100%;
  max-width: 400px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.close {
  position: absolute;
  top: 15px; right: 25px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}


/* General responsive grid utility */
.responsive-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr; /* default: 1 column on mobile */
}

/* Tablet (iPads) → 2 columns */
@media (min-width: 600px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop → 4 columns */
@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Navbar animation */
@keyframes slideDownFade {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.site-header {
  animation: slideDownFade 0.8s ease-out forwards;
}