/*
 Theme Name:   Tallest Tree Digital
 Theme URI:    https://generatepress.com
 Description:  Tallest Tree GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

@import 'css/tocbot.css';

.dynamic-author-image {
	margin-left: 5px;
}

.pksl_single_logo_items {
    background: none !important;
    border: none !important;
}

footer.entry-meta span.cat-links {
    display: none;
}

/* =============================================================================
   Migrated from Customizer Additional CSS (2026-05-04)

   These rules were maintained in WP Admin → Customize → Additional CSS until
   the deploy pipeline was set up via GitHub Actions. They have been moved
   here so theme + CSS can ship together through one workflow.

   The Customizer Additional CSS field on staging and production should be
   emptied in Phase 3 of this migration. Until then, both this file and the
   Customizer field load identical rules (no visual diff).
   ============================================================================= */

input {
    font-size: 20px !important;
    margin-bottom: 15px;
}

.entry-summary {
    margin-top: 15px !important;
}

.grid-container .content-area h2 {
    font-size: 2em;
}

/* === Single-post body rhythm — scoped to .single-post so it doesn't bleed into pages === */
.single-post article h2:not(:first-child) {
    margin-top: 2.0em;
}

.single-post figure.wp-block-image + p,
.single-post figure.wp-block-image + h3 {
    margin-top: 2rem;
}

.single-post div.wp-block-image {
    margin-top: 10px;
    margin-bottom: 2.5rem;
}

.grid-container .post-image {
    margin-bottom: 0.5em !important;
}

.entry-content li {
    margin-bottom: 6px;
}

.single-post .inside-article figure {
    margin-bottom: 2em;
}
/* === end single-post body rhythm === */

code {
    color: #91845D;
    font-size: 16px;
    font-weight: 600;
}

div.ttd-topics-links{
    margin-bottom: 0.4em;
}

h5#topics-on-this-page {
    margin-bottom: 0.6em;
}

/* Topics on this page widget — quieter than body links so the widget reads as metadata.
   Color uses --contrast-2 so it tracks the Customizer's contrast settings.
   text-decoration uses !important to override the .entry-content body-link underline below. */
div.ttd-topics-links a {
    font-size: 18px;
    font-weight: 600;
    color: var(--contrast-2);
    text-decoration: none !important;
    transition: color 0.15s ease;
}
div.ttd-topics-links a:hover,
div.ttd-topics-links a:focus {
    color: #91845D;
}

.ttd-topics-display {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(145, 132, 93, 0.5);
}

/* === H5 kicker — override GP parent-theme default size, apply muted gold === */
.entry-content h5,
.inside-article h5 {
    font-size: 13px;
    line-height: 1.5;
    color: #91845D;
}

/* === Underlined link contexts ===
   Underlines appear in exactly three places:
   1. Blog post body content (.single-post .entry-content)
   2. The Search Engine Land social-proof line on the homepage (.gb-text-hsel003)
   3. The Girls Who Code link in Michael's team bio (.team-bio)
   Everywhere else (case-study cards, page CTAs, etc.) stays clean. */
.single-post .entry-content a:not(.gb-text):not(.button):not([class*="wp-block-button"] *),
body.home .gb-text-hsel003 a,
body.home .team-bio a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.single-post .entry-content a:not(.gb-text):not(.button):not([class*="wp-block-button"] *):hover,
body.home .gb-text-hsel003 a:hover,
body.home .team-bio a:hover {
    color: #6CA56C;
    text-decoration: none;
}
/* === end underlined link contexts === */

