/* custom.css — Rawdon Flooring
 * Colours sourced from provided Rawdon logo:
 *   Lime accent:   #c1d849
 *   Dark grey/charcoal: #404042
 *   Background: white
 * Hand-crafted build (no sheet tab) — ported quickly, tweak later per operator.
 * Load order: base.css first, custom.css second.
 */

:root {
    --cover-text-color:             #404042;
    --highlight:                    #c1d849;
    --highlight-contrast:           #404042;
    --highlight-inverse:            #404042;
    --highlight-inverse-contrast:   #ffffff;

    --cover-title-and-description-guard-bg-color: rgba(255, 255, 255, 0.92);
    --cover-title-text-shadow:      none;

    --sticky-menu-text-color:       #404042;

    --section-light-text-color:     #404042;
    --section-light-bg-color:       #ffffff;
    --section-dark-text-color:      #404042;
    --section-dark-bg-color:        #f5f5f5;

    --section-uni-quote:            #888888;
    --section-uni-code-bg-color:    #e0e0e0;

    --single-page-text-color:       var(--section-light-text-color);
    --single-page-bg-color:         var(--section-light-bg-color);

    --footer-color-background:      #404042;
    --footer-color:                 #e8e8e8;

    --ul-li-icon:                   fa-check;
    --color-primary:                #404042;

    --font-heading: 'Oswald', sans-serif;
    --font-body:    'Open Sans', sans-serif;
    --font-nav:     'Oswald', sans-serif;

    --nav-height:        120px;
    --layout-max-width:  1100px;
    --border-radius:     6px;

    --font-size-section-title:        2.4rem;
    --font-size-section-title-mobile: 2.0rem;
    --font-size-card-title:           1.8rem;
    --font-size-card-body:            1.5rem;
    --font-size-card-icon:            3.2rem;
    --font-size-subheading:           1.8rem;

    --card-border-color:    #e0e0e0;
    --input-border-color:   #cccccc;
    --nav-bg-color:         #ffffff;
    --nav-logo-text-color:  #404042;
    --color-error:          #c53030;

    --form-success-bg:      #f6faec;
    --form-success-text:    #4b5c17;
    --form-success-border:  #c1d849;

    --form-error-bg:        #fff5f5;
    --form-error-text:      #9b2c2c;
    --form-error-border:    #fed7d7;
}

/* NAV — white background, charcoal text, lime hover */
.tella-nav-links .btn.site-menu       { color: #404042; font-weight: 600; }
.tella-nav-links .btn.site-menu:hover { color: #8a9c2e; }
.tella-logo-text                      { color: #404042 !important; font-weight: 700; }
.tella-mobile-link                    { color: #404042; }
.tella-mobile-link:hover              { color: #8a9c2e; }

/* HERO — capped height so the next section peeks in on first view.
 * Theme default is html/body/#site-head all height:100% -> effectively full
 * viewport. Overriding height here re-crops the background-size:cover image
 * to fill this shorter box -- cropping the source file alone would NOT
 * shrink this, since cover always re-fills whatever container height is. */
#site-head, #site-head.withCenteredImage {
    height: 60vh;
}

/* HERO — wash treatment (mattbuilthomes pattern) instead of a boxed card.
 * Flat, consistent-opacity white wash over the photo (no gradient/fade),
 * text sits straight on the wash with no opaque card behind it. */
#site-head::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255, 255, 255, 0.55);
    z-index:    0;
    pointer-events: none;
}
#site-head .vertical { position: relative; z-index: 1; }

#site-head-content {
    max-width: 580px;
    margin:    0 auto;
}

#site-head-content .blog-title {
    color:         #404042;
    font-size:     3.4rem;
    margin-bottom: 1rem;
    font-weight:   700;
}
#site-head-content .blog-description {
    color:         #404042;
    font-size:     1.6rem;
    line-height:   1.6;
    margin-bottom: 1.8rem;
}

/* HERO CTA BUTTON — lime */
.tella-hero-cta {
    display:          inline-block;
    background-color: #c1d849;
    color:            #404042 !important;
    padding:          1.1rem 2.8rem;
    border-radius:    var(--border-radius);
    font-family:      var(--font-nav);
    font-size:        1.5rem;
    font-weight:      700;
    letter-spacing:   1px;
    text-transform:   uppercase;
    text-decoration:  none !important;
    transition:       background-color 0.2s ease, transform 0.15s ease;
    margin-top:       0.4rem;
}
.tella-hero-cta:hover {
    background-color: #404042;
    color:            #ffffff !important;
    transform:        translateY(-2px);
}

/* SECTION h2 */
.post-content h2 {
    font-size:     2.0rem;
    font-weight:   700;
    color:         #404042;
    margin-top:    2rem;
    margin-bottom: 0.75rem;
    line-height:   1.3;
}

/* SUBMIT BUTTON */
.tella-submit-btn { background-color: #c1d849 !important; color: #404042 !important; }
.tella-submit-btn:hover:not(:disabled) { background-color: #404042 !important; color: #ffffff !important; }

/* FOOTER */
footer a, .footer a             { color: #e8e8e8; }
footer a:hover, .footer a:hover { color: #c1d849; }

/* Override theme crimson on dark sections */
.post-holder.dark,
body .post-holder.dark {
    background-color: #f5f5f5 !important;
    color:            #404042 !important;
}

.post-content img {
    border-radius: 6px;
    max-width:     100%;
    height:        auto;
}

/* ABOUT — ATFA member badge, small image + link */
.tella-atfa-badge {
    display:      inline-block;
    margin-top:   2rem;
}
.tella-atfa-badge img {
    max-width:      140px;
    height:         auto;
    border-radius:  4px;
    border:         1px solid #e0e0e0;
}

/* CONTACT — simple stacked list, business owner names + numbers (no boxed call-out) */
.tella-contact-simple {
    display:        flex;
    flex-direction: column;
    gap:            0.8rem;
    margin-bottom:  2.5rem;
}
.tella-contact-simple a {
    display:         inline-flex;
    align-items:     center;
    gap:             0.7rem;
    color:           #404042;
    font-weight:     700;
    font-size:       1.8rem;
    text-decoration: none;
    font-family:     var(--font-heading);
}
.tella-contact-simple a:hover { color: #8a9c2e; }
.tella-contact-simple i { color: #404042; font-size: 1.5rem; }
.tella-contact-name {
    text-transform: uppercase;
    margin-right:   0.2rem;
}

.tella-follow-tag {
    font-weight:   700;
    font-size:     1.4rem;
    color:         #404042;
    margin:        1.5rem 0 0.8rem 0;
}