/* ============================================
   Martine Cabinet Professionals - Shared Styles
   Based on WordPress Björk Theme
   ============================================ */

/* Custom Properties */
:root {
    --wp--preset--color--foreground: #111111;
    --wp--preset--color--background: #FFFFFF;
    --wp--preset--color--secondary: #6B6A6A;
    --wp--preset--color--tertiary: #E2E2E2;
    --wp--preset--color--quaternary: #F3F2F2;

    --wp--preset--font-size--tiny: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.147), 16px);
    --wp--preset--font-size--small: clamp(16px, 1rem + ((1vw - 3.2px) * 0.147), 18px);
    --wp--preset--font-size--medium: clamp(17px, 1.063rem + ((1vw - 3.2px) * 0.294), 21px);
    --wp--preset--font-size--extra-large: clamp(24px, 1.5rem + ((1vw - 3.2px) * 0.588), 32px);
    --wp--preset--font-size--heading-1: clamp(36px, 2.25rem + ((1vw - 3.2px) * 2.059), 64px);
    --wp--preset--font-size--heading-3: clamp(30px, 1.875rem + ((1vw - 3.2px) * 1.324), 48px);
    --wp--preset--font-size--heading-4: clamp(27px, 1.688rem + ((1vw - 3.2px) * 0.956), 40px);
    --wp--preset--font-size--heading-5: clamp(24px, 1.5rem + ((1vw - 3.2px) * 0.588), 32px);

    --wp--preset--spacing--20: 12px;
    --wp--preset--spacing--30: 16px;
    --wp--preset--spacing--40: 24px;
    --wp--preset--spacing--50: 32px;
    --wp--preset--spacing--60: clamp(32px, 7.5vw, 40px);
    --wp--preset--spacing--70: clamp(48px, 9vw, 64px);
    --wp--preset--spacing--80: clamp(64px, 6.666vw, 96px);

    --wp--custom--spacing--outer: clamp(calc(2 * 16px), 6.666vw, calc(4 * 16px));
    --wp--custom--spacing--small: min(32px, 6.4vw);

    --wp--custom--typography--letter-spacing--body: -0.01em;
    --wp--custom--typography--letter-spacing--heading: -0.02em;
    --wp--custom--typography--line-height--body: 1.5;
    --wp--custom--typography--line-height--headings--large: 1.15;

    --wp--style--block-gap: min(32px, 6.4vw);
    --wp--style--global--wide-size: 1680px;

    --font-family-default: "Albert Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-family-system: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-family-default);
    font-size: 16px;
    font-weight: 400;
    line-height: var(--wp--custom--typography--line-height--body);
    letter-spacing: var(--wp--custom--typography--letter-spacing--body);
    color: var(--wp--preset--color--foreground);
    background: var(--wp--preset--color--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; text-underline-offset: 0.2em; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; border-radius: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: var(--wp--custom--typography--letter-spacing--heading); line-height: var(--wp--custom--typography--line-height--headings--large); }
figure { margin: 0; }
hr { border: none; height: 1px; background: var(--wp--preset--color--tertiary); color: var(--wp--preset--color--tertiary); }

/* Skip Link */
.skip-link { position: absolute; top: -100px; left: 0; background: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); padding: 8px 16px; z-index: 10000; font-size: var(--wp--preset--font-size--small); }
.skip-link:focus { top: 0; }

/* Announcement Bar */
.announcement-bar { background: #f9f7f1; color: var(--wp--preset--color--foreground); text-align: center; padding: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--tiny); line-height: 1.5; }

/* Site Title */
.site-title { text-align: center; line-height: 0; font-size: var(--wp--preset--font-size--medium); font-weight: 600; font-family: var(--font-family-system); padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--30); }
.site-title a { color: var(--wp--preset--color--foreground); }

/* Top Nav (mobile only) */
.top-nav { display: flex; justify-content: flex-end; padding: 0 var(--wp--preset--spacing--60); }
.top-nav .menu-btn { display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--foreground); padding: 0; }
.top-nav .menu-btn svg { width: 24px; height: 24px; }

/* Two-Column Layout */
.site-columns { display: flex; padding: 0 var(--wp--preset--spacing--60); max-width: var(--wp--style--global--wide-size); margin: 0 auto; }
.sidebar-col { flex: 0 0 23%; max-width: 23%; }
.main-col { flex: 0 0 77%; max-width: 77%; padding-left: var(--wp--preset--spacing--60); }

