/* ============================================
   RESPONSIVE — ALL BREAKPOINTS
   youssefpro.com
   ============================================ */

/* ============================================
   LARGE SCREENS — 1800px+
   ============================================ */
@media (min-width: 1800px) {
  .hero-section     { padding: 0 120px; }
  .hero-image-frame { width: 440px; }
  .hero-title       { font-size: 3.6rem; }
  .hero-content     { max-width: 680px; }
  .hero-inner       { gap: 80px; }
  .about-preview-image-bg { inset: -36px; }
}

/* ============================================
   LARGE SCREENS — 1400px to 1799px
   ============================================ */
@media (min-width: 1400px) and (max-width: 1799px) {
  .hero-section     { padding: 0 80px; }
  .hero-image-frame { width: 380px; }
  .hero-title       { font-size: 3rem; }
  .hero-content     { max-width: 600px; }
  .hero-inner       { gap: 60px; }
  .about-preview-image-bg { inset: -36px; }
}

/* ============================================
   MEDIUM SCREENS — 1024px to 1399px
   ============================================ */
@media (min-width: 1024px) and (max-width: 1399px) {
  .hero-section     { padding: calc(var(--header-height) + 20px) 40px 0; }
  .hero-image-frame { width: 300px; }
  .hero-title       { font-size: 2.4rem; }
  .hero-content     { max-width: 520px; }
  .hero-inner       { gap: 48px; }
  .services-preview-grid  { grid-template-columns: repeat(3, 1fr); }
  .portfolio-preview-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   TABLET — 769px to 1023px
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
  .hero-section     { padding: calc(var(--header-height) + 20px) 32px 0; }
  .hero-inner       { gap: 32px; }
  .hero-image-frame { width: 260px; }
  .hero-title       { font-size: 2rem; white-space: normal; }
  .hero-content     { max-width: 460px; }
  .hero-tagline     { font-size: 0.9rem; }

  .section       { padding: 64px 32px; }
  .stats-section { padding: 48px 32px; }
  .cta-section   { padding: 80px 32px; }

  .services-preview-grid { grid-template-columns: 1fr 1fr; }
  .service-card:last-child { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; width: 100%; }

  .about-preview-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-preview-image-wrap { max-width: 360px; margin: 0 auto; }

  .portfolio-preview-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-card:last-child { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; width: 100%; }
}

/* ============================================
   DESKTOP — hide mobile menu toggle
   ============================================ */
@media (min-width: 769px) {
  #menu-toggle { display: none !important; }
}

/* ============================================
   MOBILE — max 768px
   ============================================ */
