/* Xtypos Responsive Enhancements — loaded after the theme.
   Goal: tidy empty ad gaps, fluid media, and a better mobile + desktop reading experience.
   Conservative on purpose: no layout rewrites, only safe hardening. */

/* ---------------------------------------------------------------------------
   1) Collapse EMPTY ad / banner slots (external ad networks don't fill on local
      and sometimes leave gaps on mobile). :empty only hits truly-empty nodes. */
.td-a-rec:empty,
.td_block_template_1:empty,
.td-a-rec-id-custom_ad_1:empty,
.adsbygoogle:empty,
ins.adsbygoogle:not([data-ad-status="filled"]):empty,
.td-pulldown-filter-list:empty,
[id^="adman-"]:empty,
[class*="td-a-rec"]:empty { display: none !important; margin: 0 !important; }

/* ---------------------------------------------------------------------------
   2) Fluid media everywhere — never let an image/video force horizontal scroll. */
img, video { max-width: 100%; height: auto; }
.td-post-content iframe,
.tdb-block-inner iframe,
.wp-block-embed iframe { max-width: 100%; }
figure, .wp-caption { max-width: 100% !important; }

/* ---------------------------------------------------------------------------
   3) Desktop polish: keep long-form article text comfortably readable on very
      wide screens (cap measure, don't touch the grid/sidebar). */
@media (min-width: 1200px) {
  .td-post-content > p,
  .tdb_single_content .tdb-block-inner > p { max-width: 78ch; }
}

/* ---------------------------------------------------------------------------
   4) Mobile (<= 767px): readable type, comfortable spacing, real tap targets. */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* prevent accidental horizontal scroll from wide blocks */
  .td-container,
  .tdc-row,
  .td-pb-row { max-width: 100%; }
  .td-container { padding-left: 14px; padding-right: 14px; }

  /* readable body copy (>=16px also stops iOS auto-zoom on inputs) */
  .td-post-content,
  .tdb_single_content,
  .td-post-content p,
  .tdb-block-inner p { font-size: 17px; line-height: 1.7; }
  .entry-title, .td-module-title { line-height: 1.3; }

  /* generous tap targets for nav, social, buttons, pagination */
  .td-menu-mobile a,
  #td-mobile-nav a,
  .td-social-icon-wrap a,
  .td-mobile-content a,
  .td-subcat-dropdown a,
  .page-nav a, .page-nav span,
  button, .wpb_button, input[type="submit"] { min-height: 44px; }
  .td-menu-mobile a,
  .td-mobile-content a { display: flex; align-items: center; }

  /* inputs comfortable + zoom-proof */
  input, select, textarea { font-size: 16px; max-width: 100%; }

  /* stack any 2-col flex blocks that crowd on small screens */
  .td-pb-span6, .td-pb-span4, .td-pb-span8 { width: 100% !important; }

  /* tame oversized desktop banner wrappers on phones */
  .td-a-rec img, .wpb_single_image img { height: auto !important; }
  .td-header-sp-logo img { max-height: 44px; width: auto; }

  /* tighten section rhythm so the page doesn't feel gappy */
  .td_block_wrap { margin-bottom: 18px; }
  .td-pb-row + .td-pb-row { margin-top: 8px; }
}

/* ---------------------------------------------------------------------------
   5) Small phones (<= 480px): slightly tighter, keep headlines from overflowing. */
@media (max-width: 480px) {
  .td-container { padding-left: 12px; padding-right: 12px; }
  .entry-title { font-size: 1.15rem; word-break: break-word; }
  .td-module-title a { word-break: break-word; }
}

/* ===========================================================================
   Modern menu drawer (injected by mobile-menu.js, ALL widths — replaces the dated
   tagDiv mega-modal whenever the ΜΕΝΟΥ button is used).
   Off-canvas by default — cannot cover the page. Branded xtypos navy. */
