/* Elléen Design System Overrides - Magazine */
:root {
  --vr-font-primary: 'DinNext', sans-serif;
  --vr-font-secondary: 'DinNext', sans-serif;
  --vr-font-tertiary: 'DinNext', sans-serif;
  /* Color Palette */
  --background: #eff5f8;
  --foreground: #212429;
  --primary: #3b7a8b;
  --secondary: #314a54;
  --accent: #df7254;
  --lighter: #8bb1ba;
  --white: #eff5f8;
  --grayWhite: #e2e7ea;
  /* Gradients */
  --chooseFrom: #f7f0ff;
  --chooseTo: #a78afe;
  --addFrom: #f5fbff;
  --addTo: #addeff;
  --launchFrom: #f5fff7;
  --launchTo: #adf8ff;
  --color-card4-from: #f7fff5;
  --color-card4-to: #adff68;
  --header-bg: var(--secondary);
  --header-fg: var(--white);
}

/* Base Typography */
body {
  font-family: var(--vr-font-primary);
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  line-height: 1.6;
  color: var(--foreground);
  background-color: var(--background);
}

/* Sections spacing */
.section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Links */
a { color: var(--primary); }
a:hover, a:focus { color: var(--secondary); }

/* Form labels */
label { font-weight: 500; }
.form-label { font-weight: 500; }
.form-group label { font-weight: 500; }
.section-comments .form-group label { font-weight: 500; }

/* Headings */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vr-font-secondary);
  font-weight: 700;
  color: var(--secondary);
}
/* Responsive heading scale */
h1 { font-size: 2rem; line-height: 1.25; }
h2 { font-size: 1.5rem; line-height: 1.3; }
h3 { font-size: 1.25rem; line-height: 1.35; }
@media (min-width: 640px) { /* sm */
  h1 { font-size: 2.25rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
}
@media (min-width: 1024px) { /* lg */
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.75rem; }
}

/* Section Titles (if present) */
.section .section-head { border-bottom-color: var(--secondary); }
.section .section-head .title {
  color: var(--secondary);
  font-family: var(--vr-font-secondary);
  font-weight: 700;
  text-transform: none;
  margin: 0;
  padding: 0;
  height: auto;
  line-height: 1.2;
  background-color: transparent;
  font-size: 1.25rem; /* text-xl */
}
@media (min-width: 640px) { .section .section-head .title { font-size: 1.5rem; } }
@media (min-width: 768px) { .section .section-head .title { font-size: 2rem; } }
@media (min-width: 1024px) { .section .section-head .title { font-size: 2.5rem; } }

/* In-content titles */
.section .section-content .title {
  font-family: var(--vr-font-secondary);
  font-weight: 600;
  font-size: 1.25rem; /* text-xl */
}
@media (min-width: 768px) { .section .section-content .title { font-size: 1.5rem; } }

/* Post Title */
.post-content .title {
  font-family: var(--vr-font-secondary);
  font-weight: 700;
  color: var(--secondary);
  font-size: 2rem;
  line-height: 1.3;
}
@media (min-width: 768px) { .post-content .title { font-size: 2.5rem; } }
@media (min-width: 1024px) { .post-content .title { font-size: 3rem; } }

/* Tabs */
.section .nav-tabs > li > a,
.comment-section .nav-tabs > li > a {
  font-family: var(--vr-font-secondary);
  font-weight: 600;
  font-size: 12px;
}
@media (min-width: 640px) {
  .section .nav-tabs > li > a,
  .comment-section .nav-tabs > li > a { font-size: 1rem; }
}
@media (min-width: 768px) {
  .section .nav-tabs > li > a,
  .comment-section .nav-tabs > li > a { font-size: 1.125rem; }
}

/* Buttons */
.btn-custom {
  background-color: var(--secondary);
  color: var(--white) !important;
  border: 1px solid var(--primary);
  border-radius: 1rem; /* rounded-2xl */
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white) !important;
}

/* Bootstrap button mappings for contrast & palette */
.btn-primary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-secondary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #000 !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #fff !important;
}

.btn-link { color: var(--primary) !important; }
.btn-link:hover,
.btn-link:focus { color: var(--secondary) !important; text-decoration: none; }

/* Ensure readable text on semantic buttons */
.btn-info,
.btn-success,
.btn-warning,
.btn-danger { color: #fff !important; }

/* Secondary button mapping */
.btn { border-radius: 1rem; }
.btn-default {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #000 !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #fff !important;
}

/* Container Custom */
.container-custom {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) { .container-custom { max-width: 40rem; } }
@media (min-width: 768px) { .container-custom { max-width: 48rem; padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .container-custom { max-width: 64rem; padding-left: 4rem; padding-right: 4rem; } }
@media (min-width: 1280px) { .container-custom { max-width: 80rem; } }

/* Cards */
.card-wrapper {
  position: relative;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  background-color: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
}
.card-content { border-radius: inherit; }
/* Gradient helper cards */
.choose-card { background: linear-gradient(180deg, var(--chooseFrom), var(--chooseTo)); }
.add-card { background: linear-gradient(180deg, var(--addFrom), var(--addTo)); }
.launch-card { background: linear-gradient(180deg, var(--launchFrom), var(--launchTo)); }
.card-4 { background: linear-gradient(180deg, var(--color-card4-from), var(--color-card4-to)); }
/* Border spin effect */
.border-spin { position: relative; }
.border-spin::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--accent), var(--secondary), var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ellen-spin 4s linear infinite;
}
@keyframes ellen-spin { to { transform: rotate(360deg); } }

