/*
Theme Name: Sonik
Theme URI: https://smartprovide.digital/
Author: SmartProvide Digital
Author URI: https://smartprovide.digital/
Description: Custom theme for Sonik / SONIKFRANZ home renovation. Built with ACF Pro flexible content and Contact Form 7.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sonik
*/

/* All bundled styles live in /assets/css/style.min.css (enqueued in functions.php).
   Below: article / page (Gutenberg) typography for single posts and template-less
   pages. Uses the design tokens (--primary, --black, --border, fonts) from the bundle. */

/* ---- Form title ---- */
.form-title {
    padding-bottom: 20px;
}

/* ---- Text-only service details ---- */
.content-img--text-only .content-img__row {
    display: block;
    max-width: 52rem;
    margin-right: auto;
    margin-left: auto;
}

.content-img--text-only .content-img__title {
    text-align: center;
}

.content-img--text-only .content-img__text {
    font-family: inherit;
}

/* ---- Article / page shell ---- */
.page--post,
.page--default {
    padding-bottom: clamp(2.5rem, 2vw + 2rem, 4.5rem);
}

.entry {
    padding-top: clamp(2rem, 4vw + 1rem, 4rem);
}

.entry__container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ---- Post head ---- */
.entry__head {
    margin-bottom: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}

.entry__title {
    margin: 0 0 1rem;
}

.entry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    color: var(--secondary);
    font-size: .9375rem;
    font-weight: 600;
}

.entry__meta-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.entry__meta-item + .entry__meta-item::before {
    content: "";
    position: absolute;
    left: -.75rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
}

/* ---- Featured image ---- */
.entry__cover {
    margin: 0 0 clamp(1.75rem, 3vw + 1rem, 2.75rem);
}

.entry__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
}

/* ---- Content typography ---- */
.entry-content {
    color: var(--black);
    font-family: var(--font-main);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.7;
}

.entry-content > * {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

.entry-content p {
    margin: 0 0 1.25rem;
}

/* Headings */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--font-seccondary, var(--font-main));
    font-weight: 700;
    line-height: 1.2;
    color: var(--black);
    margin: 2.25rem 0 1rem;
}

.entry-content h2 { font-size: clamp(1.625rem, 1vw + 1.25rem, 2rem); }
.entry-content h3 { font-size: clamp(1.375rem, .8vw + 1.1rem, 1.625rem); }
.entry-content h4 { font-size: clamp(1.15rem, .5vw + 1rem, 1.3125rem); }
.entry-content h5 { font-size: 1.125rem; }
.entry-content h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }

.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }

/* Links */
.entry-content a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--primary);
    transition: color .25s ease;
}

.entry-content a:hover { color: var(--secondary); }

/* Lists */
.entry-content ul,
.entry-content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: .5rem;
    padding-left: .25rem;
}

.entry-content ul { list-style: none; padding-left: 0; }

.entry-content ul > li {
    position: relative;
    padding-left: 1.75rem;
}

.entry-content ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--gradient-primary, var(--primary));
}

.entry-content ol { padding-left: 1.25rem; }

/* Images / figures (Gutenberg) */
.entry-content img,
.entry-content .wp-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

.entry-content figure {
    margin: 0 0 1.5rem;
}

.entry-content figure.alignleft,
.entry-content figure.alignright { max-width: 50%; }

.entry-content figure.alignleft { float: left; margin: .25rem 1.75rem 1.25rem 0; }
.entry-content figure.alignright { float: right; margin: .25rem 0 1.25rem 1.75rem; }
.entry-content figure.aligncenter { margin-left: auto; margin-right: auto; }

.entry-content figcaption,
.entry-content .wp-element-caption {
    margin-top: .625rem;
    color: var(--secondary);
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
}

/* Blockquote */
.entry-content blockquote {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--primary);
    border-radius: .5rem;
    background: var(--light);
    font-family: var(--font-seccondary, var(--font-main));
    font-size: 1.1875rem;
    font-style: italic;
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

/* Gutenberg columns */
.entry-content .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin: 0 0 1.5rem;
}

.entry-content .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
}

.entry-content .wp-block-column > *:last-child { margin-bottom: 0; }

/* Buttons inside content */
.entry-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Tables */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-size: 1rem;
}

