/*
Theme Name: Smart Heart Consultancy
Theme URI: https://smartheartconsulting.com/
Author: LBS Team
Description: Custom theme for Smart Heart Consultancy by Tanja Tatomirović.
Version: 0.1.0
Text Domain: smart-heart-consultancy
*/

:root {
    --shc-bg: #f7f3ec;
    --shc-bg-soft: #fbf9f5;
    --shc-white: #ffffff;
    --shc-text: #24211e;
    --shc-muted: #6e6963;
    --shc-gold: #b88a4a;
    --shc-gold-soft: #d9c5a4;
    --shc-line: #e6ded2;
    --shc-dark: #2c2925;

    --shc-serif: Georgia, "Times New Roman", serif;
    --shc-sans: Arial, Helvetica, sans-serif;

    --shc-max: 1320px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--shc-bg-soft);
    color: var(--shc-text);
    font-family: var(--shc-sans);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

body.admin-bar .shc-header {
    top: 32px;
}

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

a {
    color: inherit;
}

.shc-container {
    width: min(calc(100% - 64px), var(--shc-max));
    margin-inline: auto;
}

/* HEADER */

.shc-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 249, 245, .95);
    border-bottom: 1px solid rgba(184, 138, 74, .17);
    backdrop-filter: blur(18px);
}

.shc-header-inner {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.shc-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex: 0 0 auto;
}

.shc-mark {
    width: 43px;
    height: 43px;
    border: 1px solid var(--shc-gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--shc-gold);
    font-family: var(--shc-serif);
    font-size: 24px;
    font-style: italic;
}

.shc-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.shc-brand-name {
    font-family: var(--shc-serif);
    font-size: 17px;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.shc-brand-sub {
    margin-top: 5px;
    color: var(--shc-muted);
    font-size: 10px;
    letter-spacing: .05em;
}

.shc-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.shc-nav a {
    position: relative;
    padding: 34px 0 30px;
    color: var(--shc-text);
    font-size: 13px;
    text-decoration: none;
}

.shc-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 23px;
    height: 1px;
    background: var(--shc-gold);
    transition: right .25s ease;
}

.shc-nav a:hover::after,
.shc-nav a:focus-visible::after {
    right: 0;
}

/* HERO */

.shc-hero {
    min-height: calc(100vh - 90px);
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    background: var(--shc-bg);
    overflow: hidden;
}

