/* ==========================================================================
   universal_header_footer.css
   Self-sufficient stylesheet for: header#site-header, footer#site-footer,
   and div#mobile-menu-wrapper — built directly from the real markup of
   https://www.audience360.com.au/contact-us/

   NO dependency on Tailwind. Drop this on any bare template that reuses the
   same header/footer/mobile-menu HTML + JS and it should render/behave the
   same, provided the assumptions below hold.

   ASSUMPTIONS (please verify against your theme's JS):
   1. The mobile burger menu JS toggles a class called "mobile-menu-open"
      on the <body> element (that's what the original theme CSS keys off).
      If your JS toggles it on a different element, update the selectors
      below (search/replace "body.mobile-menu-open").
   2. Font files are loaded from the LIVE site's absolute URLs
      (https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/...).
      This works cross-origin for @font-face (no CORS issue for font
      *display*, only for reading font data via JS, which doesn't apply
      here) but means this file has an external dependency on that domain
      staying up. If your new pages live on the same WordPress install,
      you can instead copy the font files locally and adjust the url()s.
   3. Contact Form 7's own JS/AJAX (validation, spinner, submit handling)
      is NOT included here — this only styles the form's appearance to
      match the site. You'll need to keep loading wpcf7-related JS
      separately if you reuse that form.
   4. NO RULE IN THIS FILE TARGETS `body` FOR TYPOGRAPHY/COLOR/BACKGROUND.
      That's intentional: the page content on templates using this file
      (e.g. the Odin page) controls ~80% of the page and owns `body` for
      its own global styling. Every rule here is scoped under #site-header,
      #site-footer, or #mobile-menu-wrapper specifically, using :where(...)
      groups, so this file is fully self-sufficient regardless of what the
      page's own CSS does to `body` — and, symmetrically, nothing in this
      file can leak into the page's own content either.
      The ONE exception is `body.mobile-menu-open{overflow:hidden}` — this
      is a functional scroll-lock tied to the mobile menu's open/closed
      state (prevents background scroll while the slide-out panel is open),
      not a styling rule, so it's kept as-is.
      CONSEQUENCE FOR FUTURE TEMPLATES: since this file no longer resets
      body margin, any new bare template that reuses this stylesheet must
      supply its own `body{margin:0;}` (or equivalent) if it wants that
      reset — it's no longer provided globally here.
   5. Nothing in section 4 (layout utility classes) is scoped to a class
      alone — every selector is prefixed to only match inside the three
      containers above (or the containers themselves), even though the
      class names (.flex, .hidden, .container, etc.) are otherwise plain
      and global-looking. This is deliberate: since we don't control what
      class names a future regeneration of the page's own CSS might use,
      scoping here means this file can never collide with or be
      accidentally overridden by same-named classes elsewhere on the page.
      IMPORTANT — these container-scoping groups MUST use :where(...), not
      :is(...). Both match identically, but :is() takes on the specificity
      of its most specific argument (here, an ID), which silently inflates
      every utility class's specificity to "1 ID + 1 class". That broke
      real behaviour once already: .text-color-dark-blue-grey is meant to
      lose to the more specific #mobile-menu-wrapper a{color:#fff} rule
      (which is how the real theme keeps mobile-menu links white on a dark
      background) but with :is() it started WINNING instead, since its
      specificity got boosted past the color rule's. :where() always
      contributes zero specificity, so it scopes matching without
      disturbing the relative specificity the real theme's cascade
      depends on. Do not change :where() back to :is() in this file.
   6. NO :root SELECTOR ANYWHERE IN THIS FILE. Design tokens (colours,
      fonts, spacing) are declared as custom properties directly on
      #site-header/#site-footer/#mobile-menu-wrapper instead of :root —
      :root is document-wide scope, and the page's own CSS (e.g. Odin's
      <style> block) declares its own custom properties on :root too.
      Keeping both out of :root means neither can ever collide with or
      read the other's variables, even if names happened to match.
      CAVEAT: `html{font-size:...}` (further below) is the one remaining
      piece of unavoidable global scope — `rem` units are always relative
      to <html>'s font-size by definition, so this can't be scoped to a
      subtree. It has zero visual effect on the page's own content today
      (nothing outside this file uses rem here), but it's still touching
      the document root. Fully eliminating it would mean converting every
      rem value in this file to em relative to a locally-set font-size —
      a larger rewrite, flagged in place below rather than done silently.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------- */
