/* =========================
   Global Styles
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  /* Your site palette */
  --ol-bg:#0b0d12;          /* deep black/blue background */
  --ol-blue:#1e90ff;        /* One1Luv blue */
  --ol-fg:#e8ecf2;          /* main text color */
  --ol-muted:#98a3b6;       /* muted text */
  --ol-chip:#151a22;        /* pill/bg */
  --ol-grid:#232834;
  --ol-shadow:0 10px 30px rgba(0,0,0,.45);

  /* Header silver/gray target (matches your page text) */
  --ol-silver:#dcdcdc;

  /* ===== Brand Logo sizing & filter strength ===== */
  /* 1em = height of the H1 text; we multiply it by 3 below */
  --brand-logo-size: 1em;          /* base size tied to header font */
  --brand-logo-scale: 3;           /* make logo 3x the header font height */
  --brand-logo-brightness: 1.55;   /* raise if logo looks too dark */
  --brand-logo-contrast: 1.25;     /* raise for more punch */
}

body {
  background-color: #000; /* keep your original */
  color: #dcdcdc;         /* Fluorescent Gray */
  font-family: 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Container for pages */
.main-content {
  flex: 1;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Brand sizing (logo vs. title) ===== */
:root{
  /* Title font size used in the header text */
  --brand-title-size: clamp(22px, 4vw, 28px);
}

/* Header shell (optional, keeps things neat) */
.ol-site-header{
  background: var(--ol-bg);
  border-bottom: 1px solid var(--ol-grid, #222a36);
  padding: 10px 16px;
}

.ol-header-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}

/* Brand row (logo + text) */
.ol-brand{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--brand-title-size); /* drives the text size */
  line-height: 1;
  margin: 0;
}

/* 5× larger logo than the title text */
.site-logo{
  height: calc(5 * var(--brand-title-size)); /* 5x the text */
  width: auto;
  display: inline-block;
  object-fit: contain;
}

/* Title text color/weight next to the logo */
.brand-title{
  color: var(--ol-blue, #1e90ff);
  font-weight: 800;
  letter-spacing: 0.3px;
  text-decoration: none;
}

/* Basic nav alignment (keeps your existing styles) */
.ol-nav ul{
  list-style: none;
  display: flex;
  gap: 8px;
}
.ol-nav a{
  color: var(--ol-muted, #98a3b6);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 12px;
}
.ol-nav a:hover, .ol-nav a.active{
  background: var(--ol-chip, #151a22);
  color: var(--ol-fg, #e8ecf2);
}

/* Mobile: shrink the logo a bit so it fits */
@media (max-width: 600px){
  .site-logo{ height: calc(3 * var(--brand-title-size)); }
}

/* =========================
   Header & Navigation
========================= */
header {
  background-color: #000;
  padding: 20px;
  text-align: center;
  border-bottom: 2px solid blue;
}

header h1 {
  color: blue;
  font-size: 2.5em;
  letter-spacing: 1px;
}

/* ===== Brand Logo (non-transparent PNG) =====
   - Shows your image and applies filters to approximate --ol-silver
*/
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* The logo sits before the title text */
.brand-logo-fallback {
  display: inline-block;

  /* EXACT SIZE: 3x the header font height */
  height: calc(var(--brand-logo-size) * var(--brand-logo-scale));
  width:  calc(var(--brand-logo-size) * var(--brand-logo-scale));

  /* Use a root-relative path and correct file extension */
  background-image: url("/images/oneluvlogo3.PNG");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  /* Silverize the graphic */
  filter:
    grayscale(1)
    brightness(var(--brand-logo-brightness))
    contrast(var(--brand-logo-contrast));

  /* Optional blend; comment in if you like the brighter look */
  /* mix-blend-mode: screen; */
  /* opacity: 0.95; */
}

/* Title text next to the logo */
.brand-title {
  font-weight: 700;
  letter-spacing: 0.3px;
  /* inherits the h1 blue; if you want the title text silver too, uncomment: */
  /* color: var(--ol-silver); */
}

/* Small screens: reduce overall logo scale so it fits */
@media (max-width: 480px){
  .brand { --brand-logo-scale: 2; }
}

/* =========================
   Navigation
========================= */
nav ul {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

nav ul li {
  display: inline-block;
  margin: 0 20px;
}

nav ul li a {
  text-decoration: none;
  color: #dcdcdc;
  font-weight: bold;
  font-size: 1.1em;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: blue;
}

/* =========================
   Hero Section
========================= */
.hero {
  text-align: center;
  padding: 60px 20px;
}

.hero h2 {
  color: blue;
  font-size: 2.2em;
  margin-bottom: 15px;
}

.hero p {
  font-size: 1.2em;
}

.hero-img {
  width: 80%;
  max-width: 700px;
  margin-top: 25px;
  border: 3px solid blue;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0, 0, 255, 0.3);
}

/* =========================
   Welcome Section
========================= */
.welcome {
  text-align: center;
  padding: 50px 20px;
}

.welcome h2 {
  color: blue;
  margin-bottom: 20px;
}

.graffiti {
  width: 150px;
  margin-top: 20px;
  opacity: 0.7;
}

/* =========================
   Gallery Page
========================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.gallery-grid img {
  width: 100%;
  border: 3px solid blue;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

/* =========================
   Footer
========================= */
footer {
  background-color: #111;
  text-align: center;
  padding: 20px;
  color: #dcdcdc;
  border-top: 2px solid blue;
  font-size: 0.95em;
}

/* =========================
   Calendar Page Layout
========================= */
#mainContainer {
  display: flex;
  flex: 1;
  width: 100%;
  overflow: hidden;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

#calendar {
  flex: 1;
  min-width: 500px;
  max-width: 700px;
  height: 600px;
  background: #222;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  padding: 10px;
  color: #dcdcdc;
}

#eventDetails {
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  background: #222;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  overflow-y: auto;
  color: #dcdcdc;
}

/* =========================
   Calendar & FullCalendar
========================= */
h1, h2, h3 {
  color: blue;
}

.fc {
  background: #222;
  height: 100%;
}

.fc-daygrid-day {
  min-height: 80px;
  border: 1px solid #333;
}

.fc-daygrid-day-number {
  font-weight: bold;
  font-size: 14px;
  padding: 4px;
}

/* =========================
   Modal for Adding Events
========================= */
#eventModal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#eventModal .modal-content {
  background: #333;
  padding: 20px;
  border-radius: 10px;
  width: 400px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  text-align: center;
  color: #dcdcdc;
}

#eventModal input {
  width: 90%;
  padding: 8px;
  margin: 10px 0;
}

#eventModal button {
  margin: 5px;
  padding: 10px 20px;
  cursor: pointer;
  background-color: blue;
  color: #dcdcdc;
  border: none;
  border-radius: 5px;
  transition: 0.3s;
}