.shc-hero-copy {
    padding: clamp(70px, 8vw, 136px) max(48px, calc((100vw - var(--shc-max)) / 2));
    padding-right: clamp(50px, 6vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shc-kicker {
    margin: 0 0 26px;
    color: var(--shc-gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.shc-hero h1 {
    max-width: 690px;
    margin: 0;
    font-family: var(--shc-serif);
    font-size: clamp(49px, 5vw, 86px);
    font-weight: 400;
    line-height: 1.01;
    letter-spacing: -.035em;
}

.shc-gold-rule {
    width: 70px;
    height: 1px;
    margin: 34px 0;
    background: var(--shc-gold);
}

.shc-hero-copy-text {
    max-width: 610px;
    margin: 0;
    color: #4e4944;
    font-size: 16px;
    line-height: 1.78;
}

.shc-hero-media {
    position: relative;
    min-height: 760px;
    background: #eee6dc;
}

.shc-hero-media::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 24%;
    z-index: 2;
    background: linear-gradient(
        90deg,
        var(--shc-bg) 0%,
        rgba(247, 243, 236, .72) 28%,
        rgba(247, 243, 236, 0) 100%
    );
    pointer-events: none;
}

.shc-hero-media img {
    width: 100%;
    height: 100%;
    min-height: 760px;
    object-fit: cover;
    object-position: 48% 40%;
}

/* SERVICE STRIP */

.shc-service-strip {
    background: #f1ece4;
    border-top: 1px solid var(--shc-line);
    border-bottom: 1px solid var(--shc-line);
}

.shc-service-strip-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.shc-service-strip-item {
    min-height: 145px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: 1px solid var(--shc-line);
}

.shc-service-strip-item:last-child {
    border-right: 0;
}

.shc-strip-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border: 1px solid var(--shc-gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--shc-gold);
    font-family: var(--shc-serif);
    font-size: 17px;
}

.shc-service-strip-item span:last-child {
    max-width: 150px;
    font-family: var(--shc-serif);
    font-size: 16px;
    line-height: 1.28;
}

/* GENERIC SECTION */

.shc-section {
    padding: clamp(84px, 9vw, 140px) 0;
}

.shc-section-heading {
    margin-bottom: 68px;
    text-align: center;
}

.shc-section-heading h2 {
    margin: 0;
    font-family: var(--shc-serif);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    letter-spacing: -.025em;
}

.shc-heading-rule {
    width: 62px;
    height: 1px;
    margin: 20px auto 0;
    background: var(--shc-gold);
}

/* SERVICES */

.shc-services {
    background: var(--shc-white);
}

.shc-service {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: clamp(38px, 5vw, 78px);
    padding: 62px 0;
    border-top: 1px solid var(--shc-line);
}

.shc-service:last-child {
    border-bottom: 1px solid var(--shc-line);
}

.shc-service-number {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.shc-service-number span {
    width: 90px;
    height: 90px;
    border: 1px solid var(--shc-gold-soft);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--shc-gold);
    font-family: var(--shc-serif);
    font-size: 28px;
}

.shc-service-content {
    max-width: 820px;
}

.shc-service h3 {
    margin: 0 0 17px;
    font-family: var(--shc-serif);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.15;
}

.shc-service-description {
    margin: 0 0 26px;
    color: #4e4944;
    font-size: 16px;
}

.shc-typical-label {
    margin: 0 0 8px;
    color: var(--shc-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shc-typical {
    margin: 0;
    color: var(--shc-muted);
}

.shc-service-with-media {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.shc-service-media {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    background: #171717;
}

.shc-service-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
}

.shc-service-with-media .shc-service-content {
    padding-right: clamp(0px, 4vw, 60px);
}

/* ABOUT */

.shc-about {
    padding: 0;
    background: var(--shc-bg);
}

.shc-about-grid {
    display: grid;
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
    min-height: 900px;
}

.shc-about-media {
    min-height: 900px;
    background: #e7e6e3;
}

.shc-about-media img {
    width: 100%;
    height: 100%;
    min-height: 900px;
    object-fit: cover;
    object-position: 50% 32%;
}

.shc-about-copy {
    padding: clamp(75px, 8vw, 130px) clamp(50px, 7vw, 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shc-about-copy h2 {
    margin: 0;
    font-family: var(--shc-serif);
    font-size: clamp(43px, 4.5vw, 65px);
    font-weight: 400;
}

.shc-about-copy .shc-gold-rule {
    margin: 24px 0 34px;
}

.shc-about-copy p {
    max-width: 760px;
    margin: 0 0 23px;
    color: #4c4843;
}

/* CONTACT */

.shc-contact {
    position: relative;
    padding: clamp(110px, 13vw, 190px) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 35%, rgba(184,138,74,.12), transparent 28%),
        linear-gradient(125deg, #f7f3ec, #fff 65%);
}

.shc-contact::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -180px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(184,138,74,.22);
    border-radius: 50%;
}

.shc-contact-inner {
    position: relative;
    z-index: 2;
    max-width: 790px;
}

.shc-contact h2 {
    margin: 0;
    font-family: var(--shc-serif);
    font-size: clamp(50px, 5vw, 72px);
    font-weight: 400;
}

.shc-contact-copy {
    margin: 32px 0 4px;
    color: var(--shc-muted);
    font-size: 18px;
}

.shc-talk {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--shc-serif);
    font-size: clamp(38px, 4vw, 57px);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.shc-talk:hover {
    border-bottom-color: var(--shc-gold);
}

.shc-linkedin {
    display: inline-flex;
    margin-top: 40px;
    color: var(--shc-text);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--shc-gold-soft);
}

/* FOOTER */

.shc-footer {
    padding: 36px 0;
    border-top: 1px solid var(--shc-line);
    background: var(--shc-bg-soft);
}

.shc-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.shc-footer-brand {
    font-family: var(--shc-serif);
    font-size: 16px;
}

.shc-footer-brand small {
    display: block;
    margin-top: 4px;
    color: var(--shc-muted);
    font-family: var(--shc-sans);
    font-size: 10px;
}

/* WORDPRESS FALLBACK */

.shc-content {
    width: min(calc(100% - 64px), 900px);
    margin: 90px auto;
}

.shc-content h1,
.shc-content h2,
.shc-content h3 {
    font-family: var(--shc-serif);
    font-weight: 400;
}

/* RESPONSIVE */

@media (max-width: 1080px) {

    .shc-container {
        width: min(calc(100% - 42px), var(--shc-max));
    }

    .shc-header-inner {
        min-height: 78px;
    }

    .shc-nav {
        gap: 18px;
    }

    .shc-nav a {
        padding: 28px 0 25px;
        font-size: 11px;
    }

    .shc-hero {
        grid-template-columns: 1fr 1fr;
    }

    .shc-hero-copy {
        padding-left: 42px;
        padding-right: 40px;
    }

    .shc-hero h1 {
        font-size: clamp(45px, 6vw, 65px);
    }

    .shc-service-strip-inner {
        grid-template-columns: repeat(5, 1fr);
    }

    .shc-about-grid {
        grid-template-columns: .9fr 1.1fr;
    }
}

@media (max-width: 820px) {

    body.admin-bar .shc-header {
        top: 46px;
    }

    .shc-header {
        position: relative;
    }

    .shc-header-inner {
        padding: 18px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .shc-nav {
        width: 100%;
        overflow-x: auto;
        gap: 24px;
        white-space: nowrap;
    }

    .shc-nav a {
        padding: 8px 0 12px;
    }

    .shc-nav a::after {
        bottom: 7px;
    }

    .shc-hero {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .shc-hero-copy {
        padding: 75px 28px 65px;
    }

    .shc-hero-media,
    .shc-hero-media img {
        min-height: 620px;
    }

    .shc-hero-media::before {
        inset: 0 0 auto 0;
        width: 100%;
        height: 18%;
        background: linear-gradient(
            180deg,
            var(--shc-bg) 0%,
            rgba(247,243,236,0) 100%
        );
    }

    .shc-service-strip-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .shc-service-strip-item {
        border-bottom: 1px solid var(--shc-line);
    }

    .shc-service-strip-item:nth-child(2n) {
        border-right: 0;
    }

    .shc-service-strip-item:last-child {
        grid-column: 1 / -1;
    }

    .shc-service {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .shc-service-number {
        justify-content: flex-start;
    }

    .shc-service-number span {
        width: 62px;
        height: 62px;
        font-size: 20px;
    }

    .shc-service-with-media {
        grid-template-columns: 1fr;
    }

    .shc-service-media {
        min-height: 500px;
    }

    .shc-about-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .shc-about-media,
    .shc-about-media img {
        min-height: 700px;
    }

    .shc-about-copy {
        padding: 75px 28px;
    }

    .shc-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {

    .shc-container {
        width: min(calc(100% - 30px), var(--shc-max));
    }

    .shc-brand-name {
        font-size: 14px;
    }

    .shc-mark {
        width: 37px;
        height: 37px;
    }

    .shc-hero-copy {
        padding-left: 20px;
        padding-right: 20px;
    }

    .shc-hero h1 {
        font-size: 46px;
    }

    .shc-hero-media,
    .shc-hero-media img {
        min-height: 530px;
    }

    .shc-service-strip-inner {
        grid-template-columns: 1fr;
    }

    .shc-service-strip-item,
    .shc-service-strip-item:nth-child(2n) {
        border-right: 0;
    }

    .shc-service-strip-item:last-child {
        grid-column: auto;
    }

    .shc-section {
        padding: 78px 0;
    }

    .shc-section-heading {
        margin-bottom: 40px;
    }

    .shc-service {
        padding: 44px 0;
    }

    .shc-service-media {
        min-height: 400px;
    }

    .shc-about-media,
    .shc-about-media img {
        min-height: 570px;
    }

    .shc-contact {
        padding: 100px 0;
    }
}

/* Smart Heart real logo */
.shc-brand {
    display: block;
    line-height: 0;
}

.shc-logo {
    display: block;
    width: auto;
    height: 62px;
    max-width: 360px;
    object-fit: contain;
}

@media (max-width: 820px) {
    .shc-logo {
        height: 54px;
        max-width: 310px;
    }
}

@media (max-width: 560px) {
    .shc-logo {
        height: 46px;
        max-width: 265px;
    }
}

/* Contact social links */
.shc-instagram {
    margin-top: 14px;
}

/* LBS Team footer credit */
.shc-footer-credit {
    color: var(--shc-muted);
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
}

.shc-footer-credit span {
    margin: 0 6px;
    color: var(--shc-gold-soft);
}

.shc-footer-credit a {
    color: var(--shc-text);
    text-decoration: none;
    border-bottom: 1px solid var(--shc-gold-soft);
    transition: border-color .2s ease;
}

.shc-footer-credit a:hover,
.shc-footer-credit a:focus-visible {
    border-bottom-color: var(--shc-gold);
}

@media (max-width: 820px) {
    .shc-footer-credit {
        text-align: left;
    }
}