/* ===========================
   assets/css/second.css
   (fixed variables, hero overlay, final position overrides)
   =========================== */

:root {
  --main-color:#f9004d;
  --main-color2:#fcfc;

  /* Dark (default) - existing hero tokens */
  --text-0: #ffffff;
  --overlay-dark-start: rgba(0,0,0,0.85);
  --overlay-dark-mid:   rgba(0,0,0,0.55);
  --overlay-dark-end:   rgba(0,0,0,0.85);

  /* NEW: site-wide theme tokens (dark defaults) */
  --bg: #000000;
  --bg-soft: #191919;
  --card: #191919;
  --text: #ffffff;
  --text-muted: #cfcfcf;
  --border: rgba(255,255,255,0.12);
  --shadow: rgba(0,0,0,0.35);
}

/* Light theme overrides (used by [data-theme="light"] on <html>) */
[data-theme="light"] {
  /* existing hero tokens */
  --text-0: #0d0d0d;
  --overlay-dark-start: rgba(255,255,255,0.75);
  --overlay-dark-mid:   rgba(255,255,255,0.45);
  --overlay-dark-end:   rgba(255,255,255,0.75);

  /* NEW: site-wide tokens */
  --bg: #ffffff;
  --bg-soft: #f6f6f6;
  --card: #ffffff;
  --text: #0d0d0d;
  --text-muted: #555;
  --border: rgba(0,0,0,0.12);
  --shadow: rgba(0,0,0,0.08);
}

/* ========== Global ========== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:border-box;
  box-sizing: border-box;
  padding:0;
  margin:0;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Cairo', sans-serif;
  font-family: 'Open Sans', sans-serif;

  /* NEW: theme background + text everywhere */
  background: var(--bg);
  color: var(--text);
}
.contener {
  padding-left:15px;
  padding-right:15px;
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:768px){.contener{width:750px;}}
@media (min-width:992px){.contener{width:970px;}}
@media (min-width:1200px){.contener{width:1170px;}}
/* ========== End Global ========== */

/* ========== Header ========== */
header {
  position: absolute;
  left:0;
  width:100%;
  z-index: 2;
}
header .contener {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:30px;
  padding-bottom:30px;
}
header .contener .logo {
  text-decoration:none;
  text-transform:capitalize;
  color: var(--text); /* themed */
  font-size:30px;
  font-weight:600;
}
header .contener .logo span { color:var(--main-color); }
header .contener nav ul { display:flex; list-style:none; }
@media (max-width:991px){header .contener nav ul{display:none;}}
header .contener nav ul li a {
  display:inline-block;
  text-decoration:none;
  text-transform:capitalize;
  color: var(--text); /* themed */
  margin:10px 25px 0px;
  font-weight:bold;
  font-size:16px;
  transition:0.5s;
}
header .contener nav ul li a:hover{color:var(--main-color);}
header .contener .btn i {color: var(--text); font-size:20px; margin-right:10px;}
@media (min-width:992px){header .contener .btn i{display:none;}}
header .contener .btn a {
  display:inline-block;
  text-decoration:none;
  text-transform:capitalize;
  color:#fff;
  font-weight:bold;
  background-color:var(--main-color);
  padding:8px 18px;
  border-radius:20px;
  transition:0.5s;
  border: 2px solid var(--main-color);
}
header .contener .btn a:hover{
  transform:scale(1.1);
  background:transparent;
  color: var(--text);
}

/* Theme toggle button */
.theme-toggle {
  margin-left: 10px;
  border: 2px solid rgba(255,255,255,.25);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  transition: .25s;
}
.theme-toggle:hover { transform: scale(1.05); }
/* ========== End Header ========== */

/* ========== Landing / Hero ========== */
/* 👉 HERO KEPT EXACTLY AS YOU PROVIDED (no changes) */
.landing {
  background-image:url("../../uploads/background.jpg");
  background-size:cover;
  width:100%;
  height:100vh;
  position:relative;
  color:#fff;
}

/* Cinematic overlay – uses theme vars to be dark in dark-mode, bright in light-mode */
.landing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--overlay-dark-start) 0%,
    var(--overlay-dark-mid) 40%,
    var(--overlay-dark-end) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Hero copy defaults */
