/* =========================================================
   Jersey College Help Desk — Client Portal Brand Theme
   Target: osTicket v1.18.2 (client portal only)
   Loaded from include/client/header.inc.php after theme.css
   Palette: canonical Jersey College (maroon #9B0C27 / gold #D59F0F)
   Layout: framed white page on a light-gray field; compact maroon
           TITLE bar; search + CTAs on white; Featured Questions =
           compact card; Featured-KB = TILE GRID in its own band.
   DOM note: #landing_page (flex parent) contains, in source order:
     .sidebar (Open/Check + Featured Questions), .main-content
     (.search-form + .thread-body[title]), .clear, and a bare <div>
     wrapping the Featured-KB list. flex `order` drives presentation.
   ========================================================= */

:root{
  --jc-primary:#9B0C27;
  --jc-primary-700:#7E091F;
  --jc-primary-900:#5C0F1D;
  --jc-accent:#D59F0F;
  --jc-accent-700:#C38F07;
  --jc-ink:#1E1E1E;
  --jc-muted:#5b616e;
  --jc-page:#f5f3ee;      /* light section tint (inside) */
  --jc-field:#e7e4de;     /* gray field behind the page card */
  --jc-surface:#ffffff;
  --jc-border:#e6e2db;
  --jc-card-border:#e2ddd4;
  --jc-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05);
  --jc-font:"Lato", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --jc-serif:Georgia, "Times New Roman", ui-serif, serif;
}

/* ---------- Base: gray field, framed page, no horizontal scroll ---------- */
html,body{overflow-x:hidden}
body{font-family:var(--jc-font); color:var(--jc-ink); background:var(--jc-field) !important;
  line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
a{color:var(--jc-primary); text-decoration:none}
a:hover{color:var(--jc-primary-700); text-decoration:underline}
:focus-visible{outline:2px solid var(--jc-accent); outline-offset:2px}
/* Page-title headings: stock osTicket renders <h1> in blue (#00AEEF) — make them black.
   (Hero h1 = white and Featured-KB h1 = maroon are more specific and still win.) */
#content h1, #content h2{color:var(--jc-ink)}
/* Remove "Helpdesk software - powered by osTicket" everywhere (footer + login pages) */
#poweredBy{display:none !important}
#container{width:min(1180px,94%) !important; max-width:1180px !important; margin:24px auto !important;
  background:var(--jc-surface) !important; border:1px solid #d7d1c8 !important; border-radius:10px;
  overflow:hidden; box-shadow:0 10px 34px rgba(0,0,0,.12) !important}

/* ---------- Header ---------- */
#header{background:#fff !important; border-bottom:3px solid var(--jc-accent) !important;
  height:auto !important; padding:14px 24px !important; position:relative; min-height:68px}
#header::after{content:""; display:block; clear:both}
#header h2,#header em,#header hr{display:none !important}
#logo{float:none !important; display:flex !important; justify-content:center !important;
  align-items:center !important; margin:0 auto !important; height:auto !important;
  text-align:center !important; font-size:0 !important; line-height:0 !important}
#logo img{display:inline-block !important; height:52px !important; max-height:52px !important; width:auto !important}
#logo .valign-helper{display:none !important}
#header .pull-right.flush-right{position:absolute; right:24px; top:18px; float:none; margin:0;
  color:var(--jc-muted); font-size:13px}
#header .pull-right.flush-right a{color:var(--jc-primary) !important; font-weight:600}
#header .pull-right.flush-right a:hover{color:var(--jc-primary-700) !important}

/* ---------- Top nav (pill style, centered) — clean separator, no gray shadow ---------- */
#nav{clear:both !important; display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center;
  background:#fff !important; border-top:0 !important; border-bottom:1px solid var(--jc-border) !important;
  box-shadow:none !important; padding:.5rem 0 !important; margin:0; text-align:center !important; list-style:none}
#nav li{list-style:none; margin:0; padding:0; box-shadow:none !important; border:0 !important; background:none !important}
#nav li a{color:var(--jc-ink) !important; font-weight:600; border-radius:999px;
  padding:.45rem .9rem; background:transparent !important; border:0 !important;
  line-height:1.2; text-decoration:none}
#nav li a:hover{background:#f3efe9 !important; color:var(--jc-primary) !important; text-decoration:none}
#nav li a.active, #nav li.active a{background:var(--jc-primary) !important; color:#fff !important}