@font-face{
  font-family:"Bw Darius";
  src:url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/BwDarius-Regular.woff2) format("woff2"),
      url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/BwDarius-Regular.woff) format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bw Darius";
  src:url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/BwDarius-Bold.woff2) format("woff2"),
      url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/BwDarius-Bold.woff) format("woff");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Calibri W01 Regular";
  src:url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/dbcfebeb-81b6-4dd3-912a-c4fc1bb8b8dc.woff2) format("woff2"),
      url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/e7769402-c907-4b00-b07b-719187adf68a.woff) format("woff");
}
@font-face{
  font-family:"Calibri W01 Bold";
  src:url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/3ca076a2-34ad-4c48-a029-02536a509f22.woff2) format("woff2"),
      url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/bc67b9af-646e-4b42-854e-ff3981151dea.woff) format("woff");
}
@font-face{
  font-family:"Calibri W01 Light";
  src:url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/3a9dc726-d61e-48d0-86ba-9548f35b5625.woff2) format("woff2"),
      url(https://www.audience360.com.au/wp-content/themes/nthdegreesearch/assets/fonts/de3d8ed1-44f0-4110-88aa-6b53605d358a.woff) format("woff");
}

/* --------------------------------------------------------------------
   2. Design tokens (copied from the theme's :root block). Declared on the
   three self-sufficient containers themselves — NOT on :root — since
   :root is document-wide scope, and Odin's own <style> block declares its
   own custom properties on :root too. Keeping both files' variables out
   of :root entirely means neither can ever collide with or leak into the
   other, regardless of naming. Custom properties inherit normally, so
   descendants of these containers still see these values exactly as
   before.
   -------------------------------------------------------------------- */
#site-header, #site-footer, #mobile-menu-wrapper{
  --color-base:#231f20;
  --color-green:#008675;
  --color-green-2:#00c088;
  --color-dark-blue-grey:#243746;
  --color-light-grey:#d8dfe1;
  --body-font:"Calibri W01 Light",sans-serif;
  --body-font-bold:"Calibri W01 Bold",sans-serif;
  --body-font-regular:"Calibri W01 Regular",sans-serif;
  --body-font-weight:300;
  --body-font-size:1.0625rem;
  --body-line-height:1.588em;
  --heading-font:"Bw Darius",serif;
  --heading-font-weight:700;
  --heading-font-size-medium:1.6875rem;
  --heading-font-size-small:1.0625rem;
  --heading-line-height-medium:1.593em;
  --heading-line-height-small:1.588em;
  --base-spacing:1.647em;
}

/* Root font-size cascade — everything below is in rem, so this must match
   the theme exactly or spacing/sizing will drift at each breakpoint.

   CAVEAT — this is the one piece of this file that's still genuinely
   global: `rem` is always relative to the <html> element's font-size by
   definition, so this can't be scoped to a subtree the way everything
   else in this file has been. It currently has zero VISUAL effect on
   Odin's content (Odin is built entirely in px/vw/ch, not rem), but it
   is still touching the document root, which is outside the three
   containers. Flagging this rather than silently leaving it — if you
   want this fully eliminated too, the fix is converting every rem value
   in this file to em relative to a font-size set locally on the three
   containers, which is a larger rewrite. Let me know if you want that. */
html{font-size:16px;scroll-behavior:auto}
@media only screen and (min-width:2000px){html{font-size:18px}}
@media only screen and (max-width:1599px){html{font-size:14px}}
@media only screen and (max-width:1440px){html{font-size:13px}}
@media only screen and (max-width:1023px){
  html{font-size:14px}
  #site-header, #site-footer, #mobile-menu-wrapper{
    --body-font-size:1rem;
    --body-line-height:1.5em;
    --heading-font-size-medium:1.571rem;
    --heading-font-size-small:1.286rem;
  }
}

/* --------------------------------------------------------------------
   3. Minimal preflight — only what header/footer/mobile-menu need.
   Every rule below is scoped to the three self-sufficient containers
   (as themselves, or as an ancestor of the matched element) so nothing
   here can apply to the page's own content outside them.
   -------------------------------------------------------------------- */
