/*
Theme Name: trunk-lite
Theme URI: https://trunk-arc.com/
Description: 株式会社トランク 公式サイト用の自己完結テーマ。Elementor / Elementor Pro を置き換え、生成CSS・フォントをテーマ内にvendor化して独立稼働します。
Author: CRESCOM
Author URI: https://cc-saas.com/
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: trunk-lite
*/

/* --- sticky header (was Elementor Pro sticky) --- */
header.elementor-location-header{ position: sticky; top: 0; z-index: 999; }

/* --- mobile burger dropdown (was Elementor JS) ---
   Elementor reveals this panel with a pure-CSS transition (max-height + scaleY,
   0.3s, transform-origin top) that the vendored CSS still carries. It is driven
   by `.elementor-menu-toggle.elementor-active` on the toggle plus an inline
   `--menu-height`. trunk-lite.js reproduces only what Elementor's JS did — add
   that class, set `--menu-height`, and stretch the panel to the full viewport.
   IMPORTANT: do NOT toggle `display` here — display can't transition, so forcing
   it on/off would kill the slide-down animation. */
.elementor-menu-toggle{ cursor: pointer; }
.elementor-nav-menu--dropdown{
	background-color: #fff; z-index: 9997;
	box-shadow: 0 8px 20px rgba(0,0,0,.06);
	-webkit-overflow-scrolling: touch;
}
.elementor-nav-menu--dropdown .elementor-item{ display: flex; align-items: center; }

/* --- lightbox --- */
.trunk-lb{ position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; z-index: 100000; }
.trunk-lb.open{ display: flex; }
.trunk-lb img{ max-width: 92%; max-height: 92%; box-shadow: 0 0 40px rgba(0,0,0,.5); }
.trunk-lb__close{ position: absolute; top: 20px; right: 28px; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }

/* --- posts grid thumbnail: uniform crop without Elementor JS ---
   The generated CSS sets a padding-bottom aspect box per archive; Elementor's
   default img rule relies on JS (elementor-has-item-ratio) to fill it. We fill
   the box directly with object-fit so cards align identically to the original. */
.elementor-posts .elementor-post__thumbnail{ position: relative; overflow: hidden; }
.elementor-posts .elementor-post__thumbnail img{
	position: absolute; inset: 0; top: 0; left: 0;
	width: 100%; height: 100%; object-fit: cover; transform: none;
}

/* --- hero gallery: masonry rebuild of the Elementor e-gallery (JS packs
       items left-to-right into the shortest column, matching the original) --- */
.trunk-gallery{ display: flex; align-items: flex-start; }
.trunk-gallery__col{ flex: 1 1 0; min-width: 0; }
.trunk-gallery .trunk-gallery-item{ position: relative; display: block; line-height: 0; overflow: hidden; }
.trunk-gallery .trunk-gallery-item img{ width: 100%; height: auto; display: block; }
/* hover overlay is positioned + transitioned by vendored widget-gallery.css;
   generated post-7.css fades it to rgba(0,0,0,.5) over 800ms on hover */

/* entrance reveal — reproduces Elementor e-gallery lazyload pop-in
   (.e-gallery-image:not(.loaded){opacity:0;scale:.5} -> loaded). Scoped to
   .js-reveal so images always show if JS is unavailable. */
.trunk-gallery.js-reveal .trunk-gallery-item img{
	opacity: 0; transform: scale(.5); transform-origin: center top;
	transition: opacity .8s ease, transform .8s ease;
}
.trunk-gallery.js-reveal .trunk-gallery-item img.trunk-revealed{
	opacity: 1; transform: scale(1);
}
/* pre-JS fallback: simple wrap grid so it is never a squished single row
   (3 columns at every breakpoint, matching the original gallery) */
.trunk-gallery:not(.is-masonry){ flex-wrap: wrap; }
.trunk-gallery:not(.is-masonry) .trunk-gallery-item{ width: 33.3333%; }

/* --- misc guards --- */
img{ max-width: 100%; height: auto; }