/* === Editorial archive layout (image left, content right) === */
.blog .inside-article,
.archive .inside-article,
.search-results .inside-article {
    display: grid;
    grid-template-columns: 336px 1fr;
    grid-template-areas:
        "image header"
        "image summary"
        "image filler";
    gap: 0 1.5rem;
    align-items: start;
}
.blog .inside-article > script,
.archive .inside-article > script,
.search-results .inside-article > script {
    display: none !important;
}
.blog .inside-article > .post-image,
.archive .inside-article > .post-image,
.search-results .inside-article > .post-image {
    grid-area: image;
    margin: 0 !important;
    float: none !important;
}
.blog .inside-article > .post-image img,
.archive .inside-article > .post-image img,
.search-results .inside-article > .post-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.blog .inside-article > .entry-header,
.archive .inside-article > .entry-header,
.search-results .inside-article > .entry-header {
    grid-area: header;
    margin: 0;
}
.blog .inside-article > .entry-summary,
.archive .inside-article > .entry-summary,
.search-results .inside-article > .entry-summary {
    grid-area: summary;
    margin-top: 0.5em !important;
}
.blog .inside-article h2.entry-title,
.archive .inside-article h2.entry-title,
.search-results .inside-article h2.entry-title {
    font-size: 1.5em;
    line-height: 1.2em;
    margin-top: 0;
}
.blog article:not(.has-post-thumbnail) .inside-article,
.archive article:not(.has-post-thumbnail) .inside-article,
.search-results article:not(.has-post-thumbnail) .inside-article {
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "summary";
}
@media (max-width: 768px) {
    .blog .inside-article,
    .archive .inside-article,
    .search-results .inside-article {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "header"
            "summary";
        gap: 0.75rem 0;
    }
    .blog .inside-article h2.entry-title,
    .archive .inside-article h2.entry-title,
    .search-results .inside-article h2.entry-title {
        font-size: 1.3em;
    }
}
/* === end editorial archive layout === */

/* === Editorial archive — hierarchy & rhythm === */
.blog .gb-headline-88ef7563,
.archive .gb-headline-88ef7563,
.search-results .gb-headline-88ef7563 {
    font-size: 1.6em !important;
    line-height: 1.15em !important;
    margin-bottom: 1.5rem !important;
}
.entry-meta time.updated:not(.published) {
    display: none;
}
.blog .inside-article > .entry-header,
.archive .inside-article > .entry-header,
.search-results .inside-article > .entry-header {
    display: flex;
    flex-direction: column;
}
/* Global kicker formatting for entry-meta — applies sitewide */
.entry-meta {
    font-family: "Libre Franklin", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #91845D;
}
.entry-meta a { color: inherit; }

/* Archive-specific layout: meta floats above title via flex order */
.blog .inside-article .entry-header .entry-meta,
.archive .inside-article .entry-header .entry-meta,
.search-results .inside-article .entry-header .entry-meta {
    order: -1;
    margin: 0 0 8px 0 !important;
}
.blog .inside-article > .entry-summary,
.archive .inside-article > .entry-summary,
.search-results .inside-article > .entry-summary {
    margin-top: 0.5em !important;
}
.blog .site-main > article.post,
.archive .site-main > article.post,
.search-results .site-main > article.post {
    margin: 0 !important;
    padding: 0 0 2.25rem 0 !important;
    border-bottom: 1px solid rgba(145, 132, 93, 0.25);
}
.blog .site-main > article.post + article.post,
.archive .site-main > article.post + article.post,
.search-results .site-main > article.post + article.post {
    margin-top: 2.25rem !important;
}
.blog .site-main > article.post:last-of-type,
.archive .site-main > article.post:last-of-type,
.search-results .site-main > article.post:last-of-type {
    border-bottom: none;
}
/* === end editorial archive — hierarchy & rhythm === */


/* === Sidebar typography & rhythm === */
#right-sidebar .widget {
    padding: 0 !important;
    margin-bottom: 3rem !important;
    border-top: 1px solid rgba(145, 132, 93, 0.25);
    padding-top: 1.25rem !important;
}
#right-sidebar .widget:first-child {
    border-top: none;
    padding-top: 0 !important;
}
#right-sidebar .widget:last-child {
    margin-bottom: 0 !important;
}
#right-sidebar .widget .widget-title {
    font-family: "Libre Franklin", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #91845D !important;
    margin: 0 0 1rem 0 !important;
}
#right-sidebar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#right-sidebar .widget ul li {
    font-family: "Crimson Pro", serif;
    font-size: 16px;
    line-height: 1.4;
    color: #4D4B45;
    margin: 0 0 0.6em 0 !important;
    padding: 0;
}
#right-sidebar .widget ul li a,
#right-sidebar .widget ul li a:visited {
    color: #4D4B45;
    text-decoration: none;
    transition: color 0.15s ease;
}
#right-sidebar .widget ul li a:hover,
#right-sidebar .widget ul li a:focus {
    color: #91845D;
}
/* === end sidebar typography & rhythm === */


