/* Demo2 client theme — Te ao Māori-forward, warm earth tones.

   Palette:
     - Accent pāua teal #0e7177 (taonga, water-creature aesthetic)
     - Secondary kōwhai gold #d8a32a (warmth, native bloom)
     - Heading pounamu green #1f5b4b (carved stone, grounded)
     - Header / menu deep warm charcoal-brown #2a1f1a (warmer than pure black)
     - Footer slightly darker warm #1c1410
     - Text on dark: warm cream #f7f1e8
     - Text on light: deep warm #2a1f1a

   All values are CSS custom properties on :root so AdminTheme can override
   them per-site at runtime. Keep selector specificity at or above
   SiteAug19.css (use !important where SiteAug19 does). */

:root {
    --theme-accent:             #0e7177;
    --theme-accent-alt:         #d8a32a;
    --theme-heading-color:      #1f5b4b;
    /* Header strip is white so the arise software logo (which has a baked-in
       white background in the .gif) sits naturally without a brown halo. */
    --theme-header-bg:          #ffffff;
    --theme-menu-bg:            #ffffff;
    --theme-menu-text:          #2a1f1a;
    --theme-menu-hover:         #0e7177;
    --theme-submenu-bg:         #fbf7ee;
    --theme-submenu-text:       #2a1f1a;
    --theme-link-color:         #2a1f1a;
    --theme-link-hover:         #0e7177;
    --theme-button-bg:          #0e7177;
    --theme-button-text:        #ffffff;
    --theme-button-hover-bg:    #d8a32a;
    --theme-button-hover-text:  #2a1f1a;
    --theme-footer-bg:          #1c1410;
    --theme-footer-text:        #e8dfd2;
    --theme-footer-accent:      #d8a32a;
    --theme-font-family:        "Geologica";
    --theme-font-size:          16px;
    --theme-heading-weight:     400;
    --theme-grid-header-bg:     #0e7177;
    --theme-grid-header-text:   #f7f1e8;
}

/* ===== Font family ===== */
body, #Top_bar .menu > li > a, #Top_bar .menu li ul li a,
input, button, select, textarea {
    font-family: var(--theme-font-family), "Segoe UI", Arial, sans-serif !important;
    font-size: var(--theme-font-size);
}

a.button_theme, a.tp-button.button_theme,
button, input[type="submit"], input[type="reset"], input[type="button"],
.button, a.button {
    font-family: var(--theme-font-family), "Segoe UI", Arial, sans-serif !important;
}

/* ===== Headings ===== */
h1, h1 a, h1 a:hover,
h2, h2 a, h2 a:hover,
h3, h3 a, h3 a:hover,
h4, h4 a, h4 a:hover,
h5, h5 a, h5 a:hover,
h6, h6 a, h6 a:hover {
    color: var(--theme-heading-color) !important;
    font-weight: var(--theme-heading-weight) !important;
}

/* ===== Header background ===== */
body:not(.template-slider) #Header_wrapper {
    background-color: var(--theme-header-bg) !important;
}

/* ===== Top bar / navigation ===== */
#Top_bar {
    background-color: var(--theme-menu-bg) !important;
}

#Top_bar .menu > li > a {
    color: var(--theme-menu-text) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    letter-spacing: 0.4px;
}

#Top_bar .menu > li > a:hover,
#Top_bar .menu > li.hover > a {
    color: var(--theme-menu-hover) !important;
}

#Top_bar .menu > li ul {
    background-color: var(--theme-submenu-bg) !important;
}

#Top_bar .menu > li ul li a {
    color: var(--theme-submenu-text) !important;
    /* Submenu sits on a light cream background — borders + hover use dark
       alpha so they're visible against light, not white-on-white. */
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

#Top_bar .menu > li ul li a:hover,
#Top_bar .menu > li ul li.hover > a {
    color: var(--theme-menu-hover) !important;
    background: rgba(14, 113, 119, 0.08) !important;
}

@media only screen and (max-width: 767px) {
    #Top_bar {
        background-color: var(--theme-menu-bg) !important;
    }
}

@media only screen and (min-width: 768px) {
    .header-semi #Top_bar:not(.is-sticky) {
        background-color: var(--theme-menu-bg) !important;
    }
}

/* ===== Links ===== */
a {
    color: var(--theme-link-color) !important;
}

a:hover {
    color: var(--theme-link-hover) !important;
    text-decoration: underline !important;
}