@media (max-width: 768px) {

  /* ---- OVERFLOW ROOT FIX ---- */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  #page, .site, .wp-site-blocks,
  .entry-content, .single-content,
  .content-wrap, .content-area,
  .site-main, #main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* ---- SIDEBAR ---- */
  #sidebar .sidebar-logo { display: none; }
  #sidebar { transform: translateX(-100%); z-index: 1050; }
  #sidebar.open { transform: translateX(0); }
  #menu-toggle { display: flex !important; }

  .sidebar-lang {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0 4px;
  }
  .sidebar-lang .lang-active  { color: var(--color-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
  .sidebar-lang .lang-divider { color: var(--color-border); font-size: 13px; }
  .sidebar-lang .lang-switch  { color: var(--color-text-muted); font-size: 13px; cursor: pointer; }

  /* ---- HEADER ---- */
  #site-header { padding: 0 16px; }
  .header-logo .logo-name,
  .header-logo .logo-title { font-size: 17px; }

  /* ---- FOOTER ---- */
  #site-footer   { margin-left: 0; width: 100%; padding: 24px 20px; }
  .footer-inner  { flex-direction: column; text-align: center; }
  .footer-links  { justify-content: center; }
  .footer-social { justify-content: center; }

  /* ---- HERO ---- */
  .hero-section {
    height: auto;
    min-height: 100vh;
    padding: calc(var(--header-height) + 32px) 20px 48px;
    overflow: hidden;
  }

  .hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 32px;
    height: auto;
    align-items: center;
  }

  .hero-content    { max-width: 100%; width: 100%; order: 2; }
  .hero-image-side { order: 1; overflow: visible; }

  .hero-title {
    font-size: 1.8rem;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
  }

/* Typed text — inline-block so cursor follows text */
.hero-typed {
  white-space: normal !important;
  display: inline-block;
  border-right: 3px solid var(--color-accent);
}

  .hero-tagline  { max-width: 100%; font-size: 0.9rem; margin: 0 auto 24px; }
  .hero-buttons  { justify-content: center; }
  .hero-badge    { margin: 0 auto 16px; }

  /* Image frame */
  .hero-image-frame { width: 200px; }

  /* Rings — smaller on mobile */
  .hero-image-ring   { inset: -12px; }
  .hero-image-ring-2 { inset: -24px; }

  /* Social icons */
  .hero-social-row { justify-content: center; gap: 8px; }
  .social-link     { width: 36px; height: 36px; }

  /* Floating badges — smaller and repositioned */
  .img-badge        { font-size: 9px; padding: 5px 10px; gap: 4px; }
  .img-badge-blue   { bottom: 16px;  right: -32px; }
  .img-badge-cyan   { top: 8px;      right: -32px; }
  .img-badge-green  { top: 40%;      left: -60px;  }

  /* ---- SECTIONS ---- */
  .section        { padding: 60px 20px; }
  .stats-section  { padding: 48px 20px; }
  .cta-section    { padding: 80px 20px; }
  .section-header { text-align: center; }
  .section-subtitle { margin-left: auto; margin-right: auto; }

  /* ---- SERVICES ---- */
  .services-preview-grid { grid-template-columns: 1fr; }
  .service-card:last-child { grid-column: auto; max-width: 100%; margin: 0; }
  .service-card-desc       { text-align: center; }
  .service-card-title      { text-align: center; }
  .service-card-tag        { margin: 0 auto; }
  .service-card-icon       { margin: 0 auto; }
  .service-card-price      { justify-content: center; }
  .service-card-link       { justify-content: center; }

  /* ---- ABOUT ---- */
  .about-preview-section    { overflow: visible; }
  .about-preview-inner      { grid-template-columns: 1fr; gap: 48px; }
  .about-preview-image-wrap { max-width: 260px; margin: 0 auto; padding: 16px; }
  .about-preview-image-bg   { inset: -12px; }
  .about-preview-image      { max-width: 100%; }
  .about-preview-meta       { gap: 16px; padding: 16px; width: 100%; justify-content: center; }
  .about-preview-buttons    { justify-content: center; }
  .about-preview-content .section-title,
  .about-preview-content .section-label { text-align: center; }
  .about-preview-text   { text-align: center; }
  .about-preview-skills { justify-content: center; }

  /* ---- PORTFOLIO ---- */
  .portfolio-preview-grid { grid-template-columns: 1fr; }
  .portfolio-card:last-child { grid-column: auto; max-width: 100%; margin: 0; }
  .portfolio-card-tags  { justify-content: center; }
  .portfolio-card-title { text-align: center; }
  .portfolio-card-desc  { text-align: center; }

  /* ---- STATS ---- */
  .stats-inner  { gap: 0; flex-wrap: wrap; }
  .stat-item    { padding: 20px 16px; min-width: 50%; flex: 0 0 50%; }
  .stat-divider { display: none; }
  .stat-number  { font-size: 2.2rem; }

  /* ---- CTA ---- */
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-title   { font-size: 1.8rem; }
}

/* ---- KADENCE ENTRY FIX ---- */
.entry.single-entry,
.entry.content-bg.single-entry,
article.entry,
.entry-content-wrap,
.content-container,
.site-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/*.service-card-desc, .portfolio-card-desc, .portfolio-card-title{*/
/*    text-align: center;*/
/*}*/

/*body.js-loaded .reveal.revealed{*/
/*    align-items: center;*/
/*}*/

/*.portfolio-card-tags{*/
/*    justify-content: center;*/
/*}*/

.about-preview-image-bg{
    inset: 0px;
}

/* ============================================
   VERY SMALL MOBILE — max 480px
   ============================================ */
@media (max-width: 480px) {
  .hero-title       { font-size: 1.7rem; }
  .hero-image-frame { width: 180px; }
  .hero-image-ring   { inset: -10px; }
  .hero-image-ring-2 { inset: -20px; }
  .img-badge-blue  { right: -28px; }
  .img-badge-cyan  { right: -28px; }
  .img-badge-green { left: -55px; }
}

/* ============================================
   ABOUT PAGE — TABLET
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
  .about-hero-inner      { grid-template-columns: 1fr; gap: 48px; }
  .about-hero-image-wrap { max-width: 360px; margin: 0 auto; }
  .skills-grid           { grid-template-columns: 1fr 1fr; }
  .values-grid           { grid-template-columns: 1fr 1fr; }
  .timeline              { padding-left: 32px; }
}

/* ============================================
   ABOUT PAGE — MOBILE
   ============================================ */
@media (max-width: 768px) {
  /* Hero */
  .about-hero-section    { padding-top: calc(var(--header-height) + 32px); }
  .about-hero-inner      { grid-template-columns: 1fr; gap: 40px; }
  .about-hero-image-wrap { max-width: 280px; margin: 0 auto; order: -1; }
  .about-hero-subtitle   { font-size: 1.1rem; text-align: center; }
  .about-hero-text       { text-align: center; }
  .about-hero-buttons    { justify-content: center; }
  .about-hero-content .section-label,
  .about-hero-content .section-title { text-align: center; }
  .about-badge-exp       { right: -10px; bottom: 20px; }
  .about-badge-projects  { left: -10px; top: 20px; }

  /* Skills */
  .skills-grid { grid-template-columns: 1fr; }

  /* Timeline */
  .timeline            { padding-left: 28px; }
  .timeline-header     { flex-direction: column; gap: 12px; }
  .timeline-date       { margin-left: 0; }
  .timeline-card       { padding: 20px; }

  /* Education */
  .education-card      { flex-direction: column; text-align: center; padding: 24px; }
  .education-meta      { justify-content: center; }

  /* Values */
  .values-grid         { grid-template-columns: 1fr 1fr; gap: 16px; }
  .value-card          { padding: 24px 16px; }
}

/* Skills cards mobile center */
  .skill-card          { text-align: center; align-items: center; }
  .skill-card-icon     { margin: 0 auto; }
  .skill-dots          { justify-content: center; }

@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr; }
}


