/*
Theme Name: Studio 9 Child Theme
Theme URI: https://wplook.com/
Description: go between films – Child Theme
Author: WPlook Themes
Author URI: https://wplook.com/
Template: studio9-wpl
Text Domain: studio9-wpl-child
Version: 1.0.0
*/

/* =========================================================
   go between films – Variables
   ========================================================= */

:root{
  --gbf-blue:   #52B5D4;
  --gbf-pink:   #DA39A3;
  --gbf-yellow: #F0CB56;
  --gbf-black:  #000000;
  --gbf-white:  #ffffff;

  /* Make both bands the same height */
  --gbf-band-min-height: 92px;
  --gbf-band-padding-x:  40px;
}

/* =========================================================
   Base typography + background
   ========================================================= */

html, body,
button, input, select, textarea {
  font-family: "Courier Prime", Courier, monospace !important;
}

html, body {
  background: var(--gbf-yellow) !important;
  color: var(--gbf-black);
}

a { color: var(--gbf-black); text-decoration: underline; }
a:hover { text-decoration: none; }

/* Remove boxed backgrounds that fight the yellow */
#page,
.site,
.site-content,
#content,
.content-area,
.site-main,
.hentry,
.page-content,
.entry-content {
  background: transparent !important;
}

/* =========================================================
   STUDIO 9 HEADER: robust rebuild (two stacked full-width bands)
   Theme markup (from Studio9):
   #masthead.site-header > .wrapper > .content > .site-branding + nav#site-navigation.main-navigation
   ========================================================= */

/* Force header to behave like a normal block (not fixed, not collapsed) */
#masthead.site-header{
  position: relative !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
  transition: none !important;

  z-index: 9999;
}

/* The theme sometimes sets a boxed width and horizontal offsets; neutralize hard */
#masthead.site-header.header-boxed,
#masthead.site-header.header-full-width,
#masthead.site-header.header-left,
#masthead.site-header.header-right{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Make the inner wrapper full width */
#masthead.site-header > .wrapper{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Stack branding and nav vertically */
#masthead.site-header > .wrapper > .content{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide Studio9 “trigger” (collapsing header) */
#masthead .site-header-trigger{
  display: none !important;
}

/* =========================================================
   BLUE BAND (branding)
   ========================================================= */

#masthead .site-branding{
  width: 100% !important;
  background: var(--gbf-blue) !important;

  min-height: var(--gbf-band-min-height) !important;
  padding: 0 var(--gbf-band-padding-x) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Center title + enforce lowercase as typed (Studio9 forces uppercase by default) */
#masthead .site-branding .site-title,
#masthead .site-branding .site-title a{
  margin: 0 !important;
  padding: 0 !important;

  color: var(--gbf-white) !important;
  text-decoration: none !important;

  text-transform: none !important;       /* IMPORTANT: remove uppercase */
  letter-spacing: 0.5px !important;
  font-weight: 700 !important;
  font-size: 40px !important;
  line-height: 1 !important;
}

/* Studio9 also applies uppercase to the whole link in some rules */
#masthead .site-branding a{
  text-transform: none !important;
}

/* =========================================================
   PINK BAND (navigation) – same height as blue
   ========================================================= */

#masthead #site-navigation.main-navigation{
  width: 100% !important;
  background: var(--gbf-pink) !important;

  min-height: var(--gbf-band-min-height) !important;
  padding: 0 var(--gbf-band-padding-x) !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;

  overflow: visible !important;
}

/* Kill theme pseudo-lines/borders around nav if any */
#masthead #site-navigation:before,
#masthead #site-navigation:after,
#masthead #site-navigation .menu:before,
#masthead #site-navigation .menu:after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   MENU LAYOUT: Contact left / middle centered / Language right
   Assumption: Contact is FIRST menu item, language switcher is LAST.
   ========================================================= */

#masthead #site-navigation .menu{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 14px !important;
  position: relative !important;

  /* Reserve space so absolute left/right items don't overlap the center group */
  padding-left: 220px !important;
  padding-right: 220px !important;

  box-sizing: border-box !important;
}