/* ===== Buttons ===== */
a.button_theme, a.tp-button.button_theme,
button, input[type="submit"], input[type="reset"], input[type="button"],
.button, a.button {
    background-color: var(--theme-button-bg) !important;
    color: var(--theme-button-text) !important;
    border: 2px solid var(--theme-button-bg) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease-in-out !important;
    padding: 6px 14px !important;
    font-weight: 500;
    letter-spacing: 0.3px;
}

a.button_theme:hover, a.tp-button.button_theme:hover,
button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover,
.button:hover, a.button:hover {
    background-color: var(--theme-button-hover-bg) !important;
    color: var(--theme-button-hover-text) !important;
    border-color: var(--theme-button-hover-bg) !important;
}

.button-stroke a.button.button_theme,
.button-stroke a.button.button_theme .button_icon i,
.button-stroke button,
.button-stroke input[type="submit"],
.button-stroke input[type="reset"],
.button-stroke input[type="button"] {
    border-color: var(--theme-button-bg) !important;
    color: var(--theme-button-bg) !important;
}

.button-stroke a.button.button_theme:hover,
.button-stroke button:hover,
.button-stroke input[type="submit"]:hover,
.button-stroke input[type="reset"]:hover,
.button-stroke input[type="button"]:hover {
    background-color: var(--theme-button-bg) !important;
    color: var(--theme-button-text) !important;
}

/* ===== Footer ===== */
#Footer {
    background-color: var(--theme-footer-bg) !important;
}

#Footer .footer_copy {
    background-color: var(--theme-footer-bg) !important;
    border-top: 2px solid var(--theme-footer-accent);
}

#Footer .footer_copy .copyright,
#Footer .footer_copy .copyright a {
    color: var(--theme-footer-text) !important;
}

/* ===== Mobile side-slide menu ===== */
#Side_slide {
    background-color: var(--theme-menu-bg) !important;
}

#Side_slide .menu_wrapper ul li a {
    color: var(--theme-menu-text) !important;
}

#Side_slide .menu_wrapper ul li a:hover {
    color: var(--theme-menu-hover) !important;
}

/* ===== Overrides for SiteAug19 default green ===== */
.themecolor { color: var(--theme-accent) !important; }
.themebg    { background-color: var(--theme-accent) !important; }

*::selection {
    background-color: var(--theme-accent) !important;
    color: #ffffff !important;
}

a.button, a.tp-button {
    color: var(--theme-button-text) !important;
    background-color: var(--theme-button-bg) !important;
}

#Top_bar .menu > li.current-menu-item > a,
#Top_bar .menu > li.current_page_item > a,
#Top_bar .menu > li.current-menu-ancestor > a,
#Top_bar .menu > li.current-page-parent > a {
    color: var(--theme-menu-hover) !important;
}

.menu-arrow-bottom #Top_bar .menu > li > a:after {
    border-bottom-color: var(--theme-menu-hover) !important;
}

.menu-arrow-top #Top_bar .menu > li > a:after {
    border-top-color: var(--theme-menu-hover) !important;
}

#Top_bar a#header_cart span {
    background-color: var(--theme-accent) !important;
}

/* ===== Utility classes ===== */
.theme-accent-text { color: var(--theme-accent) !important; }
.theme-accent-bg   { background-color: var(--theme-accent) !important; }
.theme-accent-hr {
    height: 1px !important;
    border: none !important;
    color: var(--theme-accent) !important;
    background-color: var(--theme-accent) !important;
}
.theme-heading-text { color: var(--theme-heading-color) !important; }

/* ===== Checkboxes & radio ===== */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--theme-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ===== Grid / Table styling ===== */
.gridview-modern { min-width: 100%; border-spacing: 0; }

.gridview-modern th,
.gridheader th {
    background-color: var(--theme-grid-header-bg) !important;
    color: var(--theme-grid-header-text) !important;
    padding: 10px 12px !important;
    text-align: left !important;
    font-weight: 600;
    white-space: nowrap;
    border-color: var(--theme-grid-header-bg) !important;
}

.gridview-modern th a,
.gridview-modern .gridheader th a,
.gridheader th a {
    color: var(--theme-grid-header-text) !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    display: inline !important;
    position: static !important;
    box-shadow: none !important;
    z-index: auto !important;
}

