/*
=== CATHCART UNITED FREE CHURCH — STYLESHEET ===

=== CLASS REFERENCE ===

 1. RESET & BASE       — Universal reset, body defaults, images, links
 2. LAYOUT             — .container (centred max-width wrapper)
 3. HEADER             — header, .header-inner, .logo
 4. NAVIGATION         — nav, nav ul/li/a, hover and active states
 4a.DROPDOWNS          — Submenu show/hide, positioning, offset styling, active subitem
 5. HERO               — .hero, .hero-placeholder, .hero-image, .hero-strapline
 6. MAIN CONTENT       — main, h1–h4, p, ul, ol
 7. NOTICE CARD        — .notice-card (ministry opportunity / announcements)
 8. SECTION CARDS      — .section-card, .section-card-header, .section-card-body
 9. PHOTO ROW          — .photo-row, .photo-placeholder
 9b.CARD WITH IMAGE    — .card-content-with-image, .card-text, .card-image
10. HOME — COMING UP   — .coming-up, .coming-up-list, .coming-up-card, .coming-up-date, .coming-up-info
10b.HOME — LATEST NEWS — .news-section, .news-item
10c.HOME — FEATURES    — .feature-panels, .feature-panel
10d.HOME — DENOMINATION— .denomination-strip
11. SCRIPTURE CARDS    — .scripture-card, .scripture-ref
12. OFF THE CUF        — .cuf-features, .cuf-feature
13. VIDEO              — .video-container, .video-embed (YouTube iframe)
14. SERMONS            — .sermon-grid, .sermon-card, .sermon-info, .sermon-date,
                         .sermon-title, .sermon-passage, .sermon-preacher, .sermon-duration
15. MAP                — .map-container
16. FORMS              — .prayer-form, .contact-form, .form-group, .form-check,
                         .required, .btn-submit
17. SOCIAL LINKS       — .social-links, .social-link
18. BUDDY LIST         — .buddy-list
19. EVENTS             — .event-month, .event-list, .event-card, .event-meta
20. FOOTER             — footer
21. RESPONSIVE         — @media max-width 600px
*/


/* ===================================================
   1. RESET & BASE
   Removes browser default styles and sets consistent
   defaults for all elements. This is the foundation
   everything else builds on. box-sizing: border-box
   ensures padding is included within element widths.
   =================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333333;
    background-color: #ffffff;
}

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

a {
    color: #1a4b7a;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* ===================================================
   2. LAYOUT
   .container centres content and limits max width.
   Used inside every major section (header, nav, main,
   footer) so backgrounds span full width while content
   stays centred and readable. margin: 0 auto with a
   max-width is the standard CSS centring technique.
   =================================================== */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}


/* ===================================================
   3. HEADER
   Full-width navy banner containing the church logo.
   .header-inner uses flexbox so logo and any future
   elements (e.g. tagline) align vertically centred.
   .logo fixes the image height; width: auto prevents
   distortion by maintaining the aspect ratio.
   =================================================== */

header {
    background-color: #1a4b7a;
    color: #ffffff;
    padding: 20px 0;
}

.header-inner {
    display: flex;
    align-items: center;
}

.logo {
    height: 80px;
    width: auto;
}


/* ===================================================
   4. NAVIGATION
   Horizontal navigation bar directly below the header.
   <ul> items are displayed as a flex row. Each <a> is
   display:block so the entire cell is clickable, not
   just the text. white-space: nowrap prevents multi-
   word items (How to Find Us) wrapping onto two lines.
   position: relative and z-index: 100 ensure dropdown
   menus appear on top of page content below the nav.
   =================================================== */

