/* ============================================================
   site.css — site-wide design system ("Deep Teal & Sand")
   Loaded on every page via layouts/partials/head/extensions.html,
   AFTER all theme CSS: rules here win cascade ties by source order.
   ============================================================ */

/* ----------------------------------------------
   1. Neutralize the theme's dark-era hardcodes
   ---------------------------------------------- */

/* The theme casts cool teal shadows (rgba(15,80,100,.16)) everywhere.
   Replace with a soft warm shadow wherever the theme applies one. */
#hero .image img,
.img-thumbnail,
#education .card,
#achievements .card,
footer .card {
    box-shadow: 0 4px 24px rgba(35, 48, 46, 0.08) !important;
}

.showHeaderOnTop {
    box-shadow: 0 2px 16px rgba(35, 48, 46, 0.07) !important;
}

::-webkit-scrollbar-thumb {
    background: #CDC5B4 !important;
}

/* ----------------------------------------------
   2. Buttons — two-tier system
   ---------------------------------------------- */

/* Primary (solid teal): hero CTA, contact submit, .btn-primary-solid */
#hero a.btn:not(.social-icon),
section#contact .btn,
.btn.btn-primary-solid,
/* content-area buttons: outrank the theme's .page-content link colors */
#single .page-content a.btn.btn-primary-solid,
.page-content a.btn.btn-primary-solid {
    background-color: var(--primary-color) !important;
    color: var(--background-color) !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: 0.5rem !important;
    padding: 0.7rem 1.8rem !important;
    font-weight: 600;
    font-family: var(--body-font);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#hero a.btn:not(.social-icon):hover,
section#contact .btn:hover,
.btn.btn-primary-solid:hover,
#single .page-content a.btn.btn-primary-solid:hover,
.page-content a.btn.btn-primary-solid:hover {
    background-color: var(--link-hover-color) !important;
    border-color: var(--link-hover-color) !important;
    color: var(--background-color) !important;
}

/* Kill the theme's animated ::after underline on buttons */
#hero a.btn::after,
.btn-primary-solid::after,
.btn-quiet::after {
    display: none !important;
}

/* Secondary (quiet outline): charcoal, per the palette spec */
.btn-quiet {
    display: inline-block;
    background: transparent;
    color: var(--text-color) !important;
    border: 1.5px solid var(--text-color);
    border-radius: 0.5rem;
    padding: 0.65rem 1.7rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-quiet:hover {
    background-color: var(--secondary-background-color);
    color: var(--text-color) !important;
}

/* ----------------------------------------------
   3. Navbar
   ---------------------------------------------- */

#profileHeader nav.navbar {
    background-color: var(--background-color);
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 0.75rem;
}

.navbar-brand {
    font-family: var(--heading-font) !important;
    font-weight: 600 !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.01em;
    color: var(--primary-color) !important;
}

.navbar .nav-link:hover {
    color: var(--link-hover-color) !important;
}

/* The last nav item ("Get in touch") renders as the solid primary CTA.
   Mechanism: pure CSS on the final menu entry — keep it last in
   hugo.yaml Menus.main or the button moves to whatever item is last. */
.navbar-nav .nav-item:last-child .nav-link {
    background-color: var(--primary-color);
    color: var(--background-color) !important;
    border-radius: 0.5rem;
    padding: 0.5rem 1.2rem !important;
    margin-left: 0.75rem;
    font-weight: 600;
}

.navbar-nav .nav-item:last-child .nav-link:hover {
    background-color: var(--link-hover-color);
    color: var(--background-color) !important;
}

@media (max-width: 991px) {
    .navbar-nav .nav-item:last-child .nav-link {
        display: inline-block;
        margin: 0.5rem 0 0.25rem;
    }
}

/* ----------------------------------------------
   4. Hero
   ---------------------------------------------- */

#hero {
    /* The theme forces min-height: 100vh, which turns a multi-section
       homepage into an empty first screen. Let content size the hero. */
    min-height: auto !important;
    padding-top: 4.5rem !important;
    padding-bottom: 4rem !important;
}

#hero h1 {
    font-size: clamp(38px, 6vw, 64px) !important;
    line-height: 1.15;
}

#hero h2 {
    opacity: 1 !important;
    color: var(--text-secondary-color) !important;
    font-size: clamp(20px, 2.5vw, 26px) !important;
    margin-top: 0.5rem;
}

/* Portrait frame: designed for a 4:5 professional portrait.
   The current photo is a stand-in — swap via CMS, no code change. */
#hero .image img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border: 6px solid var(--secondary-color) !important;
    border-radius: 1rem !important;
    background-color: var(--secondary-color);
    max-width: min(380px, 100%);
}

/* ----------------------------------------------
   5. Homepage sections (consumed by partials/sections/home/*)
   ---------------------------------------------- */

.home-section {
    padding-block: 4.5rem;
}

.home-section--sand {
    background-color: var(--secondary-background-color);
}

.home-section .section-heading {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 2.5rem;
    font-size: clamp(26px, 3.2vw, 34px);
}

/* Service cards */
.service-card {
    background-color: var(--secondary-color);
    border-radius: 0.75rem;
    padding: 2rem 1.8rem;
    height: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
    box-shadow: 0 6px 28px rgba(35, 48, 46, 0.1);
    transform: translateY(-2px);
}

