Hello World!

/* ============================================================
ONE TRUE VINE MINISTRIES — Custom CSS for WordPress.com
Theme: HOAT (block-based / Full Site Editing)
Brand Palette: Obsidian, Royal Plum, Antique Gold, Bronze,
Pewter Silver, Warm White
============================================================ */

/* — CSS Custom Properties (Brand Palette) — */
:root {
/* Core Brand Colors */
–otv-obsidian: #151316;
–otv-plum: #4A285C;
–otv-gold: #C6A15B;
–otv-bronze: #8A5A35;
–otv-silver: #8E8D91;
–otv-warm-white: #F7F3EA;

/* Gradients */
–otv-gold-gradient: linear-gradient(135deg, #8F6A32 0%, #C6A15B 25%, #E0C47A 50%, #A9823F 100%);
–otv-silver-gradient: linear-gradient(135deg, #707174 0%, #B7B7B5 25%, #E2E2DF 50%, #929397 100%);

/* Semantic Tokens */
–otv-bg: var(–otv-warm-white);
–otv-text: var(–otv-obsidian);
–otv-primary: var(–otv-plum);
–otv-accent: var(–otv-gold);
–otv-border: rgba(142, 141, 145, 0.25);
–otv-card-bg: #FFFFFF;

/* Typography */
–otv-heading-font: ‘Georgia’, ‘Times New Roman’, serif;
–otv-body-font: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, sans-serif;
}

/* — Global Typography — */
body {
font-family: var(–otv-body-font);
background-color: var(–otv-bg);
color: var(–otv-text);
line-height: 1.7;
font-size: 17px;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
font-family: var(–otv-heading-font);
color: var(–otv-primary);
font-weight: 600;
letter-spacing: -0.01em;
}

h1, .wp-block-heading h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.15;
}

h2 {
font-size: clamp(1.6rem, 4vw, 2.5rem);
line-height: 1.2;
}

h3 {
font-size: clamp(1.3rem, 3vw, 1.8rem);
}

p {
color: var(–otv-text);
line-height: 1.75;
}

a {
color: var(–otv-plum);
text-decoration: none;
transition: color 0.2s ease;
}

a:hover {
color: var(–otv-gold);
}

/* — Site Header / Navigation — */
.wp-block-template-part.site-header,
header.wp-block-template-part {
background-color: var(–otv-obsidian) !important;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Header logo */
.site-header img,
header.wp-block-template-part img {
max-height: 80px;
width: auto;
}

/* Navigation links */
.wp-block-navigation .wp-block-navigation-item__content {
color: var(–otv-warm-white) !important;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 0.5rem 0.75rem;
transition: color 0.2s ease, border-bottom 0.2s ease;
border-bottom: 2px solid transparent;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
color: var(–otv-gold) !important;
border-bottom: 2px solid var(–otv-gold);
}

/* Current/active nav item */
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
color: var(–otv-gold) !important;
border-bottom: 2px solid var(–otv-gold);
}

/* Mobile nav toggle */
.wp-block-navigation__responsive-container .wp-block-navigation__toggle {
color: var(–otv-warm-white);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
background-color: var(–otv-obsidian);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
color: var(–otv-warm-white) !important;
font-size: 1.2rem;
padding: 0.75rem 0;
}

/* — Hero Section — */
.wp-block-cover.hero-section,
.otv-hero {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, var(–otv-obsidian) 0%, #2A1A33 50%, var(–otv-plum) 100%) !important;
}

.wp-block-cover.hero-section .wp-block-cover__inner-container,
.otv-hero .wp-block-cover__inner-container {
z-index: 2;
max-width: 800px;
padding: 2rem;
}

.otv-hero h1 {
color: var(–otv-warm-white) !important;
font-size: clamp(2.2rem, 6vw, 4rem);
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
}

.otv-hero p {
color: rgba(247, 243, 234, 0.9) !important;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
margin-bottom: 2rem;
}

/* — Buttons — */
.wp-block-button .wp-block-button__link,
.otv-btn {
font-family: var(–otv-body-font);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.85rem 2rem;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
}

/* Primary button — Royal Plum */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.otv-btn-primary {
background-color: var(–otv-plum) !important;
color: var(–otv-warm-white) !important;
border: 2px solid var(–otv-plum);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.otv-btn-primary:hover {
background-color: transparent !important;
color: var(–otv-gold) !important;
border: 2px solid var(–otv-gold);
box-shadow: 0 4px 15px rgba(198, 161, 91, 0.3);
}

/* Gold button — Antique Gold */
.otv-btn-gold {
background: var(–otv-gold-gradient) !important;
color: var(–otv-obsidian) !important;
border: 2px solid var(–otv-gold);
font-weight: 700;
}

.otv-btn-gold:hover {
box-shadow: 0 6px 20px rgba(198, 161, 91, 0.4);
transform: translateY(-1px);
}

/* Outline button — Gold border */
.wp-block-button.is-style-outline .wp-block-button__link,
.otv-btn-outline {
background: transparent !important;
color: var(–otv-gold) !important;
border: 2px solid var(–otv-gold);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.otv-btn-outline:hover {
background-color: var(–otv-gold) !important;
color: var(–otv-obsidian) !important;
}

/* — Mission Cards (like pfm-nassau.org program cards) — */
.otv-card,
.wp-block-column.otv-card {
background-color: var(–otv-card-bg);
border: 1px solid var(–otv-border);
border-radius: 8px;
padding: 2rem;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 1.5rem;
}

.otv-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(74, 40, 92, 0.12);
}

.otv-card h3 {
color: var(–otv-plum);
margin-bottom: 0.75rem;
}

.otv-card p {
color: var(–otv-silver);
font-size: 0.95rem;
}

.otv-card-icon {
width: 64px;
height: 64px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: var(–otv-gold-gradient);
border-radius: 50%;
font-size: 1.8rem;
color: var(–otv-obsidian);
}

/* — Service Schedule Block — */
.otv-schedule {
background-color: var(–otv-obsidian);
color: var(–otv-warm-white);
padding: 3rem 2rem;
border-radius: 8px;
}

.otv-schedule h2 {
color: var(–otv-gold) !important;
text-align: center;
margin-bottom: 2rem;
}

.otv-schedule-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid rgba(142, 141, 145, 0.2);
flex-wrap: wrap;
gap: 0.5rem;
}

.otv-schedule-item:last-child {
border-bottom: none;
}

.otv-schedule-day {
font-weight: 600;
color: var(–otv-warm-white);
font-size: 1.1rem;
}

.otv-schedule-time {
color: var(–otv-gold);
font-weight: 600;
}

.otv-schedule-note {
width: 100%;
font-size: 0.85rem;
color: var(–otv-silver);
margin-top: 0.25rem;
}

/* — Store / Product Page — */
.otv-store-hero {
background: linear-gradient(135deg, var(–otv-obsidian) 0%, var(–otv-plum) 100%);
color: var(–otv-warm-white);
text-align: center;
padding: 4rem 2rem;
border-radius: 8px;
margin-bottom: 2rem;
}

.otv-store-hero h1 {
color: var(–otv-gold) !important;
}

.otv-product-card {
background-color: var(–otv-card-bg);
border: 1px solid var(–otv-border);
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 2rem;
}

.otv-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(74, 40, 92, 0.15);
}