.landing .info p:first-child {
  font-weight:700;
  color:#d7d7d7;
  font-size:14px;
  letter-spacing:.3px;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
}
.landing .info h1 {
  text-transform:capitalize;
  font-size:30px;
  line-height:1.05;
  margin:10px 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.landing .info h1 span {
  color:var(--main-color);
  text-shadow: 0 0 10px rgba(249,0,77,0.55);
}
.landing .info p:last-of-type {
  font-weight:700;
  font-size:20px;
  margin-bottom:30px;
  color:#f0f0f0;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
}
.landing .info a {
  text-decoration:none;
  text-transform:capitalize;
  color:#fff;
  background-color:var(--main-color);
  padding:10px 22px;
  border-radius:20px;
  font-weight:600;
  font-size:14px;
  transition:0.5s;
  border:solid 2px var(--main-color);
}
.landing .info a:hover { background-color:transparent; }

/* === HERO POSITION: FINAL OVERRIDES === */
/* Desktop default */
.landing .contener .info {
  position: absolute;
  top: 20%;
  left: 5%;
  transform: none;
  z-index: 1;              /* above overlay */
  width: auto;
  color: var(--text-0);
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
}

/* Tablet/phone */
@media (max-width: 991px) {
  .landing { background-position: 60% 0%; }
  .landing .contener .info {
    top: 20%;
    left: 20%;
    transform: none;
  }
}

/* Small phones */
@media (max-width: 560px) {
  .landing .contener .info {
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 85vw;
    text-align: center;
  }
  .landing .info h1 { font-size: 34px; }
}
/* ========== End Landing ========== */

/* ========== About ========== */
.about {
  padding-top:100px;
  padding-bottom:100px;
  background-color: var(--bg-soft);  /* themed */
  color: var(--text);                 /* themed */
}
.about .content {
  display:flex;
  justify-content:center;
  align-items:center;
}
@media (max-width:1199px){
  .about .content{flex-direction:column;}
  .about .content .text{margin-top:50px!important;}
}
.about .content .image img {
  position:relative;
  top:0px;
  left:50%;
  transform:translateX(-50%);
  width:400px;
  border-radius:12px;
  box-shadow: 0 12px 28px var(--shadow); /* themed */
}
@media (max-width:767px){.about .content .image img{width:300px;}}
.about .content .text { color: var(--text); } /* themed */
@media (max-width:767px){.about .content .text{margin-left:10px;}}
.about .content .image,
.about .content .text { flex:1; }
.about .content .text h1 {
  font-size:70px;
  text-transform:capitalize;
  margin:0px 0px 20px;
}
@media (max-width:767px){.about .content .text h1{font-size:40px;}}
.about .content .text h4 {
  text-transform:capitalize;
  font-size:20px;
  margin-bottom:30px;
  letter-spacing:2px;
}
.about .content .text h4 span { color:var(--main-color); }
.about .content .text p {
  color: var(--text-muted); /* themed */
  line-height:1.6;
  font-size:18px;
}
.about .content .text a {
  display:inline-block;
  margin-top:50px;
  text-decoration:none;
  text-transform:capitalize;
  color:#fff;
  background-color:var(--main-color);
  padding:10px 22px;
  border-radius:20px;
  font-weight:600;
  font-size:14px;
  transition:0.5s;
  border:solid 2px var(--main-color);
}
.about .content .text a:hover { background-color:transparent; color: var(--text); }
/* ========== End About ========== */

/* ========== Services ========== */
.services {
  padding-top:70px;
  padding-bottom:120px;
  background-color: var(--bg); /* themed */
  color: var(--text);          /* themed */
}
.services .title {
  text-align:center;
  margin-bottom:50px;
  text-transform:capitalize;
  font-size:50px;
}
.services .srv-box {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
  grid-gap:30px;
  text-align:center;
}
.services .srv-box .card {
  background-color: var(--card); /* themed */
  padding:20px;
  border-radius:10px;
  transition:0.3s;
  cursor:pointer;
  border: 1px solid var(--border); /* themed */
  box-shadow: 0 8px 24px var(--shadow); /* themed */
  color: var(--text); /* themed */
}
.services .srv-box .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px var(--shadow);
}
.services .srv-box .card i {
  color:var(--main-color);
  font-size:50px;
  margin-bottom:10px;
}
.services .srv-box .card h4 {
  font-size:20px;
  margin:0px 0px 15px;
}
.services .srv-box .card p {
  color: var(--text-muted); /* themed */
  line-height:1.5;
  margin-bottom:20px;
}
.services .srv-box .card a {
  display:inline-block;
  text-decoration:none;
  text-transform:capitalize;
  padding:8px 18px;
  background-color:var(--main-color);
  border:solid 2px var(--main-color);
  border-radius:20px;
  color:#fff;
  font-weight:bold;
  font-size:15px;
  transition:0.3s;
}
.services .srv-box .card a:hover {
  background-color:transparent;
  border:solid 2px var(--main-color);
  color: var(--text);
}
/* ========== End Services ========== */

