/*
Theme Name: Holy Name Parish
Theme URI: https://holynameparish.org.uk
Description: A modern, responsive WordPress theme for The Holy Name of Jesus Parish, South Leicestershire. Features newsletter management with PDF viewer, mass times scheduling, and full Gutenberg block editor support. No plugins required.
Author: Holy Name Parish
Author URI: https://holynameparish.org.uk
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: holyname-parish
Tags: church, parish, catholic, newsletter, events, gutenberg, block-editor, responsive, modern

Holy Name Parish Theme, Copyright 2025
Holy Name Parish Theme is distributed under the terms of the GNU GPL
*/

/* 
===========================================
HOLY NAME PARISH COLOR SCHEME
===========================================
Primary Burgundy: #722F37
Secondary Gold: #D4A574
Light Background: #F5F3F0
Dark Text: #3A1F23
*/

:root {
    --holyname-burgundy: #722F37;
    --holyname-gold: #D4A574;
    --holyname-light: #F5F3F0;
    --holyname-dark: #3A1F23;
    --holyname-burgundy-light: #8A3A45;
    --holyname-burgundy-dark: #5A2529;
    --holyname-white: #FFFFFF;
    
    --font-heading: 'Crimson Text', Georgia, serif;
    --font-body: Georgia, 'Times New Roman', serif;
    
    --container-width: 1200px;
    --spacing-small: 20px;
    --spacing-medium: 40px;
    --spacing-large: 60px;
}

/* ===========================================
   RESET & BASE STYLES
   =========================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--holyname-dark);
    background-color: var(--holyname-white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--holyname-burgundy);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--holyname-burgundy-light);
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--holyname-burgundy);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1.5rem;
}

/* ===========================================
   LAYOUT UTILITIES
   =========================================== */

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.site-content {
    min-height: 60vh;
    padding: var(--spacing-large) 0;
}

.content-area {
    width: 100%;
}

.site-main {
    padding: 0;
}

/* Two Column Layout */
.two-column-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.main-content-area {
    grid-column: 1;
}

.sidebar-area {
    grid-column: 2;
}

@media (max-width: 768px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
    
    .sidebar-area {
        grid-column: 1;
    }
}

/* ===========================================
   HEADER
   =========================================== */

