/* =========================================================
   NASKHO – RSEvento! custom.css
   Upload to (Joomla 4/5/6):
     media/templates/site/rsevento/css/custom.css
   (if the template folder is named differently, e.g. rsevento2,
    use that folder name instead)
   RSEvento! loads this file automatically and keeps it on updates.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --nk-blue: #00529C;
  --nk-blue-dark: #003F7A;
  --nk-red: #C8102E;
  --nk-red-dark: #A50D25;
  --nk-red-light: #FF8A99;
  --nk-navy: #0A1F3D;
  --nk-navy-2: #12305A;
  --nk-footer: #07172E;
  --nk-tint: #F3F6FB;
  --nk-line: #E4EAF2;
  --nk-text: #14233B;
  --nk-muted: #4B5B70;
}

/* ---------- PART A: styles for the NASKHO modules (nk- classes) ----------
   These only touch the HTML you paste from the /modules folder,
   so they work whatever the template's own markup looks like.       */

.nk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.nk-wrap *, .nk-wrap *::before, .nk-wrap *::after { box-sizing: border-box; }

/* Buttons */
.nk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 22px; border-radius: 999px;
  font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 14px;
  text-decoration: none !important; border: 1.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s; cursor: pointer;
}
.nk-btn-red { background: var(--nk-red); color: #fff !important; }
.nk-btn-red:hover { background: var(--nk-red-dark); color: #fff !important; }
.nk-btn-blue { background: var(--nk-blue); color: #fff !important; }
.nk-btn-blue:hover { background: var(--nk-blue-dark); color: #fff !important; }
.nk-btn-outline { border-color: #C9D3E1; color: var(--nk-blue) !important; background: #fff; }
.nk-btn-outline:hover { border-color: var(--nk-red); color: var(--nk-red) !important; }
.nk-btn-ghost { border-color: rgba(255,255,255,.6); color: #fff !important; background: transparent; }
.nk-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* Small red caps above headings */
.nk-kicker {
  display: block; color: var(--nk-red); font-family: Inter, system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.nk-kicker-light { color: var(--nk-red-light); }

/* Section headings (used above Highlights and Events) */
.nk-section-head { text-align: center; padding: 64px 0 8px; }
.nk-section-head.nk-left { text-align: left; padding-top: 56px; }
.nk-section-head h2 {
  margin: 10px 0 12px; font-family: Poppins, sans-serif; font-weight: 700;
  font-size: 36px; line-height: 1.2; color: var(--nk-navy);
}
.nk-section-head .nk-bar { display: inline-block; width: 64px; height: 4px; border-radius: 2px; background: var(--nk-red); }
.nk-section-head.nk-left .nk-bar { display: none; }

/* 1. Top bar (TOP - A / TOP - B) */
.nk-topbar { font-family: Inter, system-ui, sans-serif; font-size: 13px; color: #DCE6F4; }
.nk-topbar .nk-wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.nk-topbar a { color: #DCE6F4; text-decoration: none; }
.nk-topbar a:hover { color: #fff; }
.nk-topbar i { color: var(--nk-red-light); margin-right: 7px; }
.nk-topbar-account .nk-wrap { justify-content: flex-end; }
.nk-topbar-account a { color: #fff; font-weight: 600; padding: 4px 8px; }
.nk-topbar-account .nk-sep { color: #4B6285; }

/* 2. Caption bar under the slider (FEATURED - A) */
.nk-caption { background: var(--nk-blue); color: #fff; font-family: Inter, system-ui, sans-serif; }
.nk-caption .nk-wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.nk-caption .nk-cap-kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #BFD6F0; }
.nk-caption .nk-cap-title { display: block; font-family: Poppins, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; margin: 2px 0; color: #fff; }
.nk-caption .nk-cap-meta { font-size: 14px; color: #DCE8F6; }
.nk-caption .nk-cap-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 3. About band (LOWER - A) */
.nk-about { background: var(--nk-navy); color: #fff; padding: 80px 0; font-family: Inter, system-ui, sans-serif; }
.nk-about .nk-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: center; }
.nk-about h2 { font-family: Poppins, sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2; color: #fff; margin: 12px 0 18px; }
.nk-about p { font-size: 16px; line-height: 1.7; color: #C9D6E8; margin: 0 0 16px; }
.nk-about .nk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.nk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.nk-stat { background: var(--nk-navy-2); border-radius: 14px; padding: 20px 16px; }
.nk-stat strong { display: block; font-family: Poppins, sans-serif; font-weight: 800; font-size: 34px; color: #fff; line-height: 1.1; }
.nk-stat span { font-size: 13px; color: #C9D6E8; line-height: 1.4; }
.nk-partners { background: #fff; color: var(--nk-text); border-radius: 14px; padding: 22px; border-top: 4px solid var(--nk-red); }
.nk-partners h3 { margin: 0 0 14px; font-family: Poppins, sans-serif; font-size: 18px; color: var(--nk-navy); }
.nk-partners ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nk-partners li { background: var(--nk-tint); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--nk-blue); }

/* 4. Contact info (BOTTOM - A) */
.nk-contact { font-family: Inter, system-ui, sans-serif; color: var(--nk-text); padding: 72px 0 24px; }
.nk-contact h2 { font-family: Poppins, sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2; color: var(--nk-navy); margin: 10px 0 16px; }
.nk-contact p { font-size: 16px; line-height: 1.7; color: var(--nk-muted); margin: 0 0 22px; }
.nk-contact ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.nk-contact li { display: flex; gap: 14px; align-items: center; }
.nk-contact .nk-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--nk-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.nk-contact .nk-ico.nk-red { background: var(--nk-red); }
.nk-contact li strong { display: block; font-weight: 600; }
.nk-contact li span, .nk-contact li a { font-size: 15px; color: var(--nk-muted); }
.nk-contact li a { color: var(--nk-blue); }

/* Contact form card (add Module Class "nk-form-card" to the RSForm!Pro module in BOTTOM - B) */
.nk-form-card { background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 6px 24px rgba(10,31,61,.08); margin: 72px 0 24px; }
.nk-form-card input[type=text], .nk-form-card input[type=email], .nk-form-card select, .nk-form-card textarea {
  width: 100%; min-height: 46px; border: 1px solid #C9D3E1; border-radius: 8px; padding: 12px 14px; font-size: 15px; color: var(--nk-text);
}
.nk-form-card input:focus, .nk-form-card select:focus, .nk-form-card textarea:focus { outline: 2px solid var(--nk-blue); outline-offset: 1px; border-color: var(--nk-blue); }
.nk-form-card button[type=submit], .nk-form-card input[type=submit], .nk-form-card .rsform-submit-button {
  background: var(--nk-red); color: #fff; border: 0; border-radius: 999px; padding: 14px 26px; font-weight: 600; min-height: 48px;
}
.nk-form-card button[type=submit]:hover, .nk-form-card input[type=submit]:hover, .nk-form-card .rsform-submit-button:hover { background: var(--nk-red-dark); }

/* 5. Sidebar call-to-action (COLUMN RIGHT) */
.nk-cta { background: var(--nk-blue); color: #fff; border-radius: 14px; padding: 22px; font-family: Inter, system-ui, sans-serif; }
.nk-cta h3 { margin: 0 0 10px; font-family: Poppins, sans-serif; font-size: 18px; color: #fff; }
.nk-cta p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #DCE8F6; }

/* 6. Footer */
.nk-foot { font-family: Inter, system-ui, sans-serif; font-size: 14px; color: #C9D6E8; line-height: 1.7; }
.nk-foot img { width: 220px; max-width: 100%; height: auto; display: block; margin-bottom: 14px; }
.nk-foot h4 { font-family: Poppins, sans-serif; font-weight: 600; color: #fff; font-size: 16px; margin: 0 0 10px; }
.nk-foot a { color: var(--nk-red-light); }

/* Phone tweaks */
@media (max-width: 720px) {
  .nk-section-head h2, .nk-about h2, .nk-contact h2 { font-size: 28px; }
  .nk-topbar .nk-wrap, .nk-topbar-account .nk-wrap { justify-content: center; }
  .nk-topbar .nk-hide-sm { display: none; }
  .nk-stats { grid-template-columns: 1fr 1fr 1fr; }
  .nk-stat strong { font-size: 26px; }
  .nk-partners ul { grid-template-columns: 1fr; }
}

/* ---------- PART B: tweaks to the template and RSEvents!Pro ----------
   The template's own class names are not published by RSJoomla!, so
   check each selector with right-click > Inspect on your site and
   adjust it if nothing changes. Most colours already come from the
   template's Custom colors settings (guide, step 3).                 */

/* Fonts everywhere */
body { font-family: Inter, system-ui, sans-serif; color: var(--nk-text); }
h1, h2, h3, h4, h5 { font-family: Poppins, sans-serif; }

/* Red line under the header (adjust selector: header, #rstpl-header, .navbar...) */
header, .rstpl-header, .navbar { border-bottom: 3px solid var(--nk-red); }

/* Bootstrap buttons used by RSEvents!Pro and forms: red pills */
.btn-primary, .btn-success {
  background: var(--nk-red) !important; border-color: var(--nk-red) !important;
  border-radius: 999px; font-weight: 600; padding: 10px 20px;
}
.btn-primary:hover, .btn-success:hover { background: var(--nk-red-dark) !important; border-color: var(--nk-red-dark) !important; }
.btn-secondary, .btn-info { background: var(--nk-blue) !important; border-color: var(--nk-blue) !important; border-radius: 999px; }

/* Hide breadcrumbs and the "Home" page title on the home page only
   (also switch them off in Joomla – see guide). */
.itemid-101 .breadcrumb, .itemid-101 .page-header { display: none; }

/* ---------- PART C: fixes after the first build (28 Oct 2026) ---------- */
/* RSEvento! uppercases headings; the design doesn't */
.nk-section-head h2, .nk-about h2, .nk-contact h2, .nk-partners h3,
.nk-cta h3, .nk-foot h4, .nk-cap-title {
  text-transform: none; letter-spacing: normal;
}
.nk-stat span, .nk-partners li { display: block; line-height: 1.4; }
/* Module Class "nk-contain": keeps a module in a full-width row inside the page width */
.nk-contain { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }

/* ---------- PART D: overrides for template-13.css (28 Oct 2026) ----------
   template-13.css is rebuilt by RSEvento! from the style settings,
   so never edit it - override it here.                                 */

/* Remove the 80px gap above each section (white space above the top bar) */
.body > section { margin-top: 0 !important; }

/* Header: the navbar takes the Primary colour by default - make it white
   so the blue logo shows, with dark menu links */
.rstpl-navigation .navbar,
.rstpl-navigation .navbar.fixed-top { background: #ffffff !important; }
.rstpl-navigation .navbar .nav li > a {
  color: #14233B; text-transform: none; font-weight: 600;
}
.rstpl-navigation .navbar .nav li > a:hover,
.rstpl-navigation .navbar .nav li.active > a { color: #C8102E; }

/* Buttons: the template uppercases them; the design doesn't */
button, .btn { text-transform: none; }

/* ---------- PART E: highlight cards, form title, fixes (28 Oct 2026) ---------- */

/* Highlight cards (module 11-highlight-cards.html) */
.nk-cards-band { background: var(--nk-tint); padding: 8px 0 72px; }
.nk-section-head + .nk-cards-band, .nk-cards-band { margin-top: 0; }
.nk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 28px; }
.nk-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(10,31,61,.08); display: flex; flex-direction: column; font-family: Inter, system-ui, sans-serif; }
.nk-card img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; object-position: left center; display: block; margin: 0; border-radius: 0; }
.nk-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.nk-card-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.nk-pill-red { background: #FDE8EB; color: var(--nk-red-dark); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 6px; letter-spacing: .04em; text-transform: uppercase; }
.nk-pill-blue { background: #E6EEF8; color: var(--nk-blue); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; }
.nk-card h3 { margin: 0; font-family: Poppins, sans-serif; font-size: 22px; font-weight: 700; color: var(--nk-navy); text-transform: none; letter-spacing: normal; line-height: 1.3; }
.nk-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--nk-muted); }
.nk-card-venue { font-size: 14px; color: var(--nk-muted); }
.nk-card-venue i { color: var(--nk-red); margin-right: 8px; }
.nk-card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 6px; }

/* The highlights heading sits on the same light background as the cards */
.nk-section-head { background: var(--nk-tint); margin: 0; }
.nk-section-head.nk-left { background: transparent; }

/* Contact form title: no capitals, design font */
.nk-form-card h1, .nk-form-card h2, .nk-form-card h3, .nk-form-card legend {
  text-transform: none; letter-spacing: normal; font-family: Poppins, sans-serif; color: var(--nk-navy); font-size: 24px;
}

/* ---------- PART F: footer menus, sidebar, links (28 Oct 2026) ----------
   Add Module Class "nk-foot-menu" to the footer modules (b, c, d)
   and "nk-side" to the four sidebar modules (Advanced tab).           */

/* Links: dark blue instead of the template's cyan */
a { color: var(--nk-blue); }
a:hover { color: var(--nk-red); }

/* Footer menus */
.nk-foot-menu { font-family: Inter, system-ui, sans-serif; font-size: 14px; }
.nk-foot-menu h1, .nk-foot-menu h2, .nk-foot-menu h3, .nk-foot-menu h4,
.nk-foot-menu .module-title, .nk-foot-menu .page-header {
  font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600;
  color: #fff; text-transform: none; letter-spacing: normal; margin: 0 0 12px;
}
.nk-foot-menu ul { list-style: none; margin: 0; padding: 0; }
.nk-foot-menu li { list-style: none; margin: 0 0 8px; padding: 0; }
.nk-foot-menu li::before, .nk-foot-menu li::marker { content: none; display: none; }
.nk-foot-menu a { color: #C9D6E8; text-transform: none; font-weight: 400; padding: 0; }
.nk-foot-menu a:hover { color: #fff; }

/* Sidebar */
.nk-side h1, .nk-side h2, .nk-side h3, .nk-side h4, .nk-side .module-title, .nk-side .page-header {
  font-family: Poppins, sans-serif; font-size: 18px; font-weight: 700; color: var(--nk-navy);
  text-transform: none; letter-spacing: normal;
}
.nk-side a { color: var(--nk-text); text-transform: none; font-size: 14px; font-weight: 600; line-height: 1.35; }
.nk-side a:hover { color: var(--nk-red); }
.nk-side ul { list-style: none; margin: 0; padding: 0; }
.nk-side li { margin: 0 0 8px; }

/* ---------- PART G: header logo size (28 Oct 2026) ---------- */
/* The logo is shown at its full 800px width; keep it at header height */
.rstpl-navigation .navbar img,
.rstpl-navigation [class*="logo"] img,
.rstpl-logo img {
  max-height: 58px; width: auto; height: auto;
}

/* ---------- PART H: event buttons, headings, sidebar, footer (28 Oct 2026) ---------- */

/* "Find out more" on normal events: the template paints .btn-quaternary
   light blue-grey with WHITE text (almost invisible) - make it NASKHO blue.
   Featured events keep the red button (.btn-primary) with the red date. */
.btn.btn-quaternary {
  background-color: var(--nk-blue) !important; border-color: var(--nk-blue) !important;
  color: #fff !important; border-radius: 999px;
}
.btn.btn-quaternary:hover, .btn.btn-quaternary:focus {
  background-color: var(--nk-blue-dark) !important; border-color: var(--nk-blue-dark) !important; color: #fff !important;
}

/* No capitals on any heading (the design uses normal case) */
h1, h2, h3, h4, h5, h6,
h1.rstpl-title, h2.rstpl-title, h3.rstpl-title,
.rstpl-title h1, .rstpl-title h2, .rstpl-title h3 { text-transform: none; letter-spacing: normal; }

/* Sidebar (column-right): smaller headings and links like the design */
.rstpl-column-right-position h1, .rstpl-column-right-position h2,
.rstpl-column-right-position h3, .rstpl-column-right-position h4,
.nk-side h3 {
  font-family: Poppins, sans-serif; font-size: 18px; font-weight: 700; color: var(--nk-navy);
}
.rstpl-column-right-position a, .nk-side a {
  font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1.4; color: var(--nk-text); text-transform: none;
}
.rstpl-column-right-position a:hover, .nk-side a:hover { color: var(--nk-red); }
.rstpl-column-right-position ul, .nk-side ul { list-style: none; margin: 0; padding: 0; }
.rstpl-column-right-position li, .nk-side li { margin: 0 0 10px; }
/* keep the white button text in the "Get event updates" box */
.rstpl-column-right-position .nk-cta a.nk-btn, .nk-side .nk-cta a.nk-btn { color: #fff; }
.rstpl-column-right-position .nk-cta h3 { color: #fff; }

/* Footer: red line on top and space from the edges */
.rstpl-footer-position {
  border-top: 4px solid var(--nk-red);
  padding-top: 56px !important; padding-bottom: 40px !important;
}
.rstpl-footer-position h1, .rstpl-footer-position h2, .rstpl-footer-position h3, .rstpl-footer-position h4 {
  color: #fff; font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; margin: 0 0 12px;
}
.rstpl-footer-position ul { list-style: none; margin: 0; padding: 0; }
.rstpl-footer-position li { margin: 0 0 8px; }
.rstpl-footer-position a { color: #C9D6E8; }
.rstpl-footer-position a:hover { color: #fff; }
/* copyright strip under the footer */
.rstpl-copyright-position { border-top: 1px solid #1B3256; padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: #9FB2CC; }

/* ---------- PART I: sidebar via Module Class, smaller event buttons (28 Oct 2026) ----------
   Sidebar: give the Calendar, Categories, Heads up and Get event updates
   modules the Module Class " nk-side" (Advanced tab, with a leading space). */

.nk-side h1, .nk-side h2, .nk-side h3, .nk-side h4, .nk-side .module-title, .nk-side .page-header {
  font-family: Poppins, sans-serif !important; font-size: 18px !important; font-weight: 700 !important;
  color: var(--nk-navy) !important; text-transform: none !important; letter-spacing: normal !important;
  margin: 0 0 12px !important;
}
.nk-side a, .nk-side li a, .nk-side h1 a, .nk-side h2 a, .nk-side h3 a, .nk-side h4 a, .nk-side h5 a {
  font-family: Inter, system-ui, sans-serif !important; font-size: 14px !important; font-weight: 600 !important;
  line-height: 1.4 !important; color: var(--nk-text) !important; text-transform: none !important;
  letter-spacing: normal !important;
}
.nk-side a:hover { color: var(--nk-red) !important; }
.nk-side ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.nk-side li { margin: 0 0 10px !important; }
.nk-side .nk-cta a.nk-btn { color: #fff !important; }
.nk-side .nk-cta h3 { color: #fff !important; }

/* Event "Find out more" (and other template buttons): small pills like the design */
.btn.btn-primary, .btn.btn-quaternary {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  width: auto !important; min-width: 0 !important; min-height: 40px;
  padding: 9px 18px !important; font-size: 13px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important; line-height: 1.2 !important;
  border-radius: 999px !important;
}
/* hide the round arrow icon inside the buttons */
.btn.btn-primary > i, .btn.btn-primary > svg, .btn.btn-primary > [class*="fa-"],
.btn.btn-quaternary > i, .btn.btn-quaternary > svg, .btn.btn-quaternary > [class*="fa-"] { display: none !important; }