:root { --xtd-navy: #0a2472; --xtd-acc: #2f7bf6; }

  #xt-drawer-bd {
    display: block; position: fixed; inset: 0; z-index: 2147483646;
    background: rgba(8,12,28,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
  }
  #xt-drawer-bd.on { opacity: 1; pointer-events: auto; }

  #xt-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0;
    width: min(90vw, 400px); z-index: 2147483647; background: #fff;
    transform: translateX(100%); transition: transform .32s cubic-bezier(.22,.61,.36,1);
    box-shadow: -16px 0 50px rgba(8,12,28,.32); overflow-y: auto; -webkit-overflow-scrolling: touch;
    font-family: Ubuntu, -apple-system, system-ui, "Segoe UI", sans-serif;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #xt-drawer.on { transform: translateX(0); }
  html.xt-drawer-open, html.xt-drawer-open body { overflow: hidden; }

  /* header */
  #xt-drawer .xtd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(14px + env(safe-area-inset-top,0px)) 18px 14px;
    background: var(--xtd-navy); color: #fff; position: sticky; top: 0; z-index: 2;
  }
  #xt-drawer .xtd-brand { font-weight: 800; font-size: 20px; letter-spacing: 1px; }
  #xt-drawer .xtd-close {
    width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
  }
  #xt-drawer .xtd-close:active { background: rgba(255,255,255,.28); transform: scale(.92); }
  #xt-drawer .xtd-close svg { width: 22px; height: 22px; }

  /* search */
  #xt-drawer .xtd-search { display: flex; align-items: center; gap: 8px; margin: 16px; position: relative; }
  #xt-drawer .xtd-si { position: absolute; left: 14px; color: #8a90a0; display: flex; }
  #xt-drawer .xtd-si svg { width: 19px; height: 19px; }
  #xt-drawer .xtd-search input {
    flex: 1; height: 48px; border: 2px solid #e7e9ef; border-radius: 12px;
    padding: 0 14px 0 42px; font-size: 16px; outline: none; background: #f7f8fa;
    transition: border-color .15s, background .15s;
  }
  #xt-drawer .xtd-search input:focus { border-color: var(--xtd-acc); background: #fff; }

  /* quick actions */
  #xt-drawer .xtd-quick { display: flex; gap: 10px; padding: 0 16px 14px; }
  #xt-drawer .xtd-q {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 13px 8px; border-radius: 14px; background: #f3f5f9; color: var(--xtd-navy);
    text-decoration: none; font-weight: 600; font-size: 13px; transition: background .15s, transform .12s;
  }
  #xt-drawer .xtd-q:active { background: #e8ebf2; transform: scale(.97); }
  #xt-drawer .xtd-q svg { width: 24px; height: 24px; }

  /* category nav */
  #xt-drawer .xtd-nav { border-top: 1px solid #eef0f4; }
  #xt-drawer .xtd-nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 54px; padding: 12px 18px; text-decoration: none;
    color: #14161c; font-size: 16.5px; font-weight: 600; line-height: 1.25;
    border-bottom: 1px solid #f0f2f6;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #xt-drawer .xtd-nav a:active { background: #eef3fe; color: var(--xtd-acc); padding-left: 24px; }
  #xt-drawer .xtd-nav a:focus-visible { outline: 3px solid var(--xtd-acc); outline-offset: -3px; }
  #xt-drawer .xtd-nav a svg { width: 18px; height: 18px; color: #b8bdca; flex: 0 0 auto; }

  /* socials */
  #xt-drawer .xtd-social { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px; }
  #xt-drawer .xtd-social a {
    width: 42px; height: 42px; border-radius: 50%; background: #f3f5f9; color: var(--xtd-navy);
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    font-weight: 700; font-size: 12px; text-transform: capitalize;
  }

/* ===========================================================================
   Mobile header bar order: Search (left) · Logo (center) · Menu (right). */
@media (max-width: 1018px) {
  .tdb_header_search { order: 1 !important; }   /* search -> left  */
  .tdb_header_logo   { order: 2 !important; }   /* logo   -> center */
  .tdi_22            { order: 3 !important; }   /* ΜΕΝΟΥ  -> right  */
}

/* Mobile header bar: tighter side padding + a slightly smaller logo, with the theme's
   natural distribution (search left, logo centred in the gap, menu inline right). */
@media (max-width: 1018px) {
  .td-header-mobile-wrap .tdc-row { padding-left: 12px !important; padding-right: 12px !important; }
  .td-header-mobile-wrap .tdb_header_logo img,
  .td-header-mobile-wrap .tdb-logo-img-wrap { max-width: 118px !important; width: auto !important; height: auto !important; }
}

/* Desktop logo header: cut the excess height (20px logo padding -> 6px) and vertically
   centre the row items (newsletter / logo / bookmarks) on one line. */
