/* ==========================================================================
   zitzlaff.com — Mobile Portrait Optimization

   Upload to: wp-content/themes/imagely-iconic/zitzlaff-mobile-fix.css
   Then enqueue via WordPress Customizer > Additional CSS, or add a
   <link> tag in the theme's header (see instructions below).
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. COMPACT HEADER — reduce logo + nav vertical footprint
   Targets portrait phones (max-width: 640px).
   The default theme gives the header ~150px+; this brings it to ~70-80px.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {

  /* Tighten overall header padding */
  .site-header,
  .header-image .site-header {
    padding: 5px 0 5px !important;
  }

  /* Shrink title area spacing */
  .title-area,
  .header-image .title-area {
    margin: 0 auto 0 !important;
    padding: 0 10px 2px !important;
  }

  /* Make logo smaller on phones */
  .header-image .site-title > a {
    max-height: 50px !important;
    min-height: 40px !important;
    margin: 4px auto 2px !important;
    background-size: contain !important;
  }

  /* Hide the tagline on small screens — it's redundant with the hero text */
  .site-description {
    display: none !important;
  }

  /* Compact the hamburger menu trigger area */
  .nav-primary,
  .site-header .nav-secondary {
    padding: 0 5px !important;
  }

  /* Reduce responsive menu link size for easier scanning */
  .nav-primary .responsive-menu a,
  .site-header .nav-secondary .responsive-menu a {
    font-size: 1.2rem !important;
    letter-spacing: 1px !important;
  }

  /* Reduce site-inner top margin (was 75px, too much after compact header) */
  .site-inner,
  .content-sidebar .site-inner,
  .imagely-full-width .site-inner,
  .imagely-full-width.content-sidebar .site-inner {
    margin-top: 30px !important;
  }
}

/* Also tweak for wider phones / small tablets in portrait */
@media only screen and (max-width: 1024px) and (max-height: 900px) and (orientation: portrait) {

  .site-header,
  .header-image .site-header {
    padding: 6px 0 8px !important;
  }

  .title-area,
  .header-image .title-area {
    margin-bottom: 2px !important;
    padding-bottom: 4px !important;
  }

  .header-image .site-title > a {
    max-height: 60px !important;
    min-height: 45px !important;
    margin: 5px auto 3px !important;
  }
}


/* -------------------------------------------------------------------------
   2. LANDSCAPE SLIDESHOW — show full image width on portrait screens
   The backstretch hero (.front-page-1) is fixed at 640px tall.
   On a 375px-wide phone that forces extreme cropping of landscape photos.
   Solution: use a landscape aspect-ratio container on portrait viewports
   so the images display in their natural orientation.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) and (orientation: portrait) {

  /* Replace fixed height with a landscape aspect ratio */
  .front-page-1 {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
  }

  /* Ensure backstretch fills the new container properly */
  .front-page-1 .backstretch {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .front-page-1 .backstretch img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Adjust the overlay widget area to fit the smaller hero */
  .front-page-1 .widget-area {
    height: 100% !important;
    /* Use flexbox to reliably center the claim text both axes */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Override the old inline-block + top/transform positioning:
     flexbox on the parent handles centering now */
  .front-page-1 .widget-area .wrap {
    display: block !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 12px !important;
    text-align: center !important;
  }

  /* Ensure the featured-page widget inside is also centered */
  .front-page-1 .widget-area .wrap .featuredpage,
  .front-page-1 .widget-area .wrap .featuredpage .widget-wrap,
  .front-page-1 .widget-area .wrap .featuredpage .widget-wrap .entry {
    text-align: center !important;
  }

  .front-page-1 .widget-area .wrap .entry-header,
  .front-page-1 .widget-area .wrap .entry-content {
    text-align: center !important;
  }

  /* Scale down hero text */
  .front-page-1 .widget-title {
    font-size: 2.2rem !important;
  }

  .front-page-1 .entry-title {
    font-size: 1.4rem !important;
  }

  .front-page-1 .entry-content {
    font-size: 0.9rem !important;
  }

  .front-page-1 .entry-content a.more-link {
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
  }
}

/* Tablets in portrait — moderate reduction */
@media only screen and (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {

  .front-page-1 {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .front-page-1 .backstretch img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Center the hero claim on tablets too */
  .front-page-1 .widget-area {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .front-page-1 .widget-area .wrap {
    display: block !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    text-align: center !important;
  }
}


/* -------------------------------------------------------------------------
   3. FEATURED CONTENT GRID — better spacing on phones
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {

  /* Reduce excessive padding on content sections */
  .front-page-2 .widget-area,
  .front-page-3 .widget-area,
  .front-page-4 .widget-area,
  .front-page-5 .widget-area,
  .front-page-6 .widget-area,
  .front-page-7 .widget-area,
  .front-page-8 .widget-area,
  .front-page-9 .widget-area,
  .front-page-10 .widget-area {
    padding: 25px 12px !important;
  }

  /* Tighter featured post entries */
  .featured-content .entry {
    padding-bottom: 20px !important;
  }

  .featured-content .entry-title {
    font-size: 110% !important;
    letter-spacing: 1.5px !important;
  }

  /* Tighter spacing on left/right aligned featured pages */
  .featuredpage.featured-align-left,
  .featuredpage.featured-align-right,
  .featuredpost.featured-align-left .entry,
  .featuredpost.featured-align-right .entry {
    margin-bottom: 15px !important;
  }

  /* Footer tighter */
  .footer-widgets {
    padding: 40px 15px 20px !important;
  }
}


/* -------------------------------------------------------------------------
   4. FOOTER CONTACT — stack image above text on mobile
   The Contact widget (footer-widgets-3) has an .alignleft image that
   floats beside the "Termin" text. On narrow screens the text squeezes
   into a tiny column. Clear the float so picture sits on top, text below.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

  /* Remove float from the contact image so it stacks vertically */
  .footer-widgets-3 .textwidget img.alignleft,
  .footer-widgets-3 .textwidget img.alignright {
    float: none !important;
    display: block !important;
    margin: 0 auto 15px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Also handle the wp-caption wrapper if present */
  .footer-widgets-3 .textwidget .wp-caption.alignleft,
  .footer-widgets-3 .textwidget .wp-caption.alignright {
    float: none !important;
    margin: 0 auto 15px !important;
    max-width: 100% !important;
  }

  /* Center the text underneath */
  .footer-widgets-3 .textwidget {
    text-align: center !important;
  }

  /* But left-align the address/phone block for readability */
  .footer-widgets-3 .textwidget p {
    text-align: left !important;
  }
}


/* -------------------------------------------------------------------------
   5. HERO SUBTITLE — 30% smaller on mobile
   "Corporate - Medical - Portrait: Photography & Film Direction..."
   Base size is 1.8rem (theme) / 1.6rem (at 640px). Reduce by 30%.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

  .front-page-1 .featuredpage .entry-content,
  .front-page-1 .featuredpage .entry-content p {
    font-size: 70% !important;
  }
}


/* -------------------------------------------------------------------------
   6. CALENDLY BADGE — move out of the way on small screens
   The floating badge can overlap content on phones.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {

  .calendly-badge-widget {
    transform: scale(0.85) !important;
    transform-origin: bottom right !important;
  }
}