/*
Theme Name:  Perfect Pint Promise
Theme URI:   https://perfectpintpromise.co.uk
Description: Divi child theme for perfectpintpromise.co.uk. Owns the site header and its hidden toggle menu (header/ and nav/), shared with the static /pub-cellar-ratings module.
Author:      Cask Marque Ltd
Template:    Divi
Version:     1.2.2
Text Domain: ppp-child
*/

/*
 * Divi glue only. Everything the header and menu need to look and behave lives
 * in header/ppp-header.css and nav/ppp-nav.css, which know nothing about Divi
 * so that the static module can load the same files. Anything Divi-specific
 * belongs here instead.
 */

/*
 * The Theme Builder header is one Section with one Code module containing
 * [ppp_header]. Give that Section the CSS class "ppp-header-section". The
 * shortcode renders a full <header class="ppp-header"> that carries its own
 * colour, padding and positioning (the menu panel hangs beneath it), so all
 * Divi has to do is get out of the way: a row is 80% wide and capped at
 * 1080px, a section has 4% vertical padding and a module a bottom margin, and
 * every one of those would show as a band or a narrow bar.
 *
 * The header is transparent, and the Section has to be too: Divi's parent
 * stylesheet paints every regular Section white (`.et_pb_section {
 * background-color: #fff }`), which over a hero shows as a white band with the
 * toggle in it. Two classes out-specify that, the same way the padding reset
 * does, so a builder click cannot quietly put the band back.
 */
.ppp-header-section.et_pb_section {
  padding: 0;
  background-color: transparent;
}

.ppp-header-section .et_pb_row {
  width: 100%;
  max-width: none;
  padding: 0;
}

.ppp-header-section .et_pb_module {
  margin-bottom: 0;
}

/*
 * The header must not be dragged off the top of the page by the content's
 * margins. The Section is positioned absolute (Theme Builder → Position), so
 * its wrapper, <header class="et-l--header">, is 0px tall — and a 0px block
 * with no padding or border lets margins collapse straight through it. The
 * home page's hero Section carries `margin-top: -5vh` (a Divi spacing setting
 * that once pulled it up under the theme's old header); that margin collapsed
 * through the header wrapper, #et-boc, #page-container and body, so the whole
 * page — header included — started 5vh above the viewport, and on a tall
 * monitor the toggle was entirely cut off.
 *
 * flow-root makes #et-boc a formatting context. Its first child, the header
 * wrapper, then keeps its own top edge at 0 while the sibling's negative
 * margin still applies below it, exactly as the page author set it. #et-boc
 * is Divi's outer builder wrapper on every page that uses the Theme Builder.
 */
#et-boc {
  display: flow-root;
}

/*
 * Divi's Code module wraps its content in a container that keeps the theme's
 * default text colour and line-height; the header sets its own, so this only
 * needs to make sure nothing in between adds spacing of its own.
 */
.ppp-header-section .et_pb_code_inner {
  padding: 0;
  margin: 0;
}

/*
 * Divi's parent stylesheet (style-static.min.css) styles every list inside a
 * Theme Builder header layout:
 *
 *   .et-l--header ul { list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px }
 *
 * At (0,1,1) that beats the components' single-class rules, so the menu and
 * the promise list grew bullets, an indent and a 23px tail. Two classes here
 * out-specify it without touching the components, which stay Divi-free.
 */
.ppp-header-section .ppp-nav__list,
.ppp-header-section .ppp-nav__sublist,
.ppp-header-section .ppp-promise__list {
  list-style: none;
  padding: 0;
  line-height: 1.5;
}

/* Re-state the component's own paddings, which the reset above just flattened. */
.ppp-header-section .ppp-nav__list {
  padding: 0.5rem var(--ppp-nav-gutter) 0.75rem;
}

.ppp-header-section .ppp-nav__sublist {
  padding-left: 1.25rem;
}

/*
 * Divi > Theme Options > Custom CSS carries `p{color:#1B1D36!important}`, a
 * bare element rule with !important that reaches every paragraph on the site,
 * including the header title (a <p>, deliberately — see ppp-header.html). The
 * component says `color: inherit`, but no un-important rule can beat that, so
 * this one is important too and wins on specificity. The better fix is to
 * scope the custom rule to page content (`#main-content p`); this is here so
 * the header does not depend on that being done.
 *
 * Only reachable from a `[ppp_header title="…"]` — a plain [ppp_header]
 * renders no title — but kept so that one-off keeps the header's gold.
 */
.ppp-header-section .ppp-header__title {
  color: var(--ppp-gold) !important;
}