:where(#site-header, #site-footer, #mobile-menu-wrapper,
    #site-header *, #site-footer *, #mobile-menu-wrapper *),
:where(#site-header, #site-footer, #mobile-menu-wrapper,
    #site-header *, #site-footer *, #mobile-menu-wrapper *):before,
:where(#site-header, #site-footer, #mobile-menu-wrapper,
    #site-header *, #site-footer *, #mobile-menu-wrapper *):after{
  box-sizing:border-box;border:0 solid #e5e7eb
}
:where(#site-header, #site-footer, #mobile-menu-wrapper,
    #site-header *, #site-footer *, #mobile-menu-wrapper *){margin:0}
:where(#site-header h1, #site-header h2, #site-header h3, #site-header h4, #site-header h5, #site-header h6, #site-header p,
    #site-footer h1, #site-footer h2, #site-footer h3, #site-footer h4, #site-footer h5, #site-footer h6, #site-footer p,
    #mobile-menu-wrapper h1, #mobile-menu-wrapper h2, #mobile-menu-wrapper h3, #mobile-menu-wrapper h4, #mobile-menu-wrapper h5, #mobile-menu-wrapper h6, #mobile-menu-wrapper p){margin:0}
:where(#site-header ul, #site-header ol,
    #site-footer ul, #site-footer ol,
    #mobile-menu-wrapper ul, #mobile-menu-wrapper ol){list-style:none;margin:0;padding:0}
:where(#site-header button, #site-header input, #site-header textarea,
    #site-footer button, #site-footer input, #site-footer textarea,
    #mobile-menu-wrapper button, #mobile-menu-wrapper input, #mobile-menu-wrapper textarea){font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
:where(#site-header button, #site-footer button, #mobile-menu-wrapper button){cursor:pointer;text-transform:none;background-color:initial;background-image:none}
:where(#site-header a, #site-footer a, #mobile-menu-wrapper a){color:inherit;text-decoration:inherit}
/* The theme's actual default link style — comes after the neutral preflight
   reset above, matching the real site's cascade order. Most header/footer
   links carry their own override classes in the HTML (.text-color-*,
   .no-underline, etc.) so this rarely shows, but any link WITHOUT one
   (e.g. the footer's phone number link) falls through to this. */
:where(#site-header a, #site-footer a, #mobile-menu-wrapper a){color:var(--color-green);text-decoration:underline}
:where(#site-header svg, #site-footer svg, #mobile-menu-wrapper svg){display:block;vertical-align:middle}
:where(#site-header img, #site-header svg,
    #site-footer img, #site-footer svg,
    #mobile-menu-wrapper img, #mobile-menu-wrapper svg){max-width:100%;height:auto}
:where(#site-header small, #site-footer small, #mobile-menu-wrapper small){display:block;font-size:.875rem;line-height:156%}
:where(#site-header strong, #site-footer strong, #mobile-menu-wrapper strong){font-weight:700}
:where(#site-header p:not(:last-of-type),
    #site-footer p:not(:last-of-type),
    #mobile-menu-wrapper p:not(:last-of-type)){margin-bottom:var(--base-spacing)}

/* Typography lives directly on the three self-sufficient containers, NOT
   on body — see assumption #4 above. Descendants without their own more
   specific font rule inherit from here, not from body. */
#site-header, #site-footer, #mobile-menu-wrapper{
  color:var(--color-base);
  font-family:var(--body-font);
  font-size:var(--body-font-size);
  font-weight:var(--body-font-weight);
  line-height:var(--body-line-height);
}
/* Functional scroll-lock only — not a styling rule, kept on body
   deliberately since that's where the mobile-menu JS toggles this class. */
body.mobile-menu-open{overflow:hidden}

:where(#site-header h3, #site-footer h3, #mobile-menu-wrapper h3){font-family:var(--heading-font);font-weight:var(--heading-font-weight);margin-bottom:1em;font-size:var(--heading-font-size-medium);line-height:var(--heading-line-height-medium)}
:where(#site-header h4, #site-footer h4, #mobile-menu-wrapper h4){font-family:var(--heading-font);font-weight:var(--heading-font-weight);margin-bottom:1em;font-size:var(--heading-font-size-small);line-height:var(--heading-line-height-small)}

/* --------------------------------------------------------------------
   4. Layout utility classes actually used in the header/footer markup
   (plain CSS equivalents of the Tailwind utilities on those elements —
   no Tailwind engine required). Each rule matches the class either on
   one of the three containers themselves, or on any descendant of them.
   -------------------------------------------------------------------- */
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).min-h-screen{min-height:100vh}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).w-full{width:100%}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).flex{display:flex}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).hidden{display:none}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).block{display:block}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).relative{position:relative}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).fixed{position:fixed}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).top-0{top:0}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).-right-full{right:-100%}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).overflow-hidden{overflow:hidden}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).cursor-pointer{cursor:pointer}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).text-center{text-align:center}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).text-right{text-align:right}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).items-center{align-items:center}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).justify-center{justify-content:center}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).justify-between{justify-content:space-between}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).flex-col{flex-direction:column}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).flex-col-reverse{flex-direction:column-reverse}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).flex-wrap{flex-wrap:wrap}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).no-underline{text-decoration-line:none}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).font-medium{font-weight:500}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).z-20{z-index:20}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).bg-white{background-color:#fff}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).text-white{color:#fff}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).border-b{border-bottom-width:1px}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).border-t-6{border-top-width:6px}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).rounded-full{border-radius:9999px}

:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).gap-x-14{column-gap:3.5rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).gap-y-4{row-gap:1rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).mb-5{margin-bottom:1.25rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).mb-8{margin-bottom:2rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).py-4{padding-top:1rem;padding-bottom:1rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).py-8{padding-top:2rem;padding-bottom:2rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).pt-20{padding-top:5rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).pb-20{padding-bottom:5rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).py-\[4\.5625rem\]{padding-top:4.5625rem;padding-bottom:4.5625rem}

:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).basis-1\/2{flex-basis:50%}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).basis-1\/4{flex-basis:25%}

:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).border-color-green{border-color:#008675}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).border-b-\[\#ECEEEE\]{border-bottom-color:#eceeee}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).bg-color-dark-blue-grey{background-color:var(--color-dark-blue-grey)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).bg-color-base{background-color:var(--color-base)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).text-color-dark-blue-grey{color:var(--color-dark-blue-grey)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).text-color-green-2{color:var(--color-green-2)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).text-color-light-grey{color:var(--color-light-grey)}

:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).container{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}
@media only screen and (min-width:1366px){
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).container{max-width:91.667vw}
}

/* Responsive (Tailwind's default lg breakpoint = 1024px, matches theme) */
@media only screen and (min-width:1024px){
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:hidden{display:none}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:block{display:block}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:flex{display:flex}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:flex-row{flex-direction:row}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:basis-1\/4{flex-basis:25%}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:basis-1\/2{flex-basis:50%}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:basis-1\/6{flex-basis:16.666667%}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:py-8{padding-top:2rem;padding-bottom:2rem}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:pb-24{padding-bottom:6rem}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:pr-24{padding-right:6rem}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:pl-52{padding-left:13rem}
  :where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).lg\:mb-0{margin-bottom:0}
}