/* ============================================
   SERVICES PAGE — TABLET
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
  .all-services-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid      { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pricing-card-featured { transform: scale(1); }
  .pricing-card-featured:hover { transform: translateY(-4px); }
  .process-grid      { flex-wrap: wrap; gap: 16px; }
  .process-step      { max-width: 200px; }
  .process-step-arrow { display: none; }
  .services-hero-stats { gap: 20px; padding: 16px 24px; }
}

/* ============================================
   SERVICES PAGE — MOBILE
   ============================================ */
@media (max-width: 768px) {
  /* Hero */
  .services-hero-section { padding-top: calc(var(--header-height) + 40px); padding-bottom: 48px; }
  .services-hero-subtitle { font-size: 0.95rem; }
  .services-hero-stats    { flex-direction: column; gap: 16px; padding: 20px 24px; width: 100%; }
  .services-hero-stat-divider { width: 100%; height: 1px; }

  /* Services grid */
  .all-services-grid { grid-template-columns: 1fr; }
  .service-full-card-top { flex-wrap: wrap; gap: 12px; }

  /* Pricing */
  .pricing-grid          { grid-template-columns: 1fr; }
  .pricing-card-featured { transform: scale(1); }
  .pricing-card-featured:hover { transform: translateY(-4px); }
  .pricing-amount        { font-size: 2.8rem; }

  /* Process */
  .process-grid       { flex-direction: column; align-items: center; gap: 16px; }
  .process-step       { max-width: 100%; width: 100%; }
  .process-step-arrow { transform: rotate(90deg); }

  /* FAQ */
  .faq-question { font-size: 0.9rem; padding: 16px 20px; }
  .faq-answer   { padding: 0 20px; }
  .faq-item.open .faq-answer { padding: 0 20px 16px; }
}



/* ============================================
   PORTFOLIO PAGE — TABLET
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
    .portfolio-grid {
    grid-template-columns: 1fr 1fr;
  }
  .portfolio-grid-card:last-child {
    grid-column: auto;
    max-width: 100%;
    margin: 0;
  }
}

/* ============================================
   PORTFOLIO PAGE — MOBILE
   ============================================ */
@media (max-width: 768px) {
  .portfolio-hero-section   { padding-top: calc(var(--header-height) + 40px); padding-bottom: 48px; }
  .portfolio-hero-subtitle  { font-size: 0.95rem; }


  .portfolio-filters { justify-content: center; }
  .portfolio-grid    { grid-template-columns: 1fr; }

  .portfolio-grid-title { text-align: center; }
  .portfolio-grid-desc  { text-align: center; }
  .portfolio-grid-tags  { justify-content: center; }
  .portfolio-grid-link  { justify-content: center; width: 100%; }
}




/* ============================================
   CONTACT PAGE — TABLET
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
  .contact-inner      { grid-template-columns: 1fr; gap: 48px; }
  .contact-form-col   { position: static; }
  .contact-form-card  { padding: 32px; }
}

/* ============================================
   CONTACT PAGE — MOBILE
   ============================================ */
@media (max-width: 768px) {
  .contact-section    { padding-top: calc(var(--header-height) + 40px); }
  .contact-inner      { grid-template-columns: 1fr; gap: 40px; }
  .contact-form-col   { position: static; }
  .contact-form-card  { padding: 24px; }
  .contact-form-title { font-size: 1.2rem; }
  .contact-info-col .section-title,
  .contact-info-col .section-label { text-align: center; }
  .contact-intro      { text-align: center; }
  .contact-detail-item { flex-direction: column; text-align: center; gap: 8px; }
  .contact-availability { justify-content: center; }
  .contact-social     { align-items: center; }
  .social-links-row   { justify-content: center; }
}


/* ============================================
   404 PAGE — TABLET
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
  .not-found-pages-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   404 PAGE — MOBILE
   ============================================ */
@media (max-width: 768px) {
  .not-found-section  { padding-top: calc(var(--header-height) + 24px); }
  .not-found-links    { flex-direction: column; align-items: center; }
  .not-found-links .btn-primary,
  .not-found-links .btn-secondary { width: 100%; justify-content: center; }
  .not-found-pages-grid { grid-template-columns: repeat(2, 1fr); }
  .not-found-0 { -webkit-text-stroke: 2px var(--color-border); }
}