@media (min-width: 1019px) {
  .td-stretch-content .vc_column .tdb_header_logo { padding-top: 4px !important; padding-bottom: 4px !important; margin-bottom: 0 !important; }
  .td-stretch-content .vc_column .tdb_header_logo img,
  .td-stretch-content .vc_column .tdb_header_logo .tdb-logo-img-wrap { max-height: 84px !important; width: auto !important; height: auto !important; }
  .stretch_row_content_no_space .vc_row,
  .stretch_row_content_no_space .vc_column,
  .stretch_row_content_no_space .vc_column > .wpb_wrapper { align-items: center !important; }

  /* TOP UTILITY BAR was ~112px tall: the top menu block (tdi_130) ships ~45px of
     vertical padding, which stretched the whole flex row. Strip that padding and
     vertically-center the bar so it hugs its single line of links/weather/socials. */
  .tdi_130 .tdb_header_menu, .tdi_130 .td-block-inner,
  .tdi_130 .menu-item, .tdi_130 .menu-item > a,
  .tdi_130 .tdb-menu-item-text { padding-top: 0 !important; padding-bottom: 0 !important; }
  .vc_row.tdi_117 { align-items: center !important; }
  .vc_row.tdi_117 > .vc_column { align-self: center !important; }
}

/* Scroll smoothness: isolate the sticky header / back-to-top onto their own layer
   so scrolling doesn't re-rasterise them with the page. (content-visibility was tried
   and reverted — it inflated page height and hurt LCP.) */
.td-header-desktop-sticky-wrap, .td-affix { will-change: transform; }
.td-scroll-up { will-change: transform; }

/* ===========================================================================
   Kill layout shift (CLS): the theme-builder header composes client-side and
   grows as the search/menu blocks render, jolting all content below. Reserve the
   settled heights so nothing moves. */
@media (min-width: 1019px) {
  .td-header-template-wrap { min-height: 256px; }
  .td-stretch-content .td_block_wrap.tdb_header_search,
  .td-stretch-content .tdb-head-search-btn { min-height: 48px; min-width: 48px; }
  /* Collapse the 20px gaps the theme leaves between the header rows (top bar / logo /
     nav) so the header hugs its content instead of floating in empty space. */
  .td-header-template-wrap .tdc-row .vc_row.td-pb-row { margin-bottom: 0 !important; }
  .td-header-template-wrap .tdc_zone > .tdc-row { margin-bottom: 0 !important; }
}

/* Stop the header menu FOUC: the menu/search blocks briefly render tall (stacked) before
   JS lays them out, jolting the page. Pin the header rows to their settled height so the
   transient tall state can't push content (dropdowns are absolute, so they still open). */
@media (min-width: 1019px) {
  .td-header-template-wrap .td-stretch-content:has(.tdb_header_menu) { height: 71px !important; }
  .td-header-template-wrap .tdb_header_menu .td-block-inner { overflow: visible; }
}

/* Modern nav polish: smooth underline-grow on category hover (desktop). */
@media (min-width: 1019px) {
  .tdb_header_menu .menu-item > a { position: relative; transition: color .15s ease; }
  .tdb_header_menu .menu-item > a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
    background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: left;
    transition: transform .22s cubic-bezier(.22,.61,.36,1); opacity: .85;
  }
  .tdb_header_menu .menu-item > a:hover::after,
  .tdb_header_menu .menu-item.current-menu-item > a::after { transform: scaleX(1); }
}

/* ===========================================================================
   STICKY (on-scroll) header alignment. The condensed bar that appears on scroll
   is a separate clone of the header; our main-header height/margin overrides were
   leaving its single row pinned to the top edge (the menu button floated up while
   links/search sat lower). Force the whole bar to one vertically-centred row so
   button · menu · search share a baseline, and give it consistent side padding. */