.otv-product-image {
width: 100%;
height: 400px;
object-fit: cover;
background-color: var(–otv-warm-white);
}

.otv-product-info {
padding: 1.5rem;
}

.otv-product-info h3 {
color: var(–otv-plum);
margin-bottom: 0.5rem;
}

.otv-product-price {
font-size: 1.5rem;
font-weight: 700;
color: var(–otv-bronze);
margin-bottom: 1rem;
}

.otv-buy-button {
display: inline-block;
background: var(–otv-gold-gradient);
color: var(–otv-obsidian) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.85rem 2rem;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
}

.otv-buy-button:hover {
box-shadow: 0 6px 20px rgba(198, 161, 91, 0.4);
transform: translateY(-1px);
color: var(–otv-obsidian) !important;
}

/* — Calendar Page — */
.otv-calendar-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
border-radius: 8px;
border: 1px solid var(–otv-border);
background-color: var(–otv-warm-white);
}

.otv-calendar-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}

/* — Tithe/Give Section — */
.otv-give-section {
background: linear-gradient(135deg, var(–otv-plum) 0%, var(–otv-obsidian) 100%);
text-align: center;
padding: 4rem 2rem;
border-radius: 8px;
color: var(–otv-warm-white);
}

.otv-give-section h2 {
color: var(–otv-gold) !important;
margin-bottom: 1rem;
}

.otv-give-section p {
color: rgba(247, 243, 234, 0.85) !important;
margin-bottom: 2rem;
}

.otv-tithe-embed {
margin: 2rem auto;
max-width: 600px;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(–otv-gold);
}

.otv-tithe-embed iframe {
width: 100%;
min-height: 700px;
border: none;
}

