/*
 * Simple pages (includes/simple-page.php): legal/policy prose, the empty
 * service stubs and the city index. Loads AFTER city-page.css and only adds
 * what the np-* design system does not already cover.
 */

/* legal, city index, the job pages and the jobs index all render full width
   (no aside), so the main column must not keep the city layout's sidebar
   gutter (city-page.css puts padding-left:50px on .np-city-main) */
.np-simple-legal .np-city-main,
.np-simple-index .np-city-main {
    width: 100%;
    float: none;
    padding: 40px 0 0;
}
.np-simple-legal .np-city-main { padding-bottom: 40px; } /* production legal main = column + 40 top + 40 bottom (4138 = 4058 + 80) */

/* production's legal-page hero is the short 324px title band (like contacts),
   not the 486px city hero */
.np-simple-legal .np-city-hero,
.np-simple-legal .np-city-hero-inner { min-height: 324px; }

.np-simple-job .np-city-main,
.np-simple-jobs-index .np-city-main {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
}

/* production's wrap is the full 1200 here (no 20px side padding), so the
   two half columns come out 576px each */
.np-simple-jobs-index > .np-city-wrap {
    padding-left: 0;
    padding-right: 0;
}

/* prose typography: production's content column gets h2 30px/15px from a
   Betheme rule the np containers do not trigger (the service column already
   restates it in city-page.css); production li margin is 10px */
.np-simple-content h2 { margin: 30px 0 15px; }
.np-sp-content li { margin-bottom: 10px; }

/* the steps model, measured on production: a 94px title column (h2 49px =
   36 + the red underline, margins 30/15) with its 40px column margin, then a
   body column (126px image block, 20px padding) with its own 40px margin */
.np-sp-step { margin-bottom: 40px; }
.np-sp-step h2 { margin: 30px 0 55px; }
.np-sp-step h2:after { content: ''; display: block; height: 3px; margin-top: 10px; max-width: 80px; background: #ed3237; }
.np-sp-step-body { min-height: 146px; padding-bottom: 20px; } /* production body column: 126px image block + 20px, border-box */
.np-sp-step { padding-bottom: 25px; } /* production's title+body columns add 25px more per step than one block */
.np-city .np-sp-step-body > img { flex-basis: 126px; width: 126px !important; }




/* the stubs carry no content at all (production renders none either), so
   the main column collapses - keep the aside from sitting on the footer.
   Their sidebar is the frozen widget markup, styled by the theme's own
   widget rules; it just needs the np layout's column width. */
.np-simple-stub .np-city-main { min-height: 1px; }
.np-simple-stub .np-city-layout { padding-bottom: 0; } /* production: the wrap ends with the sidebar (measured 1630 = 1630) */
/* production: a 281px column, .widget-area padded 30px/20px/20px, and the
   widgets sized content-box so they come out 240px wide. city-page.css sets
   `flex: 0 0 276px` (shorthand), so the whole shorthand has to be restated. */
/* min-width:auto lets a flex item outgrow its basis when the content has a
   wider minimum - the widget-area's padding was pushing this to 311px */
.np-simple-aside.np-city-aside {
    flex: 0 0 281px;
    width: 281px;
    min-width: 0;
    padding: 0;
}

.np-simple-aside .widget-area { padding: 30px 20px 20px; margin-top: 0; } /* city-page.css gives the aside's first child a 30px top margin; production's first widget sits 30px below the column, not 60 */

.np-simple-aside .widget-area aside { box-sizing: content-box; }

/* production's sidebar buttons: the theme's .sidebar rule narrows the
   button_size_4 label padding to 18px 15px so the text fits one line; the
   np aside has no .sidebar ancestor, so restate it (else 18px 33px, wraps) */
.np-simple-aside a.button.button_size_4 .button_label { padding: 18px 15px !important; } /* must outrank base.css a.button.button_size_4 .button_label, as production's .sidebar rule does */

/* service pages (np-sp): production's pre-footer bands start exactly where
   the taller of content/sidebar ends - the content column carries a 40px
   spacer section, the sidebar none - so the layout itself must not pad the
   bottom (city-page.css gives .np-city-layout 40px for the city template).
   Production's service-template language grid also keeps a 40px margin
   under its last row. Scoped to .np-sp so the city pages are untouched. */
.np-sp .np-city-layout { padding-bottom: 0; }
.np-sp .np-city-main { padding-bottom: 45px; } /* production: column margin-bottom 40 + the 40px spacer section; measured 25-35px short with 40 */
.np-sp .np-city-useful-col:last-child { padding-bottom: 40px; } /* a margin on the grid collapses out of the column; production keeps 40px inside it */

/* hero without the order form: the title band keeps its own height */
.np-simple-hero .np-city-hero-inner { display: block; }

/* ---- job pages: parallax hero, title beside the benefits ------------ */
/* measured from production at 1440px: 421px stage, 60/40 split, H1 38/45
   white on a 34% black plate, benefits on a 70% white panel */
.np-job-hero {
    position: relative;
    overflow: hidden;
    min-height: 421px;
}

/* production's hero wrap has no side padding: the 60/40 split is of the
   full 1200px, so the benefits panel is 480px (not 464) and starts at 840 */
.np-job-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    min-height: 421px;
    padding-left: 0;
    padding-right: 0;
}