.service-card h3 {
    font-size: 1.25rem;
    color: var(--primary-color) !important;
    margin-bottom: 0.75rem;
}

.service-card p {
    color: var(--text-color);
    margin-bottom: 1rem;
    line-height: 1.65;
}

/* Warm contextual links (clay) — the palette's human accent */
.service-card a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.service-card a:hover {
    color: #843D29; /* clay dark variant, per palette spec */
    text-decoration: underline;
}

/* Process teaser steps */
.steps-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.step-item {
    flex: 1 1 240px;
    max-width: 320px;
    text-align: center;
}

.step-marker {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--background-color);
    border: 3px solid var(--accent-color);
    color: var(--accent-color);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.step-item h3 {
    font-size: 1.15rem;
    color: var(--text-color) !important;
    margin-bottom: 0.5rem;
}

.step-item p {
    color: var(--text-secondary-color);
    line-height: 1.6;
}

/* Credentials strip */
.credentials-strip {
    border-top: 1px solid var(--secondary-color);
    border-bottom: 1px solid var(--secondary-color);
    padding-block: 2rem;
}

.credentials-strip ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.credentials-strip li {
    color: var(--text-secondary-color);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Closing CTA band */
.cta-band {
    background-color: var(--primary-color);
    padding-block: 4rem;
    text-align: center;
}

.cta-band h2 {
    color: var(--background-color) !important;
    font-size: clamp(26px, 3.2vw, 34px);
    margin-bottom: 0.75rem;
}

.cta-band p {
    color: var(--secondary-color);
    max-width: 42rem;
    margin: 0 auto 1.75rem;
    font-size: 1.1rem;
}

.cta-band .btn-invert {
    display: inline-block;
    background: var(--background-color);
    color: var(--primary-color) !important;
    border: 2px solid var(--background-color);
    border-radius: 0.5rem;
    padding: 0.7rem 2rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cta-band .btn-invert:hover {
    background: transparent;
    color: var(--background-color) !important;
}

/* ----------------------------------------------
   6. Footer
   ---------------------------------------------- */

/* Dark petrol footer band.
   .light footer needed: theme.css `.light > *` repaints direct children
   of body with !important and would otherwise win the tie. */
footer,
.light footer {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    /* no top margin: it would show as a paper stripe between the
       homepage CTA band and this dark footer band */
    margin-top: 0;
}

.footer-social a {
    /* !important: the theme styles footer links with !important */
    color: var(--secondary-color) !important;
    margin: 0 0.6rem;
    display: inline-block;
    transition: color 0.2s ease;
}

.footer-social a:hover {
    color: var(--background-color) !important;
}

.footer-social svg {
    width: 22px;
    height: 22px;
}

.footer-wordmark {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--background-color) !important;
}

.footer-meta {
    color: var(--secondary-color) !important;
    font-size: 0.9rem;
}

.footer-meta a {
    color: var(--secondary-color) !important;
    text-decoration: underline;
}

.footer-meta a:hover {
    color: var(--background-color) !important;
}

/* ----------------------------------------------
   6b. Framework section (part list on /framework/)
   ---------------------------------------------- */

.framework-parts {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.framework-part {
    display: block;
    background-color: var(--secondary-color);
    border-radius: 0.75rem;
    padding: 1.6rem 1.8rem;
    text-decoration: none !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.framework-part:hover {
    box-shadow: 0 6px 28px rgba(41, 36, 33, 0.1);
    transform: translateY(-2px);
}

.framework-part .part-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.4rem;
}

.framework-part h2 {
    font-size: 1.3rem;
    color: var(--primary-color) !important;
    margin: 0 0 0.5rem;
}

.framework-part p {
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
}

/* ----------------------------------------------
   7. Links & focus states
   ---------------------------------------------- */

#single .page-content a:hover,
.text-center a:hover {
    color: var(--link-hover-color);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ----------------------------------------------
   8. Contact form polish
   ---------------------------------------------- */

#contact .form-control {
    background-color: #FFFFFF !important;
    color: var(--text-color) !important;
    border: 1px solid var(--secondary-color) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem;
}

#contact .form-control::placeholder {
    color: var(--text-secondary-color);
    opacity: 0.8;
}

#contact .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(31, 95, 91, 0.12) !important;
}

.contact-expect {
    background-color: var(--secondary-color);
    border-radius: 0.75rem;
    padding: 1.8rem 1.8rem 1.5rem;
}

.contact-expect h2 {
    font-size: 1.2rem;
    color: var(--primary-color) !important;
    margin-bottom: 1rem;
}

.contact-expect ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-expect li {
    padding-left: 1.4rem;
    position: relative;
    margin-bottom: 0.7rem;
    line-height: 1.55;
}

.contact-expect li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent-color);
}

.contact-response-note {
    color: var(--text-secondary-color);
    font-size: 0.95rem;
    text-align: center;
    margin-top: 1rem;
}

/* ----------------------------------------------
   9. Responsive
   ---------------------------------------------- */

@media (max-width: 768px) {
    .home-section {
        padding-block: 3rem;
    }

    #hero .image img {
        max-width: min(300px, 100%);
    }

    .credentials-strip ul {
        gap: 0.8rem 1.5rem;
    }
}