@media (min-width: 1019px) {
  /* The bar reserved 90px but its content filled only ~70px, leaving dead space below
     that read as top-pinned. Let the bar shrink to its content so the single row fills
     it edge-to-edge with no slack to misalign within. */
  .td-header-desktop-sticky-wrap { height: auto !important; min-height: 0 !important; }
  .td-header-desktop-sticky-wrap,
  .td-header-desktop-sticky-wrap > div { display: flex !important; align-items: center !important; }
  .td-header-desktop-sticky-wrap > div { width: 100%; }
  .td-header-desktop-sticky-wrap .td-stretch-content,
  .td-header-desktop-sticky-wrap .tdc-row,
  .td-header-desktop-sticky-wrap .vc_row,
  .td-header-desktop-sticky-wrap .vc_column,
  .td-header-desktop-sticky-wrap .vc_column > .wpb_wrapper,
  .td-header-desktop-sticky-wrap .td_block_wrap { align-items: center !important; }
  /* The columns were stretched to the full bar height, pinning their content (the
     MENOY button) to the top. Shrink each column to its content and self-centre it
     so button · links · search land on the same midline. */
  .td-header-desktop-sticky-wrap .vc_row > .vc_column {
    display: flex !important; align-items: center !important;
    align-self: center !important; height: auto !important;
  }
  .td-header-desktop-sticky-wrap .td-stretch-content:has(.tdb_header_menu) { height: auto !important; }
  .td-header-desktop-sticky-wrap .tdb-block-inner { display: flex; align-items: center; }
}

/* ===========================================================================
   Consistent nav spacing. The theme leaves uneven inline gaps between category
   items; normalise the horizontal padding so the spacing reads evenly across the
   bar (applies to the main and sticky menus, excluding the top-bar logo block). */
@media (min-width: 1019px) {
  .tdb_header_menu:not(.tdi_130) .menu-item > a { padding-left: 15px !important; padding-right: 15px !important; }
  .tdb_header_menu .sf-menu > .menu-item { margin: 0 !important; }
}

/* NOTE: deliberately not restyling the tagDiv ".tdm-btn" here — it is a SHARED
   component (the MENOY menu trigger AND the Newsletter / bookmarks buttons), so any
   blanket size/background change pills the Newsletter icon and widens MENOY into the
   first category. The font + compact height + even spacing already modernise the bar;
   a button restyle needs a MENOY-only selector and is tracked separately. */

/* ===========================================================================
   FEATURED IMAGE (single article) — desktop crop fix.
   The theme renders the hero featured image as a background-image div with
   `background-size: cover` and a fixed, wide-but-short height (~1324x640 on
   desktop). For portrait photos that produces an aggressive crop that zooms the
   face and cuts the jaw/forehead. On desktop we switch to `contain` so the whole
   image is shown undistorted, centred on a neutral backdrop. Mobile (where the
   box is near-portrait and looks correct) is left untouched; list thumbnails are
   not affected (scoped to single posts). */
@media (min-width: 1019px) {
  body.single .tdb-featured-image-bg,
  body.single-post .tdb-featured-image-bg,
  body.single .td-post-featured-image .tdb-featured-image-bg {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #f2f3f5;
  }
}

/* ===========================================================================
   MOBILE LOGO (athnews.gr issue): the header-builder logo block loads the logo
   image but hides it at mobile widths, letting the text fallback ("NewsPaper")
   show instead. Show the image and hide the text fallback - the rule only
   matches when BOTH an image wrap and a text wrap exist in the same logo block,
   i.e. exactly the broken state; sites with a working logo are unaffected. */
@media (max-width: 1018px) {
  .tdb_header_logo .tdb-logo-img-wrap { display: inline-block !important; }
  .tdb_header_logo .tdb-logo-img-wrap img.tdb-logo-img {
    display: block !important;
    width: auto !important;
    max-width: 70vw;
    max-height: 52px;
  }
  .tdb_header_logo .tdb-logo-img-wrap + .tdb-logo-text-wrap,
  .tdb_header_logo .tdb-logo-img-wrap ~ .tdb-logo-text-wrap { display: none !important; }
}

/* ===========================================================================
   SCROLL LOGO BADGE (xtypos.gr): the tagDiv sticky bar has no logo slot, so a
   small floating badge with the site logo appears top-right once the page is
   scrolled - screenshots of scrolled pages then carry the branding. The element
   is injected by mobile-menu.js on xtypos hostnames only. */
@media (min-width: 1019px) {
  .xtr-scroll-logo {
    position: fixed;
    top: 98px;
    right: 14px;
    height: 36px;
    width: auto;
    padding: 5px 12px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
    z-index: 9998;
    pointer-events: none;
    display: none;
  }
  .xtr-scroll-logo.xtr-show { display: block; }
}