/* production's title column is five-sixth of the 60% wrap (586px of 720
   at 1440), not the whole wrap */
.np-job-hero-title {
    flex: 0 0 60%;
    max-width: 60%;
    padding-top: 180px;
    padding-left: 7px;
    padding-right: 7px;
}

.np-job-hero-title h1 {
    display: inline-block;
    max-width: 83.333%;
    margin: 0 0 15px;
    padding: 22px;
    background: rgba(0, 0, 0, .34);
    color: #fff;
    font-size: 38px;
    line-height: 45px;
    font-weight: 600;
}

.np-job-benefits {
    flex: 0 0 40%;
    max-width: 40%;
    align-self: stretch;
    padding: 35px 0 10px;
    background: rgba(255, 255, 255, .7);
}

/* production: 470px row inset 5px, icon block 126px wide then the text -
   the row is only as tall as its content (82px for one line, 92px for two) */
.np-job-benefit {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 0 5px 40px;
}

.np-job-benefit:last-child { margin-bottom: 0; }

/* production: the icon sits in a 126px block (30px in, 65px wide), the text
   starts 145px from the row edge and runs 325px wide */
.np-job-benefit img {
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    margin: 10px 50px 10px 30px;
}

/* size/colour/uppercase come from the theme's .corp-benefits .desc rule
   on the inner div; this wrapper carries production's 10px top padding
   (its .desc keeps its own 6px margin) */
.np-job-benefit-text {
    flex: 1 1 auto;
    padding-top: 10px;
}

.np-job-benefit-text .desc { font-weight: 600; }

/* ---- job pages: body + application form ----------------------------- */
.np-job-body { padding: 50px 0 0; }

.np-job-body > .np-simple-content { margin-bottom: 30px; }

.np-job-form { text-align: center; }

.np-job-form h2 { margin: 0 0 20px; }

@media (max-width: 767px) {
    .np-job-hero, .np-job-hero-inner { min-height: 0; }
    .np-job-hero-inner { display: block; }
    .np-job-hero-title,
    .np-job-benefits { max-width: 100%; flex-basis: 100%; }
    .np-job-hero-title { padding: 60px 0 20px; }
    .np-job-hero-title h1 { font-size: 26px; line-height: 34px; padding: 16px; }
    .np-job-benefit { gap: 18px; padding-left: 0; margin-bottom: 24px; }
    .np-job-benefit-text .desc { font-size: 17px !important; line-height: 24px !important; }
}

/* ---- partner page: CTA under the title, tab band, values row -------- */
.np-job-hero-title .button-header-red {
    display: inline-block;
    margin-top: 5px;
}

/* production: band on #f7f7f7 with 30px vertical padding. On the jobs index
   it is a FULL-WIDTH section (spans the viewport, content still capped at
   1200) - break it out of the wrap with the standard 50vw trick. */
.np-partner-tabs {
    margin: 30px 0;
    padding: 30px 0;
    background: #f7f7f7;
}

