/*
 Theme Name:   Formota Child
 Theme URI:    https://www.timofritsche.de
 Description:  Child Theme for Formota
 Author:       Timo Fritsche
 Template:     formota
 Version:      1.0.0
*/

/* ==========================================================================
   Custom Styles - Added 2026-02-03
   ========================================================================== */

/* Import DM Sans */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;500;700&display=swap');

/* --- Global Antigravity Dark Theme --- */
body {
   background-color: #111111 !important;
   /* Antigravity Darker Background */
   color: #e0e0e0;
}

/* Ensure container backgrounds blend in if necessary */
#haru-main,
#haru-content-main,
.vc_row {
   background-color: transparent !important;
}

/* --- Typography --- */

/* Main Font & Menu Font -> DM Sans */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.haru-main-menu li a,
.video-title,
.video-title a,
.page-title,
.entry-title {
   font-family: 'DM Sans', sans-serif !important;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   /* DM Sans often needs less spacing than Bebas */
}

/* Increase Sizes */
h1 {
   font-size: 64px !important;
}

h2 {
   font-size: 48px !important;
}

h3,
.video-title,
.video-title a {
   font-size: 14px !important;
   /* Even smaller */
   font-weight: 300 !important;
   /* Light */
   color: #ffffff !important;
   /* Solid White */
   line-height: 1.2;
   margin-top: 10px;
   letter-spacing: 0.5px;
   transition: color 0.3s ease;
}

h3:hover,
.video-title a:hover {
   color: #ffffff !important;
   /* Bright white on hover */
}

.video-category,
.video-category a {
   font-size: 11px !important;
   /* Even smaller */
   font-weight: 300 !important;
   /* Light */
   color: rgba(255, 255, 255, 0.45) !important;
   /* ~45% opaque / 55% transparent  */
   text-transform: uppercase;
   letter-spacing: 1px;
}

/* User asked for white meta, let's enforce white on both if desired, 
   but usually category is slightly dimmer. I'll stick to Light + White/Off-White */
.video-category a {
   color: #eeeeee !important;
}

/* Menu Specifics */
/* Menu Specifics */
.haru-main-menu li a {
   font-size: 13px !important;
   /* Approx half of previous 24px */
   font-weight: 700 !important;
   /* Bold */
   text-decoration: none !important;
   color: #ffffff !important;
   /* changed to White (Background Contrast) */
   transition: color 0.3s ease;
   border-bottom: none !important;
   box-shadow: none !important;
}

/* Hover State & Active State */
.haru-main-menu li:hover,
.haru-main-menu li.current-menu-item,
.haru-main-menu li.current_page_item {
   background-color: transparent !important;
}

.haru-main-menu li a:hover,
.haru-main-menu li.current-menu-item>a,
.haru-main-menu li.current_page_item>a {
   color: #54C8F5 !important;
   /* Saturated Light Blue (Closer to #0693e3 but lighter) */
   background: transparent !important;
   box-shadow: none !important;
}

/* Aggressively remove any pseudo-element underlines */
.haru-main-menu li a::before,
.haru-main-menu li a::after,
.haru-main-menu li.current-menu-item>a::before,
.haru-main-menu li.current-menu-item>a::after {
   display: none !important;
   width: 0 !important;
   height: 0 !important;
   opacity: 0 !important;
   background: transparent !important;
   border: none !important;
   content: none !important;
}

/* Remove Blue Focus Outline (Dotted square on click) */
.haru-main-menu li a:focus,
.haru-main-menu li a:active,
.haru-main-menu li:focus-within {
   outline: none !important;
   box-shadow: none !important;
   border: none !important;
   background: transparent !important;
}

/* --- Reel Page Video Grid --- */

/* 21:9 Aspect Ratio & Rounded Corners */
.video-item .video-image {
   aspect-ratio: 21 / 9 !important;
   border-radius: 12px !important;
   overflow: hidden !important;
   /* Clips the image to the border radius */
   margin-bottom: 0 !important;
   /* Removed margin as meta is now overlay */
   transition: transform 0.3s ease;
   position: relative !important;
   /* Context for absolute positioning */
}

/* Ensure images fill the 21:9 container without distortion */
.video-item .video-image img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   /* Crops to fill */
   border-radius: 12px !important;
}

/* Hover Effect - Scale */
.video-item .video-image:hover {
   transform: scale(1.02);
}

/* --- Interaction Cleanup & Meta Overlay --- */

/* 1. Ensure the Content Wrapper is the positioning context */
.mfp-iframe-holder .mfp-content,
.mfp-iframe-scaler,
.fancybox-content {
   position: relative !important;
}

.video-item {
   /* position: relative !important;  <-- REMOVED: This broke the Isotope/Masonry grid which uses absolute positioning. */
   overflow: hidden !important;
   /* Ensures scaled image doesn't overflow if needed, or keeps meta contained */
   border-radius: 12px !important;
   /* Match image radius */
}

