/*
 * ============================================================
 * ANSI Clinic – Mobile Optimizations
 * Fișier: assets/css/ansiclinic-mobile.css
 * Încărcat prin functions.php, prioritate 9999
 * ============================================================
 */

/* ============================================================
   1. FONTURI & LIZIBILITATE
   ============================================================ */
@media only screen and (max-width: 767px) {

  body {
    font-size: 16px !important;
    line-height: 1.65 !important;
    -webkit-text-size-adjust: 100%;
  }

  h1 { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(19px, 5vw, 26px) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(16px, 4.5vw, 22px) !important; line-height: 1.35 !important; }
  h4 { font-size: clamp(15px, 4vw, 18px) !important; }

  p, li, .entry-content {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* Titluri articole în grid */
  .blog-entry .entry-title,
  .blog-entry .blog-entry-header .entry-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* Meta date mai mici */
  .blog-entry ul.meta,
  .blog-entry ul.meta li {
    font-size: 12px !important;
  }
}

/* ============================================================
   2. HEADER STICKY & LOGO
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* Header mai compact pe mobile */
  #site-header #site-header-inner {
    padding: 0 16px !important;
  }

  #site-logo #site-logo-inner {
    height: 60px !important;
  }

  #site-logo #site-logo-inner img {
    max-height: 40px !important;
    width: auto !important;
  }

  /* Hamburger mai mare – touch target ≥ 48px */
  .oceanwp-mobile-menu-icon a,
  #mobile-menu-icon a {
    min-width: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
  }

  /* Meniu mobil – iteme mai mari */
  #sidr li a,
  #mobile-dropdown li a,
  .sidr-class-menu-item a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  /* Căutare în header */
  #site-navigation-wrap .search-toggle,
  .search-toggle a {
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

/* ============================================================
   3. HERO / PAGE HEADER
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* Slider / imagine hero */
  .page-header,
  .oceanwp-page-header-wrap,
  #page-header-bg {
    min-height: 200px !important;
    max-height: 280px !important;
  }

  /* Titlu hero lizibil pe fundal */
  #page-header-bg .page-header-title,
  .page-header .page-header-title {
    font-size: clamp(20px, 6vw, 30px) !important;
    padding: 12px 16px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
  }

  /* Spațiu mai mic sus/jos pe mobile */
  .page-header {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* ============================================================
   4. GRID ARTICOLE → LAYOUT MOBIL
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* Forțează o singură coloană */
  #blog-entries,
  .blog-grid,
  .has-blog-grid .blog-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .blog-entry.post,
  .blog-entry.grid-entry,
  #blog-entries .blog-entry {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(0,0,0,.08);
  }

  /* Card grid → layout orizontal (imagine stânga, text dreapta) */
  .blog-entry.grid-entry .blog-entry-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }

  .blog-entry.grid-entry .thumbnail {
    width: 110px !important;
    min-width: 110px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .blog-entry.grid-entry .thumbnail img {
    width: 110px !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .blog-entry.grid-entry .blog-entry-header {
    margin: 0 0 8px !important;
  }

  .blog-entry.grid-entry .blog-entry-inner > *:not(.thumbnail) {
    padding: 12px 14px !important;
    flex: 1 !important;
  }

  /* Ascunde summary în cardul mic pe mobil */
  .blog-entry.grid-entry .blog-entry-summary {
    display: none !important;
  }

  /* Imagini lazy – previne layout shift */
  .blog-entry img,
  .thumbnail img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ============================================================
   5. CONȚINUT ARTICOL (pagini singulare)
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* Padding lateral mai generos */
  #content-wrap,
  #content,
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Imagini în articol – responsive cu aspect ratio */
  .entry-content img,
  .single-post .entry-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }

  /* Tabele – scroll orizontal în loc de overflow */
  .entry-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 14px !important;
  }

  /* Embeds video – responsive */
  .entry-content iframe,
  .responsive-video-wrap iframe {
    max-width: 100% !important;
  }

  /* Spațiere între blocuri */
  .entry-content > * + * {
    margin-top: 1.25em !important;
  }
}