.gridview-modern th a:hover,
.gridview-modern .gridheader th a:hover,
.gridheader th a:hover {
    color: var(--theme-grid-header-text) !important;
    background-color: transparent !important;
    text-decoration: underline !important;
    opacity: 0.85;
}

.gridview-modern .gridrow td,
.gridview-modern .gridalternatingrow td {
    padding: 9px 12px !important;
    border-bottom: 1px solid #ece4d5 !important;
    border-color: #ece4d5 !important;
    vertical-align: top !important;
    white-space: nowrap;
    color: #2a1f1a !important;
}

.gridview-modern .gridrow { background-color: #ffffff !important; }
.gridview-modern .gridalternatingrow { background-color: #fbf7ee !important; }

.gridview-modern .gridrow:hover td,
.gridview-modern .gridalternatingrow:hover td {
    background-color: #f0e6d0 !important;
}

.gridview-modern .gridpager td {
    padding: 10px 12px !important;
    text-align: center !important;
    background-color: transparent !important;
}

.gridview-modern .gridpager a,
.gridview-modern .gridpager span {
    display: inline-block;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}

.gridview-modern .gridpager a {
    color: var(--theme-link-color) !important;
    border: 1px solid #d8c9ad !important;
}

.gridview-modern .gridpager a:hover {
    background-color: var(--theme-accent) !important;
    color: #ffffff !important;
    border-color: var(--theme-accent) !important;
}

.gridview-modern .gridpager span {
    background-color: var(--theme-accent) !important;
    color: #ffffff !important;
    font-weight: 600;
    border: 1px solid var(--theme-accent) !important;
}

/* ===== Scrollbar ===== */
#gridScrollWrapper {
    -ms-overflow-style: auto !important;
    scrollbar-width: auto !important;
    scrollbar-color: var(--theme-accent) #ece4d5 !important;
}

#gridScrollWrapper::-webkit-scrollbar {
    display: block !important;
    height: 18px !important;
    width: auto !important;
}

#gridScrollWrapper::-webkit-scrollbar-track {
    background: #ece4d5;
    border-radius: 9px;
}

#gridScrollWrapper::-webkit-scrollbar-thumb {
    background: var(--theme-accent);
    border-radius: 9px;
    border: 3px solid #ece4d5;
}

#gridScrollWrapper::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-alt);
}

#shadowScrollbarContainer { display: none !important; }

/* ===== Sticky grid panel ===== */
#stickyGridPanel {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #fff;
}

#stickyHeaderWrap { overflow-x: hidden; overflow-y: hidden; width: 100%; }
#stickyHeaderWrap table { border-collapse: collapse !important; margin: 0 !important; }
#stickyHeaderWrap th { position: static !important; }

#stickyScrollbar {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 34px;
    background-color: #ece4d5;
    border-top: 2px solid #d8c9ad;
}

#stickyScrollbar::-webkit-scrollbar { height: 26px; }
#stickyScrollbar::-webkit-scrollbar-track { background: #ece4d5; border-radius: 13px; }
#stickyScrollbar::-webkit-scrollbar-thumb {
    background: var(--theme-accent);
    border-radius: 13px;
    border: 4px solid #ece4d5;
    min-width: 80px;
}
#stickyScrollbar::-webkit-scrollbar-thumb:hover { background: var(--theme-accent-alt); }
#stickyScrollbar { scrollbar-width: auto; scrollbar-color: var(--theme-accent) #ece4d5; }
#stickyScrollbarInner { height: 1px; }

/* ===== Tree logo — sits in the warm dark header.
   Removing the white badge background so the logo image blends with the
   header colour instead of being a white circle on dark brown. */
#masterTreeLogo { margin-left: 12px; }

#masterTreeLogo img {
    max-height: 50px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Main site logo — same treatment if it ever picks up a stray background. */
.logo img,
.logo-main,
.logo-sticky,
.logo-mobile,
.logo-mobile-sticky {
    background: transparent !important;
}

/* ===== Whakapapa parent names — black text ===== */
input.whakapapaForm,
.whakapapaForm {
    color: #000000 !important;
}

[id*="TreeView"] a { color: #000000 !important; }
[id*="TreeView"] a:hover { color: var(--theme-accent) !important; }

button.treePersonBtn {
    color: #2a1f1a !important;
    background-color: #ffffff !important;
    border: 2px solid var(--theme-accent) !important;
}

button.treePersonBtn:hover {
    color: #2a1f1a !important;
    background-color: #f8f3e6 !important;
}