/* DotComDotAU theme switcher — dark palette, logo swap, header toggle. */

html[data-theme="dark"]{
	--dcda-bg:#0f1216;
	--dcda-bg-alt:#151920;
	--dcda-surface:#1b212a;
	--dcda-raised:#222935;
	--dcda-border:#2b323d;
	--dcda-heading:#f4f6f8;
	--dcda-text:#c9d1da;
	--dcda-muted:#8d97a4;
	--dcda-accent:#4da3ff;
	--dcda-accent-ink:#07121f;
	--dcda-link:#4da3ff;
	color-scheme:dark;
}

/* --- Logo swap -------------------------------------------------------
   Flatsome hides .header-logo-dark with display:none!important, so these
   need !important plus the extra html[data-theme] specificity to win. */
html[data-theme="dark"] .header-logo{display:none!important}
html[data-theme="dark"] .header-logo-dark{display:block!important}
html[data-theme="light"] .header-logo{display:block!important}
html[data-theme="light"] .header-logo-dark{display:none!important}

/* --- Base ------------------------------------------------------------ */
html[data-theme="dark"] body,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #main{background-color:var(--dcda-bg)!important;color:var(--dcda-text)}
html[data-theme="dark"] p,html[data-theme="dark"] li,html[data-theme="dark"] td,
html[data-theme="dark"] dd,html[data-theme="dark"] dt{color:var(--dcda-text)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6{
	color:var(--dcda-heading)!important;
}
html[data-theme="dark"] blockquote{color:var(--dcda-muted);border-color:var(--dcda-border)}
html[data-theme="dark"] a{color:var(--dcda-link)}
html[data-theme="dark"] .is-divider{background-color:var(--dcda-border)}
html[data-theme="dark"] hr{border-color:var(--dcda-border)}

/* --- Header ----------------------------------------------------------
   One flat surface with a hairline rule, rather than the theme's stack
   of slightly different greys. */
html[data-theme="dark"] #masthead,
html[data-theme="dark"] .header-wrapper,
html[data-theme="dark"] .header-bg-color,
html[data-theme="dark"] .header-main,
html[data-theme="dark"] .header-bottom,
html[data-theme="dark"] .header-top,
html[data-theme="dark"] .stuck .header-main{background-color:var(--dcda-bg-alt)!important}
html[data-theme="dark"] .header-wrapper{border-bottom:1px solid var(--dcda-border)}
html[data-theme="dark"] .header-bottom{border-top:1px solid var(--dcda-border)}
html[data-theme="dark"] .stuck .header-wrapper{box-shadow:0 1px 16px rgba(0,0,0,.55)}

html[data-theme="dark"] .nav>li>a,
html[data-theme="dark"] .header-button a,
html[data-theme="dark"] .mobile-nav>li>a,
html[data-theme="dark"] .header .nav>li>a>i{color:var(--dcda-heading)!important}
html[data-theme="dark"] .nav>li>a{letter-spacing:.045em}
html[data-theme="dark"] .nav>li>a:hover,
html[data-theme="dark"] .nav>li.current-menu-item>a,
html[data-theme="dark"] .nav>li.current_page_item>a{color:var(--dcda-accent)!important}
html[data-theme="dark"] .nav-dropdown,
html[data-theme="dark"] .mobile-sidebar,
html[data-theme="dark"] .off-canvas-center .mobile-sidebar{
	background-color:var(--dcda-surface)!important;color:var(--dcda-text);
	border:1px solid var(--dcda-border);
}
html[data-theme="dark"] .nav-dropdown>li>a{color:var(--dcda-text)!important}
html[data-theme="dark"] .nav-dropdown>li>a:hover{color:var(--dcda-accent)!important}

/* Keep the logo to a sensible cap so the wordmark sits with the menu
   instead of towering over it. */
html[data-theme] #logo img{max-height:44px;width:auto}

/* --- Off-canvas mobile menu ------------------------------------------
   Flatsome only darkens this panel when it carries its own .dark class,
   so by default everything below the last menu item stays white. Paint
   the popup wrapper, the panel and the list, not just the nav. */
html[data-theme="dark"] .off-canvas .mfp-content,
html[data-theme="dark"] .off-canvas-left .mfp-content,
html[data-theme="dark"] .off-canvas-right .mfp-content,
html[data-theme="dark"] .mobile-sidebar,
html[data-theme="dark"] #main-menu,
html[data-theme="dark"] .sidebar-menu{background-color:var(--dcda-bg-alt)!important}
html[data-theme="dark"] .nav-sidebar.nav-vertical>li,
html[data-theme="dark"] .nav-sidebar>li,
html[data-theme="dark"] .nav-vertical>li{border-color:var(--dcda-border)!important}
html[data-theme="dark"] .nav-sidebar>li>a,
html[data-theme="dark"] .nav-vertical>li>a{color:var(--dcda-heading)!important}
html[data-theme="dark"] .nav-sidebar>li.current-menu-item>a,
html[data-theme="dark"] .nav-sidebar>li.current_page_item>a{color:var(--dcda-accent)!important}
html[data-theme="dark"] .mfp-close,
html[data-theme="dark"] .off-canvas .mfp-close{color:var(--dcda-heading)!important;opacity:.9}
html[data-theme="dark"] .mobile-sidebar .search-field,
html[data-theme="dark"] .off-canvas .searchform input[type="search"]{
	background-color:var(--dcda-surface)!important;color:var(--dcda-heading)!important;
	border-color:var(--dcda-border)!important;
}

/* --- Content that ships its own light background ---------------------
   The Flatsome demos set white/grey backgrounds inline or via #id rules.
   Left alone, dark mode puts light text on those and they become
   unreadable. These win on !important rather than specificity. Add the
   class dcda-keep-bg to any element that should keep its own colour. */
html[data-theme="dark"] .section:not(.dcda-keep-bg){background-color:var(--dcda-bg)!important}
html[data-theme="dark"] .section-bg-overlay:not(.dcda-keep-bg){background-color:transparent!important}
html[data-theme="dark"] .box-text:not(.dcda-keep-bg){background-color:var(--dcda-bg-alt)!important}

/* --- Banners ---------------------------------------------------------
   Demo photography is light and washes out over a dark page. Dim it so
   the overlaid copy carries the composition. */
html[data-theme="dark"] .banner-bg img:not(.dcda-keep-bg){
	filter:brightness(.46) saturate(.8);
}
html[data-theme="dark"] .text-box-content:not(.dcda-keep-bg){
	background-color:rgba(13,16,20,.86)!important;
	border:1px solid rgba(255,255,255,.09);
	box-shadow:0 18px 48px rgba(0,0,0,.5)!important;
	padding:2.2em 2.4em!important;
}
html[data-theme="dark"] .text-box-content p{color:var(--dcda-text)!important}
html[data-theme="dark"] .text-box-content h6,
html[data-theme="dark"] .box-text h6{
	color:var(--dcda-accent)!important;letter-spacing:.14em;font-weight:600;
}

/* --- Buttons --------------------------------------------------------- */
html[data-theme="dark"] .button.primary:not(.is-outline),
html[data-theme="dark"] button.primary:not(.is-outline),
html[data-theme="dark"] input[type="submit"].primary{
	background-color:var(--dcda-accent)!important;
	border-color:var(--dcda-accent)!important;
	color:var(--dcda-accent-ink)!important;
	background-image:none!important;
	text-shadow:none!important;
}
html[data-theme="dark"] .button.primary:not(.is-outline):hover,
html[data-theme="dark"] button.primary:not(.is-outline):hover{
	background-color:#7bbcff!important;border-color:#7bbcff!important;color:var(--dcda-accent-ink)!important;
}
html[data-theme="dark"] .button.primary span,
html[data-theme="dark"] button.primary span{color:inherit!important}
html[data-theme="dark"] .button.is-outline{border-color:var(--dcda-border)!important;color:var(--dcda-heading)!important}
html[data-theme="dark"] .button.is-outline:hover{border-color:var(--dcda-accent)!important;color:var(--dcda-accent)!important}

/* --- Surfaces -------------------------------------------------------- */
html[data-theme="dark"] .col-inner,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .entry-header,
html[data-theme="dark"] article,
html[data-theme="dark"] .page-inner{background-color:transparent}
html[data-theme="dark"] .post-item .box,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .card{background-color:transparent;color:var(--dcda-text)}
html[data-theme="dark"] .box-shadow-1,
html[data-theme="dark"] .box-shadow-2{box-shadow:0 10px 30px rgba(0,0,0,.45)!important}
html[data-theme="dark"] table td,
html[data-theme="dark"] table th,
html[data-theme="dark"] .row-divided>.col+.col:not(.large-12){border-color:var(--dcda-border)}

/* --- Forms ----------------------------------------------------------- */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
	background-color:var(--dcda-surface)!important;color:var(--dcda-heading)!important;
	border-color:var(--dcda-border)!important;box-shadow:none!important;
}
html[data-theme="dark"] input:not([type="submit"]):focus,
html[data-theme="dark"] textarea:focus{border-color:var(--dcda-accent)!important}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--dcda-muted)!important}