/* ============================================================
   6. FLOATING CTA BAR (sticky bottom)
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* Bara CTA fixă jos */
  #ansiclinic-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 -4px 20px rgba(0,0,0,.10);
    z-index: 99999;
  }

  #ansiclinic-mobile-cta .cta-call,
  #ansiclinic-mobile-cta .cta-appt {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 10px !important;
    padding: 13px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity .2s !important;
    min-height: 48px !important;
  }

  #ansiclinic-mobile-cta .cta-call {
    background: #0d2140 !important;
    color: #ffffff !important;
  }

  #ansiclinic-mobile-cta .cta-appt {
    background: #1a7a72 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(26,122,114,.40) !important;
  }

  #ansiclinic-mobile-cta .cta-call:hover,
  #ansiclinic-mobile-cta .cta-appt:hover {
    opacity: .88 !important;
  }

  /* Spațiu sub conținut ca bara CTA să nu acopere textul */
  body {
    padding-bottom: 80px !important;
  }

  /* Ascunde bara pe paginile de admin/preview */
  body.logged-in #ansiclinic-mobile-cta {
    bottom: 32px; /* deasupra barei de admin WordPress */
  }
}

/* Ascunde bara pe desktop */
@media only screen and (min-width: 768px) {
  #ansiclinic-mobile-cta {
    display: none !important;
  }
}

/* ============================================================
   7. TOUCH TARGETS – accesibilitate (WCAG 2.5.5)
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* Toate link-urile și butoanele – minim 48x48px */
  .menu-item > a,
  .nav-menu li a,
  #footer-widgets a,
  .widget a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Butoane */
  .button, .btn,
  input[type="submit"],
  input[type="button"],
  button:not(#ansiclinic-mobile-cta *) {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  /* Câmpuri formular */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea, select {
    min-height: 48px !important;
    font-size: 16px !important; /* previne zoom automat iOS */
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }
}

/* ============================================================
   8. SIDEBAR – ascunde pe mobile, afișează în footer
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* Sidebar devine full-width sub conținut */
  #sidebar,
  .sidebar-widget-area {
    width: 100% !important;
    float: none !important;
    margin-top: 32px !important;
    border-top: 1px solid rgba(0,0,0,.08);
    padding-top: 24px !important;
  }

  /* Widget-uri în sidebar */
  #sidebar .widget {
    margin-bottom: 24px !important;
  }
}

/* ============================================================
   9. FOOTER – simplificat pe mobile
   ============================================================ */
@media only screen and (max-width: 767px) {

  #footer-widgets .footer-box {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px !important;
  }

  #footer-bottom-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }

  #footer-bottom-inner > * {
    float: none !important;
    text-align: center !important;
  }

  /* Scroll to top – mai mare pe mobile */
  #scroll-top {
    width: 44px !important;
    height: 44px !important;
    bottom: 90px !important; /* deasupra CTA bar */
    right: 14px !important;
  }
}

/* ============================================================
   10. IMAGINI – performanță & layout shift prevention
   ============================================================ */

/* Toate imaginile responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Aspect ratio placeholder – previne CLS (Cumulative Layout Shift) */
.thumbnail a,
.blog-entry .thumbnail {
  display: block;
  position: relative;
}

/* Lazy load fade-in */
img.lazyload,
img.lazyloading {
  opacity: 0;
  transition: opacity .3s ease;
}

img.lazyloaded {
  opacity: 1;
}

/* ============================================================
   11. MISC FIXES
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* Elimină overflow orizontal */
  body, #outer-wrap, #wrap {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Breadcrumbs – scroll orizontal în loc de wrap urât */
  .ocean-breadcrumbs {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  /* Paginare mai ușor de apăsat */
  .page-numbers {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}