/*
Theme Name: Work Europe
Theme URI: https://github.com/myjob
Author: Work Europe
Author URI: #
Description: O portal de emprego da Europa.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myjob
Tags: job-board, custom-post-types, full-width-template, blog, portfolio
*/

/* =========================================
   RESET & BASE
   ========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--color-primary:    #2563eb;
	--color-primary-d: #1d4ed8;
	--color-secondary: #0f172a;
	--color-accent:    #f59e0b;
	--color-success:   #10b981;
	--color-danger:    #ef4444;
	--color-bg:        #f8fafc;
	--color-surface:   #ffffff;
	--color-border:    #e2e8f0;
	--color-text:      #1e293b;
	--color-muted:     #64748b;
	--radius:          0.5rem;
	--shadow-sm:       0 1px 3px rgba(0,0,0,.08);
	--shadow-md:       0 4px 16px rgba(0,0,0,.10);
	--shadow-lg:       0 10px 40px rgba(0,0,0,.12);
	--transition:      0.2s ease;
	--container:       1200px;
	--header-h:        70px;
}

html { scroll-behavior: smooth; }

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
}

img { max-width: 100%; height: auto; display: block; }
a  { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-d); }
ul, ol { list-style: none; }

/* =========================================
   LAYOUT
   ========================================= */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; padding-block: 2rem; }

.content-area  { width: 100%; }
.has-sidebar .content-area { flex: 1; }

.sidebar-area {
	width: 320px;
	flex-shrink: 0;
}

.content-sidebar-wrap {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

/* =========================================
   HEADER
   ========================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-h);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: 1.5rem;
}

.site-branding { display: flex; align-items: center; gap: .75rem; }

.site-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-secondary);
	line-height: 1;
}

.site-title span { color: var(--color-primary); }
.site-description { font-size: .75rem; color: var(--color-muted); margin-top: .1rem; }

/* Main Navigation */
.main-navigation { display: flex; align-items: center; gap: .25rem; }
.main-navigation ul { display: flex; align-items: center; gap: .25rem; }

.main-navigation a {
	display: block;
	padding: .5rem .875rem;
	font-size: .9rem;
	font-weight: 500;
	color: var(--color-text);
	border-radius: var(--radius);
	transition: background var(--transition), color var(--transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	background: #eff6ff;
	color: var(--color-primary);
}

/* Dropdown */
.main-navigation .menu-item-has-children { position: relative; }

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	min-width: 200px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: .5rem;
	flex-direction: column;
	gap: .1rem;
}

.main-navigation .menu-item-has-children:hover > .sub-menu { display: flex; }
.main-navigation .sub-menu a { white-space: nowrap; padding: .45rem .875rem; }

.header-actions { display: flex; align-items: center; gap: .75rem; }

/* Mobile menu toggle */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: .5rem;
	color: var(--color-text);
}

.menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	margin: 4px 0;
	transition: all var(--transition);
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.25rem;
	font-size: .9rem;
	font-weight: 600;
	border-radius: var(--radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all var(--transition);
	line-height: 1.4;
	text-decoration: none;
}

.btn-primary {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-d); border-color: var(--color-primary-d); color: #fff; }

.btn-outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }

.btn-ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}
.btn-ghost:hover { background: var(--color-border); }

.btn-sm { padding: .35rem .875rem; font-size: .8rem; }
.btn-lg { padding: .75rem 1.75rem; font-size: 1rem; }

/* =========================================
   HERO
   ========================================= */
.hero {
	background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
	color: #fff;
	padding-block: 5rem 4rem;
	text-align: center;
}

.hero-title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 1rem;
}

.hero-title span { color: var(--color-accent); }

.hero-subtitle {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: #94a3b8;
	max-width: 600px;
	margin-inline: auto;
	margin-bottom: 2.5rem;
}

/* Hero Search */
.hero-search {
	background: var(--color-surface);
	border-radius: 3rem;
	padding: .5rem .5rem .5rem 1.5rem;
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: 680px;
	margin-inline: auto;
	box-shadow: var(--shadow-lg);
}