/* === Sidebar/main separator === */
#right-sidebar {
    padding-left: 2.5rem;
}
@media (max-width: 768px) {
    #right-sidebar {
        padding-left: 0;
        border-top: 1px solid rgba(145, 132, 93, 0.25);
        padding-top: 2rem;
        margin-top: 2rem;
    }
}
/* === end sidebar/main separator === */


/* === Page hero spacing === */
.gb-container-e752e0f6 {
    padding-bottom: 28px !important;
}
/* === end page hero spacing === */


/* === Pagination — normalized to editorial system === */
#nav-below.paging-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 36px 0 48px;
    padding-top: 36px;
    border-top: 1px solid rgba(145, 132, 93, 0.25);
    font-family: "Libre Franklin", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#nav-below .nav-prev,
#nav-below .nav-next {
    display: block;
}
#nav-below .nav-prev { justify-self: start; }
#nav-below .nav-next { justify-self: end; }
#nav-below .nav-numbers {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
#nav-below a.page-numbers,
#nav-below a.page-numbers:visited,
#nav-below span.page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4D4B45;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.15s ease;
}
#nav-below a.page-numbers:hover,
#nav-below a.page-numbers:focus {
    color: #91845D;
}
#nav-below span.page-numbers.current {
    color: #91845D;
    border-bottom: 1px solid #91845D;
    padding-bottom: 3px;
}
#nav-below span.page-numbers.dots {
    color: #91845D;
    opacity: 0.6;
    letter-spacing: 0.15em;
    border-bottom: none;
}
#nav-below .nav-arrow {
    width: 0.9em;
    height: 0.9em;
    fill: currentColor;
}
#nav-below .arrow-newer .nav-arrow { transform: rotate(90deg); }
#nav-below .arrow-older .nav-arrow { transform: rotate(-90deg); }
/* === end pagination === */


/* === Step 3 — Single-post body column constraint + spacing fix === */
/* GB Element template handles the header container width natively (760 px set on
   gb-container-496c2448). This rule constrains the post body and overrides GP's
   default `.entry-content:not(:first-child) { margin-top: 3em }` (= 72 px) which
   was creating an excessive gap between header and body. */
.single-post .entry-content {
    max-width: 760px;
    margin-top: 36px;
    margin-left: auto;
    margin-right: auto;
}

/* === Step 3 — Single-post in-article heading scale (Scale B) ===
   Scale on 24px body: H1 48 / H2 36 / H3 26 / H4 24 (H4 floor = body size;
   font-shift to Libre Franklin sans-serif bold keeps it readable as a
   heading). Global h3 (1.8em = 43.2px) and h4 (1.5em = 36px) would otherwise
   overshoot H2 — these scoped rules establish the editorial hierarchy. */
.single-post .entry-content h2 {
    font-size: 36px;
    line-height: 1.2;
}
.single-post .entry-content h3 {
    font-size: 26px;
    line-height: 1.2;
}
.single-post .entry-content h4 {
    font-size: 24px;
    line-height: 1.25;
}
@media (max-width: 768px) {
    .single-post .entry-content h2 { font-size: 30px; }
    .single-post .entry-content h3 { font-size: 22px; }
    .single-post .entry-content h4 { font-size: 20px; }
}

/* === Step 3 — Subtitle italic (the GB Headline JSON `fontStyle: italic`
       attribute doesn't translate to CSS; applying it manually) === */
.single-post p.gb-headline-23238484 {
    font-style: italic;
}

/* === Step 3 — Editorial prev/next post navigation === */
/* No hairline above — .ttd-topics-display end-of-article divider already separates content. */

/* Hide the default chevron arrows and "Previous:" / "Next:" labels */
.single-post .wp-block-post-navigation-link__arrow-previous,
.single-post .wp-block-post-navigation-link__arrow-next,
.single-post .wp-block-post-navigation-link .post-navigation-link__label {
    display: none;
}

