/*
 * LONDONME.UK - GLOBAL STYLESHEET
 * Author: LondonME
 * Version: 1.0.0
 *
 * TABLE OF CONTENTS
 * -----------------
 * [1] ROOT & DESIGN TOKENS (متغیرهای سراسری و توکن‌های طراحی)
 * [2] GLOBAL RESET & BASE STYLES (ریست و استایل‌های پایه)
 * [3] LAYOUT & MAJOR SECTIONS (چیدمان و بخش‌های اصلی)
 * - .background
 * - #hero-section
 * - .content-section
 * - .content-container
 * [4] TYPOGRAPHY & CONTENT BODY (تایپوگرافی و استایل محتوای Markdown)
 * - Global Link Styles
 * - .content-body
 * - .title-content
 * [5] COMPONENT: TOOLBAR & ICONS (کامپوننت: نوار ابزار و آیکون‌ها)
 * - Base Toolbar Styles
 * - Toolbar Variants (.toolbar--main, .toolbar--secondary, etc.)
 * - Icon Base Styles
 * - Specific Icon Backgrounds
 * - Responsive Toolbar Adjustments
 * [6] COMPONENT: SHOWCASE & CARDS (کامپوننت: نمونه‌کارها و کارت‌ها)
 * - .showcase-container & .showcase-grid
 * - .card Base Styles
 * - .card Content & Link
 * - Responsive Card Adjustments
 * [7] COMPONENT: POST NAVIGATION (کامپوننت: ناوبری بین پست‌ها)
 * [8] UTILITY CLASSES (کلاس‌های کاربردی)
 * - .button-primary
 * - .visually-hidden
 * [9] GLOBAL RESPONSIVE OVERRIDES (قوانین واکنش‌گرای سراسری)
 * - Mobile Hero & Layout Changes
 * - Small Screen Overflow Fixes
*/

/* ----------------------------------- */
/* [1] ROOT & DESIGN TOKENS            */
/* ----------------------------------- */
:root {
  /* Colors */
  --primary-color: antiquewhite;
  --secondary-color: whitesmoke;
  --background-overlay: rgba(0, 0, 0, 0.2);
  --hover-glow: rgba(0, 150, 255, 0.7);
  --link-color: #8ab4f8;

  /* Spacing */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;

  /* Transitions */
  --transition-speed: 0.4s;

  /* Icon Sizes */
  --icon-size-desktop: 20vh;
  --icon-size-desktop-1024: 20vh;
  --icon-size-secondary: 7vh;
  --icon-size-secondary-1024: 6vh;
  --icon-size-contact: 7vh;
  --icon-size-contact-1024: 6vh;

  /* Typographic Scale */
  --font-size-sm: 0.9rem;
  --font-size-base: 1.1rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 1.8rem;
  --font-size-xxl: 2.2rem;

  /* Display font sizes for main page titles */
  --font-size-display: clamp(2rem, 4.5vw, 2.8rem);
  --font-size-display-alt: clamp(1.8rem, 4vw, 2.5rem);

  /* Line height for better readability */
  --line-height-base: 1.8;
}

/* ----------------------------------- */
/* [2] GLOBAL RESET & BASE STYLES      */
/* ----------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Global Link Styles */
a,
a:visited {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* ----------------------------------- */
/* [3] LAYOUT & MAJOR SECTIONS         */
/* ----------------------------------- */

/* Main background container for the entire page */
.background {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-lg);
  overflow-x: hidden;
  background: url("/assets/bg.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* Sticky hero section for desktop */
#hero-section {
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 1; /* Ensures it stays on top of content sections */
}

/* General content sections that scroll over the hero */
.content-section {
  background-color: rgba(15, 15, 15, 0.7);
  color: var(--primary-color);
  padding: 4rem var(--spacing-lg);
  margin-top: 2%;
  position: relative;
  border-radius: 8px;
  z-index: 2; /* Sits above the hero background but below the toolbars if they had higher z-index */
  overflow-wrap: break-word; /* Prevents long words/links from overflowing */

  /* Animation state (initially hidden) */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animation trigger class (added via JavaScript) */
.content-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Standard container for centering content within sections */
.content-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* ----------------------------------- */
/* [4] TYPOGRAPHY & CONTENT BODY       */
/* ----------------------------------- */

/* Main brand title in the hero section */
.title-content {
  font-family: "Courier New", Courier, monospace;
  font-size: 4vw;
  color: var(--primary-color);
  margin-bottom: auto;
}

/* Common styles for Markdown content body (services, showcase) */
.content-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--primary-color);
}