.hero-search input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 1rem;
	color: var(--color-text);
	background: transparent;
	min-width: 0;
}

.hero-search .btn { border-radius: 2rem; white-space: nowrap; }

.hero-stats {
	display: flex;
	justify-content: center;
	gap: 2.5rem;
	margin-top: 3rem;
	flex-wrap: wrap;
}

.hero-stat strong { display: block; font-size: 1.75rem; font-weight: 800; }
.hero-stat span { font-size: .875rem; color: #94a3b8; }

/* =========================================
   SECTION HEADINGS
   ========================================= */
.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 1.75rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.section-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-secondary);
}

.section-subtitle {
	color: var(--color-muted);
	font-size: .9rem;
	margin-top: .25rem;
}

/* =========================================
   JOB CARDS
   ========================================= */
.jobs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 1.25rem;
}

.job-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.job-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.job-card-header { display: flex; gap: 1rem; align-items: flex-start; }

.company-logo {
	width: 52px;
	height: 52px;
	border-radius: .5rem;
	border: 1px solid var(--color-border);
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-primary);
}

.company-logo img { width: 100%; height: 100%; object-fit: cover; }

.job-card-info { flex: 1; min-width: 0; }

.job-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: .25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.job-title a { color: inherit; }
.job-title a:hover { color: var(--color-primary); }

.company-name {
	font-size: .875rem;
	color: var(--color-muted);
	display: flex;
	align-items: center;
	gap: .25rem;
}

.job-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .625rem;
	font-size: .75rem;
	font-weight: 600;
	border-radius: 2rem;
	border: 1px solid transparent;
}

.badge-type    { background: #eff6ff; color: var(--color-primary); border-color: #bfdbfe; }
.badge-remote  { background: #f0fdf4; color: var(--color-success); border-color: #bbf7d0; }
.badge-onsite  { background: #fff7ed; color: #ea580c; border-color: #fed7aa; }
.badge-hybrid  { background: #fdf4ff; color: #9333ea; border-color: #e9d5ff; }
.badge-new     { background: var(--color-accent); color: #fff; }
.badge-featured{ background: #fff7ed; color: #d97706; border-color: #fde68a; }

.job-location {
	font-size: .825rem;
	color: var(--color-muted);
	display: flex;
	align-items: center;
	gap: .3rem;
}

.job-salary {
	font-size: .875rem;
	font-weight: 600;
	color: var(--color-success);
}

.job-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
	gap: .5rem;
}

.job-posted { font-size: .75rem; color: var(--color-muted); }

/* =========================================
   FILTERS / SEARCH BAR
   ========================================= */
.jobs-filters {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: flex-end;
}

.filter-group { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 180px; }
.filter-group label { font-size: .8rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; }

.form-control {
	width: 100%;
	padding: .55rem .875rem;
	font-size: .9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	outline: none;
	background: var(--color-surface);
	color: var(--color-text);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; padding-right: 2.25rem; }

/* =========================================
   SINGLE JOB
   ========================================= */
.job-single { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }

.job-single-header {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 2rem;
	margin-bottom: 1.5rem;
}

.job-single-title {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--color-secondary);
	margin-bottom: .75rem;
}

.job-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	margin-bottom: 1.25rem;
}

.job-single-body {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 2rem;
}

.job-single-body h2,
.job-single-body h3 { font-size: 1.1rem; font-weight: 700; margin-block: 1.5rem .75rem; color: var(--color-secondary); }
.job-single-body p  { color: var(--color-muted); margin-bottom: .875rem; line-height: 1.7; }
.job-single-body ul { padding-left: 1.25rem; list-style: disc; color: var(--color-muted); }
.job-single-body ul li { margin-bottom: .4rem; line-height: 1.7; }

/* Job sidebar card */
.job-sidebar-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	position: sticky;
	top: calc(var(--header-h) + 1rem);
}

.job-sidebar-card .btn { width: 100%; justify-content: center; margin-bottom: .75rem; }

.job-details-list { margin-top: 1.25rem; }
.job-detail-item {
	display: flex;
	gap: .75rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--color-border);
	align-items: center;
}
.job-detail-item:last-child { border-bottom: none; }
.job-detail-icon { color: var(--color-primary); font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.job-detail-label { font-size: .75rem; color: var(--color-muted); }
.job-detail-value { font-size: .875rem; font-weight: 600; color: var(--color-text); }

/* =========================================
   COMPANY CARDS
   ========================================= */
.companies-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

.company-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	text-align: center;
	transition: all var(--transition);
	cursor: pointer;
}

.company-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.company-card-logo {
	width: 72px;
	height: 72px;
	border-radius: .75rem;
	border: 1px solid var(--color-border);
	margin-inline: auto;
	margin-bottom: 1rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-primary);
	background: #eff6ff;
}