/* --------------------------------------------------------------------
   5. Buttons (.button / .button-contact) — used inside #site-header only
   currently, but scoped to all three containers for consistency/safety.
   -------------------------------------------------------------------- */
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button{background-color:var(--color-green);border:none;color:#fff;font-size:1.0625rem;font-weight:600;display:inline-flex;padding:1.0625rem 1.8125rem;align-items:center;gap:1.25rem;border-radius:6.25rem;letter-spacing:.10625rem;line-height:1;text-transform:uppercase;text-decoration:none;transition:all .3s cubic-bezier(.075,.82,.165,1)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' fill='none'%3E%3Cpath fill='%23F4F9F8' d='M13.707 8.707a1 1 0 0 0 0-1.414L7.343.929A1 1 0 0 0 5.93 2.343L11.586 8l-5.657 5.657a1 1 0 1 0 1.414 1.414l6.364-6.364ZM0 9h13V7H0v2Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;content:"";width:.875rem;height:1rem;display:block;transition:all .3s cubic-bezier(.075,.82,.165,1)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button:hover{background-color:var(--color-green-2)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button:hover:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' fill='none'%3E%3Cpath fill='%23F4F9F8' d='M21.707 8.707a1 1 0 0 0 0-1.414L15.343.929a1 1 0 1 0-1.414 1.414L19.586 8l-5.657 5.657a1 1 0 0 0 1.414 1.414l6.364-6.364ZM0 9h21V7H0v2Z'/%3E%3C/svg%3E");width:1.375rem}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button:active{background-color:var(--color-green-2);box-shadow:inset 0 0 0 .1875rem var(--color-green)}

:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button-contact{font-size:1.125rem;font-weight:700;letter-spacing:0;padding:.625rem 1.875rem .625rem .375rem;text-transform:none}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button-contact:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='41' fill='none'%3E%3Ccircle cx='20.5' cy='20.5' r='20.5' fill='%23fff'/%3E%3Cpath fill='%23008675' d='M31.337 13H10.663a.664.664 0 0 0-.663.664v1.306l11 7.371 11-7.372v-1.305a.664.664 0 0 0-.663-.664Z'/%3E%3Cpath fill='%23008675' d='M10 17.692v8.74a2.653 2.653 0 0 0 2.655 2.653h16.69A2.653 2.653 0 0 0 32 26.431v-8.74l-11 7.372-11-7.371Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;content:"";width:2.5625rem;height:2.5625rem;display:block;position:relative;left:.5625rem;transition:all .3s cubic-bezier(.075,.82,.165,1)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button-contact:hover:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='41' fill='none'%3E%3Ccircle cx='20.5' cy='20.5' r='20.5' fill='%23fff'/%3E%3Cpath fill='%2300C088' d='M31.337 13H10.663a.664.664 0 0 0-.663.664v1.306l11 7.371 11-7.372v-1.305a.664.664 0 0 0-.663-.664Z'/%3E%3Cpath fill='%2300C088' d='M10 17.692v8.74a2.653 2.653 0 0 0 2.655 2.653h16.69A2.653 2.653 0 0 0 32 26.431v-8.74l-11 7.372-11-7.371Z'/%3E%3C/svg%3E")}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button-contact:after{display:none}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button-contact:active{background-color:var(--color-green);box-shadow:inset 0 0 0 .1875rem var(--color-green-2)}
:where(#site-header, #site-footer, #mobile-menu-wrapper, #site-header *, #site-footer *, #mobile-menu-wrapper *).button-contact:active:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='41' fill='none'%3E%3Ccircle cx='20.5' cy='20.5' r='20.5' fill='%23fff'/%3E%3Cpath fill='%23008675' d='M31.337 13H10.663a.664.664 0 0 0-.663.664v1.306l11 7.371 11-7.372v-1.305a.664.664 0 0 0-.663-.664Z'/%3E%3Cpath fill='%23008675' d='M10 17.692v8.74a2.653 2.653 0 0 0 2.655 2.653h16.69A2.653 2.653 0 0 0 32 26.431v-8.74l-11 7.372-11-7.371Z'/%3E%3C/svg%3E")}

#site-header .header-ctas-mobile .button-contact{text-indent:-9999px;padding:0;background:#0000}
#site-header .header-ctas-mobile .button-contact:before{background-image:url(https://www.audience360.com.au/wp-content/uploads/2023/08/icon-mail-3.svg);width:2.286rem;height:1.714rem}

/* --------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------- */
#site-header{transition:all .3s ease-in-out}
#site-header:after{background-color:var(--color-dark-blue-grey);content:"";height:1px;width:0;position:absolute;right:0;bottom:-1px}
body.mobile-menu-open #site-header:after{transition:all .3s ease-in-out;width:94%}

/* Main nav */
#main-menu a{font-family:var(--body-font-bold);transition:all .2s ease-in-out}
#main-menu a:hover{color:var(--color-green)}
#main-menu .menu-item-has-children.active>a{color:var(--color-green-2)}
#main-menu .menu-item-has-children .sub-menu{visibility:hidden;opacity:0;position:absolute;padding:0;top:120%;transform:translateY(.625rem);left:0;min-width:13rem;background-color:#fff;z-index:111;transition:all .3s;box-shadow:.25rem .4375rem 1.1875rem 0 rgba(25,25,25,.1);border-radius:.625rem;border:1px solid #f0f0f0;text-align:left;overflow:hidden}
#main-menu .menu-item-has-children:hover .sub-menu{visibility:visible;opacity:1;transform:translateY(0)}
#main-menu .menu-item-has-children>a:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath stroke='%23008675' stroke-linecap='round' stroke-linejoin='round' stroke-width='.75' d='M6 7.688 2.625 4.313M9.375 4.313 6 7.688'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";position:absolute;right:-1.125rem;top:.4375rem;width:.75rem;height:.8125rem;transition:all .2s ease-in-out}
#main-menu .menu-item-has-children:hover>a:after{transform:rotate(180deg)}
#main-menu .sub-menu a{display:block;font-weight:400;padding:.3125rem 1rem}
#main-menu .sub-menu a:hover{color:#fff;background-color:var(--color-dark-blue-grey)}
#main-menu .sub-menu li:first-of-type a{padding-top:.625rem}
#main-menu .sub-menu li:last-of-type a{padding-bottom:.625rem}

/* Site logo — matches theme's responsive logo swap */
@media only screen and (min-width:1024px) and (max-width:1365px){
  #site-header .site-logo img,#site-header .site-logo svg{width:15.714rem}
  #site-header #menu-main-menu{column-gap:2.5rem}
}
@media only screen and (max-width:1023px){
  #site-header .site-logo img,#site-header .site-logo svg{display:inline-block}
}

/* Mobile burger toggle */
#site-header .mobile-menu-toggle:before{background-color:var(--color-dark-blue-grey);content:"";width:6.214rem;position:absolute;right:0;top:-6px;height:calc(100% + 6px);opacity:0;visibility:hidden;transition:all .3s ease-in-out}
#site-header .mobile-menu-toggle .line{width:1.857rem;height:.214rem;background-color:var(--color-green);display:block;margin:.5rem 0 .5rem auto;transition:all .3s ease-in-out;border-radius:.875rem;left:-.857rem;position:relative}
body.mobile-menu-open #site-header .mobile-menu-toggle .line:nth-child(2){opacity:0}
body.mobile-menu-open #site-header .mobile-menu-toggle .line:first-child{transform:translateY(.393rem) rotate(45deg)}
body.mobile-menu-open #site-header .mobile-menu-toggle .line:nth-child(3){transform:translateY(-1rem) rotate(-45deg)}
body.mobile-menu-open #site-header .mobile-menu-toggle:before{opacity:1;visibility:visible}

/* --------------------------------------------------------------------
   7. div#mobile-menu-wrapper (slide-out panel)
   -------------------------------------------------------------------- */
#mobile-menu-wrapper{transition:all .3s ease-in-out;width:94%;border-radius:0 0 0 .625rem;box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 18px 18px 0 rgba(0,0,0,.17),0 40px 24px 0 rgba(0,0,0,.1),0 71px 29px 0 rgba(0,0,0,.03);padding:7.143rem 2.857rem 1.429rem;z-index:3}
body.mobile-menu-open #mobile-menu-wrapper{right:0}
#mobile-menu-wrapper a{color:#fff;font-size:1.286rem;font-weight:400;display:block;padding:1rem 0;position:relative}
#mobile-menu-wrapper a .arrow{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' fill='none'%3E%3Cpath stroke='%23008675' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 13 6-6-6-6'/%3E%3C/svg%3E");background-size:.571rem 1rem;background-position:50%;background-repeat:no-repeat;position:absolute;width:3.125rem;height:100%;right:-1.429rem;top:0;transition:all .3s ease-in-out}
#mobile-menu-wrapper .open a .arrow{transform:rotate(90deg)}
#mobile-menu-wrapper .sub-menu{display:none;padding-left:.714rem}
#mobile-menu-wrapper .sub-menu a{color:var(--color-green-2)}

/* --------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------- */
#site-footer h3{color:var(--color-green-2)}
#site-footer .footer-block{}
#site-footer .footer-header{margin-bottom:1.25rem}

#site-footer .menu li:not(:last-of-type){margin-bottom:.625rem}
#site-footer .menu a{color:var(--color-light-grey);font-weight:400}

#site-footer .footer-legal-links ul{display:flex}
#site-footer .footer-legal-links li:not(:last-of-type):after{background-color:#a0adb9;content:"";display:inline-block;width:1px;height:.625rem;margin:0 .9375rem}
#site-footer .footer-legal-links a{color:var(--color-light-grey);font-weight:400}

#site-footer .copyright a{color:var(--color-light-grey)}
#site-footer .footer-copyright{font-size:.875rem;box-shadow:0 -1px 0 0 #34343480}
#site-footer .footer-copyright a{color:var(--color-light-grey);font-weight:400}

/* Hides the "Get in touch" contact form block in the footer — added per
   request. !important because footer-top's own inline/utility classes
   (pt-20, pb-20, flex, etc.) would otherwise still apply layout that
   could show through if display:none were ever overridden accidentally. */
#site-footer .footer-top {display: none !important;}