/*
Theme Name: Job Portal
Theme URI: https://docs.fasterthemes.com/job-portal-wordpress-theme/
Author: fasterthemes.com
Author URI: https://fasterthemes.com
Description: Job Portal is a free yet premium quality WordPress theme for creating impressive Job Portal websites, customized for EU JobHub.
Version: 1.2
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: job-portal
Tags: two-columns, right-sidebar, left-sidebar, full-width-template, flexible-header, custom-header, custom-menu, custom-logo, featured-images, footer-widgets, featured-image-header, theme-options, threaded-comments, translation-ready, blog
*/

/* Force root font-size to 16px. The old Bootstrap-based theme
   sets a different base (commonly 62.5%) for its own rem system,
   which makes every Tailwind rem-based size (text-4xl, gap-8,
   max-w-6xl, etc.) shrink site-wide. !important overrides that. */
html{
  font-size: 16px !important;
}

:root{
  --navy: #142033;
  --navy-2: #1E2E47;
  --gold: #C9962C;
  --gold-soft: #E7B95C;
  --paper: #F6F4EF;
  --ink: #1B1F27;
  --slate: #5B6472;
  --line: #DCD7CB;
  --blue: #2957A4;
  --blue-deep: #1E4380;
  --green: #2F6F4E;
}
*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
}
.font-display{ font-family:'Space Grotesk', sans-serif; }
.font-mono{ font-family:'JetBrains Mono', monospace; }

.grain-nav{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 100%);
}

.stamp-border{ position:relative; }
.stamp-border::before{
  content:"";
  position:absolute; inset:0;
  border:1px dashed rgba(255,255,255,0.35);
  border-radius:14px;
  pointer-events:none;
  margin: 10px;
}

.ticket-row{
  border-left: 3px solid var(--line);
  transition: border-color .15s ease;
}
.ticket-row:hover{
  border-left-color: var(--gold);
  background: #FFFEFB;
}

.flag-bar{ height:4px; width:34px; border-radius:2px; }

.country-chip{
  border:1px solid var(--line);
  transition: all .15s ease;
}
.country-chip:hover{
  border-color: var(--navy);
  transform: translateY(-2px);
}

.dept-box{
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.dept-box::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:0; height:0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent var(--paper-corner,#EFE9DA) transparent transparent;
}

::selection{ background: var(--gold-soft); color: var(--navy); }

/* Nav menu — targets the default wp_nav_menu() <ul><li><a> output
   directly, no custom PHP walker class required. */
.eu-jobhub-nav ul{ list-style:none; margin:0; padding:0; }
.eu-jobhub-nav li{ list-style:none; }
.eu-jobhub-nav a{
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.eu-jobhub-nav a:hover{ color:#fff; }

/* --- Legacy element cleanup ---
   Your old category-box / browse-all-btn styles (from home-page.php)
   used the old pink #ec1561 accent. Once the new header is live,
   swap those accent colors below so category/archive pages don't
   clash with the new navy/gold palette. */
.category-box:hover{
  border-color: var(--gold);
}
.browse-all-btn{
  color: var(--slate);
  border-color: var(--line);
}

/* ===== MOBILE OPTIMIZATIONS ===== */

/* ENABLE ZOOM ON ALL DEVICES */
html, body {
  -webkit-user-scalable: yes !important;
  user-scalable: yes !important;
  zoom: 1;
}

/* MOBILE TEXT SIZING */
@media (max-width: 768px) {
  html {
    font-size: 18px !important; /* Increase base size for mobile */
  }

  body {
    font-size: 18px;
    line-height: 1.6;
  }

  /* Hero section — bigger on mobile */
  .grain-nav {
    padding: 24px 16px !important;
  }

  .grain-nav h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .grain-nav p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Search form — bigger on mobile */
  form input,
  form button {
    font-size: 18px !important;
    padding: 16px 12px !important;
    min-height: 48px !important; /* Thumb-friendly button size */
  }

  /* Country/Department cards */
  .country-chip,
  .dept-box {
    padding: 20px !important;
  }

  .country-chip p,
  .dept-box p {
    font-size: 16px !important;
  }

  /* Job listing titles */
  .ticket-row p:first-child {
    font-size: 16px !important;
    font-weight: 600;
  }

  /* Section headings */
  h2 {
    font-size: 24px !important;
    margin-bottom: 16px !important;
  }

  /* Buttons */
  button,
  a.ejh-btn {
    font-size: 16px !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
  }

  /* Remove horizontal scrolling */
  * {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Spacing adjustments */
  section {
    padding: 24px 16px !important;
  }

  .max-w-6xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* EXTRA SMALL PHONES (320px - 480px) */
@media (max-width: 480px) {
  html {
    font-size: 18px !important;
  }

  .grain-nav h1 {
    font-size: 24px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  form {
    flex-direction: column !important;
  }

  form input,
  form button {
    width: 100% !important;
    font-size: 18px !important;
  }
}

/* ENSURE FULL VIEWPORT WIDTH */
@media (max-width: 768px) {
  body, html {
    width: 100vw;
    overflow-x: hidden;
  }

  .grain-nav,
  section,
  .max-w-6xl {
    width: 100%;
    max-width: 100%;
  }

  .container {
    width: 100% !important;
    padding: 0 16px !important;
  }
}

/* ===== EU JOBHUB — JOB BOARD COMPONENTS ===== */

.ejh-btn{
  display:inline-block;
  padding:10px 20px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  text-align:center;
}
.ejh-btn-primary{ background:var(--blue); color:#fff; border-color:var(--blue); }
.ejh-btn-primary:hover{ background:var(--blue-deep); }
.ejh-btn-outline{ background:#fff; color:var(--blue); border-color:var(--blue); }
.ejh-btn-outline:hover{ background:#F3F6FC; }

.ejh-tag{
  display:inline-block;
  font-size:11px;
  padding:3px 10px;
  border-radius:999px;
  background:#F1EFEA;
  color:var(--ink);
  border:1px solid var(--line);
}
.ejh-tag-gold{ background:#FBF1DE; color:#8A6415; border-color:#EFDBAA; }
.ejh-tag-green{ background:#EAF6EE; color:var(--green); border-color:#CBE9D5; }

.ejh-form-row{ margin-bottom:16px; }
.ejh-form-row label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink); }
.ejh-form-row input,
.ejh-form-row select,
.ejh-form-row textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:14px;
  background:#fff;
  color:var(--ink);
}
.ejh-form-row input:focus,
.ejh-form-row select:focus,
.ejh-form-row textarea:focus{
  outline:none;
  border-color:var(--blue);
}

.ejh-apply-form{ max-width:520px; }

#ejh-mobile-menu.hidden{ display:none; }

.prose p{ margin-bottom:1em; }
.prose ul, .prose ol{ margin:1em 0; padding-left:1.5em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose h2, .prose h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; margin:1.4em 0 0.6em; }
.prose a{ color:var(--blue); }

@media (max-width: 768px) {
  .ejh-tag{ font-size:12px; }
}

/* PREVENT BOOTSTRAP FROM SETTING SMALL FONT-SIZE */
@media (max-width: 768px) {
  html {
    font-size: 18px !important;
  }

  body {
    font-size: 18px !important;
  }

  p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  input, button, textarea, select {
    font-size: 18px !important; /* Prevents iOS zoom on input focus */
  }
}