/* Spacing between topic-links footer and prev/next row */
.single-post .post-navigation-link-previous,
.single-post .post-navigation-link-next {
    margin-top: 36px;
}

/* Editorial label via ::before — replaces "Previous:" / "Next:" */
.single-post .post-navigation-link-previous::before {
    content: "← Earlier post";
    display: block;
    font-family: "Libre Franklin", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #91845D;
    margin-bottom: 8px;
}
.single-post .post-navigation-link-next::before {
    content: "More recent post →";
    display: block;
    font-family: "Libre Franklin", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #91845D;
    margin-bottom: 8px;
    text-align: right;
}

/* Right-align the "next" link contents */
.single-post .post-navigation-link-next {
    text-align: right;
}

/* Title link styling — quieter than body links so prev/next read as metadata.
   Color uses --contrast-2 so it tracks the Customizer's contrast settings. */
.single-post .post-navigation-link__title {
    font-family: "Libre Franklin", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--contrast-2);
}

.single-post .wp-block-post-navigation-link a,
.single-post .wp-block-post-navigation-link a:visited {
    color: var(--contrast-2);
    text-decoration: none;
    transition: color 0.15s ease;
}
.single-post .wp-block-post-navigation-link a:hover,
.single-post .wp-block-post-navigation-link a:focus {
    color: #91845D;
}



/* === Gold underline on current page in main nav ===
   Covers exact-match (current-menu-item / current_page_item) and the
   blog-posts-page parent case (current_page_parent) so the Blog menu
   item stays highlighted on individual blog posts as well as the
   blog index. Color #EAB25E is the bright brand gold (SEO Consulting
   service color), matching the kicker accents elsewhere in the site. */
#site-navigation .current-menu-item > a,
#site-navigation .current_page_item > a,
#site-navigation .current_page_parent > a {
    text-decoration: underline;
    text-decoration-color: #EAB25E;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* === Customer dashboard utility link ===
   Account access is a secondary utility action, so it lives in the header
   instead of competing with the hero's demo/signup CTAs. */
.tb-dashboard-login,
.tb-dashboard-login:visited {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid rgba(77, 75, 69, 0.42);
    color: var(--contrast-2);
    font-family: "Libre Franklin", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.tb-dashboard-login:hover,
.tb-dashboard-login:focus {
    border-color: var(--contrast-2);
    background: var(--contrast-2);
    color: var(--base-3);
    text-decoration: none;
}

.site-header .tb-dashboard-login:hover,
.site-header .tb-dashboard-login:focus,
#mobile-header .tb-dashboard-login:hover,
#mobile-header .tb-dashboard-login:focus {
    color: var(--base-3);
}

.tb-dashboard-login:focus-visible {
    outline: 2px solid #EAB25E;
    outline-offset: 3px;
}

#mobile-header .tb-dashboard-login {
    order: 2;
    margin-left: auto;
    margin-right: 10px;
    min-height: 34px;
    padding: 8px 10px;
    font-size: 10px;
}

@media (max-width: 420px) {
    #mobile-header .tb-dashboard-login {
        letter-spacing: 0.04em;
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* === Figure captions (images, tables, embeds) ===
   <figcaption> inherits body 24px/36px (and the theme's 3em line-height)
   without this rule, which reads as a regular paragraph. Pull it down to
   editorial caption size to match the topicalboost step-illustration
   captions. Applies to every figcaption inside a single-post body so image,
   table, and embed captions share one editorial voice. */
.single-post .entry-content figcaption {
    font-family: "Crimson Pro", serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
    color: #6B665A;
    margin-top: 12px;
    text-align: left;
}


/* === Defeat theme a:visited color override on GenerateBlocks anchor-buttons
   built without !important on their color rule. Enumerated by block
   uniqueId — add new entries here as new buttons are created. ============= */
.gb-text-hero010:visited,
.gb-text-midcta003:visited,
.gb-text-svm005:visited,
.gb-text-svs005:visited,
.gb-text-svms005:visited {
    color: #FFFFFF;
}