/* =========================================
   CORE THEME VARIABLES
   ========================================= */
:root {
    /* global palette */
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --line: #d2d2d7;
    --tint: #0071e3;
    --tint-hover:#0062ca;
    --bg: #fff;
    --bg-soft: #fbfbfd;

    /* header sizing (JS will overwrite --gH with real value) */
    --gH: 48px;           /* fallback mobile */
    --section-h: 56px;    /* white bar min-height */
    --container-w: 1240px;
}

@media (min-width:769px) {
    :root { --gH: 44px; } /* fallback desktop */
}

/* Force the SAME font everywhere */
html, body, button, input, select, textarea {
    font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons",
                 "Apple Legacy Chevron", "Helvetica Neue",
                 "Helvetica", "Arial", sans-serif !important;
}
a.cta.serch:hover {
    text-decoration: none;
    color: white;
    background: #464646;
}
/* =========================================
   GLOBAL RESETS / TYPOGRAPHY
   ========================================= */

/* Prevent layout shift when content height changes (reserve scrollbar space) */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
}

* { box-sizing: border-box; }

a { color: var(--tint); text-decoration: none; }
a:hover { color: #005bb6; 
      text-decoration: underline;
}

/* container utility */
.aheader {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.container-xl { max-width: 1200px; }

/* =========================================
   TOP SITE HEADER (light bar)
   ========================================= */
.site-header {
    background: #f5f5f7;
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
}

.site-header .brand { font-weight: 600; }

@media (max-width:767.98px) {
    .site-header .btn { padding: 6px 10px; } /* bigger tap target */
}

/* =========================================
   GLOBAL DARK BAR (STICKY AT TOP)
   ========================================= */
.global-bar {
    background: #3a3a3c;
    color: #f5f5f7;
    position: sticky;
    top: 0;
    z-index: 1000;
    transform: translateY(0);
    transition: transform .25s ease;
}

.global-bar .container { min-height: var(--gH); }

.brand { font-weight: 700; font-size: 18px; }

.global-links { display: flex; gap: 30px; }
nav.global-links a {
    color: #fff;
    text-decoration: none;
}
.global-links a { font-size: 12px; opacity: .85; }
.global-links a:hover { opacity: 1; }

.global-actions { display: flex; gap: 10px; }

.icon-btn {
    background: transparent;
    border: 0;
    color: #f5f5f7;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}

/* mobile drawer for global */
.global-drawer {
    background: #2c2c2e;
    color: #f5f5f7;
    padding: 12px 20px;
}
.global-drawer nav { display: grid; gap: 10px; }

/* hide dark bar when scrolling down (JS toggles this class) */
.body--collapse-header .global-bar { transform: translateY(-100%); }

/* =========================================
   SECTION WHITE BAR (STICKY)
   ========================================= */
.section-bar {
    position: sticky;
    top: var(--gH); /* sits just under dark bar */
    z-index: 999;
    background: #fff;
    color: var(--ink);
    border-top: 1px solid #e5e5e7;
    border-bottom: 1px solid #e5e5e7;
}
.body--collapse-header .section-bar { top: 0; } /* when top bar hidden */

.section-bar .container { min-height: var(--section-h); }

.section-left { display: flex; align-items: center; gap: 10px; }
.section-title { font-size: 20px; font-weight: 600; color: #1d1d1f; }

.section-expand {
    background: transparent; border: 0; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 10px; color: #1d1d1f; cursor: pointer;
}
.section-expand .chev { transition: transform .2s ease; }
.section-expand.open .chev { transform: rotate(180deg); }

.section-links { display: flex; gap: 22px; align-items: center; }
.section-links a { color: #5f5f62; font-size: 14px; }
.section-links a.active, .section-links a:hover { color: #000; }

/* CTA pill */
.cta {
    background: #000;
    color: #fff;
    border-radius: 999px;
    padding: 3px 13px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
}

/* mobile dropdown for section links */
.section-drawer { border-bottom: 1px solid #e5e5e7; background: #fff; display: grid; }
.section-drawer a { padding: 12px 20px; color: #5f5f62; }
.section-drawer a.active { color: #000; }

/* =========================================
   SEARCH PAGE BITS
   ========================================= */
.search-hero { padding: 40px 0; border-bottom: 1px solid var(--line); }

.search-wrap { max-width: 760px; margin-inline: auto; position: relative; }

.search-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 1.1rem;
}
.search-input:focus { border-color: var(--tint); box-shadow: 0 0 0 3px rgba(0,113,227,.2); }

.search-ico {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: var(--muted); font-size: 20px;
}

.subtext { color: var(--muted); font-size: .95rem; }

/* toolbar */
.toolbar { border-bottom: 1px solid var(--line); padding: 10px 0; background: var(--bg); }

/* filters */
.filter-title { font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--line); }

.filter-block { border-bottom: 1px solid var(--line); padding: 14px 0; }

.filter-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.filter-head .title { font-weight: 600; }

.plus {
    width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1;
}

.filter-body { padding: 10px 0 2px; }

.form-check {
    display: flex; align-items: center; gap: .5rem; margin: .35rem 0;
}
.form-check-label { color: var(--muted); }

/* job accordion/list */
.job-item { border-bottom: 1px solid var(--line); padding: 10px 0; }

.job-head {
    background: transparent; border: 0; outline: none; text-align: left;
    padding: 12px 0; width: 100%; border-radius: 10px; transition: background .2s ease;
}
.job-head:hover { background: #fafafa; }

.job-title { font-weight: 600; }
.job-meta { color: var(--muted); }
.job-plus .bi { font-size: 16px; }

.job-body { border-top: 1px dashed var(--line); padding-top: 14px; }
.job-desc { color: #232325; }

/* pagination */
.apple-pagination .page-link {
    border-radius: 8px; border: 1px solid var(--line); color: var(--ink);
}
.apple-pagination .active>.page-link {
    background: var(--ink); color: #fff; border-color: var(--ink);
}

/* responsive tweaks for jobs */
@media (max-width:991.98px) {
    .job-head .text-md-end { text-align: left !important; }
    .job-head .d-inline-flex { margin-top: 6px; }
}

/* =========================================
   APPLE-STYLE FOOTER
   ========================================= */
:root {
    --af-maxw: 1180px;
    --af-text: #1d1d1f;
    --af-muted: #6e6e73;
    --af-rule: #d2d2d7;
    --af-link: #0066cc;
}

.apple-footer {
    color: var(--af-text);
    background: #fff;
}

.apple-footer .af-legal {
    max-width: var(--af-maxw);
    margin: 0 auto;
    padding: 28px 20px 12px;
}

.apple-footer .af-legal p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--af-muted);
    margin: 0 0 10px;
}

.apple-footer .af-legal a { color: var(--af-link); text-decoration: none; }
.apple-footer .af-legal a:hover { text-decoration: underline; }

.apple-footer .af-rule {
    border: 0; border-top: 1px solid var(--af-rule);
    max-width: var(--af-maxw); margin: 12px auto 0;
}

.af-breadcrumbs {
    max-width: var(--af-maxw);
    margin: 14px auto 0; padding: 0 20px 8px;
    display: flex; align-items: center; gap: 10px;
    color: var(--af-muted); font-size: 13px;
}
.af-breadcrumbs a { color: var(--af-muted); text-decoration: none; }
.af-breadcrumbs a:hover { color: var(--af-text); }
.af-bc-sep { opacity: .6; }

.af-grid {
    max-width: var(--af-maxw);
    margin: 10px auto 40px; padding: 0 20px;
    display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 28px 24px;
}
.af-col h3, .af-col h4 { font-size: 13px; font-weight: 600; margin: 12px 0 8px; color: var(--af-text); }
.af-col h4 { margin-top: 18px; }
.af-col a { display: block; font-size: 13px; line-height: 1.9; color: var(--af-muted); text-decoration: none; }
.af-col a:hover { color: var(--af-text); text-decoration: underline; }

/* footer responsive */
@media (max-width:1200px){ .af-grid { grid-template-columns: repeat(4, minmax(160px,1fr)); } }
@media (max-width:992px){  .af-grid { grid-template-columns: repeat(3, minmax(160px,1fr)); } }
@media (max-width:768px){
    .af-grid { grid-template-columns: repeat(2, minmax(160px,1fr)); }
    .af-breadcrumbs { font-size: 12.5px; }
    .apple-footer .af-legal p { font-size: 12.5px; }
}
@media (max-width:480px){
    .af-grid { grid-template-columns: 1fr; }
    .af-col h3, .af-col h4 { margin-top: 10px; }
}

/* =========================================
   RESPONSIVE FOR HEADERS
   ========================================= */
@media (max-width:1024px){
    .global-links { display: none; }
    .global-toggle { display: inline-flex; }
}
@media (min-width:1025px){ .global-toggle { display: none; } }

@media (max-width:768px){
    .section-links { display: none; } /* hide section links on phone */
    .section-title { font-size: 18px; }
    .cta { padding: 8px 14px; }
}

/* ==================================================
   JOB PAGE EXTRAS (Buttons, Icons, Sections)
   ================================================== */

/* header */
.lang-select{
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .45rem .6rem;
    background: #fff;
    min-width: 185px;
}

.job-title{font-weight: 300;letter-spacing: .2px;}
.meta{ color: var(--muted); }

/* buttons */
.btn-outline-apple{
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 12px;
    padding: .6rem 1.25rem;
}
.col-6.fw-semibold {
    text-align: -webkit-right;
}
.btn-apple{
    background: var(--tint);
    color:#fff;
    border-radius: 12px;
    padding: .6rem 1.25rem;
}
.btn-apple:hover{ background: var(--tint-hover); }

/* icon buttons using images */
button.icon-btn-a{ border: none; background: none; }
button.icon-btn-a img{ width: 20px; }
button.icon-btn-a.de img{ width: 17px; }

/* sections */
.section-rule{ border-top: 1px solid var(--line); }
.section-pad{ padding-block: 28px; }
.label-col{ max-width: 280px; }
.label-title{ font-weight: 700; }

/* tidy lists */
.section-body ul{ margin-bottom: 0; }
.section-body li{ margin: .3rem 0; }

/* tighter container on xl like Apple */
@media (min-width:1200px){ .container{ max-width:1140px; } }