nav {
    background-color: #163d63;
    padding: 0;
    position: relative;
    z-index: 100;
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

nav ul li {
    position: relative;
}

nav ul li a {
    display: block;
    color: #ffffff;
    padding: 12px 18px;
    font-size: 0.9em;
    font-family: Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

nav ul li a:hover,
nav ul li a.active {
    background-color: #1a4b7a;
    text-decoration: none;
}

nav ul li:hover > a {
    background-color: #1a4b7a;
}


/* ===================================================
   4a. NAVIGATION — DROPDOWNS
   Submenu <ul> elements are hidden by default and
   shown on hover. position: absolute removes them from
   document flow so they float over page content.
   top: 100% positions the dropdown directly below its
   parent <li>. The coloured left border and slightly
   lighter background visually distinguish submenus
   from the main nav. .active on a submenu link shows
   a purple border to indicate the current subpage.
   =================================================== */

nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1e4f85;
    border-left: 3px solid rgba(255,255,255,0.3);
    min-width: 180px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    flex-direction: column;
}

nav ul li:hover ul {
    display: flex;
}

nav ul li ul li a {
    padding: 10px 22px;
    font-size: 0.85em;
    border-top: 1px solid rgba(255,255,255,0.1);
}

nav ul li ul li a:hover {
    background-color: #1a4b7a;
}

nav ul li ul li a.active {
    background-color: #14395C;
    border-left: 5px solid #DEBDEF;
}


/* ===================================================
   5. HERO SECTION
   Full-width image area at the top of the home page
   with strapline text overlaid. .hero-placeholder is
   used until a real photo is available — it shows the
   logo at reduced opacity as a temporary stand-in.
   When a real photo is used, replace the placeholder
   div with <img class="hero-image"> inside .hero.
   The strapline uses a gradient overlay for readability.
   =================================================== */

.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #1a4b7a;
}

.hero-placeholder {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #1a4b7a 0%, #0f2d4a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-placeholder img {
    height: 250px;
    width: auto;
    opacity: 0.5;
    object-fit: cover;
    display: block;
}

.hero-strapline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #ffffff;
    text-align: center;
    padding: 50px 20px 50px;
    font-family: Georgia, serif;
    font-size: 1.3em;
    font-style: italic;
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}


/* ===================================================
   6. MAIN CONTENT
   Padding for the main content area. Heading colours
   use the navy brand colour. h2 has a bottom border
   to separate major page sections. Headings use
   font-weight: normal as size alone indicates hierarchy.
   List items have left margin for standard indentation.
   =================================================== */

main {
    padding: 40px 0;
}

h1, h2, h3 {
    color: #1a4b7a;
    margin-bottom: 15px;
    font-weight: normal;
}

h2 {
    font-size: 1.6em;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.2em;
    margin-top: 25px;
}

