/* custom.css -- Ants Pants Pest Control
 * Colours sourced from the client logo (appc_logo.jpg), sampled via pixel analysis:
 *   Primary red/orange: #EE3823  (dominant background colour, ~90% of non-neutral pixels)
 *   Accent yellow:       #F8D201  ("Ants Pants" wordmark)
 *   Secondary orange:    #F47B20  (ant character highlight)
 * Hand-crafted build (no sheet tab) -- first pass to get to dev preview matching brand
 * colours off the logo alone. No hero photo or real site photography available yet --
 * hero uses a solid brand-red background as a placeholder. Design expansion (real hero
 * photo, refined favicon, polish) planned as a follow-up once this is reviewed on dev.
 * Load order: base.css first, custom.css second.
 */

:root {
    /* NOTE: base.css also reuses --cover-text-color for every section h2 (.post-title),
       not just the hero -- so this must stay a colour that reads on a LIGHT section
       background. The hero's own headline/subheadline are coloured explicitly via
       #site-head-content .blog-title/.blog-description below, so they don't depend on
       this variable and can stay white regardless. */
    --cover-text-color:             #1a1a1a;
    --highlight:                    #F8D201;
    --highlight-contrast:           #1a1a1a;
    --highlight-inverse:            #EE3823;
    --highlight-inverse-contrast:   #ffffff;

    --cover-title-and-description-guard-bg-color: rgba(238, 56, 35, 0.85);
    --cover-title-text-shadow:      none;

    --sticky-menu-text-color:       #1a1a1a;

    --section-light-text-color:     #1a1a1a;
    --section-light-bg-color:       #ffffff;
    --section-dark-text-color:      #1a1a1a;
    --section-dark-bg-color:        #fff6e0;

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

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

    --footer-color-background:      #EE3823;
    --footer-color:                 #f0f0f0;

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

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

    /* 90px -> 118px (~1.3x) to keep the enlarged logo's breathing room proportional --
       see the logo height bump below and layouts/partials/custom_body.html's inline
       style (70px -> 91px, also ~1.3x). base.css's #site-head/.post[id] rules already
       read this variable, so desktop hero offset and scroll-anchoring follow automatically. */
    --nav-height:        118px;
    --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:         #EE3823;
    --nav-logo-text-color:  #ffffff;
    --color-error:          #c53030;

    --form-success-bg:      #fff8e0;
    --form-success-text:    #7a5c00;
    --form-success-border:  #F8D201;

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

/* NAV -- red background (matches old theme), white text, yellow hover */
.tella-nav-links .btn.site-menu       { color: #ffffff; font-weight: 600; }
.tella-nav-links .btn.site-menu:hover { color: #F8D201; }
.tella-logo-text                      { color: #ffffff !important; font-weight: 700; }
.tella-mobile-link                    { color: #ffffff; }
.tella-mobile-link:hover              { color: #F8D201; }

/* Hamburger bars -- were tied to --cover-text-color (now dark, for section headings),
   so they need their own explicit colour now that the nav bar sitting behind them is red.
   Mobile-link hover state is left to base.css's own cream-bg/dark-text swap (driven by
   --section-dark-bg-color / --sticky-menu-text-color below) -- already legible against red. */
.tella-hamburger span { background: #ffffff; }

/* HERO -- no site photography supplied yet, so this uses a solid brand-red panel
 * instead of a background image. Swap for a real photo during the design-expansion
 * pass; see the reusable image-tier snippet in the runbook (Section 17) when that
 * photo is supplied.
 * Compressed 2026-09-27 (operator request): 70vh -> 35vh (50% reduction), and the
 * About section directly below is now painted the same red (see ".post-holder:not(.dark)"
 * below) so the hero and About read as one continuous red block, with Contact
 * left as its own (cream) section after it. */
#site-head, #site-head.withCenteredImage {
    background: #EE3823;
    height: 35vh;
    min-height: 340px;
}

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

#site-head-content .blog-title {
    color:         #ffffff;
    font-size:     3.4rem;
    margin-bottom: 1rem;
    font-weight:   700;
    text-shadow:   2px 2px 0 rgba(0, 0, 0, 0.25);
}
#site-head-content .blog-description {
    color:         #fff6e0;
    font-size:     1.6rem;
    line-height:   1.6;
    margin-bottom: 1.8rem;
}

/* HERO CTA BUTTON -- yellow, matches the "Ants Pants" wordmark in the logo */
.tella-hero-cta {
    display:          inline-block;
    background-color: #F8D201;
    color:            #1a1a1a !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:       1.2rem;
}
.tella-hero-cta:hover {
    background-color: #ffffff;
    color:            #EE3823 !important;
    transform:        translateY(-2px);
}

/* ABOUT section -- painted the same brand-red as the (now compressed) hero above it,
 * so the two read as one continuous section. About is the only "light" post-holder on
 * this page (Contact is the "dark"/cream one, via the theme's index-based alternation --
 * see layouts/_default/index.html), so ":not(.dark)" scopes this to About only without
 * touching Contact. Overriding --color-background/--color-text (not just background-color)
 * matters here: theme.scss's .post-after triangle and base.css's many --cover-text-color
 * reads (list bullets, headings) both inherit from these variables, so this keeps the
 * triangle transition into Contact correct and keeps the "About Us" heading + bullet list
 * readable (white) against the red, without touching Contact's own dark/cream styling. */
.post-holder:not(.dark) {
    --color-background:  #EE3823;
    --color-text:         #ffffff;
    --cover-text-color:   #ffffff;
    background-color:    #EE3823;
    color:               #ffffff;
}
.post-holder:not(.dark) hr { border-color: #ffffff; }

/* Tighten the gap between the hero and "About Us" directly below it. theme.scss's generic
 * ".post { padding-top: 4rem }" applies to every section equally, but on this page that left
 * a large dead-red gap between the hero's CTA button and the "About Us" heading -- since the
 * hero box above it already has its own vertical centering space, the two stacked together
 * made the heading feel disconnected/lost rather than part of the same red block. Scoped to
 * ".post.first" (the theme already tags index-0 -- About -- with this class), so Contact's
 * own top spacing (and the triangle transition after About) is untouched. */
.post.first { padding-top: 1rem; }

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

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

/* FOOTER */
footer a, .footer a             { color: #f0f0f0; }
footer a:hover, .footer a:hover { color: #F8D201; }

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

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

/* CONTACT -- simple stacked list, matches the Rawdon/Elite Finishes pattern */
.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:           #1a1a1a;
    font-weight:     700;
    font-size:       1.8rem;
    text-decoration: none;
    font-family:     var(--font-heading);
}
.tella-contact-simple a:hover { color: #EE3823; }
.tella-contact-simple i { color: #EE3823; font-size: 1.5rem; }
.tella-contact-name {
    /* Title case (as written in contact.md -- "Chris"/"Penny"), not uppercase. */
    margin-right:   0.2rem;
}

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

/* SOCIAL LINKS -- red icon on hover, matches brand */
.tella-social-item i { color: #EE3823; }

/* MOBILE NAV HEIGHT -- base.css hardcodes 70px for the mobile nav bar (not the
   --nav-height variable used above for desktop), so it needs its own bump here to fit
   the enlarged logo without overflowing the fixed bar on small screens. Loads after
   base.css, so these win the cascade on the same selectors/media query. Scaled the same
   ~1.3x as the desktop nav height and logo (70px -> 91px), which conveniently matches
   the logo's own new height -- same edge-to-edge relationship the original 70px/70px
   mobile design already had, just scaled up. */
@media (max-width: 768px) {
    .tella-nav          { height: 91px; }
    #site-head          { margin-top: 91px; }
    .post[id]           { scroll-margin-top: 101px; }
    .tella-mobile-menu  { max-height: calc(100vh - 91px); }
}