/* ===========================================================
   Homepage — flex-column ordering (robust, no overlap)
   present order: title+search (1) -> CTAs+FAQ (2) -> divider (3) -> tiles (4)
   =========================================================== */
#landing_page{display:flex !important; flex-direction:column; padding:0 !important;
  margin:0 !important; overflow:visible !important; background:#fff}
#landing_page > .main-content{order:1}
#landing_page > .sidebar, #landing_page > .sidebar.pull-right{order:2}
#landing_page > .clear{order:3}
#landing_page > div:not([class]){order:4}

/* main-content = title bar (thread-body) + search; title above search */
#landing_page .main-content{display:flex; flex-direction:column;
  float:none !important; width:auto !important; margin:0 !important; padding:0 !important}

/* The ONLY maroon area: a compact bar around the title (thread-body) */
#landing_page .thread-body{order:0; position:relative; margin:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:28px 24px 30px !important; text-align:center; min-height:0 !important;
  display:flex; flex-direction:column; align-items:center}
#landing_page .thread-body::before{content:""; position:absolute; left:0; right:0;
  top:0; bottom:0; z-index:0; background:linear-gradient(180deg, var(--jc-primary), var(--jc-primary-700))}
#landing_page .thread-body > *{position:relative; z-index:1}
#landing_page .thread-body h1, #landing_page .thread-body h1 span{font-family:var(--jc-serif);
  font-size:clamp(26px,2.8vw,40px); font-weight:700; color:#fff !important; margin:0; line-height:1.15}
#landing_page .thread-body h5, #landing_page .thread-body h5 span,
#landing_page .thread-body p{color:#fff !important; margin:8px 0 0; font-weight:400;
  font-size:1rem; max-width:760px; line-height:1.5; opacity:.95}

/* Search — on WHITE, just under the bar */
#landing_page .search-form{order:1; display:flex; align-items:center; justify-content:center;
  gap:8px; margin:24px auto 4px; width:100%; max-width:680px; padding:0 24px}
#landing_page .search-form input[type="text"], #landing_page .search-form input.search{
  flex:0 1 520px; background:#fff; color:#1e1e1e; border:1px solid var(--jc-border);
  border-radius:24px; height:46px; padding:0 18px; font-size:.95rem; box-shadow:0 1px 3px rgba(0,0,0,.08)}
#landing_page .search-form input:focus{outline:0; border-color:var(--jc-accent); box-shadow:0 0 0 3px rgba(213,159,15,.25)}
#landing_page .search-form button{height:46px; padding:0 24px; border-radius:24px;
  background:var(--jc-accent) !important; color:#1a1a1a !important; font-weight:700;
  border:0 !important; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.15)}
#landing_page .search-form button:hover{background:var(--jc-accent-700) !important}

/* Sidebar: Open/Check buttons (prominent) + compact Featured Questions */
#landing_page .sidebar, #landing_page .sidebar.pull-right{float:none !important;
  position:static !important; width:auto !important; margin:0 !important; padding:8px 24px 6px !important}
#landing_page .sidebar .front-page-button{display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; margin:0 0 14px !important}
#landing_page .sidebar .front-page-button .button{display:inline-block !important; width:auto !important;
  min-width:210px; border-radius:8px; font-weight:700; padding:.7rem 1.3rem !important; text-align:center}
#landing_page .sidebar .front-page-button .button.blue{background:var(--jc-primary) !important; color:#fff !important; border:0 !important}
#landing_page .sidebar .front-page-button .button.blue:hover{background:var(--jc-primary-700) !important}
#landing_page .sidebar .front-page-button .button.green{background:#fff !important; color:var(--jc-primary) !important; border:2px solid var(--jc-primary) !important}
#landing_page .sidebar .front-page-button .button.green:hover{background:#faf2f3 !important}

/* Featured Questions — smaller, integrated, 2-column links */
#landing_page .sidebar .content{background:var(--jc-page) !important; border:1px solid var(--jc-card-border) !important;
  border-radius:10px; box-shadow:none; max-width:680px; margin:0 auto; padding:12px 16px}