/* 1. Remove Play Button Visuals */
.video-item .video-icon,
.video-item .view-video-button,
.video-item .video-icon i,
.video-item .view-video-button::before,
.video-item .view-video-button::after {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   font-size: 0 !important;
   /* Hide icon text/character */
}

/* 2. Make Whole Image Clickable */
/* Stretch the link/icon container to cover the entire image */
.video-item .video-icon,
.video-item .view-video-button {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 10 !important;
   display: block !important;
   opacity: 0 !important;
   /* Invisible but clickable */
   margin: 0 !important;
   padding: 0 !important;
   transform: none !important;
}

/* 3. Gradient Overlay on Hover */
.video-item .video-image::before {
   content: '' !important;
   position: absolute !important;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* Gradient: Light Blue (#54C8F5) to Black Transparent */
   background: linear-gradient(to bottom, rgba(84, 200, 245, 0.7), rgba(0, 0, 0, 0.6)) !important;
   opacity: 0;
   transition: opacity 0.3s ease;
   z-index: 5;
   /* Below link (z-10) */
   pointer-events: none;
   border-radius: 12px !important;
}

.video-item:hover .video-image::before {
   opacity: 1 !important;
}

/* 4. Move Video Meta to Hover Overlay */
.video-meta {
   position: absolute !important;
   top: 50% !important;
   left: 0 !important;
   width: 100% !important;
   transform: translateY(-50%) !important;
   text-align: center !important;
   z-index: 20 !important;
   /* Above everything */
   opacity: 0 !important;
   transition: opacity 0.3s ease, transform 0.3s ease;
   pointer-events: none !important;
   /* Let clicks pass through to video link */
   padding: 0 15px !important;
   /* Prevent text hitting edges */
}

/* Show Meta on Hover */
.video-item:hover .video-meta {
   opacity: 1 !important;
   /* Optional: subtle slide up effect */
   transform: translateY(-50%) scale(1.05) !important;
}

/* --- Sticky Header Fixes --- */

/* 1. Eliminate White Hover Flash on Sticky Header */
/* Force transparent background on all header states */
#haru-header,
.haru-main-header,
.header-sticky,
.is-sticky,
.haru-main-menu,
.haru-main-menu li {
   background-color: transparent !important;
}

/* 2. Sticky Header Background - Dark with 60% Transparency (0.4 Opacity) */
/* The user asked for "transparency of 60%" -> we assume 40% opacity (0.4) or 60% opacity (0.6).
   Let's go with 0.8 to be safe for readability, or 0.6 as a middle ground?
   "Transparency of 60%" -> 0.4 Alpha. That's very see-through.
   "Give it a transparency of 60%" -> Usually means "Make it 60% opaque".
   Let's try 0.9 for standard dark sticky, but I will use specific selector for sticky.
*/
#haru-header.is-sticky,
#haru-header.header-sticky,
.haru-main-header.is-sticky,
.haru-main-header.header-sticky {
   background-color: rgba(17, 17, 17, 0.6) !important;
   /* 60% Opacity */
   backdrop-filter: blur(5px);
   /* Optional: adds nice blur adjustment */
}

/* 3. Ensure menu items don't inherit weird backgrounds */
.haru-main-menu li:hover,
.haru-main-menu li.current-menu-item,
.haru-main-menu li.current_page_item {
   background-color: transparent !important;
}

/* --- Film Category Filters --- */

/* Base State */
.video-filter li a {
   text-decoration: none !important;
   border-bottom: none !important;
   box-shadow: none !important;
   transition: color 0.3s ease;
   font-weight: 500;
   /* Optional: match new menu weight or keep standard */
}

/* Hover & Active State */
.video-filter li a:hover,
.video-filter li.active a,
.video-filter a.active,
.video-filter li.selected a,
.video-filter a.selected,
.video-filter li.is-checked a,
.video-filter a.is-checked,
.video-filter .current {
   color: #54C8F5 !important;
   /* Saturated Light Blue */
   text-decoration: none !important;
   border-bottom: none !important;
   box-shadow: none !important;
   background: transparent !important;
}

/* Specific fix for specific filter underline implementations usually found in themes */
.video-filter li a::after,
.video-filter li a::before {
   display: none !important;
   content: none !important;
}

/* --- Create Page (ID 5656) Styling --- */
/* Headline "My Other Creative Work" */
.page-id-5656 h1,
.page-id-5656 h2,
.page-id-5656 .page-title {
   font-size: 42px !important;
   /* Smaller than 64px */
   color: #54C8F5 !important;
   /* Blue active color */
   letter-spacing: 0.5px;
}

/* 
   Note: To color "Other" differently (Darker Blue #4B9CD3), 
   you would need to wrap the word "Other" in a span in the WordPress editor:
   <h1>My <span class="dark-blue">Other</span> Creative Work</h1>
   Then adding CSS: .dark-blue { color: #4B9CD3 !important; }
*/

/* --- Creative CV Page (ID 5624) Timeline --- */

/* 1. Timeline Line (Darker Blue #0693e3) */
/* Targeted usually as a pseudo element on the nav wrapper */
.page-id-5624 .timeline-slider-nav:before,
.page-id-5624 .timeline-slider-nav:after,
.page-id-5624 .timeline-shortcode-wrap .timeline-slider-nav::before {
   background-color: #4b9cd3 !important;
   /* Using the Darker Blue tone from text content */
   height: 2px !important;
   /* Ensure visibility */
   opacity: 1 !important;
}

/* 2. Timeline Dots (Light Blue #54C8F5) */
.page-id-5624 .time-dot,
.page-id-5624 .slick-current .time-dot,
.page-id-5624 .time-dot:hover {
   background-color: #54C8F5 !important;
   border-color: #54C8F5 !important;
   box-shadow: 0 0 10px rgba(84, 200, 245, 0.3);
   /* Optional glow */
}

/* 3. Text Underneath (90% White) */
.page-id-5624 .timeline-item .description,
.page-id-5624 .timeline-item .timeline-title,
.page-id-5624 .timeline-item p,
.page-id-5624 .timeline-item h6 {
   color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure active title stands out slightly if needed, or keep uniform */
.page-id-5624 .timeline-item .timeline-title {
   font-weight: 700 !important;
}

/* 4. Text Block "I've edited films..." */
.page-id-5624 .wpb_text_column p,
.page-id-5624 .wpb_text_column strong {
   font-family: 'DM Sans', sans-serif !important;
   font-weight: 400 !important;
}

/* --- Contact Page (ID 2258) Styling --- */
/* Match Typography (DM Sans) & Colors */

.page-id-2258 h1,
.page-id-2258 h2,
.page-id-2258 h3,
.page-id-2258 h4,
.page-id-2258 h5,
.page-id-2258 h6,
.page-id-2258 p,
.page-id-2258 li,
.page-id-2258 span,
.page-id-2258 div {
   font-family: 'DM Sans', sans-serif !important;
}

/* Headers - Default to White or Blue if specific hierarchy needed */
.page-id-2258 h1,
.page-id-2258 h2 {
   color: #ffffff !important;
   font-weight: 700 !important;
}

/* Subheaders or specific colored sections */
/* "How to Book me" etc might be H2/H3 */
.page-id-2258 h3,
.page-id-2258 h4 {
   color: rgba(255, 255, 255, 0.9) !important;
}

/* Paragraph text - 90% White */
.page-id-2258 p {
   color: rgba(255, 255, 255, 0.9) !important;
   font-weight: 400 !important;
}

/* Links (like email) - Light Blue */
.page-id-2258 a {
   color: #54C8F5 !important;
   text-decoration: none !important;
}

.page-id-2258 a:hover {
   color: #ffffff !important;
}

/* Google Maps Dark Mode Hack (Invert Colors) */
.page-id-2258 iframe[src*="google.com/maps"] {
   filter: invert(90%) hue-rotate(180deg) contrast(1.2) saturate(1.1);
   border-radius: 12px;
   opacity: 0.8;
   transition: opacity 0.3s ease;
}

.page-id-2258 iframe[src*="google.com/maps"]:hover {
   opacity: 1;
}

/* --- Popup / Modal Styling --- */

/* 1. Force the CONTENT wrapper to be the reference point */
.mfp-content,
.mfp-iframe-scaler {
   position: relative !important;
}

/* 2. Style the Close Button to sit INSIDE the frame */
.mfp-close,
.mfp-iframe-holder .mfp-close,
button.mfp-close,
.fancybox-close-small,
button.fancybox-button--close {
   top: 10px !important;
   right: 10px !important;
   position: absolute !important;
   width: 36px !important;
   height: 36px !important;
   line-height: 36px !important;
   background: rgba(0, 0, 0, 0.6) !important;
   /* Semi-transparent black */
   border-radius: 50% !important;
   color: #ffffff !important;
   opacity: 1 !important;
   text-align: center !important;
   padding: 0 !important;
   margin: 0 !important;
   font-size: 24px !important;
   font-family: Arial, sans-serif !important;
   /* Force a simple X font */
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
   z-index: 1046 !important;
   /* Above video content */
}

/* 3. Hover Effect */
.mfp-close:hover,
.mfp-iframe-holder .mfp-close:hover {
   background: #000000 !important;
   color: #54C8F5 !important;
   /* Blue from theme */
}

/* 4. Remove default outside position logic if present */
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
   right: 10px !important;
   width: auto !important;
}