.entry-content th,
.entry-content td {
    padding: .75rem 1rem;
    border: 1px solid var(--primary-ligth, #d9d0bb);
    text-align: left;
}

.entry-content th { background: var(--light); font-weight: 700; }

/* Separator */
.entry-content hr,
.entry-content .wp-block-separator {
    border: none;
    height: 1px;
    background: var(--primary-ligth, #d9d0bb);
    margin: 2rem 0;
}

@media (max-width: 48rem) {
    .entry-content .wp-block-columns { flex-direction: column; gap: 1.25rem; }
    .entry-content figure.alignleft,
    .entry-content figure.alignright {
        float: none;
        max-width: 100%;
        margin: 0 0 1.25rem;
    }
}

/* ---- Logo sizing ---- */
/* Header logo: 20% smaller than its previous displayed size. */
.header__logo {
    height: clamp(1.92rem, 1.92rem + 11.52 * (100vw - 23.4375rem) / 1065, 2.64rem);
}

/* Footer logo: match the header logo size. */
.footer__logo {
    height: clamp(1.92rem, 1.92rem + 11.52 * (100vw - 23.4375rem) / 1065, 2.64rem);
}

/* ---- Footer menu ---- */
/* 20% larger than the header nav links (header: 1.25rem → 1.5rem). */
.footer__link {
    font-size: 1.5rem;
}

/* Match footer column headings to the surrounding footer typeface. */
.footer__title {
    font-family: var(--font-main);
}

/* Let the hero image show through the copy panel without blurring it. */
.hero__content {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Match the homepage estimate-form heading to the button typeface. */
.hero__form .form-title {
    font-family: var(--font-main);
}

/* Match the Contact form heading to the homepage estimate-form heading. */
.contacts__form .form-title {
    font-family: var(--font-main);
}

/* Match the lower estimate-form heading to the Service Areas heading typeface. */
.main-form .form-title {
    font-family: var(--font-main);
}

/* Balance the submit button between the final field and the form's bottom edge. */
.hero__form form .btn {
    margin-top: 1.125rem;
}

/* Give the advantage-card descriptions more breathing room on multiple lines. */
.utp__item-text {
    line-height: 135%;
}

/* Show the homepage hero image at its original brightness. */
.hero__bg::before {
    background: transparent;
}

/* Give the revised hero supporting line more presence. */
.hero__title {
    white-space: pre-line;
    line-height: 1.08;
}

.hero__text {
    font-size: 1.5rem;
    line-height: 1.5;
}

/* Use the body-copy typeface for headings in the expectation cards. */
.utp__item-title {
    font-family: var(--font-main);
}

/* Improve readability of multi-line descriptions in the service cards. */
.choose-item__text {
    line-height: 120%;
}

/* Match project-card headings to the service-card heading typeface. */
.projects-card__title {
    font-family: var(--font-main);
    font-size: 2.25rem;
}

/* Add more breathing room to multi-line project descriptions. */
.projects-card__text {
    line-height: 120%;
}

/* Improve readability of regular text throughout the process section. */
.featured__item-text {
    line-height: 120%;
}

/* Match process-step headings to the service-card heading typeface. */
.featured__item:not(:first-child) .featured__item-title {
    font-family: var(--font-main);
    font-style: normal;
}

/* Present the reviews heading like the centered expectations heading. */
.reviews__title {
    margin-bottom: clamp(1.5rem, 1.5rem + 24 * (100vw - 23.4375rem) / 1065, 3rem);
    text-align: center;
}

/* Match review-card headings to the main reviews heading typeface. */
.review-item__title {
    font-family: var(--font-main);
}

/* Match city names to the reviews heading typeface. */
.areas__item-title {
    font-family: var(--font-main);
}

/* Show all service areas in two columns without an internal scrollbar. */
.areas__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

@media (max-width: 575.98px) {
    .areas__list {
        grid-template-columns: 1fr;
    }
}

/* Match individual FAQ questions to the main FAQ heading typeface. */
.faq__item-trigger {
    font-family: var(--font-main);
}

/* Display the closing banner message in normal sentence case and regular type. */
.banner__title {
    font-family: var(--font-main);
    font-style: normal;
    text-transform: none;
}

/* Use half of the banner's original blur strength. */
.banner__bg::before {
    -webkit-backdrop-filter: blur(0.3125rem);
    backdrop-filter: blur(0.3125rem);
}

/* Give the About hero heading 20% more line spacing. */
.hero-about__title {
    line-height: 108%;
}

/* Give the About hero introductory paragraph 20% more line spacing. */
.hero-about__text {
    line-height: 1.2;
}

/* Give the Contact introduction 20% more line spacing. */
.contacts__text {
    line-height: 1.2;
}

/* Enlarge the Contact introduction card by 20%. */
.contacts__content {
    max-width: 36.3rem;
}

.contacts__panel {
    display: flex;
    flex-direction: column;
    row-gap: 1.25rem;
    padding: clamp(1rem, 1rem + 4 * (100vw - 23.4375rem) / 1065, 1.25rem);
    border: 1px solid rgba(239, 235, 229, 0.95);
    border-radius: 0.5rem;
    background: linear-gradient(134.27deg, rgba(255, 255, 255, 0.72) 0.98%, rgba(239, 235, 229, 0.28) 99.97%);
    -webkit-backdrop-filter: blur(1.75rem);
    backdrop-filter: blur(1.75rem);
}

.contacts__body {
    padding: 1.5rem;
}

@media (max-width: 991.98px) {
    .contacts__content {
        max-width: 100%;
    }

    .contacts__body {
        padding: 1.2rem;
    }

    .contacts__panel {
        padding: 1rem;
    }
}

/* Match future service-page labels to existing links without making them interactive. */
.choose-item__link--static {
    cursor: default;
}

.choose-item__link--static:hover {
    color: #c4c4c4;
}

/* Add breathing room to the featured remodeling statement. */
.remodel-card__title--large {
    line-height: 108%;
}

/* Increase line spacing for the three supporting About-card headings. */
.remodel-card__title:not(.remodel-card__title--large) {
    line-height: 108%;
}