/* Reset CSS by Josh W Comeau */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Remove default margin */
  * {
    margin: 0;
  }
  
  body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }
  
  /* 5. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* 6. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  
  /* 7. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /* 8. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  /*
    9. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }


/* Heading Canopy Background*/
/* Tweaked from CSS3 Patterns website */
.stadium-header {
    background: 
        /* Layer 1: A deep, smooth master gradient that eases back the harshness */
        linear-gradient(135deg, rgba(0, 20, 40, 0.95) 0%, rgba(3, 40, 90, 0.95) 100%),
        /* Layer 2: The carbon pattern, but with drastically reduced opacity (0.04 instead of 0.6) */
        linear-gradient(27deg, rgba(0,0,0,0.2) 5px, transparent 5px) 0 5px,
        linear-gradient(207deg, rgba(0,0,0,0.2) 5px, transparent 5px) 10px 0px,
        linear-gradient(27deg, rgba(255,255,255,0.04) 5px, transparent 5px) 0px 10px,
        linear-gradient(207deg, rgba(255,255,255,0.04) 5px, transparent 5px) 10px 5px,
        linear-gradient(90deg, rgba(0,0,0,0.1) 10px, transparent 10px),
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%, rgba(255,255,255,0.04)),
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,0.3) 75%, rgba(255,255,255,0.04) 75%, rgba(255,255,255,0.04)) 5px 5px;
    background-size: 20px 20px;

    color: var(--cfc-clean-white);
    border-bottom: 5px solid var(--cfc-accent-gold);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}






/* Custom CSS Styles by Jennie Whittaker */


/* Custom Chelsea FC Inspired Colour palette */
:root {
    --cfc-royal-blue: #034694;    /* The iconic Chelsea Royal Blue */
    --cfc-stadium-blue: #002244;  /* Navy for backgrounds and headers */
    --cfc-accent-gold: #EEA925;   /* Gold for accents*/
    --cfc-clean-white: #FFFFFF;   /* white for contrast */
}

body {
    background-color: #f4f6f9;
    font-family: 'Inter', sans-serif; /* Uses Inter, Google font */
    color: var(--cfc-stadium-blue);
}

/* Header styles using Oswald Google fonts */
h1, h2, h3, h4, h5, h6, .display-4 {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
}


/* Cards to represent each individual tribute */
.tribute-card {
    border-left: 5px solid var(--cfc-royal-blue) !important;
    background-color: var(--cfc-clean-white);
    transition: transform 0.2s ease;
}

.tribute-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(3,70,148,0.1) !important;
}

/* Submission card styling */
.form-card {
    border:none;
    border-top: 4px solid var(--cfc-accent-gold);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Chelsea Custom Buttons */
.btn-cfc-blue {
    background-color: var(--cfc-royal-blue);
    color: var(--cfc-clean-white);
    font-weight: 600;
    border: none;
}

.btn-cfc-blue:hover {
    background-color: var(--cfc-stadium-blue);
    color: var(--cfc-clean-white);
}

/* Glowing Candle Effect */
.glowing-candle {
    text-shadow: 0 0 8px rgba(238,169,37,0.6);
    font-size: 1.25rem;
}

/* Section Headings */
.section-heading {
    color: var(--cfc-stadium-blue);
}

/* Small Text Styling */
.small-text {
    font-size: 0.8rem
}

/* White Space Styling */
.white-space {
    white-space: pre-wrap;
}

/* Donation Banner */
.donation-banner {
    margin-top: 0 !important;
    border-top: 5px solid var(--cfc-accent-gold) !important;
}


/* Subtle white halo glow for Dad's portrait */
.memorial-picture-glow {
    height: auto;
    width: 100%;
    max-height: 38vh;
    object-fit: contain;
   
    display: block;

    /* Force zero spacing at the bottom */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    
    /* Creates a silhouette around the header image */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) 
            drop-shadow(0 3px 9px rgba(0, 0, 0, 0.5));
    /*Small transition on hover */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.header-tribute-text {
    font-size: 1.55rem !important;
    line-height: 1.4;
    font-weight: 300 !important;

}

/*Footer Styling */
.footer {
    font-family: 'Alex Brush', cursive;
    letter-spacing: 1px;
    font-size: 1.8rem;
    color: var(--cfc-accent-gold);
}

.footer-background {
    background: linear-gradient(135deg, var(--cfc-stadium-blue)0%, var(--cfc-royal-blue));
    color: var(var(--cfc-clean-white));
    border-bottom: 5px solid var(var(--cfc-accent-gold));
    box-shadow: 0 4px 15px rgba(0,0,0,0,0.15);
}

/*Media Queries */

/* Make the memorial image smaller on mobile */
@media (max-width: 767px) {
    .memorial-picture-glow {
        max-width: 220px !important;
        margin: 1.5rem auto 0 auto !important;
    }
    
}

/* Spacing between text and image on mobile */
@media (max-width: 767px) {
    .stadium-header .col-12.order-1 {
        margin-bottom: -3rem !important;
    }

    .stadium-header .col-12 {
        padding-bottom: 0 !important;
    }

    .header-tribute-text {
        font-size: 1rem !important;
        line-height: 1.3;
    }
}