/* CERN Java User Group Theme - Java-flavored styling */

:root {
    /* Java-inspired color palette */
    --java-orange: #ff8c00;
    --java-red: #ed1c24;
    --coffee-brown: #8b4513;
    --dark-coffee: #5d2f0a;
    --cream: #f5f5dc;
    --code-blue: #1e40af;
    --terminal-green: #22c55e;
    --cern-blue: #0033a0;
    --accent-gold: #ffd700;
}

/* Hide original conference title to replace with custom styling */
.conference-title-link span[itemprop='title'] {
    display: none;
}

/* Main body styling with Java theme */
body {
    background: linear-gradient(135deg, var(--cream) 0%, #ffffff 50%, var(--cream) 100%);
    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    color: var(--dark-coffee);
    line-height: 1.7;
    margin: 0;
    padding: 0;
}

/* Global container improvements */
.container, .main-container, #content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Improved typography hierarchy */
h1, h2, h3, h4, h5, h6 {
    color: var(--coffee-brown);
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }


/* Header styling for CERN JUG branding */
/* .header, .page-header, .headerbar, .meeting-header {
    background: linear-gradient(135deg, var(--java-orange) 0%, var(--java-red) 80%, var(--coffee-brown) 100%);
    color: white;
    padding: 25px 20px;
    border-bottom: 3px solid var(--accent-gold);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    margin-bottom: 30px;
} */

/* Custom JUG title styling */
.conference-title-link::after {
    content: "☕ CERN JUG Meet-up #1 - Testing Spring Boot Applications Demystified";
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    display: block;
    text-align: center;
    font-family: 'Arial', sans-serif;
    line-height: 1.4;
    margin: 0;
}

/* Ensure the conference title link itself is properly aligned */
.conference-title-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Navigation and menu styling */
.menu, nav, .navigation, .toolbar {
    background: linear-gradient(135deg, var(--coffee-brown), var(--dark-coffee));
    border-radius: 12px;
    padding: 15px 20px;
    margin: 20px 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

.menu a, nav a, .nav-link {
    color: var(--cream);
    text-decoration: none;
    padding: 12px 20px;
    margin: 0 8px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    display: inline-block;
}

.menu a:hover, nav a:hover, .nav-link:hover {
    background: linear-gradient(135deg, var(--java-orange), var(--java-red));
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(248, 152, 32, 0.3);
}

/* Button styling with Java theme */
.btn, button {
    background: linear-gradient(45deg, var(--java-orange), var(--java-red));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn:hover, button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    background: linear-gradient(45deg, var(--java-red), var(--java-orange));
}

/* Code and technical content styling */
code, pre {
    background-color: #1e1e1e;
    color: var(--terminal-green);
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 4px solid var(--java-orange);
    font-family: 'Fira Code', 'Consolas', monospace;
}

pre {
    display: block;
    overflow-x: auto;
    margin: 16px 0;
}

/* Panel and card styling */
.panel, .card, .meeting-panel, .section-content {
    background: white;
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 12px;
    padding: 25px;
    margin: 20px 0;
    box-shadow: 0 2px 12px rgba(139, 69, 19, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--dark-coffee);
    position: relative;
    overflow: hidden;
}

.panel::before, .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--java-orange), var(--coffee-brown));
}

.panel:hover, .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(139, 69, 19, 0.12);
    border-color: var(--java-orange);
}

/* Improved spacing and layout */
.content-wrapper, .meeting-content {
    margin: 30px 0;
    padding: 0 10px;
}

.section + .section {
    margin-top: 40px;
}

/* Content sections with better readability */
.section, .content, p, div {
    color: var(--dark-coffee);
    background: transparent;
}

/* Ensure text in containers is readable */
.panel *, .card *, .content *, section * {
    color: var(--dark-coffee) !important;
}
/* Text readability improvements for dark backgrounds */
.dark-bg,
[class*="dark-"],
[class*="black-"],
[style*="background: #000"],
[style*="background-color: #000"],
[style*="background: #333"],
[style*="background-color: #333"],
[style*="background: rgb(0,0,0)"],
[style*="background: rgba(0,0,0"],
[style*="background: linear-gradient"] {
  color: #f0f0f0 !important;
}

.dark-bg *,
[class*="dark-"] *,
[class*="black-"] *,
[style*="background: #000"] *,
[style*="background-color: #000"] *,
[style*="background: #333"] *,
[style*="background-color: #333"] *,
[style*="background: rgb(0,0,0)"] *,
[style*="background: rgba(0,0,0"] *,
[style*="background: linear-gradient"] * {
  color: #f0f0f0 !important;
}

/* Improve contrast for links on dark backgrounds */
.dark-bg a,
[class*="dark-"] a,
[class*="black-"] a,
[style*="background: #000"] a,
[style*="background-color: #000"] a {
  color: var(--accent-gold) !important;
  text-decoration-color: var(--java-orange) !important;
}