/* ========== Skills / Projects CTA ========== */
.skills {
  padding:70px 0px;
  background-color: var(--bg-soft); /* themed */
  color: var(--text);               /* themed */
  text-align:center;
}
.skills h1 {
  font-size:30px;
  margin-bottom:30px;
}
@media (max-width:767px){.skills h1{font-size:20px;}}
.skills a {
  display:inline-block;
  color:#fff;
  text-transform:capitalize;
  text-decoration:none;
  background-color:var(--main-color);
  border-radius:20px;
  padding:8px 18px;
  font-weight:bold;
  border:solid 2px var(--main-color);
  transition:0.3s;
}
.skills a:hover {
  background-color:transparent;
  border:solid 2px var(--main-color);
  color: var(--text);
}
/* ========== End Skills ========== */

/* ========== Footer ========== */
footer {
  background-color: var(--bg); /* themed */
  color: var(--text);          /* themed */
  text-align:center;
  padding:100px 0px;
  border-top: 1px solid var(--border); /* themed */
}
footer .contener h2 {
  text-transform:capitalize;
  font-size:30px;
  margin-bottom:30px;
}
footer .contener p {
  color: var(--text-muted); /* themed */
  font-size:18px;
  width:630px;
  max-width:100%;
  margin:0px auto 20px;
}
footer .contener .links i {
  font-size:25px;
  margin:0px 10px;
  background-color:var(--main-color);
  width:45px;
  height:45px;
  border-radius:50%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border:solid 2px var(--main-color);
  cursor:pointer;
  transition:0.3s;
  color:#fff;
  box-shadow: 0 8px 20px var(--shadow); /* themed */
}
footer .contener .links i:hover {
  background-color:transparent;
  border:solid 2px var(--main-color);
  color: var(--text);
}
/* ========== End Footer ========== */


/*******************************
  Cards, Grid, Toolbar, Modal
  (Projects & Courses polish)
*******************************/

/* 1) Grid spacing + max width for smoother reading */
.services .srv-box,
#projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* 2) Card: cleaner surface + subtle elevation */
.services .srv-box .card,
#projects-grid .card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px var(--shadow);
  border-radius: 16px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.services .srv-box .card:hover,
#projects-grid .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px var(--shadow);
  border-color: rgba(0,0,0,.08); /* light bump, still theme-friendly */
}

/* 3) Icon + title hierarchy */
.services .srv-box .card i,
#projects-grid .card i {
  font-size: 34px;
  color: var(--main-color);
  display: inline-block;
  margin-bottom: 6px;
}
.services .srv-box .card h4,
#projects-grid .card h4 {
  font-size: 18px;
  line-height: 1.25;
  margin: 2px 0 6px;
  font-weight: 800;
}

/* 4) Body text: clamp for tidy cards */
.services .srv-box .card p,
#projects-grid .card p {
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* show 3 lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 5) Tags (shared) */
.services .srv-box .card .tags,
#projects-grid .card .tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px;
}
.services .srv-box .card .badge,
#projects-grid .card .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  opacity: .9;
}

/* 6) Card actions (Projects only) */
#projects-grid .card .actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: auto;           /* push to bottom for equal-height feel */
  flex-wrap: wrap;
}
.btn {
  appearance: none;
  border: none;
  background: var(--main-color);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; border: 1px solid var(--main-color); color: var(--text); }
