/* ==========================================================================
   Site colour theme: dark is the default, html.site-light turns the site light.
   The switch button and the saved choice live in the theme layout.

   Part 1 is for our own components (they also use the variables in mx-lp.css).
   Part 2 recolours the markup of the older pages. It is a temporary layer:
   when a page is rebuilt on our blocks, its rules here can simply go.
   ========================================================================== */

html.site-light{--site-bg:#fff;--site-bg2:#f1f4f3;--site-text:#141616;--site-muted:#4b5655;--site-line:rgba(0,0,0,.14)}
html.site-light body{background-color:#fff}

/* ---------- switch button (in the header) ---------- */
/* Icon shows where the click leads: sun on the dark site, moon on the light one. */
.site-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#00776f;cursor:pointer;transition:background-color .2s,transform .2s;flex:0 0 auto}
.site-theme-toggle:hover{background-color:rgba(0,119,111,.15)}
.site-theme-toggle:focus-visible{outline:2px solid #00776f;outline-offset:2px}
.site-theme-toggle svg{width:24px;height:24px}
.site-theme-toggle__moon{display:none}
html.site-light .site-theme-toggle__sun{display:none}
html.site-light .site-theme-toggle__moon{display:block}
.site-theme-toggle--mobile{margin-left:auto;margin-right:12px}
.site-theme-toggle--desktop{margin-right:14px}
/* the mobile header has its own switch next to the burger */
@media (max-width:980px){.site-theme-toggle--desktop{display:none}}

/* ---------- Part 1: our components outside landing pages ---------- */
/* brand font for our components in both themes (they had none and fell back to a serif) */
.mx-studio,.mx-portfolio{font-family:'TildaSans',Arial,sans-serif}
/* portfolio captions: own colours, they must not depend on the surrounding page */
.mx-portfolio__title{color:#fff}
.mx-portfolio__meta{color:#c9d2d1}
.mx-portfolio__filter{color:#fff}
html.site-light .mx-portfolio__meta{color:var(--site-muted)}
html.site-light .mx-studio__title,html.site-light .mx-portfolio__title{color:var(--site-text)}
html.site-light .mx-studio__sub{color:var(--site-muted)}
html.site-light .mx-portfolio__filter{color:var(--site-text)}

/* ---------- Part 2: older pages ---------- */
/* section grounds */
html.site-light #allrecords{background-color:#fff}
html.site-light .t-rec[data-bg-color="#080808"],
html.site-light .t-rec[data-bg-color="#1c1c1c"]{background-color:#fff!important}
html.site-light .t-rec[data-bg-color="#1d1d1d"]{background-color:var(--site-bg2)!important}
/* our own section wrappers that set the ground inline (studio galleries, video grids) */
html.site-light .t-rec:not([data-bg-color])[style*="background-color:#080808"]{background-color:#fff!important}
html.site-light .t-rec:not([data-bg-color])[style*="background-color:#1d1d1d"]{background-color:var(--site-bg2)!important}
/* dark boxes set inline (cards, popup, galleries wrappers) */
html.site-light #allrecords [style*="background-color:#1d1d1d"]:not(.t-rec),
html.site-light #allrecords [style*="background-color: #1d1d1d"]:not(.t-rec),
html.site-light #allrecords [style*="background-color:#1c1c1c"]:not(.t-rec){background-color:var(--site-bg2)!important;box-shadow:0 8px 24px rgba(0,0,0,.06)}
html.site-light .t-rec[data-bg-color="#1d1d1d"] [style*="background-color:#1d1d1d"]:not(.t-rec),
html.site-light .t-rec[data-bg-color="#1d1d1d"] [style*="background-color: #1d1d1d"]:not(.t-rec){background-color:#fff!important}
html.site-light #allrecords :not(#rec846752838 *)[style*="background-color:#080808"]:not(.t-rec),
html.site-light #allrecords :not(#rec846752838 *)[style*="rgba(8,8,8,1)"]:not(.t-rec){background-color:#fff!important}
html.site-light .t-popup__container{background-color:#fff!important}
html.site-light .t396__artboard,html.site-light .t396__carrier,html.site-light .t396__filter{background-color:var(--site-bg2)!important}

/* text: everything inside non-teal sections turns dark, buttons keep their own colours */
html.site-light .t-rec:not([data-bg-color="#02776f"]):not([data-bg-color="#00776f"]):not(#rec846752838) :is(h1,h2,h3,h4,h5,h6,p,li,span,div,strong,b,em,i,label,figcaption,summary,td,th,a,button.t849__trigger-button):not(.t-btn):not(.t-btnflex):not(.t-submit):not(.t-btn *):not(.t-btnflex *):not(.t-submit *):not(.tn-atom__button):not(.tn-atom__button *):not([style*="119, 111"]):not([style*="119,111"]):not(.mx-studio__arrow):not(.t943 *){color:var(--site-text)!important}
html.site-light .t-rec:not([data-bg-color="#02776f"]):not([data-bg-color="#00776f"]):not(#rec846752838) :is(.t-descr,.t-text,.t-text_xs,.t-text_sm){color:var(--site-muted)!important}
/* teal accents and contact links stay teal */
html.site-light #allrecords [style*="119, 111"],html.site-light #allrecords [style*="119,111"],
html.site-light #allrecords :not(#rec846752838 *)a[href^="tel:"],html.site-light #allrecords :not(#rec846752838 *)a[href^="mailto:"]{color:#00776f!important}
/* zero-block text (plain atoms, not buttons) */
html.site-light .t396 .tn-atom:not(.tn-atom__button):not([href]){color:var(--site-text)!important}

/* dividers, accordions, borders that were white */
html.site-light .t849__line,html.site-light .t-divider{background-color:var(--site-line)!important;border-color:var(--site-line)!important}
html.site-light .t849__wrapper,html.site-light .t849__accordion{border-color:var(--site-line)!important}

/* form fields */
html.site-light .t-input{color:var(--site-text)!important;background-color:#fff!important;border-color:#c5cccb!important}
html.site-light .t-input::placeholder{color:#7b8786!important}
html.site-light .t-checkbox__indicator{border-color:#7b8786!important}

/* header and menu stay dark in both themes (excluded from the rules above) */

/* photo hero: light veil instead of the dark one, so the text turns dark too */
html.site-light .t-cover__filter{background-image:linear-gradient(to bottom,rgba(255,255,255,.74),rgba(255,255,255,.62))!important}