/*
 * XLifeblog Clean SEO v1.9.4 responsive hardening.
 * Keeps the desktop/main layout intact while improving mobile, tablet,
 * touch navigation, short video feed, content overflow and safe-area behavior.
 */
:root{
  --xl-vh:1svh;
  --xl-safe-bottom:env(safe-area-inset-bottom,0px);
  --xl-safe-top:env(safe-area-inset-top,0px);
  --xl-touch-target:44px;
  --xl-reels-feed-height:min(760px,calc((var(--xl-vh,1svh) * 100) - 168px));
}
html,body{max-width:100%;overflow-x:hidden}
body{min-width:320px;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
a,button,input,textarea,select{-webkit-tap-highlight-color:rgba(var(--xl-accent-rgb),.18)}
button,input,textarea,select{font-size:16px}
img,svg,video,canvas{max-width:100%;height:auto}
iframe,object,embed{max-width:100%}

/* Header/menu resilience for long logos, crowded menus and tablets. */
.site-header{padding-top:env(safe-area-inset-top,0px)}
.header-inner{min-width:0}
.site-branding{min-width:0;max-width:100%;overflow:hidden}
.site-title{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-logo-link{display:inline-flex;align-items:center;max-width:100%}
.custom-logo{max-width:min(230px,42vw);object-fit:contain}
.main-navigation{min-width:0}
.menu a{min-height:var(--xl-touch-target);display:flex;align-items:center}
.header-search .search-form label{flex:1;min-width:0}.header-search .search-submit{min-height:var(--xl-touch-target)}

/* Prevent long titles, URLs or ad/embed content from breaking mobile width. */
.entry-title,.archive-header h1,.video-card-title,.post-card-title,.clean-content,.transcript-box,.widget,.xl-reel-info{overflow-wrap:anywhere;word-break:normal}
.clean-content :where(p,li,blockquote,figcaption){overflow-wrap:anywhere}
.clean-content :where(pre,code){white-space:pre-wrap;overflow-wrap:anywhere}
.clean-content pre{max-width:100%;overflow:auto;padding:14px;border-radius:12px;background:var(--xl-field-bg)}
.clean-content table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;-webkit-overflow-scrolling:touch}
.clean-content :where(th,td){padding:8px 10px;border:1px solid var(--xl-border);vertical-align:top}
.clean-content :where(.wp-block-embed,.wp-block-video,.wp-block-image,figure){max-width:100%;margin-left:0;margin-right:0}
.clean-content :where(.wp-block-embed__wrapper){position:relative;max-width:100%;overflow:hidden;border-radius:12px}
.entry-content :where(iframe,video){width:100%}

/* Card readability and stable layout while images lazy-load. */
.video-card,.post-card{min-width:0;content-visibility:auto;contain-intrinsic-size:260px 220px}
.video-card-title a,.post-card-title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.post-card-text-only .post-card-title a{-webkit-line-clamp:3;min-height:0}
.video-card-thumb,.post-card-thumb{transform:translateZ(0)}
.video-card-thumb img,.post-card-thumb img{object-position:center center}
.video-card-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Forms and comments on narrow screens. */
.search-form{min-width:0}.search-form label{flex:1;min-width:0}.search-submit,.button,.form-submit .submit{min-height:var(--xl-touch-target);display:inline-flex;align-items:center;justify-content:center;text-align:center}
.comment-form textarea{min-height:150px;resize:vertical}.comment-body{overflow-wrap:anywhere}

/* Separate short-video page: smoother mobile viewport and safer controls. */
.xl-reels-feed{height:var(--xl-reels-feed-height,min(760px,calc((var(--xl-vh,1svh) * 100) - 168px)));max-height:var(--xl-reels-feed-height,calc((var(--xl-vh,1svh) * 100) - 132px));-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;scroll-padding-block:0;background:#000}
.xl-reel-card{height:100%;min-height:100%;margin-bottom:16px;touch-action:pan-y}
.xl-reel-media{overflow:hidden}.xl-reel-video{height:100%;max-height:100%;background:#000}.xl-reel-frame{height:100%}
.xl-reel-info{padding-bottom:calc(22px + var(--xl-safe-bottom))}
.xl-reel-open,.xl-reel-sound{min-width:var(--xl-touch-target);min-height:var(--xl-touch-target)}
.xl-reels-load-wrap{padding-bottom:calc(8px + var(--xl-safe-bottom))}

@media (max-width:1180px){
  .header-inner{gap:14px}.menu a{padding-inline:10px}.header-search{width:260px;max-width:28vw}.custom-logo{max-width:min(210px,34vw)}
}

@media (max-width:1024px){
  .layout.has-sidebar{gap:24px}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.widget{min-width:0}.site-main{padding-bottom:36px}
}

@media (max-width:820px){
  body.xl-mobile-menu-open{overflow:hidden}
  .site-header{z-index:1000}.header-inner{min-height:64px;gap:12px}.site-title{max-width:calc(100vw - 112px);font-size:20px}.custom-logo{max-height:42px;max-width:calc(100vw - 112px)}
  .menu-toggle{flex:0 0 44px;position:relative;z-index:1002}
  .main-navigation{position:fixed;top:64px;right:0;bottom:0;left:0;inset:auto 0 0 0;top:64px;max-height:calc((var(--xl-vh,1svh) * 100) - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px calc(18px + var(--xl-safe-bottom));box-shadow:0 18px 34px rgba(0,0,0,.36)}
  .admin-bar .main-navigation{top:110px;max-height:calc((var(--xl-vh,1svh) * 100) - 110px)}
  .main-navigation.is-open{display:block}.menu li{width:100%}.menu a{min-height:46px;border-radius:12px}.menu .sub-menu a{min-height:40px;color:var(--xl-muted)}
  .hero h1,.xl-reels-hero h1{letter-spacing:-.03em}.hero p,.xl-reels-hero p{font-size:15px}.hero-actions .button{width:auto}
  .layout{gap:22px}.sidebar{grid-template-columns:1fr}.breadcrumb{font-size:13px;gap:6px}
  .video-player-wrap{border-radius:15px;margin:14px 0 18px}.main-video,.responsive-embed,.empty-player{aspect-ratio:16/9}
  .xl-reels-feed{height:var(--xl-reels-feed-height,calc((var(--xl-vh,1svh) * 100) - 154px));max-height:none;min-height:min(420px,calc((var(--xl-vh,1svh) * 100) - 190px))}.admin-bar .xl-reels-feed{height:var(--xl-reels-feed-height,calc((var(--xl-vh,1svh) * 100) - 200px))}
  .xl-reel-card{margin-bottom:12px}.xl-reel-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.xl-reel-actions{align-items:flex-end}.xl-reels-load-more{width:min(100%,360px)}
}

@media (max-width:640px){
  .container,.narrow-container{width:min(100% - 24px,var(--xl-container))}.site-main{padding:20px 0 34px}.hero{padding:22px 0 16px}.hero-compact{padding:20px 0 14px}.site-main > .hero + .container.layout{margin-top:20px}
  .archive-header{margin-bottom:18px}.archive-header h1,.entry-title{font-size:clamp(24px,7vw,30px)}.entry-meta{font-size:13px}.entry-header{margin-bottom:4px}
  .video-grid,.post-grid,.compact-grid{gap:12px}.video-card-title,.post-card-title{font-size:13.5px;line-height:1.25}.video-card-body,.post-card-body{padding:10px}.post-card p{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .clean-content,.transcript-box,.related-section,.comments-area,.context-link-box,.xl-post-nav,.widget{border-radius:14px;padding:15px}.related-section .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-inner{gap:12px}.footer-nav .menu{display:flex;flex-wrap:wrap}.footer-nav a{min-height:36px;padding:7px 9px}.hero-actions{width:100%}.hero-actions .button{width:100%}
}

@media (max-width:520px){
  .container,.narrow-container{width:min(100% - 20px,var(--xl-container))}.header-inner{min-height:60px}.main-navigation{top:60px;max-height:calc((var(--xl-vh,1svh) * 100) - 60px)}.admin-bar .main-navigation{top:106px;max-height:calc((var(--xl-vh,1svh) * 100) - 106px)}
  .menu-toggle{width:42px;height:42px}.site-title{font-size:19px}.custom-logo{max-height:38px}
  .video-grid,.post-grid,.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.duration-badge{right:7px;bottom:7px;font-size:11px}.play-badge{left:7px;bottom:7px}
  .video-card-title a,.post-card-title a{min-height:2.45em}.post-card-text-only .post-card-title{font-size:15px}.post-card-text-only .post-card-body{padding:14px}
  .clean-content{font-size:15px;line-height:1.65}.clean-content :where(h2,h3){margin-top:1.25em}.transcript-box h2,.related-section h2,.comments-title{font-size:19px}
  .xl-reels-page{padding-bottom:0}.xl-reels-hero{padding:18px 0 14px}.xl-reels-hero p{font-size:14px}.xl-reels-stage{padding:0 0 calc(18px + var(--xl-safe-bottom))}
  .xl-reels-feed{width:100%;height:var(--xl-reels-feed-height,calc((var(--xl-vh,1svh) * 100) - 122px));min-height:min(390px,calc((var(--xl-vh,1svh) * 100) - 170px));border-radius:0}.admin-bar .xl-reels-feed{height:var(--xl-reels-feed-height,calc((var(--xl-vh,1svh) * 100) - 168px))}
  .xl-reel-info{padding:15px 14px calc(18px + var(--xl-safe-bottom))}.xl-reel-term{font-size:11px}.xl-reel-info h2{font-size:16.5px}.xl-reel-info p{font-size:12.5px;margin-bottom:10px}.xl-reel-open{padding:7px 10px}.xl-reel-duration{font-size:11px}
}

@media (max-width:380px){
  .container,.narrow-container{width:min(100% - 16px,var(--xl-container))}.video-grid,.post-grid,.compact-grid{gap:8px}.video-card-title,.post-card-title{font-size:12.8px}.video-card-body,.post-card-body{padding:9px}.post-card p{display:none}.search-submit,.button,.form-submit .submit{padding-inline:12px}.xl-reel-info h2{font-size:15.5px}
}

@media (hover:none){
  .video-card:hover,.post-card:hover{transform:none}.menu li:hover>.sub-menu{display:block}.xl-video-poster:hover img,.xl-reel-poster:hover img{transform:none;filter:brightness(.88)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.video-card,.post-card,.xl-video-poster img,.xl-video-play,.xl-reel-poster img{transition:none!important}.video-card:hover,.post-card:hover{transform:none}
}


/* v1.9.4: Mobile header/hero separation and menu positioning hardening. */
:root{
  --xl-adminbar-height:0px;
  --xl-header-height:72px;
}
.admin-bar{--xl-adminbar-height:32px;}
.site-header{top:var(--xl-adminbar-height);}
.admin-bar .site-header{top:var(--xl-adminbar-height);}

@media (max-width:782px){
  .admin-bar{--xl-adminbar-height:46px;}
}

@media (max-width:820px){
  .site-header{
    position:sticky;
    top:var(--xl-adminbar-height);
    z-index:1000;
    padding-top:0;
    background:rgba(8,11,16,.97);
  }
  .header-inner{
    min-height:var(--xl-header-height,64px);
    padding-block:8px;
    gap:10px;
  }
  .site-branding{
    flex:1 1 auto;
    max-width:calc(100% - 58px);
    min-width:0;
  }
  .custom-logo-link{max-width:100%;}
  .custom-logo{
    max-width:min(180px,calc(100vw - 92px));
    max-height:40px;
  }
  .site-title{
    max-width:calc(100vw - 92px);
    font-size:20px;
    line-height:1.15;
  }
  .menu-toggle{
    margin-left:auto;
    flex:0 0 44px;
    width:44px;
    height:44px;
  }
  .main-navigation{
    position:fixed;
    top:calc(var(--xl-adminbar-height,0px) + var(--xl-header-height,64px));
    right:10px;
    bottom:auto;
    left:10px;
    width:auto;
    max-height:calc((var(--xl-vh,1svh) * 100) - var(--xl-adminbar-height,0px) - var(--xl-header-height,64px) - 12px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:12px;
    border:1px solid var(--xl-border);
    border-radius:0 0 16px 16px;
    background:var(--xl-mobile-nav-bg);
    box-shadow:0 20px 46px rgba(0,0,0,.48);
  }
  .admin-bar .main-navigation{
    top:calc(var(--xl-adminbar-height,46px) + var(--xl-header-height,64px));
    max-height:calc((var(--xl-vh,1svh) * 100) - var(--xl-adminbar-height,46px) - var(--xl-header-height,64px) - 12px);
  }
  .site-header + .site-main > .hero,
  .site-header + .site-main > .xl-reels-hero{
    padding-top:30px;
  }
  .hero h1,
  .xl-reels-hero h1{
    font-size:clamp(26px,7.2vw,34px);
    line-height:1.12;
    margin-bottom:10px;
  }
  .hero p,
  .xl-reels-hero p{
    max-width:100%;
    line-height:1.55;
  }
}

@media (max-width:520px){
  :root{--xl-header-height:62px;}
  .header-inner{
    min-height:var(--xl-header-height,62px);
    padding-block:7px;
  }
  .custom-logo{
    max-width:min(165px,calc(100vw - 88px));
    max-height:36px;
  }
  .menu-toggle{
    flex-basis:42px;
    width:42px;
    height:42px;
    border-radius:12px;
  }
  .site-header + .site-main > .hero,
  .site-header + .site-main > .xl-reels-hero{
    padding-top:26px;
  }
  .hero h1,
  .xl-reels-hero h1{
    font-size:clamp(25px,7.4vw,31px);
    letter-spacing:-.025em;
  }
  .hero p,
  .xl-reels-hero p{
    font-size:14.5px;
  }
}

@media (max-width:380px){
  .custom-logo{max-width:min(148px,calc(100vw - 84px));}
  .hero h1,
  .xl-reels-hero h1{font-size:24px;}
}