/* ============================================================
   Rosemont Consulting — style.css
   ============================================================ */

/* 1. Design Tokens */
:root {
    --rosemont-dark-green: #1f322c;
    --rosemont-ivory: #f9f9f1;
    --rosemont-brown: #6d230f;
    --rosemont-orange: #9e4c1e;
    --rosemont-gradient: linear-gradient(45deg, #6d230f 0%, #f0a757 100%);

    --font-kalnia: "Kalnia", serif;
    --font-lora: "Lora", serif;

    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  3rem;

    --font-weight-light:   300;
    --font-weight-regular: 400;
    --font-weight-normal:  500;
}

/* 2. Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

/* 3. Root container */
.page-root {
    color: var(--rosemont-ivory);
    font-size: var(--font-size-xl);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-lora);
    font-weight: var(--font-weight-light);
    padding: 16px;
    justify-content: center;
    background-color: var(--rosemont-dark-green);
}
@media (max-width: 900px) and (min-width: 500px) {
    .page-root { font-size: var(--font-size-base); }
}
@media (max-width: 500px) {
    .page-root { font-size: var(--font-size-sm); padding: 8px; }
}

/* 4. Header */
.site-header {
    gap: 32px;
    top: 0;
    width: 100%;
    display: grid;
    z-index: 100;
    position: sticky;
    max-width: 1440px;
    padding: 32px 16px;
    grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 500px) {
    .site-header { padding: 16px 8px; }
}

/* 5. Nav pill */
.nav-pill {
    color: var(--rosemont-dark-green);
    align-self: start;
    display: flex;
    align-items: center;
    grid-column: 1 / span 8;
    padding: 16px 32px;
    border-radius: 48px;
    justify-content: space-between;
    background-color: var(--rosemont-ivory);
}
@media (max-width: 500px) {
    .nav-pill { padding: 8px 24px; }
}

/* Logo — full */
.logo-full {
    width: auto;
    height: 40px;
}
@media (max-width: 500px) {
    .logo-full { display: none; }
}

/* Logo — small */
.logo-small {
    width: auto;
    height: 40px;
    display: none;
}
@media (max-width: 500px) {
    .logo-small { height: 32px; display: inline-block; }
}

/* Nav links */
.nav-links {
    display: flex;
    gap: 16px;
    list-style: none;
}

.nav-links li {
    display: flex;
    font-weight: var(--font-weight-normal);
    justify-content: center;
}

.nav-links a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

/* 6. Grid lines overlay */
.grid-lines {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1472px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 500px) {
    .grid-lines { padding: 0 8px; }
}

.grid-line {
    width: 0;
    height: 100%;
    opacity: 0.4;
    border-left: 1px solid var(--rosemont-ivory);
}

/* 7. Main content container */
.site-main {
    display: flex;
    flex-direction: column;
    gap: 128px;
    flex: 1;
    width: 100%;
    max-width: 1440px;
    position: relative;
    z-index: 1;
}
@media (max-width: 900px) and (min-width: 500px) {
    .site-main { gap: 80px; }
}
@media (max-width: 500px) {
    .site-main { gap: 64px; }
}

/* 8. Section grid */
.section-grid {
    gap: 32px;
    display: grid;
    padding: 0 16px;
    grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 500px) {
    .section-grid { padding: 0 8px; }
}

/* 9. Card section wrapper */
.section-card-wrap {
    color: var(--rosemont-dark-green);
    padding: 16px;
}
@media (max-width: 500px) {
    .section-card-wrap { padding: 8px; }
}

/* 10. Card */
.card {
    gap: 32px;
    display: grid;
    padding: 16px;
    border-radius: 32px;
    background-color: var(--rosemont-ivory);
    grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 500px) {
    .card { gap: 24px; padding: 8px; border-radius: 24px; }
}

/* 11. Card text block */
.card-text-left {
    gap: 24px;
    display: flex;
    flex-direction: column;
    grid-column: 1 / span 5;
    padding: 16px;
}
@media (max-width: 500px) {
    .card-text-left { gap: 8px; grid-column: 1 / span 8; padding: 8px; }
}