.site-header {
    background: var(--holyname-white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 15px 20px;
}

.site-branding {
    text-align: center;
    padding: 10px 0;
}

/* Logo + Text Layout */
.site-branding-with-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.site-logo {
    flex-shrink: 0;
}

.site-logo img {
    max-height: 60px;
    width: auto;
}

.site-titles {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.site-titles .site-description {
    text-align: center;
}

.site-logo img {
    max-width: 400px;
    height: auto;
    margin: 0 auto;
}

.site-title {
    margin: 0;
    font-size: 2rem;
    color: var(--holyname-burgundy);
}

.site-title a {
    color: var(--holyname-burgundy);
}

.site-description {
    margin: 5px 0 0;
    font-size: 1rem;
    color: var(--holyname-gold);
}

/* Main Navigation */
.main-navigation {
    margin-top: 15px;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--holyname-dark);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.nav-menu a:hover,
.nav-menu .current-menu-item a {
    color: var(--holyname-burgundy);
    background: var(--holyname-light);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: var(--holyname-burgundy);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin: 10px auto;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        margin: 10px auto 0 auto;
    }

    /* Hide only the menu list on mobile, not the whole navigation
       so the toggle button stays visible */
    .nav-menu {
        display: none;
        flex-direction: column;
    }

    .main-navigation.toggled .nav-menu {
        display: flex;
    }

    .nav-menu a {
        text-align: center;
        border-bottom: 1px solid var(--holyname-light);
    }
}

/* ===========================================
   FOOTER
   =========================================== */

.site-footer {
    background: var(--holyname-burgundy);
    color: var(--holyname-white);
    padding: 60px 0 20px;
    margin-top: 80px;
}

.footer-widgets {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-widget h3,
.footer-widget h4 {
    color: var(--holyname-gold);
    margin-top: 0;
    font-size: 1.25rem;
}

.footer-widget p,
.footer-widget ul,
.footer-widget li {
    color: var(--holyname-white);
}

.footer-widget a {
    color: var(--holyname-white);
}

.footer-widget a:hover {
    color: var(--holyname-gold);
}

.footer-widget ul {
    list-style: none;
    padding: 0;
}

.footer-widget ul li {
    padding: 5px 0;
}

.site-info {
    background: var(--holyname-burgundy-dark);
    padding: 20px;
    text-align: center;
    font-size: 14px;
}

.site-info a {
    color: var(--holyname-gold);
}

@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ===========================================
   BUTTONS
   =========================================== */

.btn,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
    display: inline-block;
    padding: 12px 30px;
    background: var(--holyname-burgundy);
    color: var(--holyname-white);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--holyname-burgundy-light);
    color: var(--holyname-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(114, 47, 55, 0.3);
}

.btn-secondary {
    background: var(--holyname-gold);
    color: var(--holyname-dark);
}

.btn-secondary:hover {
    background: #C29564;
    color: var(--holyname-dark);
}

/* ===========================================
   HERO SECTION
   =========================================== */

.hero-section {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 80px 20px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(114, 47, 55, 0.85), rgba(114, 47, 55, 0.6));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-section h1 {
    color: white;
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-section p {
    font-size: 1.25rem;
    margin-bottom: 30px;
}

/* ===========================================
   NEWSLETTER FEATURES
   =========================================== */

.newsletter-item {
    background: white;
    padding: 25px;
    margin-bottom: 20px;
    border-left: 4px solid var(--holyname-burgundy);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.newsletter-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.newsletter-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.newsletter-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Newsletter Sidebar Widget */
.widget-newsletters {
    background: var(--holyname-light);
    padding: 20px;
    margin-bottom: 30px;
    border-left: 4px solid var(--holyname-burgundy);
}

.widget-newsletters h3 {
    margin-top: 0;
    font-size: 1.25rem;
}

.newsletter-list-item {
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

.newsletter-list-item:last-child {
    border-bottom: none;
}

.newsletter-list-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 8px; /* Gap from left edge */
}

.newsletter-icon {
    font-size: 24px;
    color: var(--holyname-burgundy);
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.newsletter-date {
    font-size: 12px;
    color: #666;
    display: block;
    margin-top: 3px;
}

/* PDF Viewer */
.pdf-actions {
    display: flex;
    gap: 15px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.pdf-actions .button {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.pdf-actions .button-primary {
    background: var(--holyname-burgundy);
    color: white;
}

.pdf-actions .button-primary:hover {
    background: var(--holyname-burgundy-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(114, 47, 55, 0.3);
}

.pdf-actions .button-secondary {
    background: white;
    color: var(--holyname-burgundy);
    border-color: var(--holyname-burgundy);
}

.pdf-actions .button-secondary:hover {
    background: var(--holyname-light);
}

.pdf-viewer-container {
    margin: 40px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}

.pdf-viewer-header {
    background: var(--holyname-light);
    padding: 20px 30px;
    border-bottom: 2px solid var(--holyname-gold);
}

.pdf-viewer-header h3 {
    margin: 0 0 8px 0;
    color: var(--holyname-burgundy);
}

.pdf-viewer-note {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.pdf-viewer-container iframe {
    width: 100%;
    min-height: 800px;
    border: none;
    display: block;
}

.pdf-download-btn {
    display: inline-block;
    margin: 20px 0;
}

/* ===========================================
   MASS TIMES
   =========================================== */

.mass-times-widget {
    background: var(--holyname-burgundy);
    color: white;
    padding: 25px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.mass-times-widget h3 {
    color: var(--holyname-gold);
    margin-top: 0;
}

.mass-day-group {
    margin-bottom: 20px;
}

.mass-day-group h4 {
    color: var(--holyname-gold);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.mass-time-item {
    padding: 5px 0;
    font-size: 0.9rem;
    display: flex;
    gap: 8px;
}

.mass-time-item:last-child {
    border-bottom: none;
}

/* Mass times grouped by location - COMPACT & FULL WIDTH - MATCH NEWSLETTERS */
.mass-location-group {
    background: rgba(255, 255, 255, 0.1) !important; /* Light box - same as newsletter */
    padding: 10px 0 !important; /* MATCH newsletter exactly */
    margin-bottom: 0 !important; /* No gap between items */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* Same as newsletter */
    border-radius: 0 !important; /* Remove rounded corners like newsletter */
}

.mass-location-group:last-child {
    border-bottom: none !important;
}

/* Church name - SMALLER & BOLD */
.mass-location-name {
    color: var(--holyname-gold);
    font-size: 0.9rem !important; /* Smaller - same as day in old version */
    font-weight: 700; /* Bold */
    margin: 0 0 5px 0;
    padding: 0 0 4px 8px; /* Match newsletter left padding */
    border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}

/* Day section - COMPACT */
.mass-day-group-compact {
    margin-bottom: 4px; /* Tighter spacing */
    padding-left: 8px;
}

.mass-day-group-compact:last-child {
    margin-bottom: 0;
}

/* Day label - SMALLER */
.mass-day-label {
    color: var(--holyname-gold);
    font-size: 0.85rem !important; /* Smaller than church name */
    font-weight: 600;
    margin-bottom: 2px;
}

/* Event item - SMALLEST, compact */
.mass-event-item {
    font-size: 0.8rem !important; /* Smallest */
    padding: 1px 0 1px 12px; /* Minimal vertical padding, indented */
    line-height: 1.3;
    display: flex;
    gap: 6px;
}

.mass-event-time {
    color: white;
    font-weight: 600;
    min-width: 50px; /* Keep times aligned */
}

.mass-event-name {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
}

/* OLD STYLES - Keep for backward compatibility */
.mass-location-group .mass-time-item {
    padding: 5px 0 5px 8px;
}

.mass-day {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    min-width: 80px;
}

.mass-time {
    font-weight: 600;
    color: white;
}

/* ===========================================
   CONTENT SECTIONS
   =========================================== */

.content-section {
    padding: 60px 0;
}

.content-section-light {
    background: var(--holyname-light);
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-description {
    font-size: 1.125rem;
    color: #666;
}

/* Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.card {
    background: white;
    padding: 30px;
    border-radius: 4px;
    border-bottom: 4px solid var(--holyname-burgundy);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.card-icon {
    font-size: 3rem;
    color: var(--holyname-burgundy);
    margin-bottom: 20px;
    text-align: center;
}

.card h3 {
    text-align: center;
    margin-bottom: 15px;
}

.card p {
    text-align: center;
    color: #666;
}

/* ===========================================
   FORMS
   =========================================== */

.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--holyname-dark);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* ===========================================
   GUTENBERG BLOCK EDITOR SUPPORT
   =========================================== */

.alignwide {
    max-width: 1200px;
}

.alignfull {
    max-width: 100%;
}

.wp-block-group {
    margin-bottom: 30px;
}

.has-burgundy-background-color {
    background-color: var(--holyname-burgundy);
}

.has-burgundy-color {
    color: var(--holyname-burgundy);
}

.has-gold-background-color {
    background-color: var(--holyname-gold);
}

.has-gold-color {
    color: var(--holyname-gold);
}

/* ===========================================
   PAGE TEMPLATES
   =========================================== */

/* Full Width Template */
.full-width-content {
    max-width: 900px;
    margin: 40px auto;
}

.full-width-content .featured-image {
    margin-bottom: 30px;
}

.full-width-content .featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Gallery Layout Template */
.gallery-page .hero-image-section {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.gallery-page .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-page .hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(114, 47, 55, 0.9), transparent);
    padding: 60px 0 40px;
}

.gallery-page .hero-title {
    color: white;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.gallery-content {
    max-width: 1200px;
    margin: 60px auto;
}

.gallery-content .wp-block-gallery {
    margin: 40px 0;
}

/* Two Column Split Template */
.two-column-page .featured-image {
    margin: 30px 0;
    text-align: center;
}

.two-column-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin: 40px 0;
}

.column-left,
.column-right {
    min-width: 0;
}

.column-left h2,
.column-right h2 {
    color: var(--holyname-burgundy);
    border-bottom: 2px solid var(--holyname-gold);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.column-left img,
.column-right img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 20px 0;
}

.column-full {
    grid-column: 1 / -1;
}

.editor-note {
    background: var(--holyname-light);
    padding: 15px;
    border-left: 4px solid var(--holyname-gold);
    margin: 30px 0;
}

/* ===========================================
   SIDEBAR & WIDGET AREA
   =========================================== */

.content-area-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 20px; /* Smaller gap between content and sidebar */
    margin-top: 40px;
}

.main-content {
    min-width: 0; /* Prevent grid blowout */
    background: var(--holyname-light); /* Light creamy background */
    padding: 30px;
    border-radius: 8px;
}

.widget-area {
    background: var(--holyname-light);
    padding: 30px;
    border-radius: 8px;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.widget-area .widget {
    margin-bottom: 40px;
}

.widget-area .widget:last-child {
    margin-bottom: 0;
}

.widget-area .widget-title {
    font-size: 1.25rem;
    color: var(--holyname-burgundy);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--holyname-gold);
}

/* Widget content styling */
.widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-area li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.widget-area li:last-child {
    border-bottom: none;
}

.widget-area a {
    color: var(--holyname-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.widget-area a:hover {
    color: var(--holyname-burgundy);
}

.view-all-newsletters {
    display: inline-block;
    margin-top: 15px;
    color: var(--holyname-burgundy) !important;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-all-newsletters:hover {
    color: var(--holyname-burgundy-dark) !important;
    transform: translateX(5px);
}

/* Mass Times Widget specific */
.mass-day-group {
    margin-bottom: 20px;
}

.mass-day-group h4 {
    color: var(--holyname-burgundy);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.mass-time-item {
    padding: 8px 0;
    font-size: 0.95rem;
}

.mass-time {
    font-weight: 600;
    color: var(--holyname-burgundy);
}

.mass-location {
    font-size: 0.85rem;
    color: #666;
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
    :root {
        --spacing-medium: 30px;
        --spacing-large: 40px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
    
    .hero-section {
        min-height: 400px;
        padding: 60px 20px;
    }
    
    .pdf-viewer-container iframe {
        min-height: 600px;
    }
    
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    /* Stack sidebar on mobile */
    .content-area-with-sidebar {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .widget-area {
        position: static;
        padding: 20px;
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
    }
    
    /* Two column template - stack on mobile */
    .two-column-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Gallery hero - reduce height on mobile */
    .gallery-page .hero-image-section {
        height: 300px;
    }
    
    .gallery-page .hero-overlay {
        padding: 40px 0 20px;
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
    .site-header,
    .site-footer,
    .menu-toggle,
    .sidebar-area {
        display: none;
    }
    
    .site-content {
        padding: 0;
    }
}