/* ============================================================
   BluetoothPrinter Child Theme — Light Theme
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    --c-primary:       #3cc88f;
    --c-primary-dark:  #28a873;
    --c-primary-light: #e8faf3;
    --c-accent:        #2563eb;
    --c-ink:           #0f172a;
    --c-ink-2:         #1e293b;
    --c-text:          #475569;
    --c-muted:         #94a3b8;
    --c-border:        #e2e8f0;
    --c-bg:            #f8fafc;
    --c-bg-2:          #f1f5f9;
    --c-white:         #ffffff;

    --c-gradient:      linear-gradient(135deg, #3cc88f 0%, #06b6d4 100%);
    --c-hero-bg:       linear-gradient(145deg, #0f4c35 0%, #0a3a5c 60%, #0f172a 100%);

    --shadow-xs:   0 1px 2px rgba(15,23,42,.06);
    --shadow-sm:   0 1px 4px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.06);
    --shadow:      0 4px 12px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
    --shadow-md:   0 8px 24px rgba(15,23,42,.1);
    --shadow-lg:   0 16px 40px rgba(15,23,42,.12);
    --shadow-xl:   0 24px 56px rgba(15,23,42,.14);

    --radius:    14px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --ease:      cubic-bezier(.4,0,.2,1);
    --t:         all .28s var(--ease);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--c-bg) !important;
    color: var(--c-text) !important;
    font-family: 'Inter', 'Assistant', system-ui, -apple-system, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Headings — Plus Jakarta Sans (exclude the apps page which has its own inline styles) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', 'Roboto', system-ui, sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/*
 * Do NOT force heading colors globally with !important — it overrides
 * Gutenberg inline block styles (e.g. .tech-box h4 on dark backgrounds).
 * Let each block's own colour rule win; only set a sensible fallback.
 */
h1, h2, h3, h4, h5, h6 {
    color: var(--c-ink);          /* no !important — Gutenberg can override */
}

/* Nav, buttons, badges — Inter with slight tracking */
.site-navigation,
button,
.wp-block-button__link,
a.ReadMore,
a.slide_more,
.bpp-badge {
    font-family: 'Inter', system-ui, sans-serif !important;
}

a {
    transition: var(--t) !important;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   HEADER — white sticky bar
   ============================================================ */
.header,
.inrheader {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;

    background-color: var(--c-white) !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 1px 8px rgba(15,23,42,.07) !important;

    /* Kill old dark + transparent/absolute rules */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: box-shadow .25s var(--ease) !important;
}

/* When slider is visible the parent makes header transparent — override */
body.visibleslide .header {
    position: sticky !important;
    background-color: var(--c-white) !important;
}

.header .container,
.inrheader .container {
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Deepen shadow when scrolled (toggled by JS) */
.header.scrolled,
.inrheader.scrolled {
    box-shadow: 0 2px 20px rgba(15,23,42,.13) !important;
}

/* ---- Logo ---- */
.logo {
    padding: 8px 0 !important;
    float: left !important;
}

.logo img {
    height: 42px !important;
    width: auto !important;
    display: block !important;
}

.logo h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    color: var(--c-ink) !important;
    letter-spacing: -.03em !important;
}

/* Accent the brand initial / highlight */
.logo h2 span {
    color: var(--c-primary) !important;
}

.logo a {
    color: var(--c-ink) !important;
}

.logo p {
    color: var(--c-muted) !important;
    font-size: 11px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* ---- Nav ---- */
#navigatearea {
    float: right !important;
}

.site-navigation .menu a {
    color: var(--c-ink-2) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    padding: .52em .95em !important;
    border-radius: var(--radius-xs) !important;
    transition: color .18s, background .18s !important;
}

.site-navigation .menu a:hover,
.site-navigation .menu a:focus,
.site-navigation .menu .current-menu-item > a,
.site-navigation .menu .current_page_item > a {
    color: var(--c-primary) !important;
    background: var(--c-primary-light) !important;
}

.site-navigation .menu li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Sub-menu */
.site-navigation .menu .sub-menu {
    background: var(--c-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
    padding: .35rem 0 !important;
}

.site-navigation .menu .sub-menu a {
    color: var(--c-text) !important;
    font-size: 13.5px !important;
}

.site-navigation .menu .sub-menu a:hover {
    color: var(--c-primary) !important;
    background: var(--c-primary-light) !important;
}

/* Mobile toggle */
.menu-toggle {
    color: var(--c-ink) !important;
    border: 1px solid var(--c-border) !important;
    background: var(--c-bg) !important;
    border-radius: var(--radius-xs) !important;
}

/* Toggled mobile menu */
.toggled .menu {
    background-color: var(--c-white) !important;
    border-top: 1px solid var(--c-border) !important;
}

.toggled .menu li {
    border-bottom: 1px solid var(--c-border) !important;
}

.toggled .menu a {
    color: var(--c-ink) !important;
}

/* ============================================================
   HERO / NIVO SLIDER
   ============================================================ */
#home_slider {
    position: relative;
    overflow: hidden;
}

/* Fallback background before images load */
.slider-wrapper {
    background: var(--c-hero-bg) !important;
    min-height: 580px !important;
}

/* Gradient overlay — keeps text readable over any image */
.slider-shadow {
    background: linear-gradient(
        170deg,
        rgba(10, 30, 50, 0.18) 0%,
        rgba(10, 30, 50, 0.55) 50%,
        rgba(10, 20, 40, 0.82) 100%
    ) !important;
    z-index: 99 !important;
}

#slider img {
    object-fit: cover !important;
    width: 100% !important;
    height: 580px !important;
}

