/*
 * Theme Name:   Kadence Child
 * Theme URI:    https://schenkelaars.net
 * Description:  Kadence child theme for Schenkelaars Home & Energy
 * Author:       Erik Schenkelaars
 * Author URI:   https://schenkelaars.net
 * Template:     kadence
 * Version:      1.0.0
 * License:      GNU General Public License v2 or later
 * Text Domain:  kadence-child
 */

/* ════════════════════════════════════════════════════════════
   COSMETIC POLISH
   ════════════════════════════════════════════════════════════ */

/* Thin orange accent line under the dark header */
#masthead, .site-header { box-shadow: inset 0 -3px 0 #e08000; }

/* Gentle fade-in of page content */
@keyframes erix-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#inner-wrap { animation: erix-fade-in 0.4s ease both; }

/* Styled date pickers on the chart forms */
#inner-wrap form input[type="date"] {
    padding: 6px 9px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    font-size: 0.95em;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#inner-wrap form input[type="date"]:focus {
    outline: none;
    border-color: #e08000;
    box-shadow: 0 0 0 3px rgba(224,128,0,0.15);
}

/* Orange "Toon grafieken" / submit buttons on the chart forms */
#inner-wrap form button,
#inner-wrap form input[type="submit"] {
    background: #e08000;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s;
}
#inner-wrap form button:hover,
#inner-wrap form input[type="submit"]:hover { background: #c46e00; }
#inner-wrap form button:active { transform: translateY(1px); }

/* Subtle card look around each chart (no padding/clip → chart size and
   tooltips unaffected) */
.content-middle > div {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

/* Smooth colour transition on nav links */
.primary-navigation a { transition: color 0.18s ease; }

/* Nicer thin scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #e08000; }

/* ── Dark-mode toggle button (fixed bottom-left) ── */
#dark-toggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #1a1a1a;
    color: #e08000;
    font-size: 1.3em;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.2s;
}
#dark-toggle:hover { transform: scale(1.08); }

/* ── Language switcher (fixed bottom-left, above dark toggle) ── */
#lang-toggle {
    position: fixed;
    left: 16px;
    bottom: 70px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #1a1a1a;
    color: #e08000;
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    transition: transform 0.15s, background 0.2s;
}
#lang-toggle:hover { transform: scale(1.08); }

