/* CSS Document */

/* ==========================================
   DirectoryDen Jobs Board
   Primary: #FF6600
========================================== */

.dd-jobs-board{
  --dd-accent: #FF6600;
  --dd-border: rgba(0,0,0,.12);
  --dd-muted: rgba(0,0,0,.65);

  max-width: 980px;
  margin: 24px auto;
  padding: 0;
  font-family: inherit;
}

/* =========================
   Search Form
========================= */

.dd-jobs-layout{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

.dd-jobs-sidebar{
    width:300px;
    min-width:300px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:20px;
    position:sticky;
    top:20px;
}

.dd-jobs-main{
    flex:1;
}

.dd-search-fields{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.dd-search-fields input{
    width:100%;
    padding:12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-size:14px;
}

.dd-search-fields button{
    padding:14px;
    border:none;
    border-radius:8px;
    background:#111827;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.dd-clear-search{
    text-align:center;
    text-decoration:none;
    font-size:14px;
}

.dd-jobs-list__items{
    list-style:none;
    margin:0;
    padding:0;
}

.dd-jobs-list__item{
    margin-bottom:20px;
}

.dd-jobs-list__link{
    display:block;
    padding:20px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    text-decoration:none;
    color:#111827;
    transition:all .2s ease;
}

.dd-jobs-list__link:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.dd-jobs-list__title{
    font-size:22px;
    font-weight:700;
    margin-bottom:10px;
}

.dd-jobs-list__meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:10px;
    font-size:14px;
}

.dd-jobs-list__meta span{
    background:#f3f4f6;
    padding:6px 10px;
    border-radius:20px;
}

.dd-jobs-list__expiry{
    font-size:13px;
    opacity:.8;
}

@media (max-width: 900px){

    .dd-jobs-layout{
        flex-direction:column;
    }

    .dd-jobs-sidebar{
        width:100%;
        min-width:100%;
        position:relative;
        top:auto;
    }

}



/* =========================
   Single Job View
========================= */

.dd-job-single{
  background: #fff;
  border: 1px solid var(--dd-border);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 22px 22px 18px;
}

.dd-jobs-back{
  margin-bottom: 12px;
}

.dd-jobs-back a{
  text-decoration: none;
  font-size: 13px;
  color: var(--dd-muted);
}

.dd-job__header{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.dd-job__title{
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 6px;
}

.dd-job__expiry{
  font-size: 13px;
  color: rgba(0,0,0,.6);
}

/* Meta */
.dd-job__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 14px;
}

.dd-job__meta-item{
  color: rgba(0,0,0,.8);
}

/* Description */
.dd-job__desc{
  line-height: 1.6;
  color: rgba(0,0,0,.85);
  margin-bottom: 18px;
}

.dd-job__desc,
.dd-job__desc p{
  text-align: left !important;
}

.dd-job__pdf{
  margin: 0 0 18px;
  text-align: left;
}

.dd-job__pdf a{
  color: var(--dd-accent);
  font-weight: 700;
  text-decoration: none;
}

.dd-job__pdf a:hover{
  text-decoration: underline;
}

/* Footer / Apply */
.dd-job__footer{
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 14px;
}

.dd-job__apply{
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--dd-accent);
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  text-align: center;
  border-radius: 12px;
  padding: 12px 20px;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(255,102,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.dd-job__apply:hover{
  background: #000;
  color: var(--dd-accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(255,102,0,.28);
}

.dd-job__apply--disabled{
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}

/* Contact info (Website / Email) shown below the Apply button */
.dd-job__contact{
  background: #1a1a1a;
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
}

.dd-job__contact-item{
  margin: 0;
  font-size: 14px;
  flex: 1 1 220px;
  min-width: 0;
}

.dd-job__contact-label{
  color: #fff !important;
  font-weight: 700;
  margin-right: 6px;
}

.dd-job__contact-item a{
  color: var(--dd-accent) !important;
  word-break: break-all;
}

@media (max-width: 480px){
  .dd-job__contact{
    flex-direction: column;
  }
}

/* =========================
   Empty State
========================= */

.dd-jobs-board p{
  text-align: center;
  color: var(--dd-muted);
}

/* ==========================================
   DirectoryDen Member Dashboard – WYSIWYG
   Soft Neutral Style (no harsh orange glow)
   Scoped to .dd-jobs-dashboard
========================================== */

.dd-jobs-dashboard{
  --dd-border: rgba(0,0,0,.12);
  --dd-muted: rgba(0,0,0,.65);
}

/* Outer frame */
.dd-jobs-dashboard .wp-editor-wrap{
  border: 1px solid var(--dd-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

/* Top bar (Visual/Text tabs + toolbar) */
.dd-jobs-dashboard .wp-editor-tools{
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 8px 8px 0;
}

/* Visual/Text tabs */
.dd-jobs-dashboard .wp-switch-editor{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 6px 10px !important;
  margin: 0 6px 0 0 !important;
  color: rgba(0,0,0,.75) !important;
  font-weight: 700;
}

.dd-jobs-dashboard .wp-switch-editor:hover{
  background: rgba(0,0,0,.04) !important;
}

/* Active tab */
.dd-jobs-dashboard .wp-switch-editor.active,
.dd-jobs-dashboard .wp-switch-editor[aria-pressed="true"]{
  border-color: rgba(0,0,0,.25) !important;
  color: rgba(0,0,0,.9) !important;
}

/* Quicktags toolbar (Text tab) */
.dd-jobs-dashboard .quicktags-toolbar{
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 8px;
}

.dd-jobs-dashboard .quicktags-toolbar input{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 10px !important;
  margin: 2px 4px 2px 0 !important;
  padding: 7px 10px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.75) !important;
  box-shadow: none !important;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dd-jobs-dashboard .quicktags-toolbar input:hover{
  background: rgba(0,0,0,.04) !important;
}

.dd-jobs-dashboard .quicktags-toolbar input:focus{
  outline: none !important;
  border-color: rgba(0,0,0,.3) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
}

/* TinyMCE toolbar background */
.dd-jobs-dashboard .mce-top-part,
.dd-jobs-dashboard .mce-toolbar-grp{
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

/* TinyMCE toolbar buttons */
.dd-jobs-dashboard .mce-btn button{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 10px !important;
  margin: 3px !important;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover states */
.dd-jobs-dashboard .mce-btn button:hover{
  background: rgba(0,0,0,.04) !important;
}

/* Active/pressed buttons */
.dd-jobs-dashboard .mce-btn.mce-active button,
.dd-jobs-dashboard .mce-btn.mce-active button:hover{
  background: rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.25) !important;
}

/* Dropdowns like formatselect */
.dd-jobs-dashboard .mce-listbox,
.dd-jobs-dashboard .mce-listbox button{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 10px !important;
}

/* Editor container */
.dd-jobs-dashboard .wp-editor-container{
  border: 0 !important;
}

/* Text tab textarea */
.dd-jobs-dashboard textarea.wp-editor-area{
  background: #fff !important;
  border: 0 !important;
  padding: 12px !important;
  font-size: 14px;
  line-height: 1.6;
}

/* Visual tab iframe */
.dd-jobs-dashboard .mce-edit-area iframe{
  background: #fff !important;
}

/* Soft focus ring (no orange) */
.dd-jobs-dashboard .wp-editor-wrap:focus-within{
  border-color: rgba(0,0,0,.3) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
}

/* Kill TinyMCE default glow */
.dd-jobs-dashboard .mce-container:focus,
.dd-jobs-dashboard .mce-container *:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* Prevent weird sizing issues */
.dd-jobs-dashboard .wp-editor-wrap .mce-container{
  box-sizing: border-box;
}


/* ==========================================
   WYSIWYG – Kill orange halo, keep buttons white
   (Paste at END of stylesheet)
========================================== */

/* Keep TinyMCE buttons white */
.dd-jobs-dashboard .mce-btn,
.dd-jobs-dashboard .mce-btn button,
.dd-jobs-dashboard .mce-listbox,
.dd-jobs-dashboard .mce-listbox button{
  background: #fff !important;
}

/* Remove any focus outline/shadow/glow from TinyMCE buttons */
.dd-jobs-dashboard .mce-btn:focus,
.dd-jobs-dashboard .mce-btn:focus-within,
.dd-jobs-dashboard .mce-btn:focus-visible,
.dd-jobs-dashboard .mce-btn button:focus,
.dd-jobs-dashboard .mce-btn button:focus-within,
.dd-jobs-dashboard .mce-btn button:focus-visible,
.dd-jobs-dashboard .mce-listbox:focus,
.dd-jobs-dashboard .mce-listbox:focus-within,
.dd-jobs-dashboard .mce-listbox:focus-visible,
.dd-jobs-dashboard .mce-listbox button:focus,
.dd-jobs-dashboard .mce-listbox button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Remove any glow from icon elements inside buttons */
.dd-jobs-dashboard .mce-btn i:focus,
.dd-jobs-dashboard .mce-btn i:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: subtle grey hover only (no orange, no big glow) */
.dd-jobs-dashboard .mce-btn button:hover,
.dd-jobs-dashboard .mce-listbox button:hover{
  background: rgba(0,0,0,.03) !important;
  box-shadow: none !important;
}

/* Active state: keep white, just a slightly darker border */
.dd-jobs-dashboard .mce-btn.mce-active button,
.dd-jobs-dashboard .mce-btn.mce-active button:hover{
  background: #fff !important;
  border-color: rgba(0,0,0,.22) !important;
  box-shadow: none !important;
}

/* If your theme targets all buttons, neutralize within editor toolbar */
.dd-jobs-dashboard .mce-toolbar button,
.dd-jobs-dashboard .quicktags-toolbar input{
  box-shadow: none !important;
  outline: none !important;
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px){
  .dd-jobs-search{
    padding: 14px;
  }

  .dd-jobs-search > div{
    flex-direction: column;
  }

  .dd-job-single{
    padding: 18px 16px 14px;
  }

  .dd-job__footer{
    justify-content: stretch;
  }

  .dd-job__apply{
    width: 100%;
    text-align: center;
  }
}


/* =========================
   Sponsor front end left
========================= */

.dd-jobs-sponsor {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.dd-jobs-sponsor__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* =========================
   Member dash jobs
========================= */
.dd-job-form-wrapper {
    display: none;
}

.dd-job-form-wrapper.is-open {
    display: block;
}

/* =========================================
   Jobs Dashboard
========================================= */

.dd-job-form-wrapper {
    display: none;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
}

.dd-job-form-wrapper.is-open {
    display: block;
}

.dd-jobs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.dd-job-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dd-job-card {
    padding: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
}

.dd-job-card__actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}