/* Add text-shadow for better readability on gradient backgrounds */
.confTitleBox,
[style*="background: linear-gradient"] {
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
}
/* Fix the ugly blue confTitleBox - Hero Component Style */
.confTitleBox {
  color: #fff !important;
  min-height: 60px !important;
  text-align: center !important;
  background: linear-gradient(135deg, var(--coffee-brown) 0%, var(--java-orange) 100%) !important;
  border-radius: 0 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
  margin: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.confheader {
    background: #fff !important;
    border-radius: 0 0 12px 12px !important;
    padding: 0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    margin: 0 0 25px 0 !important;
    border: none !important;
}

/* Make the hero seamless - remove any gaps */
.confTitleBox + .confheader,
.confTitleBox + div,
div.confTitleBox + div {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Ensure content flows directly from hero */
/* .confheader .container,
.confheader > div {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
} */

/* List improvements */
ul, ol {
    padding-left: 25px;
    margin: 15px 0;
}

li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Improved form styling */
.form-group, .input-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--coffee-brown);
}

/* Better spacing for common elements */
p {
    margin-bottom: 16px;
    line-height: 1.7;
}

.row {
    margin-bottom: 25px;
}

.col, .column {
    padding: 0 15px;
}

/* Table styling for technical content */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

th {
    background: var(--coffee-brown);
    color: white;
    padding: 15px;
    text-align: left;
}

td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

tr:hover {
    background-color: var(--cream);
}

/* Links with Java theme */
a {
    color: var(--code-blue);
    text-decoration: underline;
    text-decoration-color: var(--java-orange);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--java-red);
    text-decoration-color: var(--java-red);
}

/* Form elements styling */
input, textarea, select {
    border: 2px solid var(--coffee-brown);
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--java-orange);
    box-shadow: 0 0 0 3px rgba(248, 152, 32, 0.1);
}

/* Special Java-themed accents */
.java-accent::before {
    content: "☕";
    margin-right: 8px;
    color: var(--coffee-brown);
}

.cern-accent::before {
    content: "🔬";
    margin-right: 8px;
    color: var(--cern-blue);
}

/* Footer styling */
.footer {
    background: var(--cream);
    color: var(--dark-coffee);
    text-align: center;
    padding: 30px;
    margin-top: 40px;
}

.footer::before {
    content: "Powered by Java ☕ | CERN Technology 🔬";
    display: block;
    font-style: italic;
    opacity: 0.8;
}

/* Ensure footer links are readable */
.footer a {
    color: var(--code-blue);
    font-weight: 500;
}

.footer a:hover {
    color: var(--java-orange);
}

/* qTip tooltip styling with light background for readability */
.qtip {
    background: #ffffff !important;
    border: 1px solid var(--coffee-brown) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    color: var(--dark-coffee) !important;
    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 12px !important;
    max-width: 300px !important;
    z-index: 10000 !important;
}

.qtip-content {
    background: transparent !important;
    color: var(--dark-coffee) !important;
    padding: 0 !important;
}

/* Tooltip arrow styling */
.qtip .qtip-tip {
    border-color: transparent transparent #ffffff transparent !important;
}

.qtip.qtip-pos-tl .qtip-tip,
.qtip.qtip-pos-tc .qtip-tip,
.qtip.qtip-pos-tr .qtip-tip {
    border-color: #ffffff transparent transparent transparent !important;
}

.qtip.qtip-pos-bl .qtip-tip,
.qtip.qtip-pos-bc .qtip-tip,
.qtip.qtip-pos-br .qtip-tip {
    border-color: transparent transparent #ffffff transparent !important;
}

.qtip.qtip-pos-ml .qtip-tip,
.qtip.qtip-pos-mr .qtip-tip {
    border-color: transparent #ffffff transparent transparent !important;
}

.qtip.qtip-pos-ml .qtip-tip {
    border-color: transparent transparent transparent #ffffff !important;
}

/* Hover effects for better UX */
.qtip:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
}

/* Ensure text within qtip is always readable */
.qtip * {
    color: var(--dark-coffee) !important;
}

/* Style qtip headers if present */
.qtip-titlebar {
    background: var(--cream) !important;
    border-bottom: 1px solid var(--coffee-brown) !important;
    color: var(--coffee-brown) !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    margin: -12px -12px 8px -12px !important;
    border-radius: 8px 8px 0 0 !important;
}

.qtip-title {
    color: var(--coffee-brown) !important;
    font-weight: 600 !important;
}

/* Close button styling */
.qtip-close {
    color: var(--java-red) !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

.qtip-close:hover {
    color: var(--dark-coffee) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .conference-title-link::after {
        font-size: 1.2em;
    }
    
    .panel, .card {
        padding: 20px;
        margin: 15px 0;
    }
    
    .container, .main-container, #content {
        padding: 0 15px;
    }
    
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.3em; }
    
    .confTitleBox {
        padding: 15px 20px !important;
        margin-bottom: 20px !important;
    }
    
    .menu, nav, .navigation {
        padding: 12px 15px;
        text-align: center;
    }
    
    .menu a, nav a, .nav-link {
        display: block;
        margin: 5px 0;
    }

    /* Mobile-friendly qtip adjustments */
    .qtip {
        max-width: 280px !important;
        font-size: 13px !important;
        padding: 10px !important;
    }
}