/* Gold Star Personnel — components shared by the public pages.

   Generated from the rules that index.css, employer.css, jobseeker.css and
   privacy.css each carried their own copy of: the language switcher, the back
   button, the buttons, the form fields, the FAQ accordion, the contact card and
   the footer. Four copies meant four places to edit and four chances to drift,
   which is how the same component ended up with different values per page.

   Loaded by app/layout.php after base.css and before the page's own stylesheet.
   Only declarations that were already identical on every page that used them
   live here; anything a single page did differently stayed in that page's file
   and still wins, because it is loaded later. */

body {
  background: var(--charcoal);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}

.hero-eyebrow {
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-weight: 300;
  color: var(--white);
}

.hero-tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

.lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.lang-current {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid rgba(201,147,42,0.3);
  padding: 7px 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  transition: border-color .3s;
  white-space: nowrap;
}

.lang-arrow {
  opacity: .6;
  transition: transform .3s;
}

.lang-switcher.open .lang-arrow {
  transform: rotate(180deg);
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--charcoal2);
  border: 1px solid rgba(201,147,42,0.2);
  min-width: 150px;
  z-index: 300;
}

.lang-switcher.open .lang-menu {
  display: block;
}

.lang-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s, background .2s;
}

.lang-menu button.active {
  color: var(--gold);
}

.launch-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--charcoal);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

section[id] {
  scroll-margin-top: 96px;
}

.gold-rule-center {
  display:block;
  width:50px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 auto;
}

.section-label {
  font-size:10px;
  font-weight:600;
  letter-spacing:6px;
  text-transform:uppercase;
  color:var(--gold);
}

.btn {
  display:inline-block;
  padding:14px 44px;
  border:1px solid var(--gold);
  color:var(--gold-light);
  font-weight:600;
  letter-spacing:4px;
  text-transform:uppercase;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:color .4s;
  cursor:pointer;
  background:none;
  font-family:'Inter',sans-serif;
}

.btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--gold),#7a5600);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s;
}

.btn:hover::before {
  transform:scaleX(1);
}

.btn:hover {
  color:#111;
}

.btn span {
  position:relative;
  z-index:1;
}

.btn[disabled] {
  opacity:0.65;
  cursor:not-allowed;
}

.nav-left {
  display:flex;
  align-items:center;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  transition: color .3s;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.back-btn:hover {
  color: var(--gold-light);
}

.back-btn .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 14px;
  flex: 0 0 22px;
  transition: transform .3s;
  position: relative;
}

.back-btn .arrow svg {
  display: block;
  width: 22px;
  height: 14px;
  overflow: visible;
}

.back-btn:hover .arrow {
  transform:translateX(-3px);
}

.lang-current:hover {
  border-color:var(--gold);
}

.lang-menu button:hover {
  color:var(--gold-light);
  background:var(--charcoal3);
}

.why-grid {
  display:grid;
  gap:2px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.why-card {
  background:var(--charcoal3);
  border:1px solid rgba(201,147,42,0.1);
  padding:44px 36px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.why-icon {
  border:1px solid rgba(201,147,42,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
}

.faq-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  max-width:1000px;
  margin:0 auto;
}

.faq-item {
  background:var(--charcoal2);
  border:1px solid rgba(201,147,42,0.1);
  padding:36px 40px;
  cursor:pointer;
  transition:border-color .3s,background .3s;
  position:relative;
  overflow:hidden;
}

.faq-item::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(to bottom,var(--gold-light),var(--gold));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s;
}

.faq-q {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.faq-q-text {
  font-family:'Playfair Display',serif;
  font-size:18px;
  font-weight:600;
  color:var(--white);
  flex:1;
}

.faq-toggle {
  color:var(--gold);
  flex-shrink:0;
  transition:transform .3s;
  font-weight:300;
  line-height:1;
}

.faq-item.open .faq-toggle {
  transform:rotate(45deg);
}

.faq-a {
  font-weight:300;
  letter-spacing:.6px;
  line-height:2;
  color:var(--muted);
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease,margin-top .3s;
}

.faq-item.open .faq-a {
  margin-top:18px;
}

.form-wrap {
  max-width:740px;
  margin:0 auto;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:48px;
}

.form-field {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-field label {
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--gold);
}

.form-field input,.form-field select,.form-field textarea {
  background:var(--charcoal3);
  border:1px solid rgba(201,147,42,0.18);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-weight:300;
  padding:14px 18px;
  outline:none;
  transition:border-color .3s;
  width:100%;
  appearance:none;
}

.form-field input::placeholder,.form-field textarea::placeholder {
  color:rgba(255,255,255,.2);
}

.form-field input:-webkit-autofill,
    .form-field input:-webkit-autofill:hover,
    .form-field input:-webkit-autofill:focus,
    .form-field input:-webkit-autofill:active,
    .form-field textarea:-webkit-autofill,
    .form-field textarea:-webkit-autofill:hover,
    .form-field textarea:-webkit-autofill:focus,
    .form-field textarea:-webkit-autofill:active,
    .form-field select:-webkit-autofill,
    .form-field select:-webkit-autofill:hover,
    .form-field select:-webkit-autofill:focus,
    .form-field select:-webkit-autofill:active {
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px var(--charcoal3) inset;
  box-shadow: 0 0 0 1000px var(--charcoal3) inset;
  border: 1px solid rgba(201,147,42,0.18);
  transition: background-color 9999s ease-out 0s;
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-field input:focus,.form-field select:focus,.form-field textarea:focus {
  border-color:rgba(201,147,42,0.6);
}

.form-field select {
  cursor:pointer;
}

.form-field select option {
  background:var(--charcoal2);
}

.form-field textarea {
  resize:vertical;
}

.form-submit {
  margin-top:36px;
  text-align:center;
}

#form-error {
  display:none;
  text-align:center;
  margin: 22px auto 0;
  max-width: 560px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.8;
  color: rgba(220,80,80,0.95);
}

#form-success {
  display:none;
  text-align:center;
  padding:60px 0;
}

#form-success .success-icon {
  font-size:36px;
  color:var(--gold);
  margin-bottom:18px;
}