/* Caption */
.nivo-html-caption {
    background: transparent !important;
}

.slide_info {
    background: transparent !important;
    padding: 2rem 3rem !important;
    max-width: 680px !important;
}

.slide_info h2 {
    font-size: 3rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 1rem !important;
    letter-spacing: -.025em !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.4) !important;
}

/* Gradient bar below heading */
.slide_info h2::after {
    content: '';
    display: block;
    width: 52px;
    height: 4px;
    background: var(--c-gradient);
    border-radius: 2px;
    margin-top: .9rem;
}

.slide_info p {
    font-size: 1.1rem !important;
    line-height: 1.72 !important;
    color: rgba(255,255,255,.84) !important;
    margin: 0 !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.35) !important;
}

/* CTA */
a.slide_more {
    display: inline-block !important;
    margin-top: 1.6rem !important;
    padding: .85rem 2.4rem !important;
    background: var(--c-gradient) !important;
    color: #fff !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 22px rgba(60,200,143,.4) !important;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease) !important;
}

a.slide_more:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(60,200,143,.58) !important;
    color: #fff !important;
}

/* Dots */
.nivo-controlNav {
    bottom: 24px !important;
    z-index: 200 !important;
}

.nivo-controlNav a {
    background: rgba(255,255,255,.35) !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 5px !important;
    border: none !important;
    margin: 0 3px !important;
    transition: width .28s var(--ease), background .28s !important;
}

.nivo-controlNav a.active {
    background: var(--c-primary) !important;
    width: 26px !important;
}

/* Arrows */
.nivo-directionNav a {
    background: rgba(255,255,255,.12) !important;
    border: 2px solid rgba(255,255,255,.3) !important;
    border-radius: 50% !important;
    width: 46px !important;
    height: 46px !important;
    top: 50% !important;
    margin-top: -23px !important;
    transition: background .2s, border-color .2s !important;
}

.nivo-directionNav a:hover {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
}

/* ============================================================
   INNER PAGES — page header band
   ============================================================ */
.inrheader {
    /* already handled by shared sticky rules above */
}

/* Thin accent bar at top of inner pages */
.inrheader::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--c-gradient);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* ============================================================
   CONTENT AREA — light backgrounds, modern cards
   ============================================================ */
#skipper {
    padding: 56px 0 48px !important;
}

#sitefull {
    padding: 56px 0 !important;
    background: var(--c-bg) !important;
}

/* Home page: Gutenberg content manages its own spacing;
   remove the parent-theme wrapper padding so the hero sits
   flush against the sticky header with no gap. */
body.home #sitefull,
body.home #skipper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.home #sitefull {
    background: transparent !important;
}

#sitefull p {
    line-height: 1.78 !important;
    margin-bottom: 1rem !important;
    /* No colour override — let Gutenberg block styles control their own p colours */
}

.page_content {
    padding: 40px 0 !important;
}

.page_content p {
    margin-bottom: 1.1rem !important;
    line-height: 1.78 !important;
}