/* ════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════ */
body.dark-mode { background: #181818; color: #dcdcdc; }
body.dark-mode .site,
body.dark-mode .site-content,
body.dark-mode .content-area,
body.dark-mode main#primary,
body.dark-mode main#inner-wrap,
body.dark-mode #inner-wrap,
body.dark-mode .wp-site-blocks,
body.dark-mode .content-container,
body.dark-mode .content-container.site-container,
body.dark-mode .entry-content,
body.dark-mode .entry-content-wrap,
body.dark-mode .content-wrap,
body.dark-mode .site-main,
body.dark-mode article.entry,
body.dark-mode .content-bg,
body.dark-mode .entry-hero,
body.dark-mode .page-hero-section,
body.dark-mode .page-content {
    background-color: #181818 !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode .entry-title,
body.dark-mode #inner-wrap h2 { color: #f2f2f2 !important; }

body.dark-mode p, body.dark-mode li, body.dark-mode label { color: #cfcfcf; }
body.dark-mode a { color: #f3a13a; }
body.dark-mode hr { border-color: #333 !important; }

/* Chart cards */
body.dark-mode .content-middle > div {
    background: #222 !important;
    border-color: #343434 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45) !important;
}

/* Homepage tiles */
body.dark-mode .home-card {
    background: #242424 !important;
    border-color: #383838 !important;
    color: #dcdcdc !important;
}
body.dark-mode .home-card:hover { background: #2c2c2c !important; border-color: #e08000 !important; }
body.dark-mode .home-card .ttl { color: #f0f0f0 !important; }
body.dark-mode .home-card .dsc { color: #9a9a9a !important; }

/* Forms */
body.dark-mode #inner-wrap form input[type="date"] {
    background: #262626;
    color: #eee;
    border-color: #444;
}

/* Footer */
body.dark-mode .site-footer,
body.dark-mode #colophon,
body.dark-mode .site-footer-row-container-inner,
body.dark-mode footer { background: #111 !important; }
body.dark-mode .site-footer * { color: #aaa !important; }

/* Picture-page intro + captions stay readable */
body.dark-mode .picture-page-wrap .intro,
body.dark-mode .live-status-ts { color: #aaa !important; }

/* Live-status tiles & SCOP banner: lift them off the dark page so they
   don't blend into the background (#181818). */
body.dark-mode .ls-cell,
body.dark-mode .scop-banner {
    background: #2c2c2c;
    border: 1px solid #3a3a3a;
}

/* Energiekosten totals table — dark backgrounds so the text is readable */
body.dark-mode .totalen-tabel th {
    background: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}
body.dark-mode .totalen-tabel td {
    background: #222 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.dark-mode .totalen-tabel .totaal-rij td {
    background: #1f3a24 !important;
    color: #ffffff !important;
}

/* ── Fun Sidebar (opened from the "Fun" main-menu item) ── */

#fun-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
}
#fun-sidebar-overlay.open { display: block; }

#fun-sidebar {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100%;
    background: #1a1a1a;
    color: #ffffff;
    padding: 60px 24px 24px;
    z-index: 1200;
    transition: right 0.35s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.4);
}
#fun-sidebar.open { right: 0; }

#fun-sidebar-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}
#fun-sidebar-close:hover { color: #e08000; }

.fun-title {
    color: #e08000;
    font-size: 1em;
    text-align: center;
    letter-spacing: 1px;
    margin: 0 0 16px;
}

.fun-track { margin-bottom: 24px; }
.fun-track-title {
    font-size: 0.85em;
    font-weight: bold;
    color: #e08000;
    text-align: center;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* ── Header background ── */
#masthead,
.site-header {
    background-color: #1a1a1a !important;
    padding: 0 !important;
    position: relative !important;
}

/* ── Remove blue active border on nav items ── */
.primary-navigation ul li.current-menu-item > a,
.primary-navigation ul li a {
    border: none !important;
    box-shadow: none !important;
}

/* ── Pure white everywhere ── */
:root {
    --global-palette9: #ffffff;
}
body,
.site,
.site-content,
.content-area,
main#primary,
.wp-site-blocks,
.entry-hero,
.entry-hero-container-inner,
.kadence-breadcrumbs,
.wp-block-kadence-header,
.page-title-bar,
.entry-header,
.page-hero-section {
    background-color: #ffffff !important;
}

/* ── Navigation links ── */
#site-navigation a,
.primary-navigation a,
nav.primary-navigation ul li a {
    color: #ffffff !important;
}

/* ── Navigation hover / active ── */
#site-navigation a:hover,
#site-navigation a:focus,
.primary-navigation a:hover,
.primary-navigation a:focus,
nav.primary-navigation ul li.current-menu-item > a,
nav.primary-navigation ul li a:hover {
    color: #e08000 !important;
}

/* ── Navigation background ── */
nav.primary-navigation,
.primary-navigation {
    background-color: #1a1a1a !important;
}

/* ── Site title in header ── */
.site-branding .site-title a,
.site-branding .site-title {
    color: #ffffff !important;
}
/* Small sun logo before the title text */
.site-branding .site-title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 8px;
    vertical-align: -0.15em;
    background: url('/wp-content/uploads/2020/10/android-chrome-192x192-1.png') no-repeat center / contain;
}

/* ── Global accent color (links, buttons) ── */
a {
    color: #e08000;
}
a:hover {
    color: #c06800;
}

/* ── Content area ── */
body {
    background-color: #ffffff;
    color: #333333;
}

/* ── Full width content for all pages ── */
.content-container.site-container,
.content-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

article.page {
    padding: 0 !important;
}

/* ── Chart pages: the custom templates output content directly into
   #inner-wrap with no padding. Indent text + charts so they don't
   touch the edges and the legend isn't clipped on the right. ── */
.page-id-11 #inner-wrap, .page-id-12 #inner-wrap, .page-id-13 #inner-wrap,
.page-id-14 #inner-wrap, .page-id-15 #inner-wrap, .page-id-16 #inner-wrap,
.page-id-17 #inner-wrap, .page-id-18 #inner-wrap, .page-id-30 #inner-wrap,
.page-id-32 #inner-wrap, .page-id-38 #inner-wrap, .page-id-40 #inner-wrap {
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
}

/* ── Uniform heading + date-picker form across the time-series chart
   pages (templates differ internally; this makes them look identical).
   Page 18 (Parameter Selection) is excluded — it has its own layout. ── */
.page-id-11 #inner-wrap h2, .page-id-12 #inner-wrap h2, .page-id-13 #inner-wrap h2,
.page-id-14 #inner-wrap h2, .page-id-15 #inner-wrap h2, .page-id-16 #inner-wrap h2,
.page-id-17 #inner-wrap h2, .page-id-30 #inner-wrap h2, .page-id-32 #inner-wrap h2,
.page-id-38 #inner-wrap h2, .page-id-40 #inner-wrap h2 {
    margin: 4px 0 14px !important;
    font-size: 1.5em !important;
    line-height: 1.25 !important;
}
/* 9 standard time-series pages get a 2-row date grid with the button
   beside the "Datum tot" row:
       Datum van: [____]
       Datum tot: [____]  [Toon grafieken]
   (Pages 30 Energiekosten & 32 P en E keep a wrapping flex form because
    their markup has extra fields.) */
.page-id-11 #inner-wrap form, .page-id-12 #inner-wrap form, .page-id-13 #inner-wrap form,
.page-id-14 #inner-wrap form, .page-id-15 #inner-wrap form, .page-id-16 #inner-wrap form,
.page-id-17 #inner-wrap form, .page-id-38 #inner-wrap form, .page-id-40 #inner-wrap form {
    display: grid !important;
    grid-template-columns: max-content max-content max-content;
    gap: 8px 12px;
    align-items: center;
    justify-content: start;
    margin: 0 0 22px !important;
}
/* Placement rules are unscoped: grid-row/column only take effect when the
   parent form is display:grid (i.e. only on those 9 pages), inert elsewhere. */
#inner-wrap form label[for="datum_van"]  { grid-column: 1; grid-row: 1; margin: 0; justify-self: start; white-space: nowrap; }
#inner-wrap form input[name="datum_van"] { grid-column: 2; grid-row: 1; }
#inner-wrap form label[for="datum_tot"]  { grid-column: 1; grid-row: 2; margin: 0; justify-self: start; white-space: nowrap; }
#inner-wrap form input[name="datum_tot"] { grid-column: 2; grid-row: 2; }
#inner-wrap form button,
.param-date-row input[type="submit"] { grid-column: 3; grid-row: 2; align-self: center; white-space: normal; }

/* Parameter-selection date row: same 2-row grid as the other chart forms */
.param-date-row {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    gap: 8px 12px;
    align-items: center;
    justify-content: start;
    margin-bottom: 18px;
}
.param-date-row label[for="datum_van"] { grid-column: 1; grid-row: 1; white-space: nowrap; }
.param-date-row input[name="datum_van"] { grid-column: 2; grid-row: 1; }
.param-date-row label[for="datum_tot"] { grid-column: 1; grid-row: 2; white-space: nowrap; }
.param-date-row input[name="datum_tot"] { grid-column: 2; grid-row: 2; }

/* Pages 30 & 32 — simple wrapping flex form */
.page-id-30 #inner-wrap form, .page-id-32 #inner-wrap form {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 22px !important;
}

/* Very narrow phones: let the button wrap to 2 lines instead of overflowing */
@media (max-width: 380px) {
    #inner-wrap form button { max-width: 90px; line-height: 1.2; }
}

/* Center-aligned page-name heading injected at top of chart pages */
.chart-page-title {
    text-align: center;
    margin: 16px 0 6px;
    font-size: 1.7em;
    font-weight: 700;
    color: #1a1a1a;
}
body.dark-mode .chart-page-title { color: #f2f2f2; }

/* ── Chart page layout ── */
.page-content {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}
.boxed-wrapper {
    width: 100%;
}

/* ── Hide sidebars from old Ashe templates, charts use full width ── */
.sidebar-left,
.sidebar-right {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.content-middle {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

.flex-container {
    width: 100% !important;
}

/* ── Hide page title on homepage, iframe pages and Pictures sub-pages ── */
.page-id-8 .entry-header,
.page-id-8 .entry-hero,
.page-id-10 .entry-header,
.page-id-10 .entry-hero,
.page-id-34 .entry-header,
.page-id-36 .entry-header,
.page-id-34 .entry-hero,
.page-id-36 .entry-hero,
.page-id-50 .entry-header, .page-id-50 .entry-hero,
.page-id-52 .entry-header, .page-id-52 .entry-hero,
.page-id-54 .entry-header, .page-id-54 .entry-hero,
.page-id-56 .entry-header, .page-id-56 .entry-hero,
.page-id-58 .entry-header, .page-id-58 .entry-hero,
.page-id-60 .entry-header, .page-id-60 .entry-hero,
.page-id-62 .entry-header, .page-id-62 .entry-hero,
.page-id-64 .entry-header, .page-id-64 .entry-hero,
.page-id-110 .entry-header, .page-id-110 .entry-hero,
.page-id-145 .entry-header, .page-id-145 .entry-hero,
.page-id-152 .entry-header, .page-id-152 .entry-hero {
    display: none !important;
}
.page-id-8 .entry-content,
.page-id-48 .entry-content,
.page-id-50 .entry-content, .page-id-52 .entry-content,
.page-id-54 .entry-content, .page-id-56 .entry-content,
.page-id-58 .entry-content, .page-id-60 .entry-content,
.page-id-62 .entry-content, .page-id-64 .entry-content,
.page-id-110 .entry-content, .page-id-145 .entry-content,
.page-id-152 .entry-content {
    padding-top: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* ── Heat-pump seasonal COP banner ── */
.scop-banner {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 8px;
    padding: 10px 18px;
    margin: 4px 0 18px;
}
.scop-banner .scop-label  { font-size: 0.85em; color: #bbb; text-transform: uppercase; letter-spacing: 0.5px; }
.scop-banner .scop-value  { font-size: 1.8em; font-weight: 700; color: #e08000; line-height: 1; }
.scop-banner .scop-period { font-size: 0.8em; color: #888; }

/* ── Homepage live-status row ── */
.live-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 900px;
    margin: 30px auto 4px;
    padding: 0 16px;
}
.ls-cell {
    flex: 1 1 130px;
    max-width: 170px;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.ls-cell .mdi { font-size: 1.4em; color: #e08000; line-height: 1; }
.ls-cell .ls-val { font-size: 1.25em; font-weight: 700; }
.ls-cell .ls-val small { font-size: 0.55em; font-weight: 600; margin-left: 2px; color: #bbb; }
.ls-cell .ls-lbl { font-size: 0.7em; color: #bbb; text-transform: uppercase; letter-spacing: 0.5px; }
.live-status-ts { text-align: center; font-size: 0.75em; color: #888; margin: 4px 0 24px; }

@media (max-width: 768px) {
    /* Force all 5 live tiles onto one line */
    .live-status { gap: 5px; flex-wrap: nowrap; padding: 0 8px; }
    .ls-cell { flex: 1 1 0; min-width: 0; max-width: none; padding: 7px 3px; gap: 1px; }
    .ls-cell .mdi { font-size: 1.1em; }
    .ls-cell .ls-val { font-size: 0.82em; white-space: nowrap; }
    .ls-cell .ls-val small { font-size: 0.62em; margin-left: 1px; }
    .ls-cell .ls-lbl { font-size: 0.5em; letter-spacing: 0; line-height: 1.15; }
    /* Keep the site title + sun logo on one line */
    .site-branding .site-title { font-size: 1.25rem !important; }
    .site-branding .site-title::before { width: 0.95em; height: 0.95em; margin-right: 6px; }
}

/* ── Homepage card grid (compact tiles) ── */
.home-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    max-width: 1600px;
    margin: 8px auto 40px;
    padding: 0 28px;
    box-sizing: border-box;
}
@media (max-width: 1500px) { .home-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1280px) { .home-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .home-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .home-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .home-grid { grid-template-columns: repeat(2, 1fr); } }
.home-card {
    display: block;
    background: #e6e6e6;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    padding: 13px 10px;
    text-align: center;
    text-decoration: none !important;
    color: #333333 !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.home-card:hover {
    background: #ededed;
    border-color: #e08000;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.home-card .ic  {
    display: block;
    font-size: 2.1em;
    line-height: 1;
    margin-bottom: 8px;
    color: #e08000;
}
.home-card .ttl { font-weight: 600; font-size: 0.86em; color: #1a1a1a; display: block; }
.home-card .dsc { font-size: 0.72em; color: #6a6a6a; margin-top: 3px; line-height: 1.3; display: block; }

@media (max-width: 768px) {
    .home-grid { gap: 9px; padding: 0 14px; }
    .home-card { padding: 11px 7px; }
    .home-card .ic { font-size: 1.9em; }
}

/* ── Picture pages: full width image grid ── */
.picture-page-wrap {
    width: 100%;
}
.picture-page-wrap h2 {
    text-align: center;
    margin-bottom: 16px;
}
.picture-page-wrap .intro {
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.8;
}
.picture-page-wrap .main-img {
    display: block;
    max-width: 700px;
    width: 100%;
    height: auto;
    margin: 0 auto 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.picture-grid {
    display: grid;
    /* min(100%, 500px) keeps columns from forcing overflow on narrow
       screens — on a phone the column shrinks to the viewport width. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    gap: 16px;
    margin-top: 16px;
}
.picture-grid img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 6px;
}
@media (max-width: 768px) {
    /* Single column on phones; show the whole picture instead of a
       cropped 500px-tall slice. */
    .picture-grid { grid-template-columns: 1fr; gap: 12px; }
    .picture-grid img { height: auto; }
}
.page-id-34 .content-container.site-container,
.page-id-36 .content-container.site-container {
    padding: 0 !important;
}
.page-id-34 article,
.page-id-36 article {
    padding: 0 !important;
}

/* ── Mobile typography: scale down headings/text on small screens ── */
@media (max-width: 768px) {
    /* Chart page heading "Selecteer een periode" etc. */
    #inner-wrap h2 {
        font-size: 1.2em !important;
        line-height: 1.3 !important;
    }
    #inner-wrap h3 {
        font-size: 1em !important;
    }
    /* Form labels, buttons and links on chart pages */
    #inner-wrap label,
    #inner-wrap input,
    #inner-wrap button,
    #inner-wrap a {
        font-size: 0.8em !important;
    }
    /* Homepage + picture/personal body text */
    .entry-content p {
        font-size: 0.9em !important;
        line-height: 1.55 !important;
    }
    .entry-content h2 {
        font-size: 1.3em !important;
    }
    /* Reduce chart page side padding a bit on phones */
    .page-id-11 #inner-wrap, .page-id-12 #inner-wrap, .page-id-13 #inner-wrap,
    .page-id-14 #inner-wrap, .page-id-15 #inner-wrap, .page-id-16 #inner-wrap,
    .page-id-17 #inner-wrap, .page-id-18 #inner-wrap, .page-id-30 #inner-wrap,
    .page-id-32 #inner-wrap, .page-id-38 #inner-wrap, .page-id-40 #inner-wrap {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ── Mobile: keep the nav menu reachable by sticking the header to the top
   so the menu toggle stays on screen while scrolling long chart pages. ── */
@media (max-width: 1024px) {
    #masthead,
    .site-header {
        position: sticky !important;
        top: 0;
        z-index: 500;
    }
}