h4 {
    color: #1a4b7a;
    margin: 20px 0 8px 0;
    font-size: 1em;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

p {
    margin-bottom: 15px;
}

ul, ol {
    margin: 0 0 15px 25px;
}

ul li, ol li {
    margin-bottom: 5px;
}


/* ===================================================
   7. NOTICE CARD
   Teal highlighted box for important announcements
   such as the ministry opportunity. Sits at the top
   of the home page to draw immediate attention.
   Links inside use the light purple accent colour
   for visibility against the teal background.
   =================================================== */

.notice-card {
    background-color: #1F5E6B;
    color: #ffffff;
    padding: 25px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.notice-card h3 {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.notice-card p {
    color: #ffffff;
    margin-bottom: 8px;
}

.notice-card p:last-child {
    margin-bottom: 0;
}

.notice-card a {
    color: #DEBDEF;
    text-decoration: underline;
}

.notice-card a:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* ===================================================
   8. SECTION CARDS
   Reusable card component used throughout the site.
   The navy header band and light grey body visually
   group related content. overflow: hidden on the card
   ensures the border-radius clips the header corners.
   Adding id="anchor-name" to .section-card enables
   direct linking from navigation submenu items.
   =================================================== */

.section-card {
    margin-bottom: 30px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    overflow: hidden;
}

.section-card-header {
    background-color: #1a4b7a;
    padding: 12px 20px;
}

.section-card-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 1.2em;
    font-weight: normal;
}

.section-card-body {
    padding: 20px;
    background-color: #f0f4f8;
}

.section-card-body h4 {
    color: #1a4b7a;
    margin: 20px 0 8px 0;
    font-size: 1em;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.section-card-body h4:first-child {
    margin-top: 0;
}


/* ===================================================
   9. PHOTO ROW
   Displays multiple photos side by side using flexbox.
   flex-wrap allows images to stack on narrow screens.
   .photo-placeholder shows the logo at reduced opacity
   as a temporary stand-in for real photographs.
   Replace the placeholder div with a real <img> tag
   once photos are available.
   =================================================== */

.photo-row {
    display: flex;
    gap: 15px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.photo-placeholder {
    flex: 1;
    min-width: 150px;
    background-color: #dddddd;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    min-height: 130px;
}

.photo-placeholder img {
    max-height: 120px;
    width: auto;
    opacity: 0.75;
}


/* ===================================================
   9b. CARD WITH IMAGE
   Places descriptive text alongside a single image
   inside a section card body. .card-text takes all
   available space via flex: 1. .card-image stays its
   natural size via flex-shrink: 0. On mobile the
   responsive rule stacks them vertically.
   =================================================== */

.card-content-with-image {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.card-text {
    flex: 1;
}

.card-image {
    flex-shrink: 0;
}

.card-image img {
    max-height: 200px;
    width: auto;
    border-radius: 4px;
}


/* ===================================================
   10. HOME PAGE — COMING UP
   Compact preview of the next 1-2 upcoming events.
   Each card has a date badge, event title and brief
   detail. Designed to be scannable at a glance with
   a clear link to the full events page.
   =================================================== */

.coming-up {
    margin-bottom: 30px;
}

.coming-up-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

.coming-up-card {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    border: 1px solid #dddddd;
    border-left: 4px solid #1F5E6B;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 0 4px 4px 0;
}

.coming-up-date {
    background-color: #1a4b7a;
    color: #ffffff;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 0.8em;
    min-width: 55px;
    flex-shrink: 0;
    line-height: 1.3;
}

.coming-up-date strong {
    display: block;
    font-size: 1.6em;
    line-height: 1;
}

.coming-up-info h4 {
    color: #1a4b7a;
    margin: 0 0 4px 0;
    font-size: 1em;
    font-family: Arial, sans-serif;
}

.coming-up-info p {
    margin: 0;
    font-size: 0.9em;
    color: #555555;
    font-family: Arial, sans-serif;
}

/* Standard inline arrow link used for "Find out more →" throughout the site.
   Applied as class="section-link" on <a> tags. Keeps all such links visually
   consistent — navy colour, slightly bolder than body text, no underline until
   hover. The → arrow is part of the link text in the HTML, not added via CSS,
   so it works in all browsers and screen readers. */
.section-link {
    color: #1a4b7a;
    font-weight: 600;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 0.95em;
}

.section-link:hover {
    text-decoration: underline;
}

/* more-events-link shares the section-link style with a small top margin
   to sit below the Coming Up card list */
.more-events-link {
    color: #1a4b7a;
    font-weight: 600;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 0.95em;
    display: inline-block;
    margin-top: 10px;
}

.more-events-link:hover {
    text-decoration: underline;
}


/* ===================================================
   10b. HOME PAGE — LATEST NEWS
   News items distinct from events. News is about the
   church community (e.g. covenant renewal, pastoral
   updates). Left border accent uses the navy brand
   colour to distinguish from events (teal accent).
   =================================================== */

.news-section {
    margin-bottom: 30px;
}

.news-item {
    border-left: 4px solid #1a4b7a;
    padding: 15px 20px;
    background-color: #f0f4f8;
    margin-bottom: 15px;
    border-radius: 0 4px 4px 0;
}

.news-item h3 {
    margin-top: 0;
    color: #1a4b7a;
    font-size: 1.1em;
    margin-bottom: 8px;
}

.news-item p {
    margin-bottom: 0;
    font-size: 0.95em;
}


/* ===================================================
   10c. HOME PAGE — FEATURE PANELS
   Three equal-width panels highlighting Meetings,
   Prayer and Contact Us. Navy background with white
   text and a semi-transparent button link. flex: 1
   makes panels share available space equally.
   flex-wrap allows stacking on narrow screens.
   =================================================== */

.feature-panels {
    display: flex;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.feature-panel {
    flex: 1;
    min-width: 200px;
    background-color: #1a4b7a;
    color: #ffffff;
    padding: 25px;
    border-radius: 4px;
    text-align: center;
}

.feature-panel h3 {
    color: #ffffff;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
}

.feature-panel p {
    color: rgba(255,255,255,0.85);
    font-size: 0.9em;
    margin-bottom: 15px;
}

.feature-panel a {
    display: inline-block;
    background-color: rgba(255,255,255,0.15);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.4);
}

.feature-panel a:hover {
    background-color: rgba(255,255,255,0.3);
    text-decoration: none;
}


/* ===================================================
   10d. HOME PAGE — DENOMINATION STRIP
   A simple informational strip linking to the United
   Free Church of Scotland denomination website.
   Teal left border distinguishes it from news items.
   =================================================== */

.denomination-strip {
    background-color: #f0f4f8;
    border-left: 4px solid #1F5E6B;
    padding: 15px 20px;
    margin-bottom: 30px;
    border-radius: 0 4px 4px 0;
    font-family: Arial, sans-serif;
    font-size: 0.95em;
}

.denomination-strip p {
    margin-bottom: 0;
}


/* ===================================================
   11. SCRIPTURE CARDS
   Teal quote cards for Bible verses and prayers.
   Distinct from the navy section card headers so
   devotional content stands out visually.
   Colour #1F5E6B passes WCAG AAA contrast with white.
   =================================================== */

.scripture-card {
    background-color: #1F5E6B;
    color: #ffffff;
    padding: 25px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    font-style: italic;
    line-height: 1.8;
}

.scripture-card p {
    color: #ffffff;
    margin-bottom: 8px;
}

.scripture-card p:last-child {
    margin-bottom: 0;
}

.scripture-ref {
    font-style: normal;
    font-size: 0.85em;
    opacity: 0.8;
    text-align: right;
    margin-top: 10px;
}


/* ===================================================
   12. OFF THE CUF
   Three equal-width feature boxes for Food, Friendship
   and Faith. Uses the teal colour to give Off the CUF
   its own visual identity distinct from the main navy
   colour scheme.
   =================================================== */

.cuf-features {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.cuf-feature {
    flex: 1;
    min-width: 200px;
    background-color: #1F5E6B;
    color: #ffffff;
    padding: 25px;
    border-radius: 4px;
    text-align: center;
}

.cuf-feature h3 {
    color: #ffffff;
    font-size: 1.3em;
    margin-bottom: 10px;
    margin-top: 0;
}

.cuf-feature p {
    color: #ffffff;
    margin: 0;
    font-size: 0.95em;
}

/* Colour modifiers for the three Off the CUF feature panels */
.cuf-feature--food       { background-color: #a63d2f; } /* deep red     */
.cuf-feature--friendship { background-color: #1a4b7a; } /* site navy    */
.cuf-feature--faith      { background-color: #2e7d52; } /* forest green */


/* ===================================================
   13. VIDEO
   .video-embed is the correct class for YouTube iframes.
   The padding-bottom: 56.25% trick maintains a 16:9
   aspect ratio at any container width (56.25% = 9/16).
   The iframe is absolutely positioned to fill the
   container. .video-container is for native HTML5 video.
   =================================================== */

.video-container {
    position: relative;
    width: 100%;
    margin: 15px 0;
}

.video-container video {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 4px;
    margin: 15px 0;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* ===================================================
   14. SERMONS
   CSS Grid for the sermon card layout. auto-fill with
   minmax(320px, 1fr) creates as many columns as fit,
   each at least 320px wide. This avoids the overflow
   issues that flexbox causes with variable-height cards.
   Each card contains a responsive video embed and
   sermon metadata below it.
   =================================================== */

.sermon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.sermon-card {
    border: 1px solid #dddddd;
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
}

.sermon-info {
    padding: 15px;
}

.sermon-date {
    font-family: Arial, sans-serif;
    font-size: 0.8em;
    color: #666666;
    margin-bottom: 5px;
}

.sermon-title {
    font-size: 1em;
    color: #1a4b7a;
    font-weight: bold;
    margin-bottom: 5px;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.sermon-passage {
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    color: #555555;
    font-style: italic;
    margin-bottom: 5px;
}

.sermon-preacher {
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    color: #333333;
    margin-bottom: 5px;
}

.sermon-duration {
    font-family: Arial, sans-serif;
    font-size: 0.8em;
    color: #888888;
}


/* ===================================================
   15. MAP
   Google Maps iframe container. border-radius and
   overflow: hidden clip the iframe corners to match
   the site's general border-radius styling.
   =================================================== */

.map-container {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #dddddd;
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}


/* ===================================================
   16. FORMS
   Shared styles for prayer request and contact forms.
   input:focus replaces the browser default outline
   with a branded navy highlight — removing the outline
   entirely without replacing it would be an accessibility
   failure for keyboard users. .required uses red for
   universally understood required field indication.
   =================================================== */

.prayer-form,
.contact-form {
    margin-top: 15px;
}

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

.form-group label {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    margin-bottom: 5px;
    color: #333333;
    font-weight: bold;
}

.required {
    color: #cc0000;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 0.95em;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1a4b7a;
    box-shadow: 0 0 0 2px rgba(26,75,122,0.2);
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-check input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.form-check label {
    font-weight: normal;
    cursor: pointer;
}

.btn-submit {
    background-color: #1a4b7a;
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    font-size: 1em;
    font-family: Arial, sans-serif;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.btn-submit:hover {
    background-color: #163d63;
}

.form-note {
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    color: #666666;
    margin-top: 15px;
    font-style: italic;
}


/* ===================================================
   17. SOCIAL LINKS
   Horizontal row of button-style links for social
   media profiles (used for Radiate on the Partnerships
   page). flex-wrap allows stacking on narrow screens.
   =================================================== */

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.social-link {
    display: inline-block;
    background-color: #1a4b7a;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    text-decoration: none;
}

.social-link:hover {
    background-color: #163d63;
    text-decoration: none;
}

/* Social media icon images (e.g. Facebook, Instagram logos) */
.social-icon {
    width: 32px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}


/* ===================================================
   18. BUDDY LIST
   Styled list for Buddy Churches with dividers between
   items. :last-child pseudo-class removes the border
   from the final item to avoid a double border against
   the card edge.
   =================================================== */

.buddy-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.buddy-list li {
    padding: 10px 0;
    border-bottom: 1px solid #dddddd;
    font-family: Arial, sans-serif;
}

.buddy-list li:last-child {
    border-bottom: none;
}

.buddy-list li a {
    font-size: 1.05em;
}


/* ===================================================
   19. EVENTS
   Full events listing page. Events are grouped by
   month using .event-month headings. Each .event-card
   has a teal left border (distinct from news which
   uses navy). .event-meta shows date/time/location
   in a smaller sans-serif font above the description.
   =================================================== */

.event-month {
    font-size: 1.3em;
    color: #1a4b7a;
    border-bottom: 2px solid #1a4b7a;
    padding-bottom: 8px;
    margin: 30px 0 15px 0;
    font-weight: normal;
}

.event-month:first-of-type {
    margin-top: 0;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.event-card {
    border: 1px solid #dddddd;
    border-left: 4px solid #1F5E6B;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 0 4px 4px 0;
}

.event-card h3 {
    margin-top: 0;
    color: #1a4b7a;
    font-size: 1.1em;
}

.event-meta {
    font-size: 0.85em;
    color: #666666;
    font-family: Arial, sans-serif;
    margin-bottom: 10px;
    font-weight: bold;
}

.event-card img {
    margin-top: 12px;
    border-radius: 4px;
    max-height: 200px;
    width: auto;
    display: block;
}

.event-card p:last-child {
    margin-bottom: 0;
}


/* ===================================================
   20. FOOTER
   Full-width footer matching the header colour scheme.
   Includes charity registration number for compliance.
   Footer links use a lighter blue for legibility
   against the navy background.
   =================================================== */

footer {
    background-color: #1a4b7a;
    color: #ffffff;
    text-align: center;
    padding: 25px 20px;
    font-size: 0.85em;
    font-family: Arial, sans-serif;
    margin-top: 40px;
}

footer p {
    margin-bottom: 5px;
    color: #ffffff;
}

footer p:last-child {
    margin-bottom: 0;
    font-size: 0.85em;
    opacity: 0.7;
}

footer a {
    color: #aaccee;
}

footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* ===================================================
   21. RESPONSIVE
   Mobile adjustments for screens under 600px.
   Navigation stacks vertically. Dropdowns become
   position: static so they flow within the stacked
   nav rather than floating over the page. Feature
   panels, photo rows and other flex layouts stack
   vertically. Sermon grid becomes single column.
   =================================================== */

@media (max-width: 600px) {

    .logo {
        height: 60px;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li ul {
        position: static;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    nav ul li ul li a {
        padding-left: 30px;
    }

    .hero-placeholder {
        height: 220px;
    }

    .hero img.hero-image {
        height: 220px;
    }

    .hero-strapline {
        font-size: 1em;
    }

    .feature-panels {
        flex-direction: column;
    }

    .cuf-features {
        flex-direction: column;
    }

    .photo-row {
        flex-direction: column;
    }

    .card-content-with-image {
        flex-direction: column;
    }

    .coming-up-card {
        flex-direction: column;
        gap: 10px;
    }

    .coming-up-date {
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
    }

    .coming-up-date strong {
        font-size: 1.2em;
    }

    .sermon-grid {
        grid-template-columns: 1fr;
    }

    .social-links {
        flex-direction: column;
    }

    .map-container iframe {
        height: 280px;
    }

}