/* Section titles */
h2.section-title {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    color: var(--c-ink) !important;
    text-transform: none !important;
    border-bottom: 3px solid var(--c-primary) !important;
    padding-right: 32px !important;
    margin-bottom: 28px !important;
}

h2.section-title::after {
    background: var(--c-bg) !important;
    border-color: var(--c-primary) !important;
    width: 11px !important;
    height: 11px !important;
    bottom: -7px !important;
}

/* Cards — mission / feature boxes */
.mission-cols {
    background: var(--c-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow .28s var(--ease), transform .28s var(--ease),
                border-color .28s var(--ease) !important;
}

.mission-cols:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-5px) !important;
    border-color: var(--c-primary) !important;
}

.fundraising-list {
    background: var(--c-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--t) !important;
}

.fundraising-list:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(60,200,143,.35) !important;
}

/* Global button */
a.ReadMore {
    display: inline-block !important;
    background: var(--c-primary) !important;
    color: var(--c-white) !important;
    border-radius: 50px !important;
    padding: .6rem 1.5rem !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: 0 3px 12px rgba(60,200,143,.28) !important;
    transition: background .2s, box-shadow .2s, transform .2s !important;
}

a.ReadMore:hover {
    background: var(--c-primary-dark) !important;
    box-shadow: 0 6px 20px rgba(60,200,143,.44) !important;
    transform: translateY(-2px) !important;
    color: var(--c-white) !important;
}

/* Sidebar */
.widgetbox {
    background: var(--c-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-xs) !important;
}

h3.widget-title {
    color: var(--c-ink) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
}

h3.widget-title::after {
    border-color: var(--c-primary) !important;
    width: 26px !important;
    padding-bottom: 12px !important;
}

/* Pagination */
.pagination .nav-links a {
    background: var(--c-bg-2) !important;
    color: var(--c-ink) !important;
    border-radius: var(--radius-xs) !important;
    border: 1px solid var(--c-border) !important;
    transition: var(--t) !important;
}

.pagination .nav-links a:hover,
.pagination .nav-links span.current {
    background: var(--c-primary) !important;
    color: var(--c-white) !important;
    border-color: var(--c-primary) !important;
}

/* ============================================================
   OUR ANDROID APPS PAGE
   ============================================================ */
.page-our-android-apps #sitefull {
    background: var(--c-bg) !important;
}

/* Page hero band */
.page-our-android-apps .inrheader {
    border-bottom: none !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Headings */
.page-our-android-apps .entry-content h1 {
    font-size: 2.6rem !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    color: var(--c-ink) !important;
    line-height: 1.18 !important;
    margin-bottom: 1rem !important;
}

.page-our-android-apps .entry-content h2 {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    color: var(--c-ink) !important;
    margin-top: 2.5rem !important;
    margin-bottom: .85rem !important;
    position: relative;
    padding-bottom: .65rem;
}

.page-our-android-apps .entry-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 3px;
    background: var(--c-gradient);
    border-radius: 2px;
}

.page-our-android-apps .entry-content h3 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--c-ink-2) !important;
}

.page-our-android-apps .entry-content p {
    color: var(--c-text) !important;
    line-height: 1.78 !important;
    font-size: .97rem !important;
    margin-bottom: 1rem !important;
}

/* Feature lists */
.page-our-android-apps .entry-content ul {
    margin: .75rem 0 1.25rem !important;
    padding: 0 !important;
}

.page-our-android-apps .entry-content ul li {
    list-style: none !important;
    padding: .38rem 0 .38rem 1.8rem !important;
    position: relative !important;
    color: var(--c-text) !important;
    font-size: .95rem !important;
    line-height: 1.6 !important;
    border-bottom: 1px solid var(--c-border) !important;
}

.page-our-android-apps .entry-content ul li:last-child {
    border-bottom: none !important;
}

.page-our-android-apps .entry-content ul li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: .38rem !important;
    color: var(--c-primary) !important;
    font-weight: 800 !important;
    font-size: .85rem !important;
}

