/*
Theme Name: Tree Fellas
Theme URI: https://www.thetreefellas.com.au/
Description: GeneratePress child theme recreating the legacy Tree Fellas site shell.
Author: Digerati
Template: generatepress
Version: 0.8.6
Text Domain: treefellas
*/

:root {
    --tf-navy: #1d3d51;
    --tf-blue: #5d869f;
    --tf-light-blue: #80a9c2;
    --tf-page: #cfdde6;
    --tf-brown: #6b482e;
    --tf-max: 960px;
}

html, body {
    background: var(--tf-page);
}

body {
    color: var(--tf-navy);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
}

a { color: var(--tf-brown); }
a:hover { color: var(--tf-blue); }

/* GeneratePress chrome is replaced by the legacy Tree Fellas shell. */
.site-header,
#site-navigation,
.site-footer,
.entry-header {
    display: none !important;
}

#page,
.site-content,
.content-area,
.site-main,
.inside-article,
.entry-content {
    background: transparent !important;
}

#page,
.grid-container,
.site-content {
    max-width: none !important;
    width: 100% !important;
}

.site-content,
#primary,
.site-main,
.inside-article,
.entry-content {
    padding: 0 !important;
    margin: 0 !important;
}

.tf-content {
    width: 100%;
    max-width: var(--tf-max);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

/* HEADER */
.tf-header {
    background: var(--tf-navy);
    padding-top: 18px;
}

.tf-header-top {
    min-height: 148px;
}

.tf-logo {
    display: block;
    width: 211px;
    height: 208px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    background: url("assets/images/logo.png") no-repeat 0 0 / 211px 208px;
    text-indent: -9999px;
    overflow: hidden;
}

.tf-contact {
    float: right;
    margin-top: 87px;
    margin-bottom: 18px;
    text-align: right;
}

.tf-contact-line {
    display: inline-block;
    min-height: 42px;
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: left center;
    color: #fff;
    font-size: 20px;
    line-height: 42px;
    font-weight: 400;
}

.tf-contact-line + .tf-contact-line {
    margin-top: 4px;
}

.tf-contact-line--phone { background-image: url("assets/images/phone.png"); }
.tf-contact-line--email { background-image: url("assets/images/email.png"); }

.tf-contact-line a,
.tf-contact-line strong {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}

.tf-contact-line strong {
    font-weight: 700;
    margin-right: 5px;
}

.tf-menu-band {
    clear: both;
    background: var(--tf-navy) url("assets/images/menu-shadow.jpg") repeat-x left top;
}

.tf-nav {
    min-height: 62px;
}

.tf-nav ul {
    list-style: none;
    margin: 0;
    padding: 10px 0 5px;
    float: right;
}

.tf-nav > ul > li,
.tf-nav .menu > li {
    display: inline-block;
    position: relative;
    margin: 0 10px 0 0;
    padding: 0 11px 0 0;
    background: url("assets/images/line.png") no-repeat right center;
}

.tf-nav > ul > li:last-child,
.tf-nav .menu > li:last-child {
    margin-right: 0;
    padding-right: 0;
    background: none;
}

.tf-nav a {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 47px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.tf-nav li:hover > a,
.tf-nav .current-menu-item > a,
.tf-nav .current-menu-ancestor > a {
    color: var(--tf-light-blue);
}

.tf-nav .sub-menu {
    display: none;
    position: absolute;
    z-index: 9999;
    left: -15px;
    top: 47px;
    width: 240px;
    padding: 8px;
    margin: 0;
    background: var(--tf-navy);
    border-radius: 0 0 14px 14px;
    float: none;
}

.tf-nav li:hover > .sub-menu,
.tf-nav li:focus-within > .sub-menu {
    display: block;
}

.tf-nav .sub-menu li {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
}

.tf-nav .sub-menu a {
    padding: 0 15px;
    line-height: 42px;
    text-transform: none;
    border-radius: 14px;
}

.tf-nav .sub-menu a:hover,
.tf-nav .sub-menu .current-menu-item > a {
    background: var(--tf-blue);
    color: #fff;
    font-weight: 700;
}

.tf-mobile-toggle {
    display: none;
    width: 100%;
    border: 0;
    padding: 12px 20px;
    background: var(--tf-navy);
    color: #fff;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
}

/* Default content shell */
body:not(.home) .entry-content {
    width: 100%;
    max-width: var(--tf-max);
    margin: 0 auto !important;
    padding: 38px 10px 20px !important;
    box-sizing: border-box;
}

body:not(.home) .entry-content h1,
body:not(.home) .entry-content h2 {
    color: var(--tf-navy);
    font-weight: 300;
}

body:not(.home) .entry-content h1 {
    font-size: 50px;
    line-height: 1.15;
}

body:not(.home) .entry-content h2 {
    font-family: "Open Sans Condensed", "Open Sans", Arial, sans-serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

/* Gutenberg classes for later homepage migration */
.tf-home-showcase {
    width: 100%;
    height: 449px;
    overflow: hidden;
    background: #173447;
}

.tf-home-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tf-home-services {
    background: var(--tf-navy) url("assets/images/services-shadow.jpg") repeat-x center bottom;
    padding: 48px 0 20px;
}

.tf-home-services-inner {
    max-width: var(--tf-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.tf-home-service {
    text-align: center;
    color: #fff;
}

.tf-home-service h2 {
    min-height: 52px;
    font-family: "Open Sans Condensed", "Open Sans", sans-serif;
    font-size: 25px;
    line-height: 26px;
    font-weight: 700;
    color: #7ca5bf;
}

.tf-home-service img {
    display: block;
    margin: 15px auto;
}

.tf-button,
.wp-block-button__link {
    display: inline-block;
    color: #fff !important;
    background: var(--tf-blue) !important;
    border: 1px solid #131519;
    border-radius: 0 !important;
    padding: 5px 20px;
    font-size: 20px;
    line-height: 34px;
    font-weight: 400;
    text-decoration: none;
}

.tf-home-copy {
    max-width: var(--tf-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 620px 300px;
    gap: 20px;
    padding-top: 10px;
}

.tf-testimonial {
    margin-top: 8px;
    margin-bottom: 50px;
    background: #a9c3d3;
    border-radius: 18px;
    position: relative;
}

.tf-testimonial h3 {
    margin: 0;
    padding: 0;
    line-height: 70px;
    text-align: center;
    background: var(--tf-navy);
    color: #fff;
    border-radius: 18px 18px 0 0;
    font-family: "Open Sans Condensed", "Open Sans", sans-serif;
    font-size: 25px;
    font-weight: 700;
}

.tf-testimonial blockquote {
    margin: 0;
    padding: 20px 18px 34px;
    color: #000;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    font-style: italic;
}

/* FOOTER */
.tf-footer {
    padding: 40px 10px 18px;
    background: var(--tf-page);
}

.tf-footer .tf-content {
    min-height: 42px;
}

.tf-footer-copy {
    float: left;
    margin: 0;
    line-height: 42px;
    font-weight: 400;
    font-style: italic;
}

.tf-footer-logo {
    float: right;
    display: block;
}

.tf-footer-logo img {
    display: block;
}

@media (max-width: 980px) {
    .tf-content,
    body:not(.home) .entry-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .tf-logo { left: 18px; }
}

@media (max-width: 768px) {
    .tf-header { padding-top: 10px; }
    .tf-header-top { min-height: auto; padding-bottom: 10px; }

    .tf-logo {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 auto;
    }

    .tf-contact {
        float: none;
        margin: 12px 0 0;
        text-align: center;
    }

    .tf-contact-line {
        display: block;
        width: max-content;
        max-width: 100%;
        margin: 0 auto 4px;
    }

    .tf-contact-line strong { display: none; }

    .tf-mobile-toggle { display: block; }
    .tf-nav { display: none; }
    .tf-nav.is-open { display: block; }
    .tf-nav ul { float: none; padding: 0 18px 12px; }
    .tf-nav > ul > li,
    .tf-nav .menu > li {
        display: block;
        margin: 0;
        padding: 0;
        background: none;
    }
    .tf-nav a { line-height: 42px; }
    .tf-nav .sub-menu {
        display: block;
        position: static;
        width: auto;
        padding: 0 0 0 15px;
        background: transparent;
        border-radius: 0;
    }

    .tf-home-showcase { height: 350px; }
    .tf-home-services-inner { grid-template-columns: 1fr; padding: 0 18px; }
    .tf-home-copy { grid-template-columns: 1fr; padding: 10px 18px 0; }

    .tf-footer-copy,
    .tf-footer-logo { float: none; text-align: center; }
    .tf-footer-logo img { margin: 0 auto; }
}

@media (max-width: 480px) {
    .tf-home-showcase { height: 250px; }
    .tf-contact-line,
    .tf-contact-line a { font-size: 16px; }
}

/* HOME - Gutenberg implementation */
.home .entry-content {
    width: 100%;
    max-width: none;
    margin: 0 !important;
}

.tf-home {
    width: 100%;
    margin: 0;
}

.tf-home-hero {
    position: relative;
    width: 100%;
    max-width: var(--tf-max);
    height: 449px;
    margin: 0 auto;
    overflow: hidden;
    background: #173447;
}

.tf-home-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .65s ease;
}

.tf-home-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.tf-home-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The legacy home used five equal pager bars rather than visible arrow controls. */
.tf-home-prev,
.tf-home-next {
    display: none !important;
}

.tf-home-pager {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    display: flex;
    z-index: 10;
}

.tf-home-pager button {
    flex: 1 1 20%;
    height: 4px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}

.tf-home-pager button.is-active {
    background: #80aac3;
}

.tf-home-services {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px max(18px, calc((100% - var(--tf-max)) / 2)) 20px !important;
    box-sizing: border-box;
    background: var(--tf-navy) url("assets/images/services-shadow.jpg") repeat-x center bottom;
}

.tf-home-services > .wp-block-columns {
    width: 100%;
    max-width: var(--tf-max);
    margin: 0 auto !important;
    gap: 18px;
    align-items: flex-start;
}

.tf-service-card {
    text-align: center;
    color: #fff;
}

.tf-service-card .wp-block-image {
    margin: 15px auto 10px !important;
}

.tf-service-card .wp-block-image img {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
}

.tf-service-card h2.wp-block-heading {
    width: 214px;
    max-width: 100%;
    min-height: 52px;
    margin: 0 auto 8px !important;
    color: #7ca5bf;
    font-family: "Open Sans Condensed", "Open Sans", Arial, sans-serif;
    font-size: 25px !important;
    line-height: 26px !important;
    font-weight: 700;
}

.tf-service-card h2 a {
    color: #7ca5bf !important;
    text-decoration: none;
}

.tf-service-card h2 a:hover {
    color: #fff !important;
}

.tf-service-card p {
    margin: 0 auto !important;
    color: #fff;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 400;
}

.tf-services-button {
    width: 100%;
    max-width: var(--tf-max);
    margin: 38px auto 0 !important;
    justify-content: center;
}

.tf-services-button .wp-block-button {
    width: 320px;
    max-width: 100%;
}

.tf-services-button .wp-block-button__link {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.tf-home-lower {
    width: 100%;
    max-width: var(--tf-max);
    margin: 0 auto !important;
    padding: 10px 0 0;
    gap: 20px;
    align-items: flex-start;
}

.tf-home-welcome {
    flex-basis: 620px !important;
    padding: 0 10px;
    box-sizing: border-box;
}

.tf-home-welcome h1 {
    margin: 0 0 12px !important;
    color: var(--tf-navy);
    font-size: 60px !important;
    line-height: 1.1 !important;
    font-weight: 300;
}

.tf-home-welcome p {
    margin: 0 0 18px !important;
    color: var(--tf-navy);
    font-size: 18px;
    line-height: 1.55;
    font-weight: 300;
}

.tf-home-testimonial {
    flex-basis: 300px !important;
    margin-top: 8px !important;
    margin-bottom: 50px !important;
    overflow: hidden;
    background: #a9c3d3;
    border-radius: 18px;
}

.tf-home-testimonial h3 {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--tf-navy);
    border-radius: 18px 18px 0 0;
    text-align: center;
    font-family: "Open Sans Condensed", "Open Sans", Arial, sans-serif;
    font-size: 25px !important;
    line-height: 70px !important;
    font-weight: 700;
}

.tf-home-testimonial h3 a {
    color: #fff !important;
    text-decoration: none;
}

.tf-home-testimonial .wp-block-quote {
    margin: 0 !important;
    padding: 20px 18px 34px !important;
    border: 0 !important;
    color: #000;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    font-style: italic;
}

.tf-home-testimonial .wp-block-quote p {
    margin: 0 0 14px !important;
}

.tf-home-testimonial .wp-block-quote cite {
    display: block;
    margin-top: 14px;
    color: var(--tf-navy);
    font-style: normal;
    font-weight: 400;
}

@media (max-width: 768px) {
    .tf-home-hero { height: 350px; }
    .tf-home-services > .wp-block-columns { gap: 10px; }
    .tf-home-lower { display: block; padding: 10px 18px 0; box-sizing: border-box; }
    .tf-home-welcome,
    .tf-home-testimonial { width: 100%; max-width: none; }
    .tf-home-welcome h1 { text-align: center; font-size: 48px !important; }
}

@media (max-width: 640px) {
    .tf-home-services > .wp-block-columns { display: block; }
    .tf-service-card { margin-bottom: 28px; }
}

@media (max-width: 480px) {
    .tf-home-hero { height: 250px; }
}

/* v0.5.0 - Home width cleanup.
 * Do not let Gutenberg's generic group constraints cap the Home showcase.
 * The hero and dark services band fill the available page width; only the
 * service-card row itself is kept readable and centred. */
body.home .inside-article,
body.home .entry-content,
body.home .tf-home {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Gutenberg/GeneratePress can add an inner group container depending on the
 * installed block markup. Home must not inherit a site-wide max width/padding. */
body.home .wp-block-group,
body.home .wp-block-group__inner-container,
body.home .site-main .wp-block-group__inner-container {
    max-width: none !important;
}

body.home .site-main .wp-block-group__inner-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* HERO */
body.home .tf-home-hero {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    height: 449px;
    margin: 0 !important;
    overflow: hidden;
}

/* Slides are absolutely positioned, therefore the explicit height above is
 * intentional; without it the hero parent collapses to zero height. */
body.home .tf-home-hero .tf-home-slide {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
}

body.home .tf-home-hero .tf-home-slide img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover;
}

/* SERVICES BAND */
body.home .tf-home-services {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px 32px 20px !important;
    box-sizing: border-box;
}

body.home .tf-home-services > .wp-block-group__inner-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.home .tf-home-services .wp-block-columns {
    display: flex !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    gap: 32px !important;
}

body.home .tf-home-services .wp-block-columns > .wp-block-column {
    flex: 1 1 0 !important;
    min-width: 0;
}

body.home .tf-services-button {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Text area remains intentionally centred/readable. */
body.home .tf-home-lower {
    max-width: var(--tf-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    body.home .tf-home-hero { height: 350px; }
    body.home .tf-home-services { padding-left: 18px !important; padding-right: 18px !important; }
}

@media (max-width: 640px) {
    body.home .tf-home-services .wp-block-columns { display: block !important; }
}

@media (max-width: 480px) {
    body.home .tf-home-hero { height: 250px; }
}

/* v0.6.0 - Home Gutenberg container scoping.
 * Keep the Home background bands full-width, but constrain their inner content.
 * Explicitly neutralise GeneratePress/Gutenberg inner-container padding on Home. */
body.home .tf-home > .wp-block-group__inner-container,
body.home .tf-home-hero > .wp-block-group__inner-container,
body.home .tf-home-services > .wp-block-group__inner-container {
    padding: 0 !important;
}

/* Hero remains full width inside the Home shell. */
body.home .tf-home-hero,
body.home .tf-home-hero > .wp-block-group__inner-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Services background spans full width; its actual content is constrained
 * inside the background to the legacy site width. */
body.home .tf-home-services {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 48px 0 20px !important;
}

body.home .tf-home-services > .wp-block-group__inner-container {
    width: 100% !important;
    max-width: var(--tf-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.home .tf-home-services .wp-block-columns,
body.home .tf-services-button {
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 768px) {
    body.home .tf-home-services {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}


/* v0.7.0 - Theme-owned content page shell.
 * Gutenberg now owns only page-specific article content. The legacy page title
 * and right-hand testimonial rail are supplied by the theme on every standard
 * non-home page. */
body:not(.home) .entry-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tf-page-title {
    width: 100%;
    background: var(--tf-navy) url("assets/images/page-title-bg.jpg") repeat-x left top;
}

.tf-page-title .tf-content {
    padding: 7px 0 8px;
}

.tf-page-title h1 {
    margin: 0 !important;
    color: #fff !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 50px !important;
    line-height: 1.15 !important;
    font-weight: 300 !important;
}

.tf-page-layout {
    width: 100%;
    max-width: var(--tf-max);
    margin: 0 auto;
    padding: 18px 0 30px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 40px;
    align-items: start;
}

.tf-page-main {
    min-width: 0;
}

/* Neutralise the generic block padding inside the theme-owned article column. */
.tf-page-main .wp-block-group,
.tf-page-main .wp-block-group__inner-container,
.tf-page-main .tf-page-content {
    max-width: none !important;
}

.tf-page-main .wp-block-group__inner-container {
    padding: 0 !important;
}

/* Compact legacy-style service index. */
.tf-service-index-item {
    margin: 0 0 24px !important;
    padding: 0 !important;
}

.tf-service-index-item > .wp-block-group__inner-container {
    padding: 0 !important;
}

.tf-service-index-item h2,
.tf-service-index-item h2.wp-block-heading {
    margin: 0 0 8px !important;
    color: var(--tf-navy);
    font-family: "Open Sans Condensed", "Open Sans", Arial, sans-serif !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.tf-service-index-item h2 a {
    color: var(--tf-navy) !important;
    text-decoration: none;
}

.tf-service-index-item h2 a:hover {
    color: var(--tf-blue) !important;
}

.tf-service-index-item p {
    margin: 0 !important;
    line-height: 1.45;
}

.tf-service-index-item p a {
    color: var(--tf-brown);
    text-decoration: underline;
}

/* Theme-owned testimonial rail. */
.tf-content-rail {
    width: 280px;
    max-width: 100%;
}

.tf-rail-testimonial {
    position: relative;
    margin: 0 0 48px;
    background: #a9c7d8;
    border-radius: 17px;
}

.tf-rail-testimonial::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 0;
    height: 0;
    margin-left: -20px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #a9c7d8;
}

.tf-rail-testimonial h3 {
    margin: 0 !important;
    padding: 18px 16px;
    border-radius: 17px 17px 0 0;
    background: var(--tf-navy);
    color: #fff !important;
    text-align: center;
    font-family: "Open Sans Condensed", "Open Sans", Arial, sans-serif !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.tf-rail-testimonial h3 a {
    color: #fff !important;
    text-decoration: none;
}

.tf-rail-testimonial blockquote {
    margin: 0;
    padding: 20px 22px 24px;
    border: 0;
    color: #111;
    text-align: center;
    font-size: 17px;
    line-height: 1.45;
    font-style: italic;
}

.tf-rail-testimonial blockquote p {
    margin: 0 0 12px;
}

.tf-rail-testimonial blockquote p:last-child {
    margin-bottom: 0;
}

.tf-rail-cite {
    display: block;
    margin-top: 28px;
    color: #111;
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
    font-style: italic;
}

@media (max-width: 980px) {
    .tf-page-title .tf-content,
    .tf-page-layout {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 768px) {
    .tf-page-title h1 {
        font-size: 40px !important;
    }

    .tf-page-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tf-content-rail {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
}

/* v0.8.2 - Gallery index/category layout. */
.tf-gallery-page,
.tf-gallery-category-page {
    width: 100%;
    max-width: var(--tf-max);
    margin: 0 auto;
    padding: 42px 0 60px;
    box-sizing: border-box;
}

.tf-gallery-page h1,
.tf-gallery-category-page h1 {
    margin: 0 0 28px;
    color: var(--tf-navy);
    font-size: 46px;
    line-height: 1.1;
    font-weight: 300;
}

.tf-gallery-category-grid,
.tf-gallery-image-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 18px;
    width: 100%;
}

.tf-gallery-card,
.tf-gallery-image-card {
    margin: 0;
    min-width: 0;
}

.tf-gallery-card a,
.tf-gallery-image-card a {
    display: block;
    text-decoration: none;
}

.tf-gallery-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #b7cad6;
}

.tf-gallery-card figcaption,
.tf-gallery-image-card figcaption {
    margin-top: 9px;
    color: var(--tf-navy);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 400;
}

.tf-gallery-back {
    display: inline-block;
    margin: 0 0 28px;
    padding: 10px 18px;
    background: #2d2d2d;
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
}

.tf-gallery-back:hover {
    background: var(--tf-blue);
}

.tf-gallery-empty {
    grid-column: 1 / -1;
    margin: 0;
}

/* Lightweight theme-owned gallery lightbox. */
.tf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 0, 0, .86);
    box-sizing: border-box;
}

.tf-lightbox.is-open {
    display: flex;
}

.tf-lightbox__figure {
    position: relative;
    max-width: min(1100px, 92vw);
    max-height: 90vh;
    margin: 0;
}

.tf-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    margin: auto;
}

.tf-lightbox__caption {
    margin-top: 10px;
    color: #fff;
    text-align: center;
}

.tf-lightbox__close {
    position: absolute;
    right: -10px;
    top: -44px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 1000px) {
    .tf-gallery-page,
    .tf-gallery-category-page {
        max-width: none;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 800px) {
    .tf-gallery-category-grid,
    .tf-gallery-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .tf-gallery-category-grid,
    .tf-gallery-image-grid {
        grid-template-columns: 1fr;
    }

    .tf-gallery-page h1,
    .tf-gallery-category-page h1 {
        font-size: 38px;
    }
}

/* v0.8.3 - Gallery routes use the same explicit centred shell as the legacy site. */
.tf-gallery-shell {
    width: 100%;
    max-width: var(--tf-max);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0;
    box-sizing: border-box;
}

.tf-gallery-shell .tf-gallery-page,
.tf-gallery-shell .tf-gallery-category-page {
    width: 100%;
    max-width: none;
    margin: 0;
}

@media (max-width: 1000px) {
    .tf-gallery-shell {
        max-width: none;
        padding-left: 20px;
        padding-right: 20px;
    }

    .tf-gallery-shell .tf-gallery-page,
    .tf-gallery-shell .tf-gallery-category-page {
        padding-left: 0;
        padding-right: 0;
    }
}


/* v0.8.4 - Gallery pages deliberately reuse the proven page-layout centring shell.
 * These routes do not have the standard content-page testimonial rail, so collapse
 * the page layout to a single content column while retaining its width/margins. */
.tf-page-layout.tf-gallery-shell {
    display: block;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
    max-width: var(--tf-max);
    margin-left: auto;
    margin-right: auto;
    padding: 42px 0 60px;
    box-sizing: border-box;
}

.tf-page-layout.tf-gallery-shell .tf-gallery-page,
.tf-page-layout.tf-gallery-shell .tf-gallery-category-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 1000px) {
    .tf-page-layout.tf-gallery-shell {
        max-width: none;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* v0.8.5 - Gallery routing must override GeneratePress's content-column sizing.
 * DevTools confirmed #content spans the viewport while #primary was only 578px,
 * so centring the inner gallery shell could never work. */
body.tf-gallery-route #content.site-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

body.tf-gallery-route #primary.site-main {
    display: block !important;
    float: none !important;
    flex: none !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.tf-gallery-route .tf-page-layout.tf-gallery-shell {
    display: block !important;
    width: 100% !important;
    max-width: var(--tf-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

@media (max-width: 1000px) {
    body.tf-gallery-route .tf-page-layout.tf-gallery-shell {
        max-width: none !important;
        padding-left: 20px;
        padding-right: 20px;
    }
}