/* ==========================================================================
   INTERNATIONAL BIBLE CHURCH OF ARMENIA — Custom Stylesheet
   Version 1.0
   Paste this into: WordPress Admin → Appearance → Customize → Additional CSS
   (Or upload as a custom.css file in your child theme)
   ========================================================================== */

/* ---------- 1. GOOGLE FONTS (embed via <link> in header, or @import here) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
    /* Colors */
    --ibca-navy:        #0B2447;   /* primary brand deep navy */
    --ibca-navy-deep:   #061936;
    --ibca-cream:       #F9F7F1;   /* paper-like background */
    --ibca-cream-warm:  #F1ECDF;
    --ibca-ink:         #0B0B0B;   /* near-black for body text */
    --ibca-ink-soft:    #2A2A2A;
    --ibca-stone:       #6B6B6B;
    --ibca-gold:        #A67C3A;   /* accent */
    --ibca-gold-soft:   #C8A770;
    --ibca-rule:        #D9D3C4;

    /* Typography */
    --ff-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --ff-body:    'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;

    /* Spacing */
    --section-pad: clamp(3rem, 7vw, 7rem);
    --container:   1200px;
}

/* ---------- 3. RESET & BASE ---------- */
body,
body.custom-background {
    font-family: var(--ff-body) !important;
    color: var(--ibca-ink);
    background: var(--ibca-cream);
    line-height: 1.7;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--ff-display);
    color: var(--ibca-navy);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

h1, .wp-block-heading h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2, .wp-block-heading h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3                       { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }

a {
    color: var(--ibca-navy);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s ease;
}
a:hover { color: var(--ibca-gold); }

/* ---------- 4. REUSABLE IBCA BUILDING BLOCKS ---------- */

/* Container */
.ibca-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Eyebrow / small-caps label */
.ibca-eyebrow {
    font-family: var(--ff-display);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--ibca-gold);
    display: inline-block;
    margin-bottom: 1.25rem;
}

/* Thin decorative rule */
.ibca-rule {
    display: block;
    width: 64px;
    height: 1px;
    background: var(--ibca-gold);
    margin: 1.25rem auto;
    border: 0;
}

/* Double rule for titles */
.ibca-double-rule::before,
.ibca-double-rule::after {
    content: "";
    display: inline-block;
    width: 54px; height: 1px;
    background: var(--ibca-gold);
    vertical-align: middle;
    margin: 0 1rem;
}

/* Button */
.ibca-btn {
    display: inline-block;
    padding: 0.95rem 2.25rem;
    font-family: var(--ff-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid var(--ibca-navy);
    color: var(--ibca-navy);
    background: transparent;
    transition: all .25s ease;
    cursor: pointer;
}
.ibca-btn:hover {
    background: var(--ibca-navy);
    color: var(--ibca-cream);
}
.ibca-btn--light {
    border-color: var(--ibca-cream);
    color: var(--ibca-cream);
}
.ibca-btn--light:hover {
    background: var(--ibca-cream);
    color: var(--ibca-navy);
}
.ibca-btn--gold {
    border-color: var(--ibca-gold);
    color: var(--ibca-gold);
}
.ibca-btn--gold:hover {
    background: var(--ibca-gold);
    color: var(--ibca-cream);
}

/* Section */
.ibca-section {
    padding: var(--section-pad) 0;
}
.ibca-section--navy {
    background: var(--ibca-navy);
    color: var(--ibca-cream);
}
.ibca-section--navy h1,
.ibca-section--navy h2,
.ibca-section--navy h3 { color: var(--ibca-cream); }
.ibca-section--cream-warm { background: var(--ibca-cream-warm); }

/* ---------- 5. HERO (Home) ---------- */
.ibca-hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ibca-cream);
    background: var(--ibca-navy);
    overflow: hidden;
    padding: 8rem 1.5rem 5rem;
    text-align: center;
}
.ibca-hero::before {
    /* subtle mountain silhouette using CSS */
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.08) 0%, transparent 60%),
      linear-gradient(180deg, var(--ibca-navy-deep) 0%, var(--ibca-navy) 60%, #0e2d5a 100%);
    z-index: 0;
}
.ibca-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 880px;
}
.ibca-hero__eyebrow {
    font-family: var(--ff-display);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--ibca-gold-soft);
    margin-bottom: 2rem;
    font-weight: 400;
}
.ibca-hero__title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(2.8rem, 6.5vw, 5.5rem);
    line-height: 1.05;
    color: var(--ibca-cream);
    margin: 0 0 1.5rem;
    letter-spacing: -0.015em;
}
.ibca-hero__title em {
    font-style: italic;
    color: var(--ibca-gold-soft);
    font-weight: 300;
}
.ibca-hero__tagline {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: rgba(249,247,241,0.85);
    margin-bottom: 2.5rem;
    font-weight: 300;
}
.ibca-hero__ctas {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.ibca-hero__mountain-svg {
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: min(900px, 95%);
    opacity: 0.12;
    z-index: 1;
    pointer-events: none;
}

/* ---------- 6. THREE-CARD PILLARS ROW ---------- */
.ibca-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--ibca-rule);
    border-bottom: 1px solid var(--ibca-rule);
}
.ibca-pillar {
    padding: 3rem 2rem;
    text-align: center;
    border-right: 1px solid var(--ibca-rule);
}
.ibca-pillar:last-child { border-right: 0; }
.ibca-pillar__num {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 300;
    color: var(--ibca-gold);
    font-size: 1.1rem;
    margin-bottom: .75rem;
}
.ibca-pillar__title {
    font-family: var(--ff-display);
    font-size: 1.7rem;
    color: var(--ibca-navy);
    margin-bottom: 1rem;
}
.ibca-pillar__text {
    color: var(--ibca-stone);
    font-size: 0.97rem;
}
@media (max-width: 860px) {
    .ibca-pillars { grid-template-columns: 1fr; }
    .ibca-pillar { border-right: 0; border-bottom: 1px solid var(--ibca-rule); }
    .ibca-pillar:last-child { border-bottom: 0; }
}