.content-body :is(h2, h3, h4) {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.3;
}

.content-body h2 {
  font-size: var(--font-size-xl);
}

.content-body h3 {
  font-size: var(--font-size-lg);
}

.content-body p {
  margin-bottom: 1.5rem;
}

.content-body a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 500;
}

.content-body a:hover {
  text-decoration: underline;
}

.content-body :is(ul, ol) {
  padding-left: 2rem;
  margin-bottom: 1.5rem;
}

.content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ----------------------------------- */
/* [5] COMPONENT: TOOLBAR & ICONS      */
/* ----------------------------------- */

/* Base style for all toolbars */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  background: var(--background-overlay);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  transition: all var(--transition-speed) ease-in-out;
}

/* Base style for all icons */
.icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  aspect-ratio: 1;
  display: inline-block;
}

.icon:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px 5px var(--hover-glow);
}

/* --- Toolbar Variants & Positioning --- */
/* These positionings are critical for the hero layout on desktop */

.toolbar--title {
  top: 5%;
  left: 5%;
  width: 14vw;
  height: 5vh;
  display: flex;
  padding: 2px;
  justify-content: center;
  border-radius: 2px;
  color: var(--secondary-color);
  font-size: 1vw;
  gap: 1vw;
}
.toolbar--title .icon {
  width: 1.25vw;
}

.toolbar--main {
  position: absolute;
  top: 50%;
  left: 30%;
  right: 30%;
  height: 15vh;
  padding-left: 20rem; /* These paddings might be for alignment on very wide screens */
  padding-right: 20rem;
}
.toolbar--main .icon {
  width: var(--icon-size-desktop);
  height: var(--icon-size-desktop);
}

.toolbar--secondary {
  position: absolute;
  bottom: 10%;
  left: 40%;
  right: 10%;
  gap: var(--spacing-sm);
  height: auto;
}
.toolbar--secondary .icon {
  width: var(--icon-size-secondary);
  height: var(--icon-size-secondary);
}

.toolbar--contact {
  position: absolute;
  bottom: 10%;
  left: 5%;
  display: flex;
  gap: 10px;
}
.toolbar--contact .icon {
  width: var(--icon-size-contact);
  height: var(--icon-size-contact);
}

/* --- Specific Icon Backgrounds --- */
.icon--software-engineer {
  background-image: url("/assets/x96/software-engineer.svg");
}
.icon--amazon {
  background-image: url("/assets/x96/amazon.png");
}
.icon--ebay {
  background-image: url("/assets/x96/ebay.png");
}
.icon--shopify {
  background-image: url("/assets/x96/shopify.png");
}
.icon--google {
  background-image: url("/assets/x96/google.png");
}
.icon--email {
  background-image: url("/assets/x96/email_x96.png");
}
.icon--github {
  background-image: url("/assets/x96/github_x96.png");
}
.icon--shopify-icon {
  background-image: url("/assets/x96/shopify-icon_x96.png");
}
.icon--ads {
  background-image: url("/assets/x96/ads_x96.png");
}
.icon--deliveroo {
  background-image: url("/assets/x96/deliveroo_x96.png");
}
.icon--chatgpt {
  background-image: url("/assets/x96/chatgpt_x96.png");
}
.icon--just-eat {
  background-image: url("/assets/x96/just-eat_x96.png");
}
.icon--voip {
  background-image: url("/assets/x96/voip_x96.png");
}
.icon--google-business {
  background-image: url("/assets/x96/google_business_x96.png");
}
.icon--tiktok {
  background-image: url("/assets/x96/tiktok_x96.png");
}
.icon--uber-eat {
  background-image: url("/assets/x96/uber-eat_x96.png");
}
.icon--instagram {
  background-image: url("/assets/x96/instagram_x96.png");
}
.icon--facebook {
  background-image: url("/assets/x96/facebook_x96.png");
}

/* --- Responsive Toolbar Adjustments --- */
@media (max-width: 1024px) {
  .toolbar--main,
  .toolbar--secondary,
  .toolbar--contact {
    gap: 0.5rem;
  }
  .toolbar--main {
    top: 57%;
    left: 20%;
    right: 30%;
    height: 15%;
    padding: 0;
  }
  .toolbar--secondary {
    left: 40%;
    right: 15%;
  }
  .toolbar--secondary,
  .toolbar--contact {
    bottom: 1%;
    height: 10%;
  }

  .toolbar--main .icon {
    width: var(--icon-size-desktop-1024);
    height: auto;
  }
  .toolbar--secondary .icon {
    width: var(--icon-size-secondary-1024);
  }
  .toolbar--contact .icon {
    width: var(--icon-size-contact-1024);
  }
}

