/* our-practices.css
 * Scoped styles for the Our Practices page
 * Uses `cd-` prefix to avoid collisions with `page.css` selectors
 */
/* Merriweather font is declared centrally in front-page.css (keep single canonical declaration there). */

:root {
  --cd-practices-max: 1100px;
  --cd-accent: var(--accent, #0ea5a4);
	--cd-muted: var(--muted, #6a0404);
	--cd-bg: var(--bg, #ffffff);
	--cd-text: #07203a;
}

.cd-our-practices-page { padding: 0; }

/* Hero - reuse visual language from .page-hero but scoped to .cd- prefix */
.cd-page-hero {
    position: relative;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    padding: 160px 0 60px; /* more top spacing so title clears nav/admin bar */
    margin-bottom: 0;
    overflow: hidden;
}

.cd-page-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></svg>');
    background-size: 100px 100px;
    opacity: 0.5;
}

.cd-page-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(26,26,26,0.9) 0%, rgba(139,21,56,0.85) 100%);
}

.cd-page-hero .container { position: relative; z-index: 2; }

.cd-page-hero-content { text-align: center; color: var(--white); }

.cd-page-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 12px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    text-transform: capitalize; /* make title capitalized */
}

.cd-page-breadcrumb { display:flex; align-items:center; justify-content:center; gap:10px; color: rgba(255,255,255,0.8); font-size:0.95rem; margin-top:6px; }
.cd-page-breadcrumb a { color: rgba(255,255,255,0.9); text-decoration: none; opacity: 0.95; }
.cd-page-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.cd-page-breadcrumb .separator { color: rgba(255,255,255,0.5); margin: 0 6px; }
.cd-page-breadcrumb .current { color: rgba(255,255,255,0.95); font-weight:600; }

/* Account for WP admin bar when logged in */
body.admin-bar .cd-page-hero { padding-top: calc(160px + 32px); }

.cd-page-hero-compact { padding: 100px 0 50px; }

/* Intro / Content above the list */
.cd-page-content-section { padding: 56px 0; background: var(--white); }
.cd-page-content-wrapper { max-width: var(--cd-practices-max); margin: 0 auto; padding: 0 20px; }

/* Intro (lead) styling — makes the intro stand out for non-coders */
.cd-page-content-wrapper p:first-of-type,
.cd-page-content-wrapper .lead {
    font-family: 'Merriweather', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--dark-gray);
    line-height: 1.85;
    margin-bottom: 20px;
}

/* Justified text for a more professional, magazine-like appearance */
.cd-page-content-wrapper p,
.cd-page-content-wrapper .lead,
.cd-practice-desc,
.cd-practices-conclusion p {
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Slight decorative separator between intro and list */
.cd-page-content-wrapper .cd-intro-separator {
    height: 1px;
    background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.06));
    margin: 18px 0 8px;
    border-radius: 2px;
}

/* Practices list container */
.cd-practices-section { padding: 28px 0 48px; background: transparent; }
.cd-practices-list { max-width: var(--cd-practices-max); margin: 0 auto; padding: 12px 18px; background: var(--white); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); }

.cd-practice-row {
    display: grid;
    grid-template-columns: 72px 1fr 2fr;
    gap: 20px;
    align-items: start;
    padding: 18px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.18s ease, transform 0.12s ease;
}

.cd-practice-row:hover { background: rgba(246,246,250,0.6); transform: translateY(-2px); }

.cd-practice-num { font-weight:700; font-size:18px; color: var(--primary); display:flex; align-items:center; justify-content:center; }

.cd-practice-title { margin: 0; font-size:18px; font-weight:700; }
.cd-practice-title a { color: var(--primary); text-decoration: none; position: relative; display: inline-block; }
.cd-practice-title a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 3px;
    width: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(.2,.9,.2,1);
}
.cd-practice-title a:hover { color: var(--accent); }
.cd-practice-title a:hover::after { transform: scaleX(1); }

.cd-practice-desc { color: var(--dark-gray); line-height:1.7; }

.cd-practices-conclusion {
    /* wider quote/aside style for conclusion */
    max-width: var(--cd-practices-max);
    margin: 28px auto 64px;
    padding: 22px 28px;
    font-family: 'Inter', sans-serif;
    background: rgba(138,30,63,0.03); /* soft tinted background matching accent */
    border-left: 4px solid #8A1E3F;
    border-radius: 8px;
    color: var(--dark-gray);
    box-shadow: 0 6px 18px rgba(0,0,0,0.03);
}
.cd-practices-conclusion p { margin: 0; font-size: 1rem; line-height:1.85; }

/* Blockquote styling within intro/conclusion */
.cd-page-content-wrapper blockquote, .cd-practices-conclusion blockquote {
        border-left: 4px solid #8A1E3F;
        background: rgba(0,0,0,0.03);
        padding: 12px 16px;
        margin: 16px 0;
        font-style: italic;
}

/* Improve readability of long lists on mobile */
@media (max-width: 800px) {
    .cd-page-content-wrapper p:first-of-type { font-size: 1.05rem; }
    .cd-practices-conclusion { padding: 14px; }
}

/* Small screens: stack title+desc under number */
@media (max-width: 800px) {
  .cd-practice-row { grid-template-columns: 56px 1fr; }
  .cd-practice-num { font-size:16px; }
  .cd-practice-title-cell { grid-column: 2; }
  .cd-practice-desc-cell { grid-column: 2; }
  .cd-practices-list { padding: 8px 12px; }
}

/* Medium-large screens: slightly tighten spacing */
@media (max-width: 1100px) {
    .cd-practices-list { padding: 10px 14px; }
    .cd-practice-row { grid-template-columns: 64px 1fr 1.8fr; gap: 16px; }
    .cd-page-title { font-size: 2.3rem; }
}

/* Smaller desktops/tablets */
@media (max-width: 1000px) {
    .cd-page-hero { padding: 120px 0 50px; }
    .cd-page-title { font-size: 2.1rem; }
    .cd-practice-row { grid-template-columns: 56px 1fr 1.4fr; }
    .cd-practice-num { font-size: 16px; }
    .cd-practice-desc { font-size: 0.96rem; }
    .cd-page-content-wrapper { padding: 0 16px; }
    .cd-practices-conclusion { padding: 18px 20px; }
}

/* Mobile: compact spacing and readable sizes */
@media (max-width: 600px) {
    .cd-page-hero { padding: 100px 0 36px; }
    .cd-page-title { font-size: 1.6rem; }
    .cd-page-breadcrumb { font-size: 0.88rem; gap:8px; }
    .cd-practice-row { grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 12px; }
    .cd-practice-title { font-size: 16px; }
    .cd-practice-desc { font-size: 0.97rem; line-height: 1.95; }
    .cd-practices-list { padding: 10px 12px; }
    .cd-practices-conclusion { max-width: calc(100% - 40px); margin: 20px auto; padding: 12px 14px; }
    /* Use left alignment on small screens for readability */
    .cd-page-content-wrapper p,
    .cd-page-content-wrapper .lead,
    .cd-practice-desc,
    .cd-practices-conclusion p {
            text-align: left;
            text-align-last: left;
    }

    /* Give intro paragraph more breathing room on phones */
    .cd-page-content-wrapper p:first-of-type { font-size: 1.06rem; line-height: 1.95; margin-bottom: 22px; }
}

/* Utility spacing for editors */
.cd-page-content-wrapper p:last-child { margin-bottom: 0; }

/* End of our-practices.css */