#landing_page .sidebar .content section{display:grid; grid-template-columns:1fr 1fr; gap:2px 22px}
#landing_page .sidebar .content .header, #landing_page .sidebar section .header{
  grid-column:1 / -1; color:var(--jc-primary) !important; font-weight:800;
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 6px}
#landing_page .sidebar .content a, #landing_page .sidebar section div a{display:block;
  color:var(--jc-primary) !important; padding:2px 0; font-size:.86rem; text-decoration:none}
#landing_page .sidebar .content a:hover{color:var(--jc-primary-700) !important; text-decoration:underline}

/* ---------- Featured KB section: framed band + masonry TILES ----------
   osTicket forces `.featured-category{width:49.7%;display:inline-block}` which
   cramps tile content into half-width — override to fill the column. Uneven
   article counts make tiles very different heights, so use CSS multi-column
   (masonry) instead of a row-grid so tiles pack tightly with no ragged gaps. */
#landing_page > div:not([class]){background:var(--jc-page); border-top:1px solid var(--jc-border);
  margin-top:16px; padding:16px 24px 26px;
  column-width:330px; column-gap:18px}
#landing_page > div:not([class]) > br{display:none}
#landing_page > div:not([class]) > h1{column-span:all; -webkit-column-span:all;
  color:var(--jc-primary) !important; font-family:var(--jc-font); font-size:1.4rem; font-weight:800;
  text-align:left; margin:6px 0 16px; padding-bottom:8px; border-bottom:2px solid var(--jc-accent)}
.featured-category.front-page{display:block !important; width:auto !important; float:none !important;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  background:#fff; border:1px solid var(--jc-card-border); border-radius:12px;
  padding:16px 18px; margin:0 0 18px !important; box-shadow:var(--jc-shadow)}
.featured-category.front-page .category-name,
.featured-category.front-page .category-name a{color:var(--jc-primary) !important; font-weight:800;
  font-size:1.05rem; margin-bottom:6px; display:inline-block}
.featured-category.front-page .article-headline{margin-left:0 !important; margin-top:10px}
.featured-category.front-page .article-title a{color:var(--jc-primary); font-weight:600}
.featured-category.front-page .article-teaser{color:#666; font-size:.86rem; height:auto !important; margin-top:2px}
.featured-category.front-page i[class*="icon-folder"]{color:var(--jc-accent); margin-right:6px}

/* ---------- Buttons (brand, all client pages) ---------- */
/* Strong rule: the client login submit is <input class="btn" type="submit"> (class "btn" only,
   no "button"), and osTicket's base .btn left it blank white — force maroon + white text. */
input.btn, input[type="submit"], input[type="submit"].btn, button[type="submit"]:not(.green):not(.blue),
.btn.button, .submit{background:var(--jc-primary) !important; border:1px solid var(--jc-primary) !important;
  color:#fff !important; padding:.55rem 1.3rem !important; border-radius:8px !important;
  font-weight:700 !important; cursor:pointer !important; -webkit-appearance:none; text-shadow:none !important}
input.btn:hover, input[type="submit"]:hover, .btn.button:hover{background:var(--jc-primary-700) !important; border-color:var(--jc-primary-700) !important}
button.green, a.green.button, .green.button{background:var(--jc-primary); border-color:var(--jc-primary); color:#fff}
.green.button:hover{background:var(--jc-primary-700); border-color:var(--jc-primary-700)}
.blue.button, a.blue.button{background:var(--jc-accent); border-color:var(--jc-accent); color:#1e1e1e}
.blue.button:hover{background:var(--jc-accent-700)}

/* ---------- Footer (maroon, gold top rule) ---------- */
#footer{background:var(--jc-primary); color:#f3e9d6; text-align:center; padding:18px;
  border-top:3px solid var(--jc-accent)}
#footer a{color:#fff; font-weight:600}
#footer a:hover{color:var(--jc-accent)}
#poweredBy{opacity:.7}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  #container{width:100% !important; margin:0 auto !important; border-radius:0; border-left:0; border-right:0}
  #header .pull-right.flush-right{position:static; text-align:center; margin-top:6px}
}
@media (max-width:600px){
  #landing_page .search-form{flex-direction:column; max-width:100%}
  #landing_page .search-form input.search,
  #landing_page .search-form input[type="text"],
  #landing_page .search-form button{width:100%; flex-basis:auto}
  #landing_page .sidebar .front-page-button .button{width:100% !important; min-width:0}
  #landing_page .sidebar .content section{grid-template-columns:1fr}
}