@media (max-width: 900px) {
  .toolbar--main {
    top: 60%;
    left: 15%;
    right: 30%;
    height: 15%;
  }
  .toolbar--secondary {
    left: 30%;
    right: 15%;
  }
}

/* At this breakpoint, the hero becomes static and toolbars flow naturally */
@media (max-width: 768px) {
  .toolbar {
    position: static;
    width: 100%;
    margin-bottom: var(--spacing-sm);
    flex-direction: row;
    justify-content: center;
  }
  .toolbar--main,
  .toolbar--secondary,
  .toolbar--contact {
    gap: 10px;
    height: auto;
    position: relative; /* Override absolute positioning */
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  /* Re-ordering for mobile view */
  .toolbar--title {
    order: 4;
  }
  .toolbar--main {
    order: 2;
  }
  .toolbar--secondary {
    order: 3;
    height: 10vh;
  }
  .toolbar--contact {
    order: 1;
    height: 5vh;
  }
}

@media (max-width: 575.98px) {
  .title-content {
    padding: 0;
    margin: 0;
  }
  .icon {
    width: 22px;
    height: 22px;
  }
  .toolbar--secondary {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    height: auto;
  }
  .toolbar--main {
    left: 10%;
    right: 10%;
  }
  .toolbar--contact {
    padding: 2vw;
  }
}

/* ----------------------------------- */
/* [6] COMPONENT: SHOWCASE & CARDS     */
/* ----------------------------------- */
.showcase-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.showcase-container h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 2rem;
  font-family: "Courier New", Courier, monospace;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.card {
  background: var(--background-overlay);
  border-radius: 8px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Stacks image on top of content */
  padding: 0;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Prevents image distortion */
  border-radius: 8px 8px 0 0;
  margin-bottom: 0; /* Remove margin as padding is handled in .card-content */
}

.card-content {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allows content to fill available space */
}

.card-content h3 {
  margin-bottom: 1rem;
}

.card-content h3 a {
  text-decoration: none;
  color: var(--secondary-color);
}

.card-content p {
  flex-grow: 1; /* Pushes the link to the bottom */
}

.card-link {
  display: inline-block;
  align-self: flex-end; /* Aligns link to the right */
  margin-top: 1rem;
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.card-link:hover {
  transform: translateX(4px);
}

/* --- Responsive Card Adjustments --- */
@media (max-width: 768px) {
  .showcase-container h2 {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }

  .showcase-grid {
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 575.98px) {
  .showcase-grid {
    grid-template-columns: 1fr; /* Force single column on very small screens */
  }

  .card {
    margin-bottom: 1.5rem;
  }
}

/* ----------------------------------- */
/* [7] COMPONENT: POST NAVIGATION      */
/* ----------------------------------- */
.post-navigation {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
}

.nav-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--background-overlay);
  border-radius: 8px;
  text-decoration: none;
  color: var(--primary-color);
  transition: all 0.3s ease;
  min-height: 100px;
  text-align: center;
  border: 1px solid transparent;
}

.nav-card:hover {
  transform: translateY(-5px);
  border-color: var(--hover-glow);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.nav-card.disabled {
  background: transparent;
  pointer-events: none;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.nav-label {
  font-size: 0.8rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-title {
  margin-top: 0.4rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.nav-icon {
  font-size: 2rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .nav-grid {
    grid-template-columns: 1fr 1fr; /* 2x2 grid on mobile */
  }
}

/* ----------------------------------- */
/* [8] UTILITY CLASSES                 */
/* ----------------------------------- */

.button-primary {
  display: inline-block;
  background-color: var(--background-overlay);
  color: var(--primary-color);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  margin-bottom: var(--spacing-lg);
}

.button-primary:hover {
  transform: translateY(-3px);
  border-color: var(--hover-glow);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ----------------------------------- */
/* [9] GLOBAL RESPONSIVE OVERRIDES     */
/* ----------------------------------- */
@media (max-width: 768px) {
  /* Make hero static on mobile, allowing normal page scroll */
  #hero-section {
    position: static;
    height: auto;
    min-height: unset;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
  }

  #showcase-section {
    padding-top: var(--spacing-lg);
    min-height: auto;
  }

  .content-section {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 575.98px) {
  /* Final overflow prevention for very small screens */
  .content-section {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    overflow-x: hidden; /* Critically prevents horizontal scroll */
    word-wrap: break-word; /* Legacy support */
  }
}

@media (max-width: 400px) {
  .content-section {
    /* Further padding reduction for extremely narrow screens */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}