/* ==========================================================================
   Portfolio Website - style.css
   Author : Sehar Fatima  |  Devixo Solutions Web Development Internship, Task 01
   Written by hand in CSS3 (no frameworks or templates).

   Contents
   1. Variables and reset        6. Hero
   2. Header and navigation      7. About, Skills, Education
   3. Buttons                    8. Projects and Contact
   4. Shared pieces (cards...)   9. Footer
   5. Photo card                10. Responsive (laptop, tablet, mobile)
   ========================================================================== */

/* ---------- 1. Variables and reset ---------- */
/* Colours, fonts and the "hard shadow" are defined once here and reused everywhere,
   so the whole colour theme can be changed from this one block. */
:root {
  --cream: #f9f4ec;
  --maroon: #44141e;
  --rose: #e4748a;
  --rose-deep: #b3324e;
  --tan: #e6d0b2;
  --orange: #f59a2b;
  --white: #ffffff;
  --display: 'Instrument Serif', Georgia, serif;
  --body: 'Manrope', 'Segoe UI', sans-serif;
  --shadow: 4px 4px 0 var(--maroon);
}
/* Reset: remove default browser spacing; box-sizing keeps padding inside element widths */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Smooth scrolling between sections; scroll-padding keeps headings clear of the sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { font-family: var(--body); line-height: 1.7; color: var(--maroon); background: var(--cream); overflow-x: hidden; }
ul { list-style: none; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1; }
em { color: var(--rose); }
.icon { width: 1.1em; height: 1.1em; fill: currentColor; flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: 3px; }

/* Decorative blobs: fixed, behind content (z-index -1) and ignore mouse clicks */
.blob { position: fixed; z-index: -1; background: var(--tan); opacity: .4; pointer-events: none; }
.blob-one { width: 340px; height: 300px; left: -120px; bottom: 5%; border-radius: 60% 40% 55% 45%; }
.blob-two { width: 260px; height: 240px; right: -90px; top: 25%; border-radius: 45% 55% 40% 60%; opacity: .45; }

/* ---------- 2. Header and navigation ---------- */
/* Sticky header stays at the top while scrolling; flexbox spaces logo, nav and actions apart */
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 4%; background: var(--cream); border-bottom: 1px solid rgba(68, 20, 30, .15); }
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--maroon); color: var(--cream); font: 1.35rem var(--display); }
.logo-name { font: 1.7rem var(--display); white-space: nowrap; }
.nav-links { display: flex; gap: .3rem; padding: .35rem .6rem; border: 3px solid var(--maroon); border-radius: 999px; box-shadow: var(--shadow); background: var(--cream); }
.nav-links a { display: block; padding: .3rem .8rem; border-radius: 999px; text-decoration: none; font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s; }
.nav-links a:hover { background: var(--maroon); color: var(--cream); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.pill-link { display: flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border: 3px solid var(--maroon); border-radius: 999px; box-shadow: var(--shadow); text-decoration: none; font-weight: 600; font-size: .9rem; transition: transform .2s, box-shadow .2s; }
.icon-btn { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--maroon); border-radius: 50%; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.pill-link:hover, .icon-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--maroon); }
.menu-toggle, .menu-button { display: none; }

/* ---------- 3. Buttons ---------- */
/* Hover effect: the button moves toward its shadow so it looks "pressed" */
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.7rem; margin: 0 .5rem .6rem 0; border: 3px solid var(--maroon); border-radius: 999px; box-shadow: var(--shadow); font: 800 .9rem var(--body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-solid { background: var(--maroon); color: var(--cream); }
.btn-outline { background: var(--cream); color: var(--maroon); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--maroon); }
.btn-outline:hover { background: var(--tan); }

/* ---------- 4. Shared pieces ---------- */
/* .card is reused by skills, education, projects and the contact form for a consistent look */
.eyebrow { color: var(--rose-deep); font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.card { background: var(--white); border: 3px solid var(--maroon); border-radius: 22px; box-shadow: 6px 6px 0 var(--maroon); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translate(-3px, -5px); box-shadow: 9px 11px 0 var(--maroon); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .2rem .85rem; border: 2px solid var(--maroon); border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--cream); }

