/*
Theme Name: Timbba Blog (Appro child)
Theme URI: https://timbba.com/
Description: Child theme of Appro for blog.timbba.com. Gives the blog the same header, footer, typeface and type scale as the main timbba.com page, so the two read as one site. Header and footer markup live in this theme's header.php and footer.php; the rules below are ported from the main page's stylesheet. Being a child theme, nothing here is touched by WordPress, plugin or Appro updates.
Author: Subtlelabs
Template: appro
Version: 1.0.0
Text Domain: appro-timbba
*/

/* ------------------------------------------------------------------ */
/* 1. The main site's design tokens, verbatim from timbba.com         */
/* ------------------------------------------------------------------ */
:root {
  --ink: #0F1237; --ink-2: #3B3F6B; --ink-3: #6D7195;
  --indigo: #1D2591; --indigo-deep: #15157D; --indigo-soft: #E9ECF8; --indigo-tint: #F3F4FB;
  --leaf: #6FA317; --leaf-deep: #426900; --lime: #C1F281; --lime-soft: #EEF8DC;
  --rust: #B4532A; --rust-soft: #F8E7DE;
  --paper: #FAFAF7; --paper-2: #FFFFFF; --line: #E2E4EE; --line-2: #C9CCDE; --frame: #1A1D45;
  --shadow: 0 30px 70px -32px rgba(15,18,55,.5); --shadow-s: 0 10px 30px -18px rgba(15,18,55,.35);
  --r: 16px; --r-s: 10px;
  --display: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

/* Manrope, self-hosted - the same two files the main page serves, so the
   blog never depends on Google Fonts and the glyphs match exactly. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/manrope-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------ */
/* 2. Typeface and type scale, as on the main page                    */
/* ------------------------------------------------------------------ */
/* Bootstrap 3 (loaded by Appro's post templates) sets html to 10px, which
   would shrink every rem size below. "medium" is the browser's own default -
   16px unless the visitor has changed it - which is what the main page runs
   at, so the two scale together with the visitor's setting too. */
html { font-size: medium; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body,
body.custom-background {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body, button, input, select, textarea, .btn { font-family: var(--body); }
a { color: var(--indigo); text-decoration: none; }
a:hover, a:focus { color: var(--indigo-deep); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 4px; }
/* pretty, not balance: the first line fills before a second is started */
h1, h2, h3, h4, h5, h6 { font-family: var(--display); color: var(--ink); line-height: 1.06; letter-spacing: -0.015em; text-wrap: pretty; }
h3, h4, h5, h6 { line-height: 1.25; }
h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; }   /* the main page's h2 size: right for a post title */
h2 { font-size: 1.6rem; font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
img { max-width: 100%; height: auto; }

/* Posts: the list on /blog/ and the single post */
.blog-posts .post-title,
.post-title { font-family: var(--display); letter-spacing: -0.015em; }
.blog-posts .post-title { font-size: 1.5rem; line-height: 1.2; font-weight: 600; }
.blog-posts .post-title a, .post-title a { color: var(--ink); font-size: inherit; font-weight: inherit; line-height: inherit; }   /* Appro sizes the link itself, not the heading */
.blog-posts .post-title a:hover, .post-title a:hover { color: var(--indigo); text-decoration: none; }
/* Appro gives the list's articles the post-single class too: the large size is for the post page only */
body.single .post-single .post-title { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; font-weight: 700; }
.post-info, .post-info a, .post-footer, .post-shares { font-size: .9rem; color: var(--ink-3); }
.post-body { font-size: 17px; line-height: 1.65; color: var(--ink); }
.post-body p { margin: 0 0 1.1em; }
.post-body h2 { font-size: 1.6rem; margin: 1.6em 0 .6em; }
.post-body h3 { font-size: 1.3rem; margin: 1.4em 0 .5em; }
.post-body h4 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
.post-body ul, .post-body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.post-body li { margin-bottom: .35em; }
.post-body blockquote { margin: 1.2em 0; padding: .6em 1.2em; border-left: 3px solid var(--lime); background: var(--lime-soft); color: var(--ink-2); font-size: 1.05rem; }
.post-body img { border-radius: var(--r-s); }
.post-body a { text-decoration: underline; text-underline-offset: 2px; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .95rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.post-body th { background: var(--indigo-tint); font-weight: 600; }
.post-media img { border-radius: var(--r); }

/* The post's own heading. Appro prints it in a .site-header banner that the
   site's Additional CSS hides everywhere (it was a 150px-tall white-on-white
   banner); on a single post that leaves no title at all, so it is shown again
   here as a plain heading in the main page's scale. Pages keep it hidden. */
body.single .site-header { display: block; padding: clamp(28px, 4vw, 48px) 0 0; background: none; box-shadow: none; color: var(--ink); text-align: left; }
body.single .site-header::before, body.single .site-header::after { display: none; }   /* Appro's cyan-green gradient overlay */
body.single .site-header .header-title { font-family: var(--display); font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
/* no wider than the post column beside the sidebar (Bootstrap's col-sm-9 / col-md-8) */
@media (min-width: 768px) { body.single .site-header .header-title { max-width: 75%; } }
@media (min-width: 992px) { body.single .site-header .header-title { max-width: 66.666%; } }
body.single .site-header .bread { display: none; }   /* only ever the tagline: no breadcrumb plugin is installed */
body.single .section-padding { padding-top: clamp(20px, 3vw, 32px); }

/* On tablets Appro keeps the sidebar as a quarter-width column, which wraps
   "Recent Posts" one word per line; below 992px it goes under the posts. */
@media (min-width: 768px) and (max-width: 991px) {
  .section-padding > .container > .row > [class*="col-sm-"] { width: 100%; }
}

/* The main page's "eyebrow" label, for category names and dates */
.tb-eyebrow { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--leaf-deep); font-weight: 600; font-feature-settings: "tnum" 1; }

/* ------------------------------------------------------------------ */
/* 3. Layout helpers and buttons (prefixed tb- so Bootstrap, which    */
/*    the post templates still load, cannot restyle them)              */
/* ------------------------------------------------------------------ */
.tb-wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: 20px; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: 12px; font-weight: 600; font-size: 1rem; line-height: 1.55; border: 1.5px solid transparent; cursor: pointer; font-family: var(--body); text-decoration: none !important; transition: transform .15s ease, background .15s ease, color .15s ease; }
.tb-btn:hover { transform: translateY(-1px); }
.tb-btn-solid, .tb-btn-solid:hover, .tb-btn-solid:focus { background: var(--indigo); color: #fff; }
.tb-btn-solid:hover { background: var(--indigo-deep); }

/* ------------------------------------------------------------------ */
/* 4. Header - the main page's .nav, rule for rule                     */
/* ------------------------------------------------------------------ */
/* The main page uses position: sticky. Here a plugin stylesheet sets
   overflow-x: hidden on body, which can stop sticky from sticking, so the bar
   is fixed instead and the page starts below it; it looks the same. */
.tb-nav { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
body { padding-top: calc(71px + env(safe-area-inset-top, 0px)); }   /* 70px bar + 1px border */
@media (max-width: 760px) { body { padding-top: calc(55px + env(safe-area-inset-top, 0px)); } }
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) { .tb-nav { background: rgba(250,250,247,.92); } }
.tb-nav .tb-wrap { display: flex; align-items: center; gap: 28px; min-height: 70px; }
.tb-nav .tb-logo { display: inline-flex; align-items: center; }
.tb-nav .tb-logo img { height: 34px; width: auto; display: block; }
.tb-nav .tb-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.tb-nav .tb-links a { color: var(--ink-2); font-weight: 500; font-size: .95rem; text-decoration: none; }
.tb-nav .tb-links a:hover { color: var(--indigo); text-decoration: none; }
.tb-nav .tb-links a[aria-current="page"] { color: var(--indigo); }
.tb-nav .tb-links a.tb-btn-solid { color: #fff; }   /* the link colour above would otherwise win over the button's white */
.tb-nav .tb-links a.tb-btn-solid:hover { color: #fff; background: var(--indigo-deep); }
.tb-nav .tb-cta { margin-left: 6px; padding: 10px 18px; }
.tb-nav .tb-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; color: var(--ink); cursor: pointer; font-size: 1.1rem; line-height: 1; }
@media (max-width: 960px) {
  .tb-nav .tb-links { display: none; position: absolute; left: 0; right: 0; top: 70px; background: var(--paper-2); flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); padding: 8px 20px 16px; box-shadow: var(--shadow); }
  .tb-nav .tb-links a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tb-nav .tb-links .tb-cta { margin: 12px 0 0; border-bottom: 0; }
  .tb-nav.open .tb-links { display: flex; }
  .tb-nav .tb-burger { display: inline-flex; }
}
@media (max-width: 760px) {
  .tb-nav { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }   /* as the main page's scrolled bar: 54px, line as a shadow */
  .tb-nav .tb-wrap { min-height: 54px; }
  .tb-nav .tb-logo img { height: 26px; }
  .tb-nav .tb-burger { padding: 6px 9px; }
  .tb-nav .tb-links { top: 54px; }
}

/* Appro's own Bootstrap menu bar is not rendered by this theme; make
   sure nothing it styles for the old bar bleeds through. */
.mainmenu-area { display: none !important; }
body.admin-bar .tb-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .tb-nav { top: 46px; } }

/* ------------------------------------------------------------------ */
/* 5. Footer - the main page's footer.site                             */
/* ------------------------------------------------------------------ */
.tb-footer { border-top: 1px solid var(--line); padding: 34px 0 40px; font-size: .9rem; color: var(--ink-3); background: var(--paper); }
.tb-footer .tb-wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.tb-footer img { height: 26px; width: auto; display: block; }
.tb-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.tb-footer nav a { display: inline-block; padding-block: 5px; color: var(--indigo); }
.tb-footer span b { color: var(--ink); }
@media (max-width: 760px) {
  .tb-footer { padding: 26px 0 30px; font-size: .84rem; }
  .tb-footer .tb-wrap { gap: 10px 18px; }
  .tb-footer nav { gap: 6px 16px; }
}
/* Appro's own footer and any leftover footer widgets are replaced by the one above */
.footer-area:not(.tb-footer) { display: none !important; }