/* ---------- 7. VERSE / SCRIPTURE CARD ---------- */
.ibca-verse {
    text-align: center;
    padding: var(--section-pad) 1.5rem;
    max-width: 820px;
    margin: 0 auto;
}
.ibca-verse__quote {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    color: var(--ibca-ink);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.ibca-verse__ref {
    font-family: var(--ff-display);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--ibca-gold);
}

/* ---------- 8. STAFF GRID ---------- */
.ibca-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.5rem;
    padding: 0;
    list-style: none;
    margin-top: 3rem;
}
.ibca-staff-card {
    text-align: center;
}
.ibca-staff-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.ibca-staff-card__photo {
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--ibca-cream-warm) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'><circle cx='50' cy='45' r='18' fill='none' stroke='%23C8A770' stroke-width='1.2'/><path d='M 20 105 C 20 80, 80 80, 80 105' fill='none' stroke='%23C8A770' stroke-width='1.2'/></svg>") center/60% no-repeat;
    border: 1px solid var(--ibca-rule);
    background-size: cover;
    background-position: center top;
    margin-bottom: 1.25rem;
    filter: grayscale(0.12);
    transition: filter .3s ease, transform .3s ease;
}
.ibca-staff-card a:hover .ibca-staff-card__photo {
    filter: grayscale(0);
    transform: translateY(-3px);
}
.ibca-staff-card__name {
    font-family: var(--ff-display);
    font-size: 1.4rem;
    color: var(--ibca-navy);
    margin: 0 0 .25rem;
    font-weight: 600;
}
.ibca-staff-card__role {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--ibca-gold);
    font-weight: 400;
}
.ibca-staff-card__tags {
    margin-top: .75rem;
    font-size: .75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ibca-stone);
}

/* ---------- 9. STAFF PROFILE PAGE ---------- */
.ibca-profile {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-pad) 1.5rem;
}
.ibca-profile__photo {
    width: 100%;
    aspect-ratio: 3/4;
    background-color: var(--ibca-cream-warm);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--ibca-rule);
}
.ibca-profile__name {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--ibca-navy);
    margin: 0 0 .5rem;
    line-height: 1.1;
}
.ibca-profile__titles {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ibca-gold);
    margin-bottom: 2rem;
}
.ibca-profile__meta {
    list-style: none;
    padding: 0; margin: 0 0 2rem;
    border-top: 1px solid var(--ibca-rule);
}
.ibca-profile__meta li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--ibca-rule);
    font-size: .95rem;
}
.ibca-profile__meta-label {
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: .72rem;
    color: var(--ibca-stone);
    padding-top: 3px;
}
.ibca-profile__bio p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    color: var(--ibca-ink-soft);
}
@media (max-width: 820px) {
    .ibca-profile { grid-template-columns: 1fr; gap: 2rem; }
    .ibca-profile__photo { max-width: 360px; }
}

/* ---------- 10. BELIEFS / NUMBERED LIST (EDITORIAL STYLE) ---------- */
/* Applies to <ol> or <ul> with class "ibca-beliefs" — used on Statement of Faith,
   Constitution articles, Mercy principles, etc. Each item is separated by a
   thin gold rule and prefixed with a large italic gold numeral. */
.ibca-beliefs,
ol.ibca-beliefs,
ul.ibca-beliefs {
    counter-reset: belief;
    list-style: none;
    padding: 0;
    max-width: 860px;
    margin: 3rem auto 0;
}
.ibca-beliefs li {
    counter-increment: belief;
    padding: 2rem 0 2rem 4.5rem;
    border-bottom: 1px solid var(--ibca-rule);
    position: relative;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ibca-ink-soft);
}
.ibca-beliefs li:last-child {
    border-bottom: 0;
}
.ibca-beliefs li::before {
    content: counter(belief, decimal-leading-zero);
    position: absolute;
    left: 0; top: 2.1rem;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 400;
    color: var(--ibca-gold);
    font-size: 1.8rem;
    letter-spacing: 0.05em;
}
/* Style italic scripture references inside beliefs distinctly — gold italic,
   smaller, sits like a citation line at the end of each belief */