#eventModal button:hover {
  background-color: #005bb5;
}

/* =========================
   Links for Downloads
========================= */
a.download-link {
  color: blue;
  text-decoration: underline;
  margin-left: 5px;
}

/* --- Global header look & feel (One1Luv optional extras) --- */
body{ background:var(--ol-bg); color:var(--ol-fg); margin:0; }

.ol-site-header{
  background:linear-gradient(0deg, rgba(14,18,26,.85), rgba(14,18,26,.85)), #000;
  border-bottom:1px solid var(--ol-grid);
  box-shadow:var(--ol-shadow);
  position:sticky; top:0; z-index:1000;
}
.ol-header-inner{
  max-width:1100px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; gap:16px;
}
.ol-brand{ margin:0; color:var(--ol-blue); font-weight:800; letter-spacing:.3px; }

.ol-nav ul{
  list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap;
}
.ol-nav a{
  color:var(--ol-muted); text-decoration:none;
  padding:8px 12px; border-radius:12px; background:transparent; display:inline-block;
}
.ol-nav a:hover, .ol-nav a.active{
  background:var(--ol-chip); color:var(--ol-fg);
}

/* footer consistency (optional) */
footer{
  color:var(--ol-muted); text-align:center; padding:24px 16px;
  border-top:1px solid var(--ol-grid);
}