.company-card-name { font-weight: 700; margin-bottom: .25rem; color: var(--color-secondary); }
.company-card-jobs { font-size: .8rem; color: var(--color-muted); }

/* =========================================
   CATEGORIES
   ========================================= */
.categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem;
}

.category-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem;
	text-align: center;
	transition: all var(--transition);
}

.category-card:hover {
	border-color: var(--color-primary);
	background: #eff6ff;
	transform: translateY(-2px);
}

.category-icon { font-size: 2rem; margin-bottom: .5rem; display: block; }
.category-name { font-weight: 600; font-size: .9rem; color: var(--color-secondary); }
.category-count { font-size: .75rem; color: var(--color-muted); margin-top: .2rem; }

/* =========================================
   PAGINATION
   ========================================= */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	margin-top: 2.5rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	font-size: .875rem;
	font-weight: 600;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	transition: all var(--transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.pagination .page-numbers.dots { border-color: transparent; width: auto; padding-inline: .5rem; }
.pagination .page-numbers.prev,
.pagination .page-numbers.next { width: auto; padding-inline: .875rem; gap: .25rem; }
.pagination a.page-numbers:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* =========================================
   SIDEBAR WIDGETS
   ========================================= */
.widget {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.widget-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--color-primary);
}

/* =========================================
   FORMS
   ========================================= */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-field label { font-size: .875rem; font-weight: 600; color: var(--color-text); }
.form-field .help { font-size: .75rem; color: var(--color-muted); }

textarea.form-control { min-height: 120px; resize: vertical; }

.form-submit { margin-top: .5rem; }

/* WP default form elements */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	font-family: inherit;
	font-size: 1rem;
}

/* =========================================
   ALERTS / NOTICES
   ========================================= */
.alert {
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	border-left: 4px solid;
	margin-bottom: 1rem;
	font-size: .9rem;
}