/* ---------- 5. Photo card (dark maroon frame with floating tiles) ---------- */
.photo-card { position: relative; background: var(--maroon); border-radius: 30px; padding: 1.1rem 1.1rem 0; box-shadow: 8px 8px 0 var(--tan); }
.photo { aspect-ratio: 4 / 3.3; border: 3px solid rgba(255, 255, 255, .25); border-radius: 18px; background-color: #5b2030; background-size: cover; background-position: center; display: grid; place-items: center; }
/* background-blend-mode: multiply turns the photo's white background into the warm peach colour */
.hero-img { background: url("images/profile.jpeg") center top / cover, #f3d9c8; background-blend-mode: multiply; }
.about-img { background-image: url("images/hijabi_hero.png"), linear-gradient(135deg, #4a2a6a, #2a0c14); }
.photo span { font: 5rem var(--display); color: rgba(68, 20, 30, .18); z-index: -1; }
.about-img span { color: rgba(255, 255, 255, .2); }
.photo-card figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem .6rem 1.1rem; color: var(--cream); font-weight: 800; font-size: .95rem; }
.photo-card figcaption span { color: var(--orange); }
.tile { position: absolute; padding: .35rem .9rem; border: 2px solid var(--maroon); border-radius: 999px; background: var(--tan); color: var(--maroon); font-size: .8rem; font-weight: 800; box-shadow: 3px 3px 0 var(--maroon); animation: bob 5s ease-in-out infinite; }
.tile-tl { top: 1.6rem; left: 1.6rem; } .tile-tr { top: 28%; right: 1.6rem; animation-delay: -1.2s; }
.tile-bl { bottom: 5.2rem; left: 1.6rem; animation-delay: -2.4s; } .tile-br { bottom: 5.2rem; right: 1.6rem; animation-delay: -3.6s; }
/* Gentle floating animation for the tech tiles */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

/* ---------- 6-7. Sections (Hero, About, Skills, Education) ---------- */
.section { padding: 5rem 4%; }
.section h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); margin: .5rem 0 2.2rem; }
.section h2 em { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-color: rgba(68, 20, 30, .3); }

/* Hero: two-column CSS Grid (text | photo) */
.hero { min-height: calc(100vh - 80px); display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 4rem; padding: 3rem 4%; }
.hero h1 { font-size: clamp(3rem, 7vw, 5.6rem); margin: .6rem 0 1.2rem; }
.hero h1 em { display: block; }
.tagline { display: inline-block; font: 1.8rem var(--display); color: var(--rose-deep); margin-bottom: 1rem; padding-bottom: .1rem; border-bottom: 3px dashed var(--rose); }
.lead { max-width: 48ch; margin-bottom: 1.8rem; font-size: 1.1rem; }

/* About */
.about { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: center; }
.about-text > p:not(.eyebrow) { margin-bottom: 1.2rem; }
.facts { display: grid; gap: .8rem; margin-bottom: 1.5rem; }
.facts dt { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.2rem 0; margin-bottom: 1.6rem; border-top: 2px solid rgba(68, 20, 30, .25); }
.stats strong { display: block; font: 3.2rem/1 var(--display); }
.stats span { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Skills */
/* repeat(auto-fit, minmax()) makes the cards wrap automatically on smaller screens */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2rem; }
.skill-card { padding: 1.8rem; }
.num { font: 1.2rem var(--display); color: var(--rose-deep); }
.skill-card h3 { font-size: 2rem; margin: .2rem 0 1.1rem; }

/* Education */
.edu-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; }
.edu-card, .nsct-card { padding: 2rem; }
.edu-card h3 { font-size: 2rem; }
.edu-meta { margin: .6rem 0 .8rem; font-weight: 800; color: var(--rose-deep); }
.edu-card ul { margin-top: 1rem; padding-left: 1.2rem; list-style: disc; }
.nsct-card { background: var(--maroon); color: var(--cream); box-shadow: 6px 6px 0 var(--tan); }
.nsct-card:hover { box-shadow: 9px 11px 0 var(--tan); }
.nsct-score { font: 5rem/1 var(--display); color: var(--orange); }
.nsct-score small { display: block; font: 800 .8rem var(--body); letter-spacing: .15em; text-transform: uppercase; color: var(--cream); }
.nsct-card h3 { font-size: 1.7rem; margin: 1rem 0 .5rem; }