/* --- Footer ---------------------------------------------------------- */
html[data-theme="dark"] .footer-wrapper,
html[data-theme="dark"] .footer-section,
html[data-theme="dark"] .absolute-footer{background-color:var(--dcda-bg-alt)!important;color:var(--dcda-muted)}
html[data-theme="dark"] .footer-wrapper{border-top:1px solid var(--dcda-border)}
html[data-theme="dark"] .footer-wrapper a{color:var(--dcda-text)}
html[data-theme="dark"] .footer-wrapper a:hover{color:var(--dcda-accent)}

/* --- Menu item icons -------------------------------------------------
   Flatsome's icon font has no home/about/services glyph, so these are
   inline SVG masks: the mask takes the shape and background-color
   supplies currentColor, so an icon tracks its link colour in both
   themes and on hover. Applied per item via a CSS class on the menu
   item, so the footer menu (which has no classes) stays text-only. */
.dcda-mi>a{display:inline-flex!important;align-items:center;gap:.5em}
.dcda-mi>a::before{
	content:"";flex:0 0 auto;width:1.05em;height:1.05em;
	background-color:currentColor;opacity:.85;
	-webkit-mask:var(--dcda-mi) no-repeat center/contain;
	mask:var(--dcda-mi) no-repeat center/contain;
}
.dcda-mi>a:hover::before{opacity:1}
.dcda-mi-home>a::before{--dcda-mi:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 11.3 12 4.2l8.8 7.1V20a1 1 0 0 1-1 1h-4.6v-6.1H8.8V21H4.2a1 1 0 0 1-1-1z'/></svg>")}
.dcda-mi-about>a::before{--dcda-mi:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.2' r='3.4'/><path d='M5.4 20.2a6.6 6.6 0 0 1 13.2 0'/></svg>")}
.dcda-mi-services>a::before{--dcda-mi:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7.2' width='18' height='13' rx='2'/><path d='M8.4 7.2V5.6a2 2 0 0 1 2-2h3.2a2 2 0 0 1 2 2v1.6'/><path d='M3 12.4h18'/></svg>")}
.dcda-mi-contact>a::before{--dcda-mi:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3.6 6.8 8.4 5.7 8.4-5.7'/></svg>")}
/* Vertical mobile panel: a touch more breathing room. */
.nav-vertical .dcda-mi>a{gap:.65em}

/* --- Toggle button ---------------------------------------------------
   Bare icon, no frame. Flatsome styles header buttons, so the resets
   need !important to stop a border or pill background coming back.

   Sizing and spacing deliberately mirror the header search icon so the
   two sit as a matched pair:
     search glyph  .nav>li>a>i        20px, .icon-search 1.2em  = 24px
     search link   .nav>li>a          padding:10px 0
     both items    .nav>li            margin:0 7px  (inherited, not set
                                      here, so Flatsome's nav-spacing
                                      option keeps working)
   The button therefore carries no horizontal padding of its own. */
.dcda-theme-toggle{
	display:inline-flex!important;align-items:center;justify-content:center;
	width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;
	border:0!important;border-radius:0!important;background:none!important;
	box-shadow:none!important;padding:10px 0!important;margin:0;line-height:1;
	color:inherit;cursor:pointer;opacity:.85;transition:opacity .18s ease;
	vertical-align:middle;
}
.dcda-theme-toggle:hover,.dcda-theme-toggle:focus{opacity:1;background:none!important;border:0!important;box-shadow:none!important}
.dcda-theme-toggle:focus-visible{outline:2px solid var(--dcda-accent,#4da3ff);outline-offset:3px}
.dcda-theme-toggle svg{
	width:24px;height:24px;display:block;fill:none;stroke:currentColor;
	stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.dcda-theme-toggle .dcda-moon{display:none}
html[data-theme="dark"] .dcda-theme-toggle .dcda-moon{display:block}
html[data-theme="dark"] .dcda-theme-toggle .dcda-sun{display:none}
li.dcda-toggle-li{display:inline-flex;align-items:center}
@media(prefers-reduced-motion:reduce){.dcda-theme-toggle{transition:none}}