.alert-info    { background: #eff6ff; border-color: var(--color-primary); color: #1d4ed8; }
.alert-success { background: #f0fdf4; border-color: var(--color-success); color: #15803d; }
.alert-warning { background: #fff7ed; border-color: var(--color-accent);  color: #92400e; }
.alert-error   { background: #fef2f2; border-color: var(--color-danger);  color: #b91c1c; }

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
	background: var(--color-secondary);
	color: #94a3b8;
	padding-top: 3.5rem;
}

.footer-widgets {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid #1e293b;
}

.footer-brand .site-title { color: #fff; font-size: 1.5rem; margin-bottom: .5rem; }
.footer-brand .site-description { color: #64748b; font-size: .875rem; }
.footer-brand p { font-size: .875rem; line-height: 1.7; margin-top: .75rem; color: #64748b; }

.footer-widget-title {
	font-size: .875rem;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 1rem;
}

.footer-links { display: flex; flex-direction: column; gap: .5rem; }
.footer-links a {
	font-size: .875rem;
	color: #64748b;
	transition: color var(--transition);
}
.footer-links a:hover { color: #fff; }

.footer-bottom {
	padding-block: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: .8rem;
}

.footer-bottom-links { display: flex; gap: 1.25rem; }

/* =========================================
   GDPR COOKIE BANNER
   ========================================= */
#myjob-cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: var(--color-secondary);
	color: #e2e8f0;
	border-top: 2px solid var(--color-primary);
	padding: 1.25rem 1.5rem;
	box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}
.cookie-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.cookie-title {
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: .25rem;
}
.cookie-text {
	font-size: .8rem;
	color: #94a3b8;
	flex: 1;
	min-width: 220px;
}
.cookie-text a { color: var(--color-primary); text-decoration: underline; }
.cookie-actions {
	display: flex;
	gap: .625rem;
	align-items: center;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.cookie-toggle-group {
	display: none;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: .75rem;
	width: 100%;
}
.cookie-toggle-group.is-open { display: flex; }
.cookie-toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .8rem;
	color: #94a3b8;
	cursor: pointer;
}
.cookie-toggle input[type="checkbox"] {
	width: 2.25rem;
	height: 1.25rem;
	appearance: none;
	background: #334155;
	border-radius: 99px;
	cursor: pointer;
	position: relative;
	transition: background .2s;
	flex-shrink: 0;
}
.cookie-toggle input[type="checkbox"]:checked { background: var(--color-primary); }
.cookie-toggle input[type="checkbox"]::after {
	content: '';
	position: absolute;
	top: .15rem;
	left: .15rem;
	width: .95rem;
	height: .95rem;
	background: #fff;
	border-radius: 50%;
	transition: left .2s;
}
.cookie-toggle input[type="checkbox"]:checked::after { left: calc(100% - 1.1rem); }

/* =========================================
   SOCIAL LOGIN BUTTONS
   ========================================= */
.social-login-wrapper {
	margin-top: 1.25rem;
}
.social-login-divider {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: var(--color-muted);
	font-size: .8rem;
	margin-bottom: 1rem;
}
.social-login-divider::before,
.social-login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}
.social-login-buttons {
	display: flex;
	flex-direction: column;
	gap: .625rem;
}
.btn-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	width: 100%;
	padding: .625rem 1rem;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-secondary);
	font-size: .875rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition);
}
.btn-social:hover { background: var(--color-bg); border-color: #94a3b8; }
.btn-social svg { flex-shrink: 0; }
.btn-social--google  { }
.btn-social--microsoft { }
.btn-social--linkedin { }

/* =========================================
   ADBLOCK GATE & OVERLAY
   ========================================= */
#adblock-overlay {
	position: fixed;
	inset: 0;
	z-index: 9990;
	background: rgba(15,23,42,.75);
	backdrop-filter: blur(4px);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.adblock-modal {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 1.25rem;
	max-width: 480px;
	width: 100%;
	padding: 2.5rem 2rem;
	text-align: center;
	box-shadow: var(--shadow-lg);
}
.adblock-modal h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: .75rem;
}
.adblock-modal p { color: var(--color-muted); font-size: .9rem; }
#job-content-gate {
	transition: opacity .35s ease;
}
.adblock-blurred {
	filter: blur(8px);
	pointer-events: none;
	user-select: none;
}

/* =========================================
   ACCOUNT TYPE TABS (register page)
   ========================================= */
.account-type-tabs {
	display: flex;
	gap: .5rem;
}
.account-type-tab {
	flex: 1;
	cursor: pointer;
}
.account-type-tab span {
	display: block;
	text-align: center;
	padding: .625rem .5rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	font-size: .875rem;
	font-weight: 500;
	color: var(--color-muted);
	transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.account-type-tab:hover span,
.account-type-tab.is-active span {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* =========================================
   COMPANY DASHBOARD
   ========================================= */
.company-dashboard {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 2rem;
	align-items: start;
}
@media (max-width: 768px) {
	.company-dashboard { grid-template-columns: 1fr; }
}
.dashboard-sidebar {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem;
}
.dashboard-nav a {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .625rem .875rem;
	border-radius: calc(var(--radius) - 2px);
	font-size: .875rem;
	font-weight: 500;
	color: var(--color-muted);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
}
.dashboard-nav a:hover,
.dashboard-nav a.is-active {
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
	color: var(--color-primary);
}
.dashboard-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.stat-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem;
	text-align: center;
}
.stat-card .stat-value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1;
}
.stat-card .stat-label {
	font-size: .75rem;
	color: var(--color-muted);
	margin-top: .25rem;
}
.dashboard-panel {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.75rem;
}
.dashboard-panel h2 {
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 1.25rem;
	padding-bottom: .875rem;
	border-bottom: 1px solid var(--color-border);
}
.danger-zone {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #fecaca;
}
.danger-zone h3 {
	color: var(--color-danger);
	font-size: .95rem;
	font-weight: 700;
	margin-bottom: .5rem;
}

/* =========================================
   LINKEDIN IMPORT (candidate dashboard)
   ========================================= */
.linkedin-import-box {
	background: var(--color-surface);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius);
	padding: 2rem;
	text-align: center;
	transition: border-color var(--transition);
}
.linkedin-import-box:hover { border-color: #0077b5; }
.linkedin-import-box .li-icon { color: #0077b5; font-size: 2rem; margin-bottom: .75rem; }
.linkedin-import-box p { font-size: .875rem; color: var(--color-muted); margin-top: .5rem; }
.footer-bottom-links a { color: #64748b; }
.footer-bottom-links a:hover { color: #fff; }

/* =========================================
   RESPONSIVE — requirements table (mobile)
   ========================================= */
@media (max-width: 600px) {
	/* Stack the table as labelled rows */
	.job-single-body table { display: block; }
	.job-single-body thead { display: none; }
	.job-single-body tbody,
	.job-single-body tr    { display: block; }
	.job-single-body td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: .5rem .75rem;
		border: none;
		border-bottom: 1px solid var(--color-border);
		font-size: .8rem;
	}
	.job-single-body tr { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: .625rem; overflow: hidden; }
	.job-single-body td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--color-muted);
		font-size: .75rem;
		text-transform: uppercase;
		letter-spacing: .04em;
		margin-right: .5rem;
	}
	.job-single-body td:last-child { border-bottom: none; }
}

/* =========================================
   COOKIE BANNER — button fixes on dark bg
   ========================================= */
.cookie-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.cookie-copy { flex: 1; min-width: 220px; }

.cookie-actions {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex-shrink: 0;
	min-width: 180px;
}

/* Override btn colours for the dark banner background */
#myjob-cookie-banner .btn-primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
#myjob-cookie-banner .cookie-btn-outline {
	background: transparent;
	border: 2px solid #475569;
	color: #e2e8f0;
	border-radius: var(--radius);
	padding: .35rem .875rem;
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition);
	line-height: 1.4;
}
#myjob-cookie-banner .cookie-btn-outline:hover {
	background: #1e293b;
	border-color: #94a3b8;
	color: #fff;
}
#myjob-cookie-banner .cookie-btn-ghost {
	background: transparent;
	border: 2px solid transparent;
	color: #64748b;
	border-radius: var(--radius);
	padding: .35rem .875rem;
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition);
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 2px;
}
#myjob-cookie-banner .cookie-btn-ghost:hover { color: #e2e8f0; text-decoration: none; }