/* Sidebar */
.site-sidebar { display: flex; flex-direction: column; min-height: calc(100vh - (var(--wp--custom--spacing--outer) * 2)); position: sticky; top: var(--wp--custom--spacing--outer); }
.site-sidebar .sidebar-inner { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.sidebar-nav a { display: block; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--secondary); padding: 4px 0; transition: color 0.15s; }
.sidebar-nav a:hover, .sidebar-nav a.current { color: var(--wp--preset--color--foreground); }
.sidebar-social { display: flex; justify-content: center; gap: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--30); }
.sidebar-social .social-link { display: flex; align-items: center; color: var(--wp--preset--color--foreground); transition: transform 0.1s; }
.sidebar-social .social-link:hover { transform: scale(1.1); }
.sidebar-social .social-link svg { width: 24px; height: 24px; fill: currentColor; }

/* Hero (homepage only) */
.hero-cover { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-cover .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 47% 3%; z-index: 0; }
.hero-cover .hero-overlay { position: absolute; inset: 0; background: var(--wp--preset--color--quaternary); opacity: 0.1; z-index: 1; }
.hero-cover .hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--wp--style--global--wide-size); padding: 0 var(--wp--preset--spacing--60); text-align: center; }
.hero-cover h3 { color: var(--wp--preset--color--background); font-size: var(--wp--preset--font-size--heading-3); margin-bottom: var(--wp--preset--spacing--40); }
.hero-cover h4 { color: var(--wp--preset--color--background); font-size: var(--wp--preset--font-size--heading-4); letter-spacing: 5px; line-height: 0; margin-bottom: var(--wp--preset--spacing--20); }
.hero-cover .hero-labels { color: var(--wp--preset--color--background); font-size: var(--wp--preset--font-size--medium); letter-spacing: 5px; line-height: 1.5; }

/* Section Label */
.section-label { text-align: center; padding: 5vh var(--wp--preset--spacing--60); font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.441), 20px); }

/* About Cards */
.about-cards { display: flex; gap: var(--wp--style--block-gap); padding-bottom: var(--wp--preset--spacing--80); }
.about-cards .card { flex: 1; background: var(--wp--preset--color--quaternary); }
.about-cards .card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about-cards .card .card-body { padding: var(--wp--preset--spacing--50); text-align: center; }
.about-cards .card .card-body h6 { font-size: var(--wp--preset--font-size--medium); line-height: 1; margin-bottom: var(--wp--preset--spacing--20); }
.about-cards .card .card-body p { font-size: var(--wp--preset--font-size--tiny); margin-bottom: var(--wp--preset--spacing--20); }
.about-cards .card .card-body p:last-child { margin-bottom: 0; }

/* Page Content (sub-pages) */
.page-content { padding-bottom: var(--wp--preset--spacing--80); }
.page-content h1.page-title { font-size: var(--wp--preset--font-size--heading-1); text-align: left; margin-bottom: var(--wp--preset--spacing--60); }
.page-content h5 { font-size: var(--wp--preset--font-size--heading-5); }
.page-content h5.extra-large { font-size: var(--wp--preset--font-size--extra-large); }
.page-content h5.small { font-size: var(--wp--preset--font-size--small); }
.page-content p { margin-bottom: var(--wp--preset--spacing--20); line-height: 1.5; }
.page-content p.secondary { color: var(--wp--preset--color--secondary); }
.page-content p.small { font-size: var(--wp--preset--font-size--small); }
.page-content p.tiny { font-size: var(--wp--preset--font-size--tiny); }
.page-content p.medium { font-size: var(--wp--preset--font-size--medium); }
.page-content .text-center { text-align: center; }

/* Two Column Layout in page content */
.page-content .content-columns { display: flex; gap: var(--wp--style--block-gap); align-items: center; }
.page-content .content-columns > div { flex: 1; }
.page-content .content-columns img { width: 100%; }

/* Brand Partners */
.brand-section h4 { font-size: var(--wp--preset--font-size--small); text-align: center; margin-bottom: var(--wp--preset--spacing--30); }
.brand-section .brand-list { text-align: center; font-size: 13px; line-height: 1.8; color: var(--wp--preset--color--secondary); }
.brand-section .brand-list strong { display: block; margin-top: var(--wp--preset--spacing--20); }
.brand-section .brand-list a { color: var(--wp--preset--color--secondary); text-decoration: underline; }

/* Contact Page */
.contact-info { text-align: center; }
.contact-info h5 { margin-bottom: var(--wp--preset--spacing--20); }
.contact-info p { color: var(--wp--preset--color--secondary); margin-bottom: var(--wp--preset--spacing--20); }
.contact-info p strong { color: var(--wp--preset--color--foreground); }
.contact-info a { color: var(--wp--preset--color--secondary); }