/* 12. Card visual right */
.card-visual-right {
    background: var(--rosemont-gradient);
    overflow: hidden;
    display: flex;
    align-items: center;
    grid-column: 6 / span 3;
    border-radius: 16px;
    justify-content: center;
    position: relative;
}
.card-visual-right img {
    width: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 500px) {
    .card-visual-right { grid-row: 1; grid-column: 1 / span 8; aspect-ratio: 1/1; }
}

/* 13. Headings */
.heading-xl,
.heading-md,
.heading-center,
.heading-challenge {
    font-family: var(--font-kalnia);
    font-weight: var(--font-weight-regular);
    overflow-wrap: break-word;
    display: block;
}

.heading-xl       { font-size: var(--font-size-5xl); }
.heading-md       { font-size: var(--font-size-4xl); }
.heading-center   { font-size: var(--font-size-5xl); text-align: center; grid-column: 2 / span 6; }
.heading-challenge { font-size: var(--font-size-5xl); text-align: center; }

@media (max-width: 900px) and (min-width: 500px) {
    .heading-xl, .heading-center, .heading-challenge { font-size: var(--font-size-3xl); }
    .heading-md { font-size: var(--font-size-2xl); }
}
@media (max-width: 500px) {
    .heading-xl, .heading-center, .heading-challenge { font-size: var(--font-size-3xl); }
    .heading-md { font-size: var(--font-size-2xl); }
    .heading-center { grid-column: 1 / span 8; }
}

/* 14. Body paragraph */
.body-text {
    display: block;
    font-weight: var(--font-weight-light);
    overflow-wrap: break-word;
}

/* 15. CTA button */
.btn-contact {
    color: var(--rosemont-ivory);
    width: fit-content;
    cursor: pointer;
    font-size: var(--font-size-3xl);
    padding: 8px 16px;
    border: none;
    border-radius: 32px;
    background-color: var(--rosemont-orange);
    font-family: var(--font-lora);
    font-weight: var(--font-weight-light);
}
.btn-contact:hover { background-color: var(--rosemont-brown); }
@media (max-width: 500px) {
    .btn-contact { font-size: var(--font-size-lg); }
}

/* 16. Button wrapper */
.btn-wrap {
    display: flex;
    align-items: center;
    padding: 16px 0;
}

/* 17. Icon rows */
.icon-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.icon-row {
    display: flex;
    gap: 32px;
    align-items: center;
}

.icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.icon-text {
    flex: 1;
    font-weight: var(--font-weight-light);
}

/* 18. Challenge inner wrapper */
.challenge-inner {
    grid-column: 2 / span 6;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 500px) {
    .challenge-inner { grid-column: 1 / span 8; }
}

/* 19. Service image containers — shared base */
.service-img-left,
.service-img-right,
.service-img-left-tall {
    background: var(--rosemont-gradient);
    display: flex;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    justify-content: center;
    position: relative;
}