/* App card blocks */
.page-our-android-apps .entry-content .wp-block-group {
    background: var(--c-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 2rem !important;
    margin-bottom: 1.75rem !important;
    transition: box-shadow .28s var(--ease), transform .28s var(--ease),
                border-color .28s var(--ease) !important;
}

.page-our-android-apps .entry-content .wp-block-group:hover {
    box-shadow: var(--shadow-xl) !important;
    transform: translateY(-4px) !important;
    border-color: var(--c-primary) !important;
}

/* Nested groups stay transparent */
.page-our-android-apps .entry-content .wp-block-group .wp-block-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

/* Download / CTA buttons */
.page-our-android-apps .wp-block-button__link,
.page-our-android-apps a.wp-block-button__link {
    background: var(--c-gradient) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: .8rem 2rem !important;
    font-weight: 700 !important;
    font-size: .875rem !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(60,200,143,.32) !important;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease) !important;
}

.page-our-android-apps .wp-block-button__link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(60,200,143,.52) !important;
    color: #fff !important;
}

.page-our-android-apps .is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--c-primary) !important;
    color: var(--c-primary) !important;
    box-shadow: none !important;
}

.page-our-android-apps .is-style-outline .wp-block-button__link:hover {
    background: var(--c-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(60,200,143,.3) !important;
}

.page-our-android-apps .wp-block-separator {
    border-color: var(--c-border) !important;
    margin: 2rem 0 !important;
}

.page-our-android-apps .entry-content img {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow) !important;
}

.page-our-android-apps .entry-content .wp-block-cover {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
}

/* ============================================================
   FOOTER — light
   ============================================================ */
#footer-wrapper {
    background: var(--c-ink) !important;
    border-top: 4px solid var(--c-primary) !important;
}

.footer {
    padding: 56px 0 28px !important;
}

.cols-3 h5 {
    font-size: .75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    color: var(--c-primary) !important;
    margin-bottom: 1.1rem !important;
}

.cols-3 h5::after {
    border-color: rgba(60,200,143,.35) !important;
    width: 24px !important;
    padding-bottom: 12px !important;
}

.cols-3 p {
    color: rgba(255,255,255,.58) !important;
    font-size: .9rem !important;
    line-height: 1.7 !important;
}

.cols-3 ul li a {
    color: rgba(255,255,255,.58) !important;
    font-size: .9rem !important;
    padding: .18rem 0 !important;
    display: block !important;
    transition: color .18s, padding-left .18s !important;
}

.cols-3 ul li a:hover {
    color: var(--c-primary) !important;
    padding-left: 5px !important;
}

.copyright-wrapper {
    background: rgba(0,0,0,.25) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    padding: 18px 0 !important;
}

.copyright-txt,
.design-by {
    color: rgba(255,255,255,.38) !important;
    font-size: .82rem !important;
}

.design-by .cprt,
.design-by a {
    color: var(--c-primary) !important;
}

/* ============================================================
   SCROLL-REVEAL CLASSES  (driven by JS)
   ============================================================ */
.bpp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.bpp-reveal.bpp-visible {
    opacity: 1;
    transform: translateY(0);
}

.bpp-reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.bpp-reveal-stagger.bpp-visible > *:nth-child(1) { transition-delay: 0s;    opacity: 1; transform: none; }
.bpp-reveal-stagger.bpp-visible > *:nth-child(2) { transition-delay: .1s;   opacity: 1; transform: none; }
.bpp-reveal-stagger.bpp-visible > *:nth-child(3) { transition-delay: .2s;   opacity: 1; transform: none; }
.bpp-reveal-stagger.bpp-visible > *:nth-child(4) { transition-delay: .3s;   opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 767px) {
    .slider-wrapper { min-height: 320px !important; }
    #slider img    { height: 320px !important; }

    .slide_info { padding: 1.4rem !important; }

    .slide_info h2 {
        font-size: 1.6rem !important;
        letter-spacing: -.01em !important;
    }

    .slide_info h2::after { width: 32px; height: 3px; margin-top: .65rem; }
    .slide_info p { font-size: .92rem !important; }

    a.slide_more {
        padding: .7rem 1.7rem !important;
        font-size: .82rem !important;
        margin-top: 1.2rem !important;
    }

    .logo h2 { font-size: 19px !important; }

    .page-our-android-apps .entry-content h1 { font-size: 1.9rem !important; }
    .page-our-android-apps .entry-content .wp-block-group { padding: 1.2rem !important; }

    .footer { padding: 40px 0 20px !important; }
    .cols-3 { margin-bottom: 2rem; }
}

@media screen and (min-width: 768px) and (max-width: 1169px) {
    .slider-wrapper { min-height: 460px !important; }
    #slider img    { height: 460px !important; }
    .slide_info h2 { font-size: 2.2rem !important; }
}