/* ========================================================
TABLET & MOBILE RESPONSIVENESS (max-width: 1024px)
Applied to all public pages via in
======================================================== */
/* ── Burger dropdown: absolute position below header bar ──
The .header-box is position:relative (set by JS),
so top:100% puts the dropdown right below the nav bar.
This prevents overlap with LOG IN and page content.
─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
/* Full-width dropdown anchored below the header bar */
.master.item-box.header-box.menufied .preview-item-links {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
z-index: 9998 !important; /* below LOG IN (z:2147483647) */
background-color: rgb(0, 0, 0) !important;
}
/* Each nav item: full-width, centered */
.master.item-box.header-box.menufied .preview-item-links li {
display: block !important;
text-align: center !important;
padding: 12px 0 !important;
width: 100% !important;
margin: 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.master.item-box.header-box.menufied .preview-item-links li:last-child {
border-bottom: none !important;
}
.master.item-box.header-box.menufied .preview-item-links span {
display: block !important;
text-align: center !important;
padding: 0 !important;
}
/* ul wrapper: remove table layout used on desktop */
.master.item-box.header-box.menufied .preview-item-links .preview-links-wrapper {
display: block !important;
width: 100% !important;
padding: 8px 0 !important;
}
/* Allow the dropdown to overflow the header vertically */
.master.item-box.header-box {
overflow: visible !important;
}
/* ── LOG IN button: stay at top-right even while dropdown is open ── */
#pa-member-btn {
right: 60px !important; /* clear of hamburger (~45px wide) */
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 2147483647 !important;
}
#pa-member-btn a,
#pa-member-btn button {
padding: 4px 8px !important;
font-size: 11px !important;
letter-spacing: 0 !important;
}
/* ── Header brand (PIERRE AZAR / CINEMATOGRAPHER): full visibility on mobile ──
The theme sets force-min-height50 (50px) + left-div height:10px on narrow
viewports, which clips the subtitle vertically. Keep both lines visible.
─────────────────────────────────────────────────────────────────────────── */
.master.item-box.header-box.minimal-design .menu_layout .preview-subtitle-holder,
.master.item-box.header-box.being-scrolled .menu_layout .preview-subtitle-holder {
display: inline-block !important;
}
.master.item-box.header-box.force-min-height50,
.master.item-box.header-box.force-min-height50 .menus-wrapper {
min-height: auto !important;
}
.master.item-box.header-box .menu_layout .left-div,
.master.item-box.header-box .menu_layout .right-div {
height: auto !important;
}
.master.item-box.header-box .menu_layout .item-details.menu {
line-height: 1.25 !important;
overflow: visible !important;
}
.master.item-box.header-box .preview-content-holder,
.master.item-box.header-box .preview-content-wrapper,
.master.item-box.header-box .header-wrapper {
overflow: visible !important;
}
.master.item-box.header-box .menu_layout .helper-div,
.master.item-box.header-box .menu_layout .left-div {
max-width: calc(100vw - 130px) !important;
}
.master.item-box.header-box .preview-title-holder,
.master.item-box.header-box .preview-subtitle-holder {
display: block !important;
overflow: visible !important;
max-width: 100% !important;
}
.master.item-box.header-box .preview-title,
.master.item-box.header-box #element-bb8218412079d9e,
.master.item-box.header-box.style-6d830c27-ubat0wmj .preview-subtitle {
white-space: nowrap !important;
overflow: visible !important;
line-height: 1.25 !important;
max-width: 100% !important;
font-size: clamp(9px, 2.65vw, 12px) !important;
letter-spacing: 0.02em !important;
margin-bottom: 2px !important;
}
.master.item-box.header-box .preview-title {
font-size: clamp(11px, 3.4vw, 17px) !important;
margin-bottom: 0 !important;
}
/* Hide stray
spacing between title and subtitle in the header */
.master.item-box.header-box .menu_layout .item-details.menu > br {
display: none !important;
}
}
/* Extra-tight phones: shrink subtitle slightly so CINEMATOGRAPHER stays on one line */
@media (max-width: 400px) {
.master.item-box.header-box #element-bb8218412079d9e,
.master.item-box.header-box.style-6d830c27-ubat0wmj .preview-subtitle {
font-size: clamp(8px, 2.35vw, 11px) !important;
letter-spacing: 0.01em !important;
}
}