/* Hero (Main slider) title sizes */
.main-slider .caption .title {
  font-family: var(--vr-font-secondary);
  font-weight: 700;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.2;
}
@media (min-width: 640px) { .main-slider .caption .title { font-size: 2.25rem; } }
@media (min-width: 768px) { .main-slider .caption .title { font-size: 3rem; } }
@media (min-width: 1024px) { .main-slider .caption .title { font-size: 3.75rem; } }

/* Featured Section - Right Column (Small Items) */
.col-featured-right .item .caption .title {
  font-size: 0.75rem !important; /* 12px */
  line-height: 1.2 !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}
@media (min-width: 640px) {
  .col-featured-right .item .caption .title { font-size: 0.875rem !important; }
}
@media (min-width: 768px) {
  .col-featured-right .item .caption .title { font-size: 0.9375rem !important; }
}
@media (min-width: 1024px) {
  .col-featured-right .item .caption .title { font-size: 1rem !important; }
}

.col-featured-right .item-large .caption .title {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.25 !important;
}
@media (min-width: 768px) {
  .col-featured-right .item-large .caption .title { font-size: 1rem !important; }
}
@media (min-width: 1024px) {
  .col-featured-right .item-large .caption .title { font-size: 1.125rem !important; }
}

.col-featured-right .item-small .caption .title {
  font-size: 0.75rem !important; /* 12px */
  line-height: 1.2 !important;
}
@media (min-width: 768px) {
  .col-featured-right .item-small .caption .title { font-size: 0.875rem !important; }
}

/* Navigation color alignment */
#nav-top { background-color: var(--header-bg) !important; }
#nav-top .navbar-nav .nav-item .nav-link { color: var(--header-fg) !important; }
#nav-top .navbar-nav .nav-item .nav-link:hover,
#nav-top .navbar-nav .nav-item .nav-link:focus { color: var(--lighter) !important; }

.nav-main { border-bottom-color: var(--grayWhite) !important; background-color: var(--background) !important; }
.nav-main .navbar-nav .nav-link { color: var(--foreground) !important; }
.nav-main .navbar-nav .nav-link:hover,
.nav-main .navbar-nav .nav-link:focus,
.nav-main .navbar-nav .nav-link.active { color: var(--primary) !important; }

#footer { background-color: var(--header-bg) !important; color: var(--header-fg) !important; }
#footer .widget-title { color: var(--header-fg) !important; font-family: var(--vr-font-secondary); font-weight: 700; text-transform: none; }
#footer .nav-footer a { color: var(--header-fg) !important; }
#footer .nav-footer a:hover, #footer .nav-footer a:focus { color: var(--lighter) !important; }
#footer .footer-posts .post-item-small .title a { color: var(--header-fg) !important; }
#footer .footer-posts .post-item-small .title a:hover,
#footer .footer-posts .post-item-small .title a:focus { color: var(--lighter) !important; }
#footer .footer-copyright .copyright { color: var(--header-fg) !important; }
#footer .small-post-meta,
#footer .small-post-meta a,
#footer .small-post-meta span,
#footer .small-post-meta i { color: var(--header-fg) !important; }
#footer .small-post-meta a,
#footer .small-post-meta span,
#footer .post-meta a,
#footer .post-meta span { font-weight: 700 !important; }
#footer .small-post-meta { gap: 8px; }
#footer .small-post-meta a:hover,
#footer .small-post-meta span:hover { color: var(--lighter) !important; }
#footer .post-meta,
#footer .post-meta a,
#footer .post-meta span,
#footer .post-meta i { color: var(--header-fg) !important; }

/* Post Detail Page - Title */
.post-content .post-title {
  font-size: 1.25rem !important; /* 20px */
  line-height: 1.3 !important;
}
@media (min-width: 640px) {
  .post-content .post-title { font-size: 1.375rem !important; /* 22px */ }
}
@media (min-width: 768px) {
  .post-content .post-title { font-size: 1.5rem !important; /* 24px */ }
}
@media (min-width: 1024px) {
  .post-content .post-title { font-size: 1.625rem !important; /* 26px */ }
}

/* Previous/Next Post Section */
.post-next-prev .title {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.4 !important;
}
@media (min-width: 768px) {
  .post-next-prev .title { font-size: 0.9375rem !important; /* 15px */ }
}