/* ---------- 8. Projects and Contact ---------- */
/* Project thumbnails are CSS backgrounds with a gradient fallback if an image is missing */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.project-card { overflow: hidden; display: flex; flex-direction: column; }
.project-thumb { height: 200px; border-bottom: 3px solid var(--maroon); background-size: cover; background-position: top center; }
.thumb-1 { background-image: url("images/moodbrew_preview.jpg"), linear-gradient(135deg, #7a4a2a, #2a1408); }
.thumb-2 { background-image: url("images/cheating_preview.png"), linear-gradient(135deg, #b3324e, #44141e); }
.thumb-3 { background-image: url("images/ecommerce_preview.png"), linear-gradient(135deg, #c98a3a, #44141e); }
.project-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; align-items: flex-start; }
.tag { padding: .15rem .8rem; border-radius: 999px; background: var(--rose); color: var(--maroon); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-body h3 { font-size: 2rem; }
.project-body .btn { margin: auto 0 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.contact-info > p:first-child { font-size: 1.1rem; margin-bottom: 1.2rem; }
.contact-info li { display: flex; flex-direction: column; padding: .7rem 0; border-bottom: 2px solid rgba(68, 20, 30, .15); }
.contact-info strong { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); }
.socials { margin-top: 1.5rem; }
.contact-form { padding: 2rem; display: flex; flex-direction: column; gap: .4rem; }
.contact-form:hover { transform: none; box-shadow: 6px 6px 0 var(--maroon); }
.contact-form label { margin-top: .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; padding: .75rem 1rem; border: 3px solid var(--maroon); border-radius: 14px; font: inherit; color: var(--maroon); background: var(--cream); transition: box-shadow .2s; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--rose); }
.contact-form .btn { margin-top: 1.2rem; align-self: flex-start; }

/* ---------- 9. Footer ---------- */
.site-footer { background: var(--maroon); color: var(--cream); padding: 3rem 4%; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
.footer-name { font: 2.4rem var(--display); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4rem; font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer nav a { text-decoration: none; transition: color .2s, transform .2s; }
.site-footer nav a:hover { color: var(--orange); transform: translateY(-2px); }
.foot-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--cream); border-radius: 50%; }
.copyright { font-size: .85rem; opacity: .8; }

/* ---------- 10. Responsive design ---------- */
/* Laptop: hide the email pill so the navigation bar never gets cramped */
@media (max-width: 1280px) { .nav-email { display: none; } }
/* Tablet: single-column layouts; the navigation turns into a Menu button (CSS-only checkbox toggle) */
@media (max-width: 992px) {
  .menu-button { display: block; padding: .4rem 1.1rem; border: 3px solid var(--maroon); border-radius: 999px; box-shadow: var(--shadow); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; cursor: pointer; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 1rem 4% 1.5rem; background: var(--cream); border-bottom: 3px solid var(--maroon); }
  .menu-toggle:checked ~ .main-nav { display: block; }
  .menu-toggle:focus-visible + .menu-button { outline: 3px solid var(--rose-deep); outline-offset: 3px; }
  .nav-links { flex-direction: column; border: 0; box-shadow: none; padding: 0; }
  .site-header { flex-wrap: wrap; }
  .logo { margin-right: auto; }
  .hero, .about, .contact-grid, .edu-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero { min-height: auto; }
  .hero-text { order: 2; }
}

/* Mobile: smaller spacing, tiles hidden, stats and buttons resized */
@media (max-width: 600px) {
  .logo-name { font-size: 1.4rem; }
  .header-actions .icon-btn { display: none; }
  .section { padding: 3.5rem 5%; }
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
  .stats strong { font-size: 2.3rem; }
  .tile { display: none; }
  .photo-card figcaption { flex-direction: column; gap: .2rem; }
  .btn { padding: .7rem 1.3rem; }
  .contact-form, .edu-card, .nsct-card { padding: 1.4rem; }
}

/* Accessibility: turn off animations for people who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}