.ibca-beliefs li em {
    display: inline-block;
    margin-top: 0.4rem;
    color: var(--ibca-gold);
    font-style: italic;
    font-family: var(--ff-display);
    font-size: 0.98rem;
    letter-spacing: 0.01em;
}

/* ---------- 10b. ARTICLES (Constitution-style numbered articles) ---------- */
/* Editorial styling for the Constitution's Articles I–V. Each paragraph
   following a heading gets generous editorial spacing and a gold rule above. */
.ibca-article-heading,
.wp-block-heading.ibca-article-heading,
h2.ibca-article-heading,
h3.ibca-article-heading {
    margin-top: 4rem !important;
    padding-top: 2.5rem;
    border-top: 1px solid var(--ibca-rule);
    position: relative;
}
.ibca-article-heading::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 80px;
    height: 1px;
    background: var(--ibca-gold);
}
/* The first article doesn't need a top rule (it sits below the page heading) */
.ibca-container > .wp-block-heading.ibca-article-heading:first-child,
.ibca-container > .ibca-article-heading:first-of-type {
    margin-top: 0 !important;
    padding-top: 0;
    border-top: 0;
}

/* ---------- 10c. SCRIPTURE REFERENCES (inline editorial citation) ---------- */
/* Italic gold citations within editable paragraphs that look like
   "(2 Timothy 3:16-17)" — styled as small caps gold italic */
.wp-block-paragraph em,
.wp-block-list-item em {
    color: inherit; /* leave default em alone outside .ibca-beliefs */
}

/* ---------- 11. SUNDAY SERVICE CARD ---------- */
.ibca-service-card {
    background: var(--ibca-navy);
    color: var(--ibca-cream);
    padding: clamp(3rem, 6vw, 5rem);
    text-align: center;
    border: 1px solid var(--ibca-gold);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.ibca-service-card::before,
.ibca-service-card::after {
    content: "";
    position: absolute;
    width: 24px; height: 24px;
    border: 1.5px solid var(--ibca-gold);
}
.ibca-service-card::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.ibca-service-card::after  { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.ibca-service-card h2 {
    color: var(--ibca-cream);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    margin: 0 0 1rem;
}
.ibca-service-card__time {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    color: var(--ibca-gold-soft);
    font-weight: 300;
    margin: 1.5rem 0;
    letter-spacing: -0.01em;
}
.ibca-service-card__details {
    font-style: italic;
    font-family: var(--ff-display);
    font-size: 1.15rem;
    opacity: .9;
    margin-bottom: 2rem;
}

/* ---------- 12. CONTACT / FOOTER ---------- */
.ibca-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: var(--container);
    margin: 3rem auto 0;
}
.ibca-contact-block h4 {
    font-family: var(--ff-display);
    font-size: 0.88rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ibca-gold);
    margin: 0 0 1rem;
    font-weight: 600;
}
.ibca-contact-block p,
.ibca-contact-block a {
    color: var(--ibca-ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    text-decoration: none;
    display: block;
}
@media (max-width: 760px) {
    .ibca-contact-grid { grid-template-columns: 1fr; }
}

.ibca-footer {
    background: var(--ibca-navy-deep);
    color: var(--ibca-cream);
    padding: 4rem 1.5rem 2rem;
    text-align: center;
}
.ibca-footer__logo { max-width: 360px; margin: 0 auto 2rem; }
.ibca-footer__socials {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin: 2rem 0;
}
.ibca-footer__socials a {
    width: 44px; height: 44px;
    border: 1px solid rgba(249,247,241,0.3);
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--ibca-cream);
    transition: all .2s ease;
}
.ibca-footer__socials a:hover {
    background: var(--ibca-gold);
    border-color: var(--ibca-gold);
}
.ibca-footer__copy {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: .6;
    margin-top: 2rem;
    font-family: var(--ff-display);
}

/* ---------- 13. HEADER / NAVIGATION (theme agnostic hooks) ---------- */
.site-header,
.wp-site-blocks > header {
    background: var(--ibca-cream);
    border-bottom: 1px solid var(--ibca-rule);
}
.site-title a,
.site-branding a { color: var(--ibca-navy); text-decoration: none; }

.main-navigation a,
.wp-block-navigation a {
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ibca-navy);
    text-decoration: none;
}

/* ---------- 14. UTILITY CLASSES ---------- */
.text-center { text-align: center; }
.mt-3 { margin-top: 3rem; } .mb-3 { margin-bottom: 3rem; }

/* Animate in on load */
.ibca-fade-in {
    animation: ibcaFadeIn .9s ease-out both;
}
@keyframes ibcaFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}