#masthead #site-navigation .menu > li{
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important; /* needed for dropdown positioning */
}

/* LEFT: first item */
#masthead #site-navigation .menu > li:first-child{
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* RIGHT: last item (language switcher) */
#masthead #site-navigation .menu > li:last-child{
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* =========================================================
   Old-school BUTTON LOOK (ALL top-level items incl. language)
   ========================================================= */

#masthead #site-navigation .menu > li > a{
  display: inline-block !important;

  background: var(--gbf-white) !important;
  color: var(--gbf-black) !important;

  border: 1px solid var(--gbf-black) !important;
  box-shadow: none !important;

  padding: 10px 18px !important;
  line-height: 1 !important;

  text-decoration: none !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;

  white-space: nowrap !important;
}

/* Hover */
#masthead #site-navigation .menu > li > a:hover{
  background: var(--gbf-black) !important;
  color: var(--gbf-white) !important;
}

/* Current item */
#masthead #site-navigation .menu > li.current-menu-item > a,
#masthead #site-navigation .menu > li.current_page_item > a{
  background: var(--gbf-pink) !important;
  color: var(--gbf-white) !important;
}

/* IMPORTANT: language button should look like the others (no black invert by default) */
#masthead #site-navigation .menu > li:last-child > a{
  background: var(--gbf-white) !important;
  color: var(--gbf-black) !important;
  border-color: var(--gbf-black) !important;
}

/* =========================================================
   LANGUAGE DROPDOWN (fix: disappearing when moving mouse to click)
   Works for Polylang: last item has children (submenu)
   ========================================================= */

/* Hide submenu by default */
#masthead #site-navigation .menu > li.menu-item-has-children > .sub-menu{
  display: none !important;

  position: absolute !important;
  right: 0 !important;
  top: 100% !important;

  margin: 0 !important;
  padding: 14px !important;

  background: var(--gbf-white) !important;
  border: 1px solid var(--gbf-black) !important;
  box-shadow: none !important;

  min-width: 260px !important;
  z-index: 100000 !important;

  box-sizing: border-box !important;
}

/* Hover-bridge to prevent submenu from collapsing when moving cursor down */
#masthead #site-navigation .menu > li.menu-item-has-children > .sub-menu:before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -12px !important;
  height: 12px !important;
  background: transparent !important;
}

/* Show submenu on hover OR when focusing inside (click-friendly) */
#masthead #site-navigation .menu > li.menu-item-has-children:hover > .sub-menu,
#masthead #site-navigation .menu > li.menu-item-has-children:focus-within > .sub-menu{
  display: block !important;
}

/* Submenu items as old-school buttons too */
#masthead #site-navigation .sub-menu li{
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}
#masthead #site-navigation .sub-menu li:last-child{
  margin-bottom: 0 !important;
}

#masthead #site-navigation .sub-menu a{
  display: block !important;
  width: 100% !important;

  background: var(--gbf-white) !important;
  color: var(--gbf-black) !important;

  border: 2px solid var(--gbf-black) !important;
  padding: 10px 14px !important;

  text-decoration: none !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;

  box-sizing: border-box !important;
}

#masthead #site-navigation .sub-menu a:hover{
  background: var(--gbf-black) !important;
  color: var(--gbf-white) !important;
}

/* =========================================================
   Body headings
   ========================================================= */

h1, h2, h3, h4, h5, h6{
  font-family: "Courier Prime", Courier, monospace !important;
  color: var(--gbf-black) !important;
}

/* Breadcrumbs subtle */
.breadcrumbs,
.breadcrumb,
.site-breadcrumbs{
  opacity: 0.45;
}

/* =========================================================
   Tiles/Cards (conservative)
   ========================================================= */

.blog .hentry,
.archive .hentry,
.search .hentry{
  background: var(--gbf-white) !important;
  border: 2px solid var(--gbf-black) !important;
  box-shadow: none !important;
  padding: 14px !important;
}

/* =========================================================
   Footer font consistency
   ========================================================= */

.site-footer,
#colophon{
  font-family: "Courier Prime", Courier, monospace !important;
}

