/**
 * Theme Name:     Divi Child
 * Author:         Elegant Themes
 * Template:       Divi
 * Text Domain:    divi-child
 * Description:    Divi child theme for Party Hire Brisbane.
 * Version:        2.0
*/

/* ------------------------------------------------------------------
   Party Hire Brisbane child stylesheet

   The site is built entirely from native Divi 5 modules and the
   KrafterPRO design system. Layout, colour, type and spacing all come
   from Divi. Only three things live here, because Divi cannot do them:

     1. overflow-x:clip, so position:sticky keeps working
     2. the sticky header wrapper
     3. Divi contact form field styling

   Colours reference the Divi 5 global colour variables directly, so
   changing the palette in Divi still updates everything at once.
   ------------------------------------------------------------------ */

/* 1. Sticky needs a clipping context that is not overflow:hidden */
html,body{overflow-x:clip;}
#page-container,#et-main-area,#main-content,.et-l--post,.et_builder_inner_content{overflow-x:clip;}

/* 2. Sticky header */
.et-l--header{position:sticky;top:0;z-index:9999;}
.admin-bar .et-l--header{top:32px;}
@media(max-width:782px){.admin-bar .et-l--header{top:46px;}}

/* 3. Divi contact form fields */
.et_pb_contact_form .et_pb_contact_form_label{display:none;}
.et_pb_contact_form .et_pb_contact_field{padding:0 0 16px;}
.et_pb_contact_form input[type=text],
.et_pb_contact_form input[type=email],
.et_pb_contact_form textarea{
  width:100%;
  background:var(--gcid-741c34c695bb,#fff);
  border:1px solid var(--gcid-d384060635e0,#e3e5ea);
  border-radius:14px;
  padding:15px 18px;
  font-size:16px;
  font-family:inherit;
  color:var(--gcid-body-color,#20232b);
}
.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus{
  outline:3px solid var(--gcid-primary-color,#ffcf33);
  outline-offset:1px;
  border-color:transparent;
}
.et_pb_contact_form textarea{min-height:150px;resize:vertical;}
.et_pb_contact_form .et_pb_contact_submit,
.et_pb_contact_form .et_pb_button{
  background:var(--gcid-primary-color,#ffcf33)!important;
  color:var(--gcid-heading-color,#111217)!important;
  border:0!important;
  border-radius:999px!important;
  padding:15px 36px!important;
  font-weight:800!important;
  font-size:15px!important;
  letter-spacing:.5px;
}
.et_pb_contact_form .et_pb_contact_submit:after,
.et_pb_contact_form .et_pb_button:after{display:none!important;}
.et_pb_contact_form .et_pb_contact_submit:hover{transform:translateY(-1px);}
.et_pb_contact_form .et_pb_contact_captcha_question,
.et_pb_contact_form .et_pb_contact_captcha{color:var(--gcid-0e914be76a22,#686d78);}

/* Mobile menu: the nav module sits in a narrow column, so Divi anchors the
   dropdown to that column. Neutralise the positioning ancestors so it spans
   the header row instead. Viewport units are avoided on purpose. */
@media (max-width:767px){
  .et-l--header .et_pb_column,
  .et-l--header .et_pb_menu,
  .et-l--header .et_pb_menu_inner_container{position:static;}
  .et-l--header .et_pb_menu .et_mobile_menu{left:0;right:0;width:auto;}
  .et-l--header .et_pb_menu .et_pb_menu__wrap,
  .et-l--header .et_pb_menu .et_pb_menu_inner_container{justify-content:flex-end!important;}
  .et-l--header .et_mobile_nav_menu{margin-right:0;}
}

/* Mega menu hover gap (phb-mega-gap)
   Divi anchors the dropdown to .et_pb_menu_inner_container, which is 20px
   taller than the nav itself. That left a 19px dead strip between the menu
   item and the panel, so the hover dropped as soon as the mouse moved down.
   Anchor the panel to the nav instead, so it sits flush under the item.
   Desktop only - the mobile rules below still need the static ancestors. */
@media (min-width:768px){
  .et-l--header .et_pb_menu .et_pb_menu__menu{position:relative;}
}

/* About / Contact live in the desktop top bar, so hide them from the main
   nav above 768px. The top bar is desktop-only, so they must stay in the
   phone hamburger or they become unreachable on mobile. */
@media (min-width:768px){
  .et-l--header .et_pb_menu__menu li.phb-desktop-hide{display:none;}
}

/* Mega menu panel + headings (phb-mega-style)
   The panel inherits its width from .et_pb_menu__menu (the nav), which is
   narrower than the row - hence the cramped look. Widen it leftwards and keep
   its right edge on the nav. Colours are bound to the Divi 5 globals. */
@media (min-width:768px){
  .et-l--header li.mega-menu > ul{
    width:calc(100% + 260px)!important;
    left:-260px!important;
    padding:34px 30px!important;
  }
  .et-l--header li.mega-menu > ul > li{padding:0 16px!important;}
  /* column headings: larger, darker, yellow rule beneath */
  .et-l--header li.mega-menu > ul > li > a:first-child{
    font-size:16px!important;
    font-weight:800!important;
    letter-spacing:.3px;
    color:var(--gcid-heading-color,#111217)!important;
    border-bottom:2px solid var(--gcid-primary-color,#ffcf33)!important;
    padding-bottom:10px!important;
    margin-bottom:8px!important;
    cursor:default;
  }
  /* the links under each heading: quieter, so the headings lead */
  .et-l--header li.mega-menu > ul > li > ul > li > a{
    font-size:14px!important;
    font-weight:500!important;
    color:var(--gcid-0e914be76a22,#686d78)!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }
  .et-l--header li.mega-menu > ul > li > ul > li > a:hover{
    color:var(--gcid-heading-color,#111217)!important;
  }
}

/* Mega menu hover (phb-mega-hover)
   Divi's default hover is a 3% black tint plus opacity:.7, which fades the
   link rather than highlighting it. Replace with a solid brand-yellow chip. */
@media (min-width:768px){
  .et-l--header li.mega-menu > ul > li > ul > li > a{
    padding:9px 12px!important;
    border-radius:8px;
    transition:background-color .12s ease,color .12s ease;
  }
  .et-l--header li.mega-menu > ul > li > ul > li > a:hover,
  .et-l--header li.mega-menu > ul > li > ul > li > a:focus{
    background-color:var(--gcid-primary-color,#ffcf33)!important;
    color:var(--gcid-heading-color,#111217)!important;
    opacity:1!important;
  }
}