/* — Contact Section — */
.otv-contact-card {
background-color: var(–otv-card-bg);
border: 1px solid var(–otv-border);
border-radius: 8px;
padding: 2.5rem;
text-align: center;
}

.otv-contact-card a {
color: var(–otv-plum);
font-weight: 600;
}

.otv-contact-card a:hover {
color: var(–otv-gold);
}

.otv-contact-info-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0.75rem 0;
font-size: 1.1rem;
}

/* — Footer — */
footer.wp-block-template-part,
.site-footer {
background-color: var(–otv-obsidian) !important;
color: var(–otv-silver) !important;
padding: 2.5rem 1.5rem;
text-align: center;
}

.site-footer a,
footer.wp-block-template-part a {
color: var(–otv-gold) !important;
}

.site-footer p,
footer.wp-block-template-part p {
color: var(–otv-silver) !important;
font-size: 0.9rem;
}

/* — Section Divider (gold line) — */
.otv-divider {
width: 80px;
height: 3px;
background: var(–otv-gold-gradient);
margin: 1.5rem auto;
border-radius: 2px;
}

/* — Quote/Scripture Block — */
.otv-scripture {
font-family: var(–otv-heading-font);
font-style: italic;
font-size: clamp(1.3rem, 3vw, 1.8rem);
color: var(–otv-plum);
text-align: center;
max-width: 800px;
margin: 3rem auto;
line-height: 1.5;
padding: 2rem;
position: relative;
}

.otv-scripture::before {
content: ‘”‘;
font-size: 4rem;
color: var(–otv-gold);
position: absolute;
top: -0.5rem;
left: 50%;
transform: translateX(-50%);
opacity: 0.3;
}

.otv-scripture-reference {
display: block;
font-style: normal;
font-weight: 600;
color: var(–otv-gold);
margin-top: 1rem;
font-size: 1rem;
letter-spacing: 0.05em;
}

/* — Utility Classes — */
.otv-text-center { text-align: center; }
.otv-text-gold { color: var(–otv-gold) !important; }
.otv-text-plum { color: var(–otv-plum) !important; }
.otv-text-warm { color: var(–otv-warm-white) !important; }
.otv-bg-obsidian { background-color: var(–otv-obsidian) !important; }
.otv-bg-plum { background-color: var(–otv-plum) !important; }
.otv-bg-warm { background-color: var(–otv-warm-white) !important; }
.otv-section { padding: 4rem 0; }
.otv-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* — Responsive: Tablet — */
@media screen and (max-width: 1024px) {
.otv-container { padding: 0 1rem; }
.otv-section { padding: 3rem 0; }

.wp-block-columns.otv-cards-row {
gap: 1.5rem;
}
}

/* — Responsive: Mobile — */
@media screen and (max-width: 768px) {
body { font-size: 16px; }

h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 5vw, 2rem); }

.wp-block-cover.hero-section,
.otv-hero {
min-height: 50vh;
}

.otv-section { padding: 2.5rem 0; }

/* Stack columns on mobile */
.wp-block-columns {
flex-direction: column;
gap: 1rem;
}

.wp-block-column {
flex-basis: 100% !important;
}

/* Schedule items stack nicely */
.otv-schedule-item {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}

.otv-schedule {
padding: 2rem 1.25rem;
}

/* Product image smaller on mobile */
.otv-product-image {
height: 300px;
}

/* Calendar gets taller on mobile */
.otv-calendar-wrapper {
padding-bottom: 75%;
}

/* Contact info stacks */
.otv-contact-info-item {
font-size: 1rem;
}

/* Buttons full width on mobile */
.wp-block-button {
width: 100%;
}

.wp-block-button .wp-block-button__link,
.otv-btn,
.otv-buy-button {
width: 100%;
text-align: center;
display: block;
}

/* Scripture block */
.otv-scripture {
font-size: 1.2rem;
padding: 1.5rem;
}
}

/* — Responsive: Small Mobile — */
@media screen and (max-width: 480px) {
body { font-size: 15px; }

.otv-schedule-day { font-size: 1rem; }
.otv-schedule-time { font-size: 0.95rem; }

.otv-product-image { height: 250px; }
.otv-product-info { padding: 1rem; }
.otv-product-price { font-size: 1.25rem; }

.otv-tithe-embed iframe { min-height: 600px; }

.otv-calendar-wrapper { padding-bottom: 100%; }
}

/* — Print styles — */
@media print {
.site-header, .site-footer, .wp-block-navigation, .otv-buy-button, .otv-btn {
display: none;
}
body { color: #000; background: #fff; }
}