#form-success h3 {
  font-family:'Playfair Display',serif;
  font-size:28px;
  color:var(--white);
  margin-bottom:10px;
}

#form-success p {
  color:var(--muted);
  letter-spacing:1px;
  line-height:2;
}

.form-consent {
  margin-top: 28px;
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.95;
}

.form-consent a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,147,42,0.35);
  transition: color .3s, border-color .3s;
}

.form-consent a:hover {
  color: var(--gold-light);
  border-color: rgba(245,200,66,0.7);
}

.contact-name {
  font-family:'Playfair Display',serif;
  font-size:26px;
  font-weight:600;
  color:var(--white);
}

.contact-detail {
  display:flex;
  align-items:center;
  gap:14px;
}

.contact-detail-icon {
  width:34px;
  height:34px;
  border:1px solid rgba(201,147,42,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--gold);
}

.contact-detail-icon svg {
  width:14px;
  height:14px;
}

.contact-detail-value {
  font-family:'Playfair Display',serif;
  font-size:18px;
  font-weight:400;
  color:rgba(255,255,255,.8);
  letter-spacing:.5px;
}

.footer-strip {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding-top:20px;
}

.footer-strip .logo-row {
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-strip .logo-row span {
  font-family:'Playfair Display',serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--white);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .lang-current {
    -webkit-tap-highlight-color: transparent;
  }

  .form-field input, .form-field select, .form-field textarea {
    font-size: 16px !important;
    padding: 15px 16px !important;
  }

  .form-field label {
    font-size: 10px !important;
    letter-spacing: 2px;
  }

  .form-grid {
    gap: 18px !important;
  }

  .btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .form-submit .btn, button.form-submit, .form-submit {
    width: 100%;
  }

  .faq-q {
    min-height: 44px;
  }

  nav {
    padding: 12px 18px !important;
    gap: 12px !important;
  }

  .back-btn, .nav-left a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 400px) {
  #hero, #about, #how, #why, #faq, #contact-form, #contact {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Additions ────────────────────────────────────────────────────────────
   Written by hand rather than hoisted: these back the markup that moved into
   app/layout.php (contact_card, footer_strip) and replace the style=""
   attributes those blocks used to carry inline. */

/* The phone number and email are links now, not plain text. They should look
   exactly as they did before, and only pick up colour on hover. */
a.contact-detail-value {
  text-decoration: none;
  transition: color .3s;
}
a.contact-detail-value:hover {
  color: var(--gold-light);
}

/* The "are you the other kind of visitor?" line above the footer logo. */
.footer-cross {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.footer-cross a {
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(201,147,42,0.6), 0 0 24px rgba(201,147,42,0.3);
}
.footer-cross a:hover {
  text-decoration: underline;
}

.footer-strip .logo-row {
  margin-top: 16px;
}

/* Required fields carried no visual marker at all, so the first signal that a
   field was mandatory was the error message after submitting. */
.form-field:has([aria-required="true"]) label::after {
  content: ' *';
  color: var(--gold);
}

/* ── Replacements for style="" attributes ─────────────────────────────────
   The section headers all carried the same handful of inline declarations,
   repeated on every section of every page in both languages. */

.section-header .gold-rule-center,
.js-section-header .gold-rule-center {
  margin-top: 14px;
}

/* The about section's rule is left-aligned, not centred: its original inline
   style was `margin:14px 0 0 0`, which also cancelled the `margin: 0 auto`
   that .gold-rule-center sets. Keep the full shorthand or it re-centres. */
.about-left .gold-rule-center {
  margin: 14px 0 0 0;
}

/* Last section on the page: the footer strip supplies the spacing instead. */
.section-header.is-tight,
.js-section-header.is-tight {
  margin-bottom: 0;
}

/* The "why us" header sits above the decorative rings and must stay on top. */
.js-why .js-section-header {
  position: relative;
  z-index: 1;
}