/* Styles for the parts of the static site that replaced PHP-backed widgets.
   Deliberately narrow: everything else is still the crawled Goya theme CSS. */

/* ---- careers listing ---- */
.imoniyame-jobs-status {
  padding: 2rem 0;
  color: #6b7674;
  text-align: center;
}
.imoniyame-jobs-error { color: #b3261e; }

.job_listings .job_listing .meta li.closing-soon { color: #b3261e; font-weight: 600; }
.job_listings .job_listing .meta li.remote::before { content: "• "; }

/* ---- single job page ---- */
/* The job page fills the same rail as the rest of the site. It was capped at
   780px, which left it as a narrow ribbon inside a 1420px container. The width
   is now spent on a second column rather than on over-long lines of text: the
   description keeps a readable measure while the facts a candidate scans for
   sit beside it. */
.job-page { max-width: 100%; }
.job-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 3.5rem;
  align-items: start;
}
.job-detail { max-width: 74ch; }   /* readable measure, not the full column */

.job-page-head { margin-bottom: 2rem; }
.job-page-head h1 { margin: 0 0 .6rem; }

.job-status-pill {
  display: inline-block;
  margin: 0;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.job-status-open { background: #e6f1eb; color: #1f6b4f; border: 1px solid #bfdccd; }
.job-status-closed { background: #f3f3f1; color: #6b7674; border: 1px solid #dfe4e2; }

/* Sidebar card: sticky so the details and the action stay reachable while
   reading a long description. */
.job-side-card {
  position: sticky;
  top: 2rem;
  background: #fafbfa;
  border: 1px solid #e2e5e3;
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
}
.job-side-card h2 {
  font-size: .78rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7674;
  margin: 0 0 1rem !important;
}

/* Buttons: a real button, not an underlined word, so the next action is
   unmistakably clickable. */
.job-btn {
  display: inline-block;
  padding: .7rem 1.3rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.job-btn-primary { background: #1f6b4f; color: #fff !important; border: 1px solid #1f6b4f; }
.job-btn-primary:hover { background: #17513c; border-color: #17513c; }
.job-btn-quiet {
  background: #fff;
  color: #1f6b4f !important;
  border: 1px solid #bfdccd;
}
.job-btn-quiet:hover { background: #f1f7f3; border-color: #1f6b4f; }
.job-btn-block { display: block; text-align: center; margin-top: 1.2rem; }

/* Closed-position alert */
.job-alert {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin: 2.5rem 0 0;
  padding: 1.4rem 1.6rem;
  border-radius: 8px;
  background: #fdf6ec;
  border: 1px solid #edd9b5;
  border-left: 5px solid #c98a12;
}
.job-alert-icon {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #c98a12;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.9rem;
  text-align: center;
}
.job-alert-body { flex: 1 1 auto; }
.job-alert-body h2 {
  margin: 0 0 .4rem !important;
  font-size: 1.15rem !important;
  color: #7a5209;
}
.job-alert-body p { margin: 0 0 .5rem; color: #6b5325; }
.job-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem !important;
}

@media (max-width: 1024px) {
  .job-page-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .job-detail { max-width: 100%; }
  .job-side-card { position: static; }
}
.job-detail-back { margin-bottom: 1.5rem; }
.job-detail-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1.5rem;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid #e2e5e3;
  border-bottom: 1px solid #e2e5e3;
}
.job-detail-meta dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7674;
}
.job-detail-meta dd { margin: 0; }
.job-detail-summary { font-size: 1.08rem; }
.job-detail-body p { margin: 0 0 1rem; }
.job-detail-empty, .job-detail-loading { max-width: 780px; margin: 0 auto; padding: 3rem 0; text-align: center; }

/* ---- forms (application + contact) ---- */
.job-apply { max-width: 780px; margin: 3rem auto 0; }
.job-apply .field, .imoniyame-contact-form .field { margin-bottom: 1.1rem; }
.job-apply label, .imoniyame-contact-form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .3rem;
}
.job-apply input[type=text],
.job-apply input[type=email],
.job-apply input[type=tel],
.job-apply textarea,
.imoniyame-contact-form input[type=text],
.imoniyame-contact-form input[type=email],
.imoniyame-contact-form textarea {
  width: 100%;
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid #d8dcda;
  border-radius: 4px;
  background: #fff;
}
.job-apply textarea, .imoniyame-contact-form textarea { resize: vertical; }

/* The honeypot must be unreachable for people but present for bots, so it is
   moved off-screen rather than display:none -- some bots skip hidden inputs. */
.job-apply-hp, .imoniyame-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.job-apply-status, .imoniyame-form-status { margin-top: .75rem; font-size: .92rem; }
.job-apply-status.is-error, .imoniyame-form-status.is-error { color: #b3261e; }
.job-apply-status.is-success, .imoniyame-form-status.is-success { color: #1f6b4f; }

/* ============================================================
   Layout containment
   ------------------------------------------------------------
   Content is aligned to the same rail the header uses, so every
   section starts exactly where the logo does.

   The theme's .container is RESPONSIVE -- Bootstrap-style, with a
   different max-width at each breakpoint. An earlier version of this
   file assumed a flat 1420px from 1200px upward, which is only true
   at 1490px and above. Between 1200 and 1490 -- which is where most
   laptops sit, a 1440px MacBook included -- the header was 1140px
   wide while page content ran nearly edge to edge, putting the hero
   text well to the LEFT of the logo.

   These values mirror goya/assets/css/grid.css exactly. If the theme
   ever changes them, change them here too.
   ============================================================ */

:root {
  --imoniyame-gutter: 15px;
  --imoniyame-rail: 100%;          /* fluid below the first breakpoint */
}
@media (min-width: 576px)  { :root { --imoniyame-rail: 540px; } }
@media (min-width: 768px)  { :root { --imoniyame-rail: 720px; } }
@media (min-width: 992px)  { :root { --imoniyame-rail: 960px; } }
@media (min-width: 1200px) { :root { --imoniyame-rail: 1140px; } }
@media (min-width: 1490px) { :root { --imoniyame-rail: 1420px; } }

/* Distance from the viewport edge to where content should start: half the
   leftover space, plus the container's own gutter. The logo sits at exactly
   this offset (container edge + 15px), so full-width sections padded by it
   line up with the logo at every breakpoint. */
:root {
  --imoniyame-inset: max(
    var(--imoniyame-gutter),
    calc((100% - var(--imoniyame-rail)) / 2 + var(--imoniyame-gutter))
  );
}

/* Elementor flexbox containers (newer editor) */
.e-con { --container-max-width: var(--imoniyame-rail); }

/* Elementor writes a per-element rule for any section given a custom width
   in the editor, e.g. ".elementor-element-abc > .e-con-inner{max-width:1300px}".
   That selector outranks the variable above, so the inner wrapper is forced
   onto the rail. Matched as a descendant because a few containers nest their
   inner wrapper one level deeper. */
.e-con-inner,
.elementor-section > .elementor-container {
  max-width: var(--imoniyame-rail) !important;
  margin-inline: auto !important;
  /* The theme's .container is rail-wide INCLUDING a 15px gutter, so its
     content -- the logo, the menu -- starts one gutter in from the box edge.
     Elementor's inner wrapper has no padding of its own, so without this it
     sat exactly one gutter to the left of the logo on every boxed section. */
  /* !important because Elementor's own ".e-con > .e-con-inner" rule is more
     specific and resets the inline padding to zero. */
  padding-inline: var(--imoniyame-gutter) !important;
}

/* Nested inners must not add the gutter again. */
.e-con-inner .e-con-inner { padding-inline: 0 !important; }

/* Elementor's own base rule gives .e-con-inner display:flex. On two pages
   (TSR 10 and the blog post) that stylesheet is not loaded, so the wrapper
   fell back to display:inline -- and max-width has no effect on an inline
   box, which is why those pages ran full-bleed while computing a 1140px
   max-width. Restating the default here removes the dependency; it is a
   no-op wherever Elementor's CSS is present. */
.e-con > .e-con-inner { display: flex; }

/* Full-width sections keep their background bleeding edge to edge; only the
   content is brought onto the rail. */
.e-con.e-con-full,
.elementor-section.elementor-section-full_width > .elementor-container,
.vc_row.et_full_width > .vc_column_container,
.vc_row[data-vc-full-width] > .vc_column_container {
  padding-inline: var(--imoniyame-inset);
}

/* Only the outermost full-width container gets the inset. A nested one would
   compound it: the percentage in the calc resolves against the parent's
   already-padded width, so the offsets add up and content drifts right of the
   logo by one gutter per level of nesting. */
.e-con.e-con-full .e-con.e-con-full,
.e-con .e-con.e-con-full {
  padding-inline: 0;
}

/* Long-form prose stays readable even where the rail is wide. */
.elementor-widget-text-editor .elementor-widget-container > p,
.elementor-widget-theme-post-content p {
  max-width: 78ch;
}

/* Nothing should ever cause a horizontal scrollbar. */
html, body { overflow-x: hidden; }

/* ---- closed roles -------------------------------------------------------
   Closed positions stay listed rather than vanishing, so the careers page
   still shows what the company has been hiring for. They are stepped back
   visually and badged, and their detail page swaps the application form for
   a notice. */
.job_listings .job_listing.job-is-closed { opacity: .62; }
.job_listings .job_listing.job-is-closed:hover { opacity: .8; }

.job_listings .job_listing .meta li.job-closed-badge {
  background: #f2f2f0;
  color: #6b7674;
  border: 1px solid #dfe4e2;
  border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.job-closed-banner {
  display: inline-block;
  background: #f7eceb;
  color: #b3261e;
  border: 1px solid #eccfcd;
  border-radius: 4px;
  padding: .35rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.job-apply-closed {
  border-top: 1px solid #e2e5e3;
  padding-top: 1.5rem;
  color: #5d6b6d;
}

/* Job page section rhythm.
   The section headings (Key responsibilities, Requirements, Qualifications,
   Skills, Compensation) are written straight into .job-detail as bare <h2> +
   <ul>, so they were picking up the theme's symmetric h2 margins. That left
   each heading sitting equidistant between the list above it and its own list
   below, so it read as belonging to neither.

   The rule throughout: a large space ABOVE a heading separates it from the
   previous section, and a small space BELOW binds it to its own content. Gaps
   between sections come from the heading's margin-top, never from a trailing
   margin on the list, so the two cannot compound. */
.job-detail h2,
.job-detail-body h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 .45rem;   /* far from what came before, close to what follows */
  line-height: 1.3;
}
.job-detail h3,
.job-detail-body h3 {
  font-size: 1.08rem;
  margin: 1.8rem 0 .35rem;
}

/* A heading's own list starts immediately beneath it. */
.job-section > h2:first-child { margin-top: 0; }
.job-section { margin-top: 2.5rem; }
.job-section h2 { margin-top: 0 !important; }

.job-detail h2 + ul,
.job-detail h2 + ol,
.job-detail h3 + ul,
.job-detail h3 + ol,
.job-detail-body h2 + ul,
.job-detail-body h2 + ol,
.job-detail-body h3 + ul,
.job-detail-body h3 + ol { margin-top: 0; }

.job-detail ul,
.job-detail ol,
.job-detail-body ul,
.job-detail-body ol {
  margin: 0 0 .25rem;
  padding-left: 1.35rem;
}
.job-detail li,
.job-detail-body li { margin-bottom: .45rem; line-height: 1.6; }
.job-detail li:last-child,
.job-detail-body li:last-child { margin-bottom: 0; }

.job-detail-body p { margin: 0 0 1rem; }
.job-detail-body p:last-child { margin-bottom: 0; }

/* The first heading follows the description, which already has its own
   bottom spacing, so it does not need the full section gap. */
.job-detail-body + h2 { margin-top: 2rem; }

.job-detail-body blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid #e2e5e3;
  color: #5d6b6d;
}
.job-detail-body a { text-decoration: underline; }