.np-simple-jobs-index .np-partner-tabs {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.np-simple-jobs-index .np-partner-tabs > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.np-partner-tabs .mission-tabs {
    padding: 30px 0 0;
    text-align: center;
}

.np-partner-tabs .mission-tabs h2 { margin: 0 0 30px; }

.np-partner-tabs .about-tab { padding: 0 20px; }

/* only the active panel shows; page-scripts.php swaps this on click */
.np-partner-tabs .about-tab { display: none; }
.np-partner-tabs .about-tab.activ-tab { display: block; }

/* values row: four icon columns */
.np-partner-values.activ-tab { display: flex; flex-wrap: wrap; }

.np-partner-value {
    flex: 1 1 25%;
    max-width: 25%;
    box-sizing: border-box;
    padding: 0 15px;
    text-align: center;
}

.np-partner-value .icon {
    font-size: 30px;
    color: #ed3237;
    margin-bottom: 10px;
}

.np-partner-value .desc { line-height: 24px; }

@media (max-width: 767px) {
    .np-partner-value { flex-basis: 50%; max-width: 50%; margin-bottom: 20px; }
}

/* ---- jobs index: the two CTA buttons + ratings/reviews row ---------- */
/* production at 1440: two 576px buttons side by side, 30px above / 40px below */
.np-jobs-buttons {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0 40px;
}

.np-jobs-button {
    flex: 1 1 50%;
    max-width: 50%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 12px;
    text-align: center;
}

.np-jobs-button .button { width: 100%; }

.np-jobs-social {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.np-jobs-ratings,
.np-jobs-reviews {
    flex: 1 1 50%;
    max-width: 50%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 12px;
}

/* both columns start at the same top on production (the 40px padding sits
   inside the frozen reviews markup, not on the column) */

@media (max-width: 767px) {
    .np-jobs-button,
    .np-jobs-ratings,
    .np-jobs-reviews { flex-basis: 100%; max-width: 100%; }
    .np-jobs-button { margin-bottom: 16px; }
}

/* ---- corporate page ------------------------------------------------- */
/* its hero differs slightly from the job pages: the benefits panel is
   inset 10px, the H1 plate spans the full title column, and the CTA is
   the blue header button sitting 30px below the title */
.np-simple-corporate .np-job-benefits { padding: 35px 10px 10px; }

.np-simple-corporate .np-job-hero-title h1 { display: block; }

.np-simple-corporate .np-job-hero-title .button { margin: 25px 0 0; }

/* production's benefit rows here are 110/110/138 tall (three-line text at
   451px), giving a 523px stage rather than the job pages' 421px */
.np-simple-corporate .np-job-hero,
.np-simple-corporate .np-job-hero-inner { min-height: 523px; }

/* ---- corporate page: ordered typed blocks in a Betheme-style grid --- */
.np-corp-block {
    float: left;
    box-sizing: border-box;
    margin-bottom: 40px;
    min-width: 0;
}

/* the frozen columns carried Betheme's column-margin-* classes; honour them
   the same way the home grid does (default is 40px) */
.np-corp-block.column-margin-0px { margin-bottom: 0; }
.np-corp-block.column-margin-10px { margin-bottom: 10px; }
.np-corp-block.column-margin-20px { margin-bottom: 20px; }
.np-corp-block.column-margin-30px { margin-bottom: 30px; }
.np-corp-block.column-margin-40px { margin-bottom: 40px; }
.np-corp-block.column-margin-50px { margin-bottom: 50px; }

/* Betheme fractions (the frozen columns' widths) */
.np-corp-block.np-w-one { width: 100%; }
.np-corp-block.np-w-one-second { width: 50%; }
.np-corp-block.np-w-one-third { width: 33.333%; }
.np-corp-block.np-w-two-third { width: 66.666%; }
.np-corp-block.np-w-one-fourth { width: 25%; }
.np-corp-block.np-w-one-fifth { width: 20%; }
.np-corp-block.np-w-two-fifth { width: 40%; }
.np-corp-block.np-w-three-fifth { width: 60%; }

.np-corp-image img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

.np-corp-button { text-align: center; clear: none; }

.np-corp-iconbox { text-align: center; padding: 0 10px; }

.np-corp-iconbox img { display: block; margin: 0 auto 10px; max-width: 100%; height: auto; }

/* the awards / references / logo rows are full-width prose blocks */
.np-corp-html.awards-title,
.np-corp-html.references-title { text-align: center; clear: both; }

/* full-width blocks and the tab band must clear the floated fraction
   columns above them, or the icon row overlaps into the next section */
.np-corp-block.np-w-one { clear: both; }
.np-simple-corporate .np-partner-tabs { clear: both; }

.np-simple-corporate .np-city-main:after { content: ''; display: block; clear: both; }

@media (max-width: 767px) {
    .np-corp-block { width: 100% !important; float: none; }
}

/* ---- contacts page -------------------------------------------------- */
/* measured on production at 1440: hero 324px, enquiry band 572px on the
   letters artwork, offices band 600px with the map as its background and
   the 46 town links in two 190px columns on the right */
.np-simple-contacts .np-city-hero { min-height: 324px; }
.np-simple-contacts .np-city-hero-inner { min-height: 324px; }

.np-contacts-form {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 40px 0 30px;
}

/* production renders the heading and form in a one-second (576px) column
   offset by an empty one-fourth spacer, not across the full wrap */
.np-contacts-form h2,
.np-contacts-form .wpcf7 {
    width: 576px;
    max-width: 100%;
    margin-left: 300px;
}

.np-contacts-form h2 { margin-top: 30px; margin-bottom: 15px; }

/* production's band is 572px: its builder columns carry a 40px bottom
   margin below the form that the np markup has no equivalent for */
.np-contacts-form .wpcf7 { margin-bottom: 40px; }
.np-contacts-form { min-height: 572px; box-sizing: border-box; }

@media (max-width: 991px) {
    .np-contacts-form h2,
    .np-contacts-form .wpcf7 { margin-left: 0; }
}

.np-contacts-offices {
    position: relative;
    min-height: 600px;
    background: #fff;
    overflow: hidden;
}

.np-contacts-offices .map-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

/* the panel itself (dark background, absolute right:80/top:30, 400x500,
   internal scroll) comes from the theme's .big-big-map-bg .map-big-offices
   rules, which this markup still matches - only the band context is ours */
/* the panel's right:80px is measured from the VIEWPORT on production, so
   this context must span the full band, not the 1200px wrap */
.np-contacts-offices-inner {
    position: relative;
    z-index: 2;
    min-height: 600px;
}

.map-section-col-2-title {
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 600;
}

.np-contacts-offices-grid {
    display: flex;
    flex-wrap: wrap;
}

.np-contacts-offices-grid .map-sub-right-button {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 190px;
    height: 46px;
    padding: 0 8px;
}

.np-contacts-offices-grid .map-right-button-marker { margin-right: 8px; }

@media (max-width: 991px) {
    .np-contacts-offices-inner { justify-content: flex-start; }
    .np-contacts-offices-list { width: 100%; padding-top: 40px; }
}

@media (max-width: 767px) {
    .np-contacts-offices-grid .map-sub-right-button { width: 50%; }
}

/* ---- city index: map beside the town links -------------------------- */
.np-simple-index-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
}

.np-simple-index-map { flex: 1 1 340px; min-width: 0; }

.np-simple-index-map img {
    display: block;
    width: 100%;
    height: auto;
}

.np-simple-index-body { flex: 1 1 300px; min-width: 0; text-align: center; }

/* production centers the heading and underlines it in red */
.np-simple-index-body h2 {
    margin: 0 0 20px;
    line-height: 1.3;
    text-align: center;
}

.np-simple-index-body h2:after {
    content: '';
    display: block;
    height: 3px;
    margin: 15px auto 0;
    max-width: 80px;
    background: #ed3237;
}

/* the town links themselves are dark buttons styled by the child theme
   (.footer-right-p-2-row a) - only the block spacing belongs here */
.np-simple-index-body .footer-right-p-2 { margin-top: 24px; }

@media (max-width: 767px) {
    .np-simple-index-grid { gap: 20px; }

}