/* Service image — overflows container, centered */
.service-img-left img,
.service-img-right img {
    width: calc(100% + 32px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Service image col positions */
.service-img-left      { grid-column: 2 / span 2; }
.service-img-right     { grid-column: 6 / span 2; }
.service-img-left-tall { grid-column: 2 / span 2; align-items: flex-end; }

@media (max-width: 500px) {
    .service-img-left      { grid-column: 2 / span 6; max-height: 280px; }
    .service-img-right     { grid-row: 1; grid-column: 2 / span 6; max-height: 280px; }
    .service-img-left-tall { grid-column: 2 / span 6; max-height: 280px; }
}

/* Wealth management image — bottom-anchored, overflows slightly */
.service-img-left-tall img {
    width: 80%;
    display: block;
    margin-bottom: -32px;
    flex-shrink: 0;
}

/* 20. Service text columns */
.service-text-right,
.service-text-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-text-right { grid-column: 4 / span 4; }
.service-text-left  { grid-column: 2 / span 4; }

@media (max-width: 500px) {
    .service-text-right,
    .service-text-left { grid-column: 2 / span 6; }
}

/* 21. About section */
.about-section {
    gap: 32px;
    display: grid;
    padding: 16px;
    grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 500px) {
    .about-section { padding: 8px; }
}

.about-photo {
    display: flex;
    overflow: hidden;
    align-items: center;
    grid-column: 6 / span 2;
    border-radius: 16px;
    justify-content: flex-start;
}
@media (max-width: 500px) {
    .about-photo { grid-row: 2; grid-column: 3 / span 4; }
}
.about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Scroll offset for sticky nav — applied to every anchor target.
   Desktop header = 32px top padding + 40px pill + 32px bottom padding = 104px
   A little extra breathing room lands the heading comfortably below the nav. */
:target,
[id="services"],
[id="contact"],
[id="about"] {
    scroll-margin-top: 120px;
}
@media (max-width: 500px) {
    :target,
    [id="services"],
    [id="contact"],
    [id="about"] {
        scroll-margin-top: 80px;
    }
}

/* Signature canvas SVG */
#canvas {
    width: 100%;
    height: auto;
    display: block;
}

/* 22. Footer */
.site-footer {
    gap: 32px;
    top: 0;
    width: 100%;
    display: grid;
    z-index: 1;
    position: sticky;
    font-size: inherit;
    max-width: 1440px;
    padding: 32px 16px;
    grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 500px) {
    .site-footer { font-size: var(--font-size-sm); padding: 16px 8px; }
}

.footer-pill {
    display: flex;
    gap: 16px;
    align-self: start;
    align-items: center;
    grid-column: 1 / span 8;
    padding: 16px 32px;
    border: 1px solid var(--rosemont-ivory);
    border-radius: 48px;
    justify-content: center;
}
@media (max-width: 500px) {
    .footer-pill { padding: 8px 24px; }
}

.footer-logo {
    color: var(--rosemont-ivory);
    width: auto;
    height: 40px;
}
@media (max-width: 500px) {
    .footer-logo { display: none; }
}

.footer-copy {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-regular);
    overflow-wrap: break-word;
    justify-content: center;
}

.linkedin-btn {
    cursor: pointer;
    border-radius: 8px;
    background-color: var(--rosemont-ivory);
    display: flex;
}

.linkedin-icon {
    color: var(--rosemont-dark-green);
    width: 32px;
    height: 32px;
}

/* 23. Contact popover */
.contact-popover {
    width: 100%;
    height: 100%;
    max-width: 1472px;
    max-height: 1024px;
    padding: 32px;
    border: none;
    /* Transparent so the rounded inner container is the visual boundary */
    background: transparent;
}
.contact-popover:popover-open {
    top: auto;
    left: 50%;
    position: fixed;
    translate: -50%;
}
.contact-popover::backdrop {
    background-color: #1f322c66;
}
@media (max-width: 500px) {
    .contact-popover { padding: 16px; }
}

/* Inner container: white bg, rounded corners, clips the upward-bleeding iframe */
.contact-popover-inner {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    border-radius: 16px;
    position: relative;
    background: white;
}

/* Close button — sits in the top-right corner above the iframe */
.popover-close {
    top: 16px;
    right: 16px;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    z-index: 1;
    position: absolute;
    border-radius: 8px;
    background-color: var(--rosemont-ivory);
    border: none;
}

/* Close icon */
.popover-close-icon {
    color: var(--rosemont-dark-green);
    width: 32px;
    height: 32px;
    position: relative;
    display: block;
}

/* Notion iframe — bleeds 44px upward to hide Notion's own toolbar */
.contact-iframe {
    position: relative;
    top: -44px;
    height: calc(100% + 44px);
    width: 100%;
    display: block;
    border: none;
}

/* 24. Contact card image column */
.contact-img-col {
    background: var(--rosemont-gradient);
    display: flex;
    align-items: flex-end;
    grid-column: 6 / span 3;
    border-radius: 16px;
    justify-content: center;
    overflow: hidden;
}
.contact-img-col img {
    height: 80%;
    max-height: 328px;
    display: block;
}
@media (max-width: 500px) {
    .contact-img-col { grid-row: 1; grid-column: 1 / span 8; }
}