/* Instagram Gallery */
.ig-header { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--60); }
.ig-header img { width: 50px; height: 50px; border-radius: 50%; }
.ig-header h3 { font-size: var(--wp--preset--font-size--medium); margin: 0; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ig-grid a { display: block; overflow: hidden; }
.ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.3s; }
.ig-grid img:hover { transform: scale(1.05); }

/* Footer Social */
.footer-social { display: flex; justify-content: center; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--50) 0; font-size: 36px; }
.footer-social .social-link { display: flex; align-items: center; color: var(--wp--preset--color--foreground); transition: transform 0.1s; }
.footer-social .social-link:hover { transform: scale(1.1); }
.footer-social .social-link svg { width: 1em; height: 1em; fill: currentColor; }

/* Footer */
.site-footer { padding: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--60); font-size: var(--wp--preset--font-size--small); }
.site-footer .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20); }
.site-footer .footer-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); }
.site-footer .footer-left p { font-size: var(--wp--preset--font-size--tiny); margin: 0; }
.site-footer .footer-left .site-name { font-weight: 700; line-height: 0.7; }
.site-footer .footer-left .credit { color: var(--wp--preset--color--tertiary); }
.site-footer .footer-left .theme-credit { color: var(--wp--preset--color--tertiary); display: none; }

/* Nav Overlay (mobile) */
.nav-overlay { position: fixed; inset: 0; background: var(--wp--preset--color--background); z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; overflow-y: auto; display: flex; flex-direction: column; }
.nav-overlay.active { opacity: 1; visibility: visible; }
.nav-overlay .overlay-header { display: flex; justify-content: flex-end; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }
.nav-overlay .overlay-close { display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--foreground); padding: 4px; }
.nav-overlay .overlay-close svg { width: 24px; height: 24px; fill: currentColor; }
.nav-overlay .overlay-content { flex: 1; padding: 0 var(--wp--preset--spacing--60); }
.nav-overlay .overlay-content a { display: block; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--secondary); padding: 8px 0; transition: color 0.15s; }
.nav-overlay .overlay-content a:hover, .nav-overlay .overlay-content a.current { color: var(--wp--preset--color--foreground); }
.nav-overlay .overlay-social { display: flex; justify-content: center; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--60); }
.nav-overlay .overlay-social .social-link { display: flex; align-items: center; color: var(--wp--preset--color--foreground); }
.nav-overlay .overlay-social .social-link svg { width: 24px; height: 24px; fill: currentColor; }

/* Responsive */
@media (max-width: 1024px) {
    .sidebar-col { flex: 0 0 28%; max-width: 28%; }
    .main-col { flex: 0 0 72%; max-width: 72%; }
    .about-cards { flex-wrap: wrap; }
    .about-cards .card { flex: 0 0 calc(50% - var(--wp--style--block-gap) / 2); }
    .content-columns { flex-direction: column; }
    .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 781px) {
    .sidebar-col { display: none !important; }
    .main-col { flex: 0 0 100%; max-width: 100%; padding-left: 0; }
    .site-columns { padding: 0 var(--wp--preset--spacing--40); }
    .hero-cover { min-height: 70vh; }
    .hero-cover .hero-inner { padding: 0 var(--wp--preset--spacing--40); }
    .about-cards { flex-direction: column; }
    .about-cards .card { flex: 1 1 100%; }
    .site-footer { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
    .site-footer .footer-inner { flex-direction: column; align-items: flex-start; }
    .announcement-bar { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
    .site-title { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20); }
    .top-nav { padding: 0 var(--wp--preset--spacing--40); }
    .ig-grid { grid-template-columns: repeat(2, 1fr); }
    .page-content .content-columns > div { flex: 1 1 100%; }
}

@media (max-width: 500px) {
    .hero-cover { min-height: 60vh; }
    .hero-cover h3 { font-size: var(--wp--preset--font-size--heading-4); }
    .hero-cover h4 { font-size: var(--wp--preset--font-size--heading-5); letter-spacing: 3px; }
    .hero-cover .hero-labels { font-size: var(--wp--preset--font-size--tiny); letter-spacing: 3px; }
    .ig-grid { grid-template-columns: 1fr; }
    .site-footer .footer-left .theme-credit { display: none; }
}

@media (min-width: 782px) {
    .top-nav { display: none !important; }
    .sidebar-col { display: block !important; }
}