/* Jainee College of Nursing – site fixes and additions on top of the uoc-theme styles */
:root { --jn-blue: #08387f; --jn-navy: #252468; --jn-accent: #d04044; }

body { background: #d7dedc; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; padding: 8px 14px; }
.skip-link:focus { left: 8px; top: 8px; }
img { max-width: 100%; height: auto; }

/* styles that lived in the lost assets/css/mystyle.css and page heads */
.textwhite { color: #fff !important; }
#main-content p { text-align: justify; }
@media (min-width: 768px) { #our { box-shadow: none; } }
.indent { text-indent: 0; }

/* header */
#main-header .header-search p a { color: inherit; }
#main-header .header-search p a:hover { color: var(--jn-accent); }
#feedback a, #feedback1 a { display: block; height: 100%; }
#feedback img, #feedback1 img { display: block; }
.navigation > ul > li > a { white-space: nowrap; }

/* breadcrumb */
.page-breadcrumb { background: #f4f6f7; border-bottom: 1px solid #e3e7e9; }
.page-breadcrumb ol { list-style: none; margin: 0; padding: 10px 15px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px; }
.page-breadcrumb li { color: #6b747a; }
.page-breadcrumb li + li:before { content: "›"; margin: 0 6px 0 2px; color: #9aa3a8; }
.page-breadcrumb a { color: var(--jn-blue); }
.inner-page #main-content { padding-top: 10px; padding-bottom: 30px; background: #fff; }
.inner-page .cs-heading-sec h1 { color: var(--jn-navy) !important; }

/* homepage h1 keeps the old h2 look */
.cs-section-title h1.jn-home-h1 { font-size: 22px; margin: 0; text-transform: uppercase; }

/* generic additions used by new/extended pages */
.jn-lead { font-size: 16px; line-height: 1.7; margin: 0 0 22px; }
.jn-h2 { font-size: 22px !important; margin: 28px 0 14px !important; color: var(--jn-navy) !important; }
.jn-extra { clear: both; padding-top: 10px; }
.jn-list { margin: 0 0 18px 20px; padding: 0; list-style: disc; }
.jn-list li { margin: 0 0 8px; line-height: 1.6; list-style: disc; }
.jn-note { font-size: 13px; color: #6b747a; margin-top: 8px; }
.jn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 0 0 24px; clear: both; }
.jn-card { background: #fff; border: 1px solid #e3e7e9; border-top: 3px solid var(--jn-blue); padding: 20px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.jn-card i { font-size: 28px; color: var(--jn-blue); display: block; margin-bottom: 10px; }
.jn-card h3 { font-size: 17px !important; margin: 0 0 8px !important; color: #222 !important; }
.jn-card p { margin: 0; font-size: 14px; line-height: 1.6; text-align: left !important; }
.jn-card a { color: var(--jn-blue); }
.jn-cta { clear: both; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--jn-navy); color: #fff; padding: 20px 24px; margin: 26px 0 10px; }
.jn-cta p { margin: 0; color: #fff; font-size: 17px; text-align: left !important; }
.jn-btn { display: inline-block; background: var(--jn-accent); color: #fff !important; padding: 10px 22px; font-weight: 600; border: 0; cursor: pointer; text-transform: uppercase; font-size: 13px; letter-spacing: .03em; }
.jn-btn:hover { background: #b3333a; }
.jn-btn-alt { background: var(--jn-blue); }
.jn-btn-alt:hover { background: #062a60; }
.jn-btn-ghost { background: transparent; color: var(--jn-navy) !important; border: 2px solid var(--jn-navy); }
.jn-btn-ghost:hover { background: var(--jn-navy); color: #fff !important; }
.jn-app-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.jn-form-wrap { clear: both; margin: 10px 0 20px; padding: 0 !important; }
.jn-form-wrap select { width: 100%; height: 42px; border: 1px solid #e0e0e0; padding: 0 10px 0 30px; background: #fff; color: #555; }
.jn-table { width: 100%; border: 1px solid rgba(187,198,203,.5); }
.jn-table th, .jn-table td { padding: 10px 12px !important; text-align: left !important; vertical-align: top; }
.jn-photo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; }
.jn-photo-row img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.jn-map iframe { display: block; margin: 10px 0 20px; }

/* gallery page */
.jn-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.jn-gal-item { margin: 0; background: #fff; border: 1px solid #e3e7e9; }
.jn-gal-item img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: opacity .2s; }
.jn-gal-item a:hover img { opacity: .85; }
.jn-gal-item figcaption { padding: 8px 10px; font-size: 13px; color: #444; }

/* lightbox */
.jn-lb { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 3000; display: none; align-items: center; justify-content: center; flex-direction: column; padding: 20px; }
.jn-lb.open { display: flex; }
.jn-lb img { max-width: 100%; max-height: 82vh; box-shadow: 0 6px 30px rgba(0,0,0,.5); }
.jn-lb p { color: #fff; margin: 12px 0 0; text-align: center !important; }
.jn-lb button { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 30px; width: 48px; height: 48px; cursor: pointer; }
.jn-lb .jn-lb-close { top: 14px; right: 14px; }
.jn-lb .jn-lb-prev { left: 10px; top: 50%; margin-top: -24px; }
.jn-lb .jn-lb-next { right: 10px; top: 50%; margin-top: -24px; }

/* homepage additions */
.jn-home-extra { padding: 10px 0 30px; }
.jn-courses-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 0; }
.jn-courses-strip a { background: #35375d; color: #fff !important; text-align: center; padding: 18px 10px; display: block; }
.jn-courses-strip a:hover { background: var(--jn-blue); }
.jn-courses-strip strong { display: block; font-size: 18px; }
.jn-courses-strip span { font-size: 13px; opacity: .85; }
#our .cs-services .text a { color: inherit; }

/* footer gallery */
.footer-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.footer-gallery img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
footer .widget_categories ul li a { color: inherit; }
footer a[href^="tel:"], footer a[href^="mailto:"] { color: inherit; }

/* mobile */
@media (max-width: 991px) {
  .jn-courses-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  #main-header .logo { width: 100% !important; height: auto !important; }
  #main-header .logo img { height: auto !important; }
  #main-header .header-search p { float: none !important; display: block !important; font-size: 13px; text-align: center; }
  #main-header .header-search { text-align: center; }
  #main-header .header-search img { height: 60px !important; }
  #feedback1 { display: none; }
  .cs-section-title h1.jn-home-h1 { font-size: 19px; }
  .jn-cta { flex-direction: column; align-items: flex-start; }
  .inner-page .cs-heading-sec h1 { font-size: 24px !important; }
  #our .col-lg-2 { width: 50%; float: left; }
  .cs-document-list { width: 100% !important; }
  .page-content .container { width: auto; padding: 0; }
  table.cs-price-table { font-size: 13px; }
}
@media (max-width: 420px) {
  #our .col-lg-2 { width: 100%; }
  .jn-courses-strip { grid-template-columns: 1fr 1fr; }
}

@media print {
  #main-header, footer, .page-breadcrumb, #feedback, .jn-app-actions, .skip-link, .form-submit { display: none !important; }
  body, .wrapper { background: #fff !important; }
  .jn-form-wrap input, .jn-form-wrap select, .jn-form-wrap textarea { border: 0 !important; border-bottom: 1px solid #000 !important; }
}

.jn-courses-strip a strong { color: #fff !important; }
.footer-gallery a { display: block !important; position: static !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; }
.footer-gallery a:before, .footer-gallery a:after { display: none !important; }
.bottom-footer .copyright a.cscolor { color: #fff !important; text-decoration: underline; }
.footer-gallery { width: 100% !important; float: none !important; }
.page-breadcrumb ol { display: block !important; } .page-breadcrumb li { display: inline-block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; }

/* own form layout (application / alumni) */
.jn-form-wrap .form-style { padding: 24px !important; }
.jn-form-wrap form { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.jn-form-wrap form label { float: none !important; width: auto !important; margin: 0 !important; position: relative; display: block !important; }
.jn-form-wrap form label.textaera-sec, .jn-form-wrap form label.form-submit { grid-column: 1 / -1; }
.jn-form-wrap form input[type=text], .jn-form-wrap form input[type=email], .jn-form-wrap form input[type=tel], .jn-form-wrap form select, .jn-form-wrap form textarea { width: 100% !important; box-sizing: border-box; }
.jn-form-wrap form label > i { position: absolute; left: 10px; top: 13px; z-index: 1; }
.jn-form-wrap form select { padding-left: 32px; }
.jn-form-wrap form label.form-submit input { width: auto !important; float: none !important; position: static !important; }
.jn-form-wrap .jn-note { clear: both; margin-top: 14px; }
.jn-add { padding: 0 0 30px; background: #fff; }
.jn-add .jn-extra { padding: 10px 20px 0; }
@media (max-width: 600px) { .jn-form-wrap form { grid-template-columns: 1fr; } }
.jn-form-wrap form label.textaera-sec { position: relative !important; top: auto !important; right: auto !important; left: auto !important; height: auto !important; }
.jn-form-wrap form label.textaera-sec textarea { position: static !important; height: 90px !important; }
.jn-form-wrap form input[type=tel], .jn-form-wrap form input[type=email] { padding-left: 32px !important; }
@media (max-width: 991px) { .flexslider, .flexslider .flex-viewport { height: auto !important; min-height: 0 !important; } }
.jn-course-h { font-size: 36px !important; margin: 0 0 6px !important; line-height: 1.1 !important; }