.btn.light { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* 7) Toolbar (Projects search + filters) */
.toolbar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 16px 0 8px;
}
.input {
  flex: 1 1 260px; max-width: 520px;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.input::placeholder { opacity: .7; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border); background: transparent; color: var(--text);
  padding: 6px 10px; border-radius: 999px; font-weight: 800; cursor: pointer; transition: .15s;
}
.chip:hover { transform: translateY(-1px); border-color: var(--main-color); }
.chip.is-active { background: var(--main-color); border-color: var(--main-color); color: #fff; }

/* 8) Show more / less row (shared) */
.list-actions { display: flex; justify-content: center; align-items: center; margin-top: 18px; }
.ghost-btn {
  appearance: none; border: 1px solid var(--border); background: transparent; color: var(--text);
  padding: 10px 16px; border-radius: 999px; font-weight: 800; cursor: pointer; transition: .2s;
}
.ghost-btn:hover { transform: translateY(-1px); border-color: var(--main-color); }

/* 9) Modal (Projects) */
.modal { position: fixed; inset: 0; display: none; z-index: 99; }
.modal.is-open { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(760px, 92vw); max-height: 85vh; overflow: auto;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 70px var(--shadow); padding: 22px 20px;
}
.modal__close {
  position: absolute; right: 10px; top: 10px; border: none; background: transparent;
  color: var(--text); font-size: 24px; cursor: pointer;
}
.modal h3 { font-size: 22px; margin-bottom: 8px; }
.modal p { color: var(--text-muted); line-height: 1.6; }
.modal .bullets { margin: 10px 0 12px; padding-left: 18px; }
.modal-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* 10) Focus styles (keyboard a11y) */
:where(a, button, .chip, .ghost-btn, .btn, .modal__close, .input):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--main-color) 60%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* 11) Responsive tweaks */
@media (max-width: 600px) {
  .services .srv-box .card p,
  #projects-grid .card p { -webkit-line-clamp: 4; } /* allow 4 lines on mobile */
  .services .srv-box .card, #projects-grid .card { padding: 16px; }
}

/* 12) Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .services .srv-box .card, #projects-grid .card,
  .btn, .chip, .ghost-btn { transition: none !important; }
}


/* =================================
   Interests Section
================================= */

.interests {
  padding: 100px 0;
  background-color: var(--bg-soft);
  color: var(--text);
  scroll-margin-top: 80px;
}

.interests-heading {
  max-width: 700px;
  margin: 0 auto 50px;
  text-align: center;
}

.interests-heading .section-label {
  margin-bottom: 8px;
  color: var(--main-color);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.interests-heading h2 {
  margin-bottom: 15px;
  font-size: clamp(38px, 5vw, 58px);
}

.interests-heading h2 span {
  color: var(--main-color);
}

.interests-heading > p:last-child {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.7;
}

.interest-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.interest-category {
  padding: 26px;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 28px var(--shadow);
}

.interest-category-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}

.interest-category-heading i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  color: var(--main-color);
  background-color: rgba(249, 0, 77, 0.1);
  border: 1px solid rgba(249, 0, 77, 0.25);
  border-radius: 13px;

  font-size: 21px;
}

.interest-category-heading h3 {
  margin: 0;
  font-size: 23px;
}

.interest-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.interest-item {
  appearance: none;
  padding: 9px 14px;

  color: var(--text);
  background-color: var(--bg-soft);

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

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

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

.interest-item:hover {
  color: #ffffff;
  background-color: var(--main-color);
  border-color: var(--main-color);
  transform: translateY(-2px);
}

.interest-item:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 3px;
}

/* =================================
   Individual Interest Popup
================================= */

body.modal-open {
  overflow: hidden;
}

.interest-modal {
  position: fixed;
  inset: 0;
  z-index: 300;

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

  padding: 20px;
}

.interest-modal.is-open {
  display: flex;
}

.interest-modal-backdrop {
  position: absolute;
  inset: 0;

  background-color: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
}

.interest-modal-content {
  position: relative;
  z-index: 1;

  width: min(560px, 100%);
  padding: 35px;

  color: var(--text);
  background-color: var(--card);

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

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);

  animation: open-interest-modal 0.25s ease;
}

@keyframes open-interest-modal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.interest-modal-close {
  position: absolute;
  top: 15px;
  right: 17px;

  width: 40px;
  height: 40px;

  color: var(--text);
  background-color: transparent;

  border: 1px solid var(--border);
  border-radius: 50%;

  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.interest-modal-close:hover {
  color: var(--main-color);
  border-color: var(--main-color);
}

.interest-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 65px;
  height: 65px;
  margin-bottom: 20px;

  color: var(--main-color);
  background-color: rgba(249, 0, 77, 0.1);

  border: 1px solid rgba(249, 0, 77, 0.25);
  border-radius: 18px;

  font-size: 28px;
}

.interest-modal-content h3 {
  margin: 0 50px 14px 0;
  font-size: 31px;
}

.interest-modal-content p {
  margin: 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.75;
}

@media (max-width: 800px) {
  .interest-categories {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .interests {
    padding: 75px 0;
  }

  .interest-category {
    padding: 22px;
  }

  .interest-modal {
    padding: 14px;
  }

  .interest-modal-content {
    padding: 28px 22px;
  }

  .interest-modal-content h3 {
    font-size: 26px;
  }

  .interest-modal-content p {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interest-modal-content {
    animation: none;
  }

  .interest-item {
    transition: none;
  }
}