.cookie-preferences {
	max-width: 1200px;
	margin: .875rem auto 0;
	padding-top: .875rem;
	border-top: 1px solid #1e293b;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.cookie-toggle-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	flex: 1;
}

@media (max-width: 680px) {
	.cookie-inner    { flex-direction: column; align-items: flex-start; }
	.cookie-actions  { flex-direction: row; flex-wrap: wrap; min-width: 0; width: 100%; }
	.cookie-preferences { flex-direction: column; align-items: flex-start; }
}

/* Social icons */
.social-links { display: flex; gap: .75rem; margin-top: 1rem; }
.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1e293b;
	color: #64748b;
	font-size: .875rem;
	transition: all var(--transition);
}
.social-link:hover { background: var(--color-primary); color: #fff; }

/* =========================================
   404 PAGE
   ========================================= */
.error-404 {
	text-align: center;
	padding-block: 5rem;
}

.error-404 .error-code {
	font-size: 8rem;
	font-weight: 900;
	line-height: 1;
	color: var(--color-border);
}

.error-404 h1 { font-size: 2rem; margin-bottom: .75rem; }
.error-404 p  { color: var(--color-muted); max-width: 480px; margin-inline: auto; margin-bottom: 2rem; }

/* =========================================
   UTILITIES
   ========================================= */
.section    { padding-block: 3rem; }
.section-lg { padding-block: 5rem; }

.text-center  { text-align: center; }
.text-muted   { color: var(--color-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
	.job-single { grid-template-columns: 1fr; }
	.footer-widgets { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	.menu-toggle { display: block; }

	.main-navigation {
		display: none;
		position: absolute;
		top: var(--header-h);
		left: 0;
		right: 0;
		background: var(--color-surface);
		border-bottom: 1px solid var(--color-border);
		padding: 1rem 1.5rem;
	}

	.main-navigation.is-open { display: flex; flex-direction: column; align-items: stretch; }
	.main-navigation ul { flex-direction: column; }
	.main-navigation .sub-menu { position: static; box-shadow: none; border: none; padding-left: 1rem; }

	.jobs-grid { grid-template-columns: 1fr; }
	.companies-grid { grid-template-columns: repeat(2, 1fr); }
	.content-sidebar-wrap { flex-direction: column; }
	.sidebar-area { width: 100%; }
	.footer-widgets { grid-template-columns: 1fr; }
	.form-row { grid-template-columns: 1fr; }
	.hero { padding-block: 3rem 2.5rem; }
	.hero-search { border-radius: var(--radius); flex-wrap: wrap; padding: .875rem; }
}

@media (max-width: 480px) {
	.companies-grid { grid-template-columns: repeat(2, 1fr); }
	.categories-grid { grid-template-columns: repeat(2, 1fr); }
	.hero-stats { gap: 1.5rem; }
}

/* =========================================
   VAGA ENCERRADA — banner + pill + card
   ========================================= */

/* Banner de topo na página da vaga */
.job-closed-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	color: #7f1d1d;
}
.job-closed-banner__icon { font-size: 1.25rem; flex-shrink: 0; }
.job-closed-banner strong { display: block; font-weight: 700; margin-bottom: .25rem; color: #991b1b; }
.job-closed-banner p { font-size: .875rem; line-height: 1.6; margin: 0; }

/* Pill na sidebar em vez do botão */
.job-closed-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--radius);
	color: #991b1b;
	font-weight: 700;
	font-size: .9rem;
	text-align: center;
}

/* Badge no card do arquivo */
.badge-closed {
	background: #fee2e2;
	color: #991b1b;
	font-size: .7rem;
	padding: .2rem .55rem;
	border-radius: 999px;
	font-weight: 600;
}

/* Card opacidade reduzida */
.job-card--closed { opacity: .65; }
.job-card--closed:hover { opacity: 1; transition: opacity .2s; }

/* =========================================
   SOCIAL SHARE — single job
   ========================================= */
.job-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .85rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	transition: filter .15s;
}
.share-btn:hover { filter: brightness(.88); }

.share-btn--linkedin { background: #0a66c2; color: #fff; }
.share-btn--whatsapp { background: #25d366; color: #fff; }
.share-btn--x        { background: #000;    color: #fff; }
.share-btn--email    { background: var(--color-bg); color: var(--color-secondary); border: 1px solid var(--color-border); }

/* =========================================
   VAGAS SIMILARES — single job
   ========================================= */
.similar-jobs .jobs-grid { gap: 1rem; }
.similar-jobs .job-card  { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; }

/* =========================================
   SALARY FILTER — archive
   ========================================= */
.filter-group--salary label { white-space: nowrap; }
.filter-group--salary .form-control { padding: .4rem .6rem; }

/* =========================================
   PASSWORD STRENGTH METER — register
   ========================================= */
#pass-strength-bar   { height: 4px; border-radius: 2px; background: var(--color-border); overflow: hidden; margin-top: .375rem; }
#pass-strength-fill  { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }
#pass-strength-label,
#pass-match-label    { font-size: .725rem; margin-top: .25rem; min-height: 1em; }

/* =========================================
   PRINT
   ========================================= */
@media print {
	.site-header, .site-footer, .sidebar-area { display: none; }
}