/* =========================================================
   Responsive: on small screens do not absolute-position first/last
   ========================================================= */

@media (max-width: 980px){
  :root{
    --gbf-band-padding-x: 18px;
  }

  #masthead #site-navigation .menu{
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #masthead #site-navigation .menu > li:first-child,
  #masthead #site-navigation .menu > li:last-child{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  #masthead #site-navigation .menu > li.menu-item-has-children > .sub-menu{
    right: 50% !important;
    transform: translateX(50%) !important;
  }
}

/* =========================================================
   GBF – Remove Studio9 Page Title Area in the content (Pages)
   Goal: Kadence controls spacing; content starts directly under pink band
   ========================================================= */

body.page #content .page-container > .boxed-row:first-child{
  display: none !important;
}

body.page #content .page-container > .boxed-row:nth-child(2){
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.page #content .entry-content,
body.page #content .entry-content > *:first-child{
  margin-top: 0 !important;
}

/* =========================================================
   GBF – Remove Studio9 Page Title Area spacing completely
   ========================================================= */

.page .page-header,
.page .entry-header,
.page .page-title-area,
.page .title-area,
.page .breadcrumbs,
.page .breadcrumb,
.page .site-breadcrumbs {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.page .page-header,
.page .entry-header {
  display: none !important;
}

.page #content,
.page .site-content,
.page .content-area,
.page .site-main,
.page .page-container,
.page #primary {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page #content .boxed-row,
.page #content .wrapper,
.page .page-container .boxed-row,
.page .page-container .wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page .entry-content > *:first-child {
  margin-top: 0 !important;
}

/* =========================================================
   GBF – Film Grid (Vimeo on Demand Kacheln)
   ========================================================= */

.gbf-film-title{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
}

.gbf-film-title p,
.gbf-film-title h1,
.gbf-film-title h2,
.gbf-film-title h3{
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* Hover: NUR innerhalb der jeweils gehoverteten Kachel wird der Titel weiss */
.gbf-film-card:hover .gbf-film-title,
.gbf-film-card:hover .gbf-film-title *{
  color: #fff !important;
}

/* Ganze Film-Kachel klickbar via Overlay:
   Voraussetzung: Outer Wrapper hat .gbf-film-card und der erste Link ist der Poster-Link
   Nur Frontend (nicht wp-admin), damit Editing nicht blockiert wird */
body:not(.wp-admin) .gbf-film-card{
  position: relative !important;
}

body:not(.wp-admin) .gbf-film-card a:first-of-type::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

/* =========================================================
   GBF Footer: Logos + Copyright zentriert + Logos kleiner
   ========================================================= */

/* Theme nutzt .copyright .wrapper – wir zentrieren robust */
#colophon .copyright .wrapper{
  text-align: center !important;
}

#colophon .gbf-footer-inner{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  text-align: center !important;
}

#colophon .gbf-footer-icons{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 48px !important;              /* abstand / logo / abstand / logo / abstand */
  margin: 0 auto !important;
  padding: 0 !important;
}

#colophon .gbf-footer-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

#colophon .gbf-footer-icons img{
  height: 28px !important;           /* << LOGO-GRÖSSE */
  width: auto !important;
  display: block !important;
}

/* Vimeo etwas kleiner, damit optisch gleich stark wie YouTube */
#colophon .gbf-footer-icons a:first-child img{
  height: 26px !important;
  width: auto !important;
}

/* YouTube bleibt Referenz (falls du es explizit festnageln willst) */
#colophon .gbf-footer-icons a:last-child img{
  height: 28px !important;
  width: auto !important;
}

#colophon .gbf-footer-copy{
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

/* GBF Footer: Copyright etwas heller (80% weiss) */
#colophon .gbf-footer-copy{
  color: #cfcfcf !important;
}

/* =========================================
   GBF – Hyphenation pro Block (Kadence Text Adv)
   Nutzung:
   - Klasse "gbf-hyphenate" => Silbentrennung AN
   - Klasse "gbf-nohyphen"  => Silbentrennung AUS
   ========================================= */

.gbf-hyphenate{
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

.gbf-nohyphen{
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}