/*
Theme Name: masteryou
Theme URI: https://masteryou.com
Description: Custom theme generated from brand brief via Google Stitch.
Version: 1.0.0
Author: Masteryou
Text Domain: masteryou
*/

/* ── Brand Variables ──────────────────────────────────────── */
:root {
  --color-bg:       #f8f7f4;
  --color-text:     #0a0a0a;
  --color-accent:   #6b7280;
  --color-dark:     #0a0a0a;
  --color-white:    #f8f7f4;
  --font-serif:     'Playfair Display', Georgia, serif;
  --font-sans:      'Inter', -apple-system, sans-serif;
  --max-content:    680px;
  --max-wide:       900px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: 17px; line-height: 1.75; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text); }

/* ── Stitch-generated styles ─────────────────────────────── */
/* ── 03-blog-post ── */

        body { font-family: 'Inter', sans-serif; }
        .serif-text { font-family: 'Newsreader', serif; }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    

/* ── 09-author-page ── */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        body {
            background-color: #f8f7f4;
        }
    

/* ── 06-contact-page ── */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        body {
            background-color: #f8f7f4;
            color: #0a0a0a;
        }
        ::placeholder {
            color: #6b7280;
            opacity: 0.6;
        }
        input, select, textarea {
            border-radius: 0px !important;
            border-width: 1px !important;
            border-color: #6b7280 !important;
        }
    

/* ── 07-sales-page ── */

        body { background-color: #f8f7f4; font-family: 'Inter', sans-serif; font-weight: 300; }
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
        .vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); }
        h1, h2, h3, h4, .font-headline { font-weight: 900; }
    

/* ── 01-header-footer ── */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
        }
        body {
            background-color: #f8f7f4;
        }
    

/* ── 10-404-page ── */

        body { background-color: #f8f7f4; color: #0a0a0a; }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .text-404-bg {
            font-size: clamp(120px, 20vw, 280px);
            letter-spacing: 0.1em;
        }
        input, select, textarea, button {
            border-radius: 0px !important;
            border: 1px solid #6b7280 !important;
        }
        .playfair-bold { font-family: 'Playfair Display', serif; font-weight: 700; }
        .playfair-black { font-family: 'Playfair Display', serif; font-weight: 900; }
    

/* ── 07b-sales-page-classic ── */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .serif-italic { font-family: 'Playfair Display', serif; font-style: italic; }
        .mono-monolith { letter-spacing: 0.15em; text-transform: uppercase; }
        .negative-leading { line-height: 0.9; }
        body { font-family: 'Inter', sans-serif; background-color: #f8f7f4; color: #0a0a0a; }
        .muted-border { border: 1px solid #6b7280; }
    

/* ── 04-blog-listing ── */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    

/* ── 08-content-page ── */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        body {
            background-color: #f8f7f4;
            color: #0a0a0a;
        }
    

/* ── 02-homepage ── */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .vertical-text {
            writing-mode: vertical-rl;
        }
        .kerning-wide {
            letter-spacing: 0.15em;
        }
    

/* ── 05-about-page ── */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        body {
            background-color: #f8f7f4;
            color: #0a0a0a;
        }
        * {
            border-radius: 0px !important;
        }
    


/* ── WordPress Post Content Typography ───────────────────────── */
.wp-content { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.75; color: #0a0a0a; }
.wp-content p { margin-bottom: 1.5rem; }
.wp-content h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.625rem; line-height: 1.3; margin-top: 3rem; margin-bottom: 1rem; color: #0a0a0a; }
.wp-content h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.2rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.wp-content blockquote { border-left: 3px solid #0a0a0a; padding: 0.25rem 0 0.25rem 2rem; margin: 2rem 0; }
.wp-content blockquote p { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.25rem; line-height: 1.6; color: #0a0a0a; margin-bottom: 0; }
.wp-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.wp-content ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.wp-content li { margin-bottom: 0.5rem; }
.wp-content a { text-decoration: underline; }
.wp-content img { max-width: 100%; height: auto; margin: 2rem 0; }
.wp-content figure { margin: 2rem 0; }
.wp-content hr { border: none; border-top: 1px solid #6b7280; margin: 3rem 0; }

/* ── Tailwind opacity variable init (CDN doesn't always set these) ── */
*, ::before, ::after {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  --tw-border-opacity: 1;
  --tw-ring-opacity: 1;
}

/* ── Single Post: Two-column article + sidebar layout ───────── */
.single-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .single-post-grid {
    grid-template-columns: 1fr 380px;
  }
}

/* ── Header CTA button ───────────────────────────────────────── */
.header-cta-btn {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border: 1px solid #000000;
  transition: opacity 0.3s;
}
.header-cta-btn:hover { opacity: 0.85; color: #ffffff; }

/* ── Sidebar: direct styles (no Tailwind custom color dependency) ── */
.sidebar-cta-block {
  background-color: #000000 !important;
  padding: 2rem;
}
.sidebar-cta-block h4 {
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 700;
}
.sidebar-cta-block h3 {
  color: #ffffff;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 1.5rem;
}
.sidebar-cta-block p {
  color: rgba(255,255,255,0.8);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 2rem;
}
.sidebar-cta-block a {
  display: block;
  width: 100%;
  background-color: #ffffff !important;
  color: #000000 !important;
  padding: 1rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s;
}
.sidebar-cta-block a:hover { background-color: #e5e5e5 !important; }

.sidebar-section-heading {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000000;
  border-bottom: 1px solid #000000;
  padding-bottom: 0.5rem;
  font-weight: 700;
}

.sidebar-quote-block {
  border: 1px dashed #c6c6c6;
  padding: 2rem;
  text-align: center;
}
.sidebar-quote-block span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #777777;
  display: block;
  margin-bottom: 0.5rem;
}
.sidebar-quote-block p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.125rem;
  color: #000000;
}

.sidebar-subscribe-btn {
  width: 100%;
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  border: none !important;
  cursor: pointer;
  transition: opacity 0.2s;
}
.sidebar-subscribe-btn:hover { opacity: 0.85; }

/* ── Primary Nav Menu (wp_nav_menu output) ───────────────────── */
.primary-menu { display: flex; align-items: center; gap: 3rem; list-style: none; margin: 0; padding: 0; }
.primary-menu li { list-style: none; }
.primary-menu a { font-family: 'Inter', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.025em; color: #0a0a0a; font-weight: 400; text-decoration: none; transition: opacity 0.3s; }
.primary-menu a:hover { opacity: 0.7; }
@media (max-width: 767px) { .primary-menu { display: none; } }