/* core.css
   Palette, base resets, layout, navigation, and shared component classes
   used across the whole site (header, footer, hero, cards, buttons, etc).
   Load order: bootstrap -> core.css -> site.css -> MediaQueries.css
*/

:root
{
   --bg: #F7F4EF;            /* Plaster White - page background */
   --surface: #FFFFFF;       /* Cards / panels */
   --text: #22282B;          /* Charcoal - body text */
   --text-secondary: #4A5457;/* Secondary text */
   --brand: #1B4B5A;         /* Deep Teal - nav / links */
   --brand-dark: #123540;    /* Teal Dark - hover / active / dark bands */
   --cta-bg: #9C3428;        /* Deep Coral-Red - CTA button background */
   --cta-hover: #7E2A20;     /* CTA hover/active */
   --accent: #CC5A42;        /* Coral - large text / icons only */
   --border: #E4E0D6;        /* Border / divider */
}

/* Base / reset */

html
{
   height: 100% !important;
}

body
{
   height: 100% !important;
   background: var(--bg);
   color: var(--text);
}

p
{
   font-size: large;
}

img
{
   max-width: 100%;
   height: auto;
}

/*align list item vertical middle*/
li {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-top: 3px;
}

ul.nolist {
   list-style-type: none;
}

/* Focus visibility - "double ring": a white ring + a dark teal ring together.
   Verified: on light backgrounds the dark ring gives 12-13:1 contrast; on dark
   backgrounds (nav, hero, CTA buttons) the white ring gives 7-13:1 contrast.
   At least one ring always clears the WCAG 3:1 minimum, on every colour in
   the palette. !important is required here because Bootstrap ships its own
   higher-specificity :focus-visible rules (e.g. .nav-link:focus-visible,
   .btn:focus-visible) that would otherwise silently override this. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible
{
   outline: none !important;
   box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--brand-dark) !important;
   border-radius: 2px;
}

/* Page layout - flex sticky footer */

.page-container
{
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0 auto;
   padding: 0;
}

.content-wrap
{
   flex: 1 0 auto;
   margin: 0;
   padding: 0;
}

/* Header */

.site-header
{
   background: var(--surface);
   border-bottom: 1px solid var(--border);
}

.header-row
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   padding: 14px 24px;
}

.logo
{
   display: flex;
   align-items: center;
   gap: 12px;
}

.navbar-logo
{
   height: 52px;
   width: auto;
}

.logo-text
{
   font-weight: 700;
   font-size: 1.1rem;
   color: var(--brand);
   line-height: 1.2;
}

.logo-text span
{
   display: block;
   font-weight: 400;
   font-size: .75rem;
   color: var(--text-secondary);
}

.header-cta
{
   background: var(--cta-bg);
   color: #fff !important;
   padding: 10px 20px;
   border-radius: 4px;
   text-decoration: none !important;
   font-weight: 700;
   font-size: .95rem;
}

.header-cta:hover
{
   background: var(--cta-hover);
}

/* Navigation */

nav.main-nav
{
   background: var(--brand);
   min-height: 0;
   padding: 0;
}

nav.main-nav .navbar-nav
{
   justify-content: center;
   width: 100%;
}

/* overwrite nav link fonts */

.nav-link
{
   color: #fff !important;
   font-weight: 600;
   font-size: 1rem !important;
   padding: 14px 18px !important;
   border-bottom: 3px solid transparent;
}

.nav-link:hover,
.nav-link.active
{
   text-decoration: none !important;
   border-bottom: 3px solid var(--accent);
   background: var(--brand-dark);
}

.navbar-toggler
{
   margin: 10px 16px;
}

/* (trowel-divider removed per feedback - static line under nav looked disconnected) */

/* Hero (home page) */

.hero
{
   position: relative;
   min-height: 420px;
   display: flex;
   align-items: center;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.hero::after
{
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(18, 53, 64, .88) 0%, rgba(27, 75, 90, .72) 55%, rgba(27, 75, 90, .35) 100%);
}

.hero-content
{
   position: relative;
   z-index: 1;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
   padding: 56px 24px;
}

.hero-content h1
{
   color: #fff;
   max-width: 620px;
}

.hero-content p
{
   color: #EDEAE2;
   max-width: 560px;
}

.btn-cta
{
   display: inline-block;
   background: var(--cta-bg);
   color: #fff !important;
   padding: 14px 28px;
   border-radius: 4px;
   text-decoration: none !important;
   font-weight: 700;
   font-size: 1.05rem;
   margin-top: 8px;
   border: none;
}

.btn-cta:hover
{
   background: var(--cta-hover);
}

/* Page header band (inner pages) */

.page-header
{
   background: var(--brand-dark);
   padding: 40px 24px;
}

.page-header h1
{
   color: #fff;
   margin-bottom: .2em;
}

.page-header p
{
   color: #D8DCDD;
   margin: 0;
   font-size: 1.05rem;
}

section.content
{
   padding: 48px 24px;
}

/* Cards */

.card
{
   border-color: var(--border);
}

.card-img-top
{
   width: 100%;
   aspect-ratio: 1 / 1;
   object-fit: cover;
   border-radius: 8px 8px 0 0;
}

.value-item
{
   text-align: center;
   padding: 0 8px;
}

.value-badge
{
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--brand);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 1.1rem;
   margin: 0 auto 12px auto;
}

.value-item h4
{
   color: var(--brand);
   font-size: 1.05rem;
   margin-bottom: 6px;
}

.value-item p
{
   color: var(--text-secondary);
   font-size: .92rem;
   margin: 0;
}

/* Checklists (replaces green font-awesome check icons) */

.check-list
{
   list-style: none;
   margin: 16px 0;
   padding: 0;
}

.check-list li
{
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 0;
   color: var(--text);
}

.check-list li::before
{
   content: '\2713';
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   background: var(--brand);
   color: #fff;
   border-radius: 50%;
   font-size: .8rem;
   flex: none;
}

/* Testimonials */

.testimonial
{
   text-align: center;
}

.testimonial img
{
   width: 80px;
   height: 80px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 10px;
}

.testimonial h5
{
   margin: 0 0 4px 0;
   font-weight: 700;
}

.stars
{
   color: var(--accent);
   font-size: 1.1rem;
   margin: 4px 0;
}

.testimonial p
{
   color: var(--text-secondary);
   font-size: .92rem;
   font-style: italic;
}

/* Contact */

.contact-card
{
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 28px;
   max-width: 440px;
}

.contact-card .phone
{
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 16px;
   margin-top: 16px;
   font-size: 1.2rem;
   font-weight: 700;
   color: var(--brand);
}

.contact-card .phone a
{
   color: var(--brand);
   text-decoration: none;
}

/* Footer */

footer.site-footer
{
   flex-shrink: 0;
   background: var(--brand-dark);
   color: #D8DCDD;
   padding: 36px 24px 20px;
}

footer.site-footer .footer-grid
{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   max-width: 1200px;
   margin: 0 auto;
}

footer.site-footer h5
{
   color: #fff;
   margin: 0 0 8px 0;
}

footer.site-footer p
{
   color: #D8DCDD;
   font-size: 1rem;
}

footer.site-footer a
{
   color: #D8DCDD;
   text-decoration: none;
}

footer.site-footer a:hover
{
   color: #fff;
   text-decoration: underline;
}

footer.site-footer .footer-bottom
{
   border-top: 1px solid rgba(255, 255, 255, .15);
   margin-top: 20px;
   padding-top: 14px;
   font-size: .85rem;
   color: #A8AEB0;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}