/*
Theme Name: Baltic
Theme URI: https://balticcareer.eu
Description: Custom lightweight theme for Baltic Career — a maritime job board. Hand-built, no page builder, no jQuery. Performance-first (target 90+ Lighthouse on all four categories, mobile + desktop). Visually replicates the current BalticCareer design.
Version: 1.0.1
Author: Baltic Career
Requires PHP: 8.1
Text Domain: baltic
*/

/* ==========================================================================
   Design tokens — sourced from the live balticcareer.eu brand
   ========================================================================== */
:root {
	--bc-primary: #0536B2;        /* brand deep blue (elementor accent) */
	--bc-primary-600: #04309F;    /* brand dark blue */
	--bc-secondary: #475bb2;      /* lighter blue accent */
	--bc-accent: #0536B2;         /* CTAs use brand blue (matches live) */
	--bc-accent-2: #ffd24a;       /* gold accent (pill icons, tile underlines) */
	--bc-header: #1B193E;         /* dark navy header bar */
	--bc-ink: #0F1011;            /* headings (elementor primary) */
	--bc-body: #545454;           /* body copy (elementor text) */
	--bc-muted: #6b7a99;
	--bc-line: #E8ECF2;           /* borders */
	--bc-bg: #ffffff;
	--bc-bg-soft: #EFF2F5;        /* section backgrounds */
	--bc-bg-blue: #E3EBFD;        /* soft blue tint sections */
	--bc-white: #ffffff;

	--bc-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bc-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--bc-radius: 10px;
	--bc-radius-lg: 16px;
	--bc-shadow: 0 1px 2px rgba(13,27,62,.06), 0 8px 24px rgba(13,27,62,.06);
	--bc-container: 1200px;
	--bc-space: clamp(1rem, 2.5vw, 2rem);
}

/* ==========================================================================
   Reset (minimal — only what we rely on)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	font-family: var(--bc-font-body);
	color: var(--bc-body);
	background: var(--bc-bg);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 { font-family: var(--bc-font); color: var(--bc-ink); line-height: 1.2; font-weight: 700; }
a { color: var(--bc-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.bc-container { width: 100%; max-width: var(--bc-container); margin-inline: auto; padding-inline: var(--bc-space); }
.bc-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.bc-section--soft { background: var(--bc-bg-soft); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--bc-primary); color: #fff; padding: .75rem 1rem; z-index: 100; }
/* Visually hidden, still read aloud. Lives in the theme because the header uses it on
   every page — it was defined only in the jobs plugin's stylesheet, so on any page that
   sheet was not enqueued the label rendered as visible text across the avatar. */
.bc-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus { left: 0; }
.bc-authwrap { background: var(--bc-bg-soft); min-height: 60vh; }
.bc-page { max-width: 860px; }
.bc-page__title { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 1.25rem; }
.bc-page__content p { margin-bottom: 1rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.bc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .75rem 1.5rem; border-radius: var(--bc-radius);
	font-family: var(--bc-font); font-weight: 600; font-size: .95rem;
	border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
	text-decoration: none; line-height: 1;
}
.bc-btn--primary { background: var(--bc-primary); color: #fff; }
.bc-btn--primary:hover { background: var(--bc-primary-600); text-decoration: none; }
.bc-btn--accent { background: var(--bc-accent); color: #fff; }
.bc-btn--accent:hover { filter: brightness(.95); text-decoration: none; }
.bc-btn--ghost { background: transparent; color: var(--bc-primary); border-color: var(--bc-line); }
.bc-btn--ghost:hover { border-color: var(--bc-primary); text-decoration: none; }

/* ==========================================================================
   Header — dark navy bar matching live balticcareer.eu
   ========================================================================== */
.bc-header { position: sticky; top: 0; z-index: 50; background: var(--bc-header); }
.bc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 80px; }
.bc-logo { display: inline-flex; align-items: center; gap: .5rem; }
.bc-logo img { height: 56px; width: auto; }
.bc-logo:hover { text-decoration: none; }

/* Nav: horizontal, no list bullets (fixes the broken bulleted menu). */
.bc-nav { display: flex; align-items: center; }
.bc-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2rem; }
.bc-menu li { margin: 0; }
.bc-nav a, .bc-menu a { color: #eaf0ff; font-family: var(--bc-font); font-weight: 500; font-size: .98rem; letter-spacing: .01em; }
.bc-nav a:hover, .bc-menu a:hover, .bc-menu .current-menu-item > a { color: #fff; text-decoration: none; }
.bc-menu .current-menu-item > a { font-weight: 700; }

.bc-header__actions { display: flex; align-items: center; gap: .6rem; }
.bc-header .bc-btn--primary { background: var(--bc-primary); text-transform: uppercase; letter-spacing: .03em; font-size: .82rem; padding: .7rem 1.35rem; }
.bc-header .bc-btn--primary:hover { background: var(--bc-primary-600); }
.bc-avatar { width: 40px; height: 40px; border-radius: 50%; background: #cfd6e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23889'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E") center/26px no-repeat; display: inline-block; flex: none; }
.bc-nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: #fff; }

/* ==========================================================================
   Section heading (e.g. "Why You Should Choose Us" with blue 2nd line)
   ========================================================================== */
.bc-heading { font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1.1; margin-bottom: 1.25rem; }
.bc-heading span { color: var(--bc-primary); display: block; }

/* ==========================================================================
   Job search bar (blue strip under hero)
   ========================================================================== */
.bc-jobsearch { background: var(--bc-primary); padding-block: 1.25rem; }
.bc-jobsearch__form { display: flex; gap: .75rem; flex-wrap: wrap; }
.bc-jobsearch__form select,
.bc-jobsearch__form input { flex: 1 1 220px; min-width: 0; border: 0; border-radius: var(--bc-radius); padding: .8rem 1rem; background: #fff; font-size: .95rem; }
.bc-jobsearch__form .bc-btn { background: var(--bc-header); flex: 0 0 auto; }
.bc-jobsearch__form .bc-btn:hover { background: #000; }

/* ==========================================================================
   Job listings feed (rows)
   ========================================================================== */
.bc-joblist { display: flex; flex-direction: column; }
.bc-job { display: flex; align-items: center; gap: 1rem; padding: 1rem .25rem; border-bottom: 1px solid var(--bc-line); text-decoration: none; transition: background .12s; }
.bc-job:hover { background: var(--bc-bg-soft); text-decoration: none; }
.bc-job__logo { flex: 0 0 auto; }
.bc-job__logo img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.bc-job__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.bc-job__title { color: var(--bc-primary); font-family: var(--bc-font); font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.bc-job:hover .bc-job__title { text-decoration: underline; }
.bc-job__company { color: var(--bc-muted); font-size: .86rem; }
.bc-job__meta { flex: 0 0 auto; color: var(--bc-muted); font-size: .85rem; white-space: nowrap; }

.bc-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; }
.bc-pagination__item { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .75rem; border-radius: var(--bc-radius); border: 1px solid var(--bc-line); color: var(--bc-body); font-weight: 600; font-size: .9rem; }
.bc-pagination__item:hover { border-color: var(--bc-primary); color: var(--bc-primary); text-decoration: none; }
.bc-pagination__item.is-active { background: var(--bc-primary); border-color: var(--bc-primary); color: #fff; }

/* ==========================================================================
   Split section (image + text, e.g. Why Choose Us / Contact)
   ========================================================================== */
.bc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.bc-split--reverse .bc-split__media { order: 2; }
.bc-split__media img { border-radius: var(--bc-radius-lg); width: 100%; box-shadow: var(--bc-shadow); }
.bc-split__media--bw img { filter: grayscale(1); }
.bc-split__body p { margin-bottom: .9rem; color: var(--bc-body); }

/* ==========================================================================
   Shared form primitives (used by auth, dashboard, apply & submit forms)
   ========================================================================== */
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.bc-field { display: block; margin-bottom: 1.1rem; }
.bc-field > span { display: block; font-family: var(--bc-font); font-weight: 600; font-size: .85rem; color: var(--bc-ink); margin-bottom: .4rem; }
.bc-field em { color: #d33; font-style: normal; }
.bc-field input, .bc-field textarea, .bc-field select { width: 100%; border: 1px solid var(--bc-line); border-radius: var(--bc-radius); padding: .8rem .9rem; background: var(--bc-bg-soft); font-size: .98rem; transition: border-color .15s, background .15s, box-shadow .15s; }
.bc-field input:focus, .bc-field textarea:focus, .bc-field select:focus { outline: none; border-color: var(--bc-primary); background: #fff; box-shadow: 0 0 0 3px rgba(5,54,178,.12); }
.bc-field input:disabled { opacity: .7; }
.bc-field.has-error input { border-color: #d33; background: #fff5f5; }
.bc-field__err { display: block; color: #d33; font-size: .8rem; margin-top: .35rem; }
.bc-field__hint { display: block; color: var(--bc-muted); font-size: .78rem; margin-top: .35rem; }
.bc-field__pw { position: relative; display: block; }
.bc-field__pw input { padding-right: 3rem; }
.bc-pw-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .35rem; cursor: pointer; color: var(--bc-muted); line-height: 0; }
.bc-pw-toggle.is-on, .bc-pw-toggle:hover { color: var(--bc-primary); }
.bc-field[hidden], [data-role][hidden] { display: none !important; }
.bc-auth__submit { justify-content: center; position: relative; }
.bc-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: bc-spin .6s linear infinite; }
.bc-auth__submit.is-loading .bc-spinner { display: inline-block; }
.bc-auth__submit.is-loading .bc-btn__label { opacity: .8; }
@keyframes bc-spin { to { transform: rotate(360deg); } }
.bc-auth__notice { border-radius: var(--bc-radius); padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .92rem; background: #fdecec; color: #a11; border: 1px solid #f5c6c6; }
.bc-auth__notice.is-ok { background: #eafaf0; color: #1a7f43; border-color: #b8e6c8; }

/* Contact form */
.bc-contact { background: #fff; border: 1px solid var(--bc-line); border-radius: var(--bc-radius-lg); padding: 1.5rem; box-shadow: var(--bc-shadow); }
.bc-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bc-contact label { display: block; font-size: .85rem; font-weight: 600; color: var(--bc-ink); margin-bottom: 1rem; font-family: var(--bc-font); }
.bc-contact input, .bc-contact textarea { width: 100%; margin-top: .4rem; border: 1px solid var(--bc-line); border-radius: var(--bc-radius); padding: .7rem .85rem; font-weight: 400; background: var(--bc-bg-soft); }
.bc-contact input:focus, .bc-contact textarea:focus { outline: 2px solid var(--bc-primary); background: #fff; }

/* ==========================================================================
   Footer — light panel matching live
   ========================================================================== */
.bc-footer { background: var(--bc-bg-soft); color: var(--bc-body); padding-top: 3rem; }
.bc-footer__inner { text-align: center; max-width: 720px; }
.bc-footer__mark img { width: 64px; height: 64px; margin: 0 auto 1rem; }
.bc-footer__tagline { color: var(--bc-body); font-size: .95rem; margin-bottom: 1.5rem; }
.bc-footer__social { display: flex; gap: .6rem; justify-content: center; margin-bottom: 1.5rem; }
.bc-footer__social a { width: 40px; height: 40px; border-radius: 50%; background: var(--bc-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.bc-footer__social a:hover { background: var(--bc-primary-600); }
.bc-footer__address { display: inline-flex; align-items: center; gap: .6rem; text-align: left; color: var(--bc-body); font-size: .9rem; margin-bottom: 2rem; }
.bc-footer__bottom { border-top: 1px solid var(--bc-line); padding-block: 1.25rem; }
.bc-footer__bottominner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--bc-muted); }
.bc-footer__bottominner nav { display: flex; gap: 1.25rem; }
.bc-footer__bottominner a { color: var(--bc-muted); }
.bc-footer__bottominner a:hover { color: var(--bc-primary); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ==========================================================================
   Hero — full-bleed ship photo with left-aligned white copy (matches live)
   ========================================================================== */
/* Height is viewport-relative and capped so hero never dominates the screen —
   leaves room for the vessel tiles + trust bar in the first view. */
.bc-hero { position: relative; height: clamp(300px, 46vh, 440px); display: flex; align-items: center; background: #0a1830; overflow: hidden; }
.bc-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: 0; }
.bc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,16,40,.78) 0%, rgba(6,16,40,.5) 45%, rgba(6,16,40,.15) 100%); z-index: 1; }
.bc-hero__inner { position: relative; z-index: 2; color: #fff; }
.bc-hero__title { color: #fff; font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.08; font-weight: 800; margin-bottom: .6rem; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.bc-hero__subtitle { color: #eef3ff; font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 700; font-family: var(--bc-font); text-shadow: 0 1px 12px rgba(0,0,0,.4); }

/* feature pills over the hero */
.bc-pills { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; padding: 0; margin: 1.5rem 0 0; }
.bc-pill { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-family: var(--bc-font); font-weight: 600; font-size: .9rem; }
.bc-pill__ic { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.15); color: var(--bc-accent-2, #ffd24a); border: 1px solid rgba(255,255,255,.25); }

/* vessel category tiles */
.bc-vessels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.bc-vessel { position: relative; height: clamp(120px, 15vh, 170px); background-size: cover; background-position: center; display: flex; align-items: flex-end; overflow: hidden; }
.bc-vessel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,30,0) 40%, rgba(8,16,30,.75)); transition: background .2s; }
.bc-vessel:hover::after { background: linear-gradient(180deg, rgba(5,54,178,.15) 30%, rgba(5,54,178,.8)); }
.bc-vessel__label { position: relative; z-index: 1; color: #fff; font-family: var(--bc-font); font-weight: 700; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; padding: .9rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.bc-vessel__label::before { content: ""; display: block; width: 26px; height: 3px; background: var(--bc-accent-2, #ffd24a); margin-bottom: .4rem; }

/* trust bar */
.bc-trust { background: var(--bc-header); color: #dfe6ff; padding-block: 1.25rem; }
.bc-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bc-trust__item { display: flex; align-items: center; gap: .75rem; font-family: var(--bc-font); font-weight: 600; font-size: .88rem; }
.bc-trust__ic { display: inline-flex; width: 42px; height: 42px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: var(--bc-accent-2, #ffd24a); flex: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
	.bc-nav { position: fixed; inset: 80px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bc-header); padding: .5rem 1rem 1rem; transform: translateY(-130%); transition: transform .2s ease; box-shadow: var(--bc-shadow); }
	.bc-nav[data-open="true"] { transform: translateY(0); }
	.bc-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.bc-menu a { display: block; padding: .95rem .25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
	.bc-nav-toggle { display: inline-flex; }
	.bc-header__actions .bc-btn { display: none; }
	.bc-split { grid-template-columns: 1fr; }
	.bc-split--reverse .bc-split__media { order: 0; }
	.bc-footer__bottominner { flex-direction: column; gap: .5rem; }
	.bc-vessels { grid-template-columns: repeat(3, 1fr); }
	.bc-trust__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.bc-vessels { grid-template-columns: repeat(2, 1fr); }
	.bc-pills { gap: .5rem 1rem; }
	.bc-pill { font-size: .82rem; }
}
@media (max-width: 520px) {
	.bc-contact__row { grid-template-columns: 1fr; }
	.bc-job__meta { display: none; }
	.bc-jobsearch__form .bc-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.bc-crumbs { background: var(--bc-bg-soft); border-bottom: 1px solid var(--bc-line); }
.bc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: .75rem 0; font-size: .85rem; }
.bc-crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--bc-muted); }
.bc-crumbs li:not(:first-child)::before { content: "›"; color: var(--bc-muted); opacity: .6; }
.bc-crumbs a { color: var(--bc-muted); }
.bc-crumbs a:hover { color: var(--bc-primary); }
.bc-crumbs [aria-current="page"] { color: var(--bc-ink); font-weight: 600; }

/* reCAPTCHA spacing */
.bc-recaptcha { margin: .25rem 0 1.25rem; }

/* About / Contact content pages */
.bc-lead { font-size: 1.2rem; color: var(--bc-ink); margin-bottom: 1.5rem; line-height: 1.6; }
.bc-page__content h2 { font-size: clamp(1.3rem,3vw,1.8rem); margin: 2rem 0 .75rem; }
.bc-contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2.5rem; margin-top: 1.5rem; align-items: start; }
.bc-contact-info { background: var(--bc-bg-soft); border-radius: var(--bc-radius-lg); padding: 1.75rem; }
.bc-contact-item { margin-bottom: 1.25rem; }
.bc-contact-item strong { color: var(--bc-ink); font-family: var(--bc-font); }
@media (max-width:760px){ .bc-contact-grid { grid-template-columns: 1fr; } }

/* honeypot — visually + AT hidden (global, for contact form off auth pages) */
.bc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Banner layout "tall": hero fills the space the vessel tiles would use */
.bc-hero--tall { height: clamp(440px, 62vh, 620px); }

/* ==========================================================================
   Header account menu
   Opens on hover for mice, on click/tap for touch (where hover does not exist),
   and on keyboard focus. The panel sits inside the same wrapper as the avatar so
   the pointer can travel from one to the other without the menu closing.
   ========================================================================== */
.bc-usermenu { position: relative; display: inline-block; }
.bc-usermenu__toggle { border: 0; padding: 0; cursor: pointer; }
.bc-usermenu__panel {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
	min-width: 232px; padding: .4rem; background: #fff;
	border: 1px solid var(--bc-line); border-radius: var(--bc-radius-lg);
	box-shadow: 0 12px 32px rgba(15,16,17,.16);
}
/* A small bridge over the gap, so moving the mouse down does not close the menu. */
.bc-usermenu__panel::before { content: ""; position: absolute; inset: -10px 0 100% 0; }
.bc-usermenu__panel[hidden] { display: none; }
.bc-usermenu__head { padding: .6rem .7rem .7rem; border-bottom: 1px solid var(--bc-line); margin-bottom: .35rem; }
.bc-usermenu__head strong { display: block; color: var(--bc-ink); font-size: .95rem; overflow-wrap: anywhere; }
.bc-usermenu__head span { display: block; color: var(--bc-muted); font-size: .78rem; }
.bc-usermenu__sub { color: #1a7f43 !important; font-weight: 600; margin-top: .2rem; }
.bc-usermenu__panel a {
	display: block; padding: .55rem .7rem; border-radius: var(--bc-radius);
	color: var(--bc-body); font-size: .92rem; text-decoration: none;
}
.bc-usermenu__panel a:hover, .bc-usermenu__panel a:focus-visible {
	background: var(--bc-bg-soft); color: var(--bc-primary); text-decoration: none;
}
.bc-usermenu__out { border-top: 1px solid var(--bc-line); margin-top: .35rem; padding-top: .6rem !important; color: #c0392b !important; }
.bc-usermenu__out:hover { background: #fdf0ee !important; color: #c0392b !important; }
@media (hover: hover) and (pointer: fine) {
	.bc-usermenu:hover .bc-usermenu__panel,
	.bc-usermenu:focus-within .bc-usermenu__panel { display: block !important; }
}
@media (max-width: 560px) {
	.bc-usermenu__panel { right: -8px; min-width: 210px; }
}