/* ==========================================================================
   ISSMGE — Bootstrap 3 → Editorial bridge
   --------------------------------------------------------------------------
   Phase 2 of the redesign.

   This retunes existing Bootstrap 3 / theme.css components to the editorial
   design tokens WITHOUT changing a single line of markup. No blade file needs
   editing; inner pages inherit the new look as soon as this stylesheet loads.

   Ground rules for anything added here:
     1. Restyle only — colour, type, border, shadow, radius.
     2. Never change the box model in a way that moves layout (no width, float,
        display or grid changes on BS3 grid classes).
     3. Everything is reversible by removing the <link>.

   Load order: after bootstrap.min.css and theme.css, alongside issmge-2026.css.
   Depends on the --ed-* custom properties declared in issmge-2026.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography
   -------------------------------------------------------------------------- */

body {
    font-family: var(--ed-sans);
    color: var(--ed-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ed-serif);
    font-weight: 500;
    letter-spacing: -.4px;
    color: var(--ed-navy);
}

h1, .h1 { letter-spacing: -.8px; }

a       { color: var(--ed-crimson); }
a:hover,
a:focus { color: var(--ed-navy-d); }

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */

.btn {
    font-family: var(--ed-sans);
    font-weight: 600;
    border-radius: 2px;
    border-width: 1.5px;
    /* Explicit properties — `transition: .18s` is shorthand for `all`, which eased
       geometry as well as colour and made button hovers wobble. */
    transition: background-color .18s, border-color .18s, color .18s;
}

.btn-primary {
    background-color: var(--ed-navy);
    border-color: var(--ed-navy);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--ed-navy-d);
    border-color: var(--ed-navy-d);
    color: #fff;
}

.btn-default {
    background-color: transparent;
    border-color: var(--ed-navy);
    color: var(--ed-navy);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    background-color: var(--ed-navy);
    border-color: var(--ed-navy);
    color: #fff;
}

.btn-link { color: var(--ed-crimson); }
.btn-link:hover { color: var(--ed-navy-d); }

/* --------------------------------------------------------------------------
   3. Panels → cards
   -------------------------------------------------------------------------- */

.panel {
    border-radius: 4px;
    border-color: var(--ed-line);
    box-shadow: none;
    background: #fff;
}
.panel:hover { box-shadow: 0 10px 26px rgba(120,30,34,.08); }

.panel-heading {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: var(--ed-sans);
    font-weight: 700;
    letter-spacing: .3px;
}
.panel-title {
    font-family: var(--ed-sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .2px;
}

.panel-default > .panel-heading {
    background: var(--ed-blue-tint);
    border-color: var(--ed-line);
    color: var(--ed-navy);
}
.panel-primary { border-color: var(--ed-navy); }
.panel-primary > .panel-heading {
    background: var(--ed-navy);
    border-color: var(--ed-navy);
    color: #fff;
}

/* --------------------------------------------------------------------------
   4. Forms
   -------------------------------------------------------------------------- */

/* :not(.btn) matters — some submits carry both classes (e.g. the news filter
   button: "btn btn-primary form-control"). Without it, .form-control's colour
   is declared later than .btn-primary's and repaints the label dark. */
.form-control:not(.btn) {
    border-radius: 2px;
    border-color: #CFCFCF;
    box-shadow: none;
    color: var(--ed-ink);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:not(.btn):focus {
    border-color: var(--ed-crimson);
    box-shadow: 0 0 0 3px rgba(177,43,50,.12);
}
.form-control::-webkit-input-placeholder { color: #9A9A9A; }
.form-control::-moz-placeholder          { color: #9A9A9A; }
.form-control:-ms-input-placeholder      { color: #9A9A9A; }

label,
.control-label {
    font-family: var(--ed-sans);
    font-weight: 600;
    color: var(--ed-ink);
}

.input-group-addon {
    border-radius: 2px;
    background: var(--ed-blue-tint);
    border-color: #CFCFCF;
    color: var(--ed-navy);
}

.has-error .form-control       { border-color: var(--ed-crimson); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(177,43,50,.15); }
.has-error .control-label,
.has-error .help-block         { color: var(--ed-crimson-d); }

/* --------------------------------------------------------------------------
   5. Tables
   -------------------------------------------------------------------------- */

.table > thead > tr > th {
    font-family: var(--ed-sans);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ed-navy);
    border-bottom: 2px solid var(--ed-navy);
    vertical-align: middle;
}
.table > tbody > tr > td { border-top-color: var(--ed-line); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #FAF7F7; }
.table-hover > tbody > tr:hover              { background-color: var(--ed-blue-tint); }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--ed-line); }

/* --------------------------------------------------------------------------
   6. Breadcrumb band (theme.css .section-heading-page)
   -------------------------------------------------------------------------- */

/* Colour and type ONLY. Spacing is deliberately left to theme.css
   (.section-heading-page: padding 20px 0) and Bootstrap (.breadcrumb:
   padding 8px 15px; margin-bottom 20px). An earlier revision overrode both
   and pushed every page below the band down by 38px — see ground rule 2. */
.section-heading-page {
    background: var(--ed-blue-tint);
    border-bottom-color: var(--ed-line);
}
.section-heading-page .heading-page {
    font-family: var(--ed-serif);
    color: var(--ed-navy);
    letter-spacing: -.6px;
}
.breadcrumb {
    background: transparent;
    font-family: var(--ed-sans);
}
.breadcrumb > li + li::before { color: var(--ed-slate); }
.breadcrumb > .active         { color: var(--ed-slate); }

/* --------------------------------------------------------------------------
   7. Pagination, tabs, labels, alerts
   -------------------------------------------------------------------------- */

/* theme.css builds pagination as white text on a solid #333 chip with border:0.
   Recolouring alone left navy text sitting on charcoal, so the component is
   redefined outright here — background and border included. theme.css also
   paints :hover and :focus separately, so both need overriding. */
.pagination > li > a,
.pagination > li > span {
    color: var(--ed-navy);
    background-color: #fff;
    border: 1px solid var(--ed-line);
    font-family: var(--ed-sans);
    font-weight: 600;
}
/* theme.css zeroes the border and the offset; restore the collapsed-border run */
.pagination > li + li > a,
.pagination > li + li > span { margin-left: -1px; }

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > a:active {
    color: var(--ed-navy-d);
    background-color: var(--ed-blue-tint);
    border-color: var(--ed-line);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.pagination .active a,
.pagination .active a:hover {
    color: #fff;
    background-color: var(--ed-navy);
    border-color: var(--ed-navy);
    z-index: 1;
}

.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > span:hover {
    color: #6E6E6E; /* 4.8:1 on #FAFAFA — muted but still legible */
    background-color: #FAFAFA;
    border-color: var(--ed-line);
    cursor: not-allowed;
}

.nav-tabs { border-bottom-color: var(--ed-line); }
.nav-tabs > li > a {
    font-family: var(--ed-sans);
    font-weight: 600;
    border-radius: 2px 2px 0 0;
    color: var(--ed-slate);
}
.nav-tabs > li > a:hover { background: var(--ed-blue-tint); border-color: var(--ed-line); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--ed-navy);
    border-color: var(--ed-line) var(--ed-line) transparent;
    box-shadow: inset 0 2px 0 var(--ed-crimson); /* not border-top: zero layout impact */
}

.label-primary,
.badge { background-color: var(--ed-navy); }

.alert {
    border-radius: 3px;
    font-family: var(--ed-sans);
    border-width: 1px;
    border-left-width: 4px;
}
.alert-danger  { border-left-color: var(--ed-crimson); }
.alert-info    { border-left-color: var(--ed-navy); }

.well {
    background: var(--ed-blue-tint);
    border-color: var(--ed-line);
    border-radius: 4px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   8. Third-party widgets
   -------------------------------------------------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 2px;
    border-color: #CFCFCF;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ed-navy);
}

.modal-content { border-radius: 4px; border: 0; }
.modal-header  { border-bottom-color: var(--ed-line); }
.modal-header .modal-title,
.modal-header h4 { font-family: var(--ed-serif); color: var(--ed-navy); }
.modal-footer  { border-top-color: var(--ed-line); }

.dropdown-menu {
    border-radius: 2px;
    border-color: var(--ed-line);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.dropdown-menu > li > a { font-family: var(--ed-sans); }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background-color: var(--ed-blue-tint); color: var(--ed-navy); }

table.dataTable thead > tr > th {
    font-family: var(--ed-sans);
    color: var(--ed-navy);
}

/* --------------------------------------------------------------------------
   9. Legacy theme components
   -------------------------------------------------------------------------- */

/* --- .content-box.bordered ------------------------------------------------
   theme.css gives this a flat 1px #ddd box (used for the board-level committee
   tiles, which are fixed at height:110px). Make it read as a card. The height
   is set inline on those tiles, so only paint — no box-model changes. */
.content-box.bordered {
    border: 1px solid var(--ed-line);
    border-radius: 4px;
    background: #fff;
    border-left: 3px solid var(--ed-crimson);
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.content-box.bordered:hover {
    box-shadow: 0 12px 26px rgba(120,30,34,.13);
    border-left-color: var(--ed-navy);
    transform: translateY(-2px);
}
.content-box.bordered h1, .content-box.bordered h2,
.content-box.bordered h3, .content-box.bordered h4 { margin-top: 0; }
/* :not(.btn) — the tiles contain a "Read More" .btn-primary whose white
   label this rule was repainting navy. Same trap as the news filter button. */
.content-box.bordered a:not(.btn) { color: var(--ed-navy); }
.content-box.bordered:hover a:not(.btn) { color: var(--ed-crimson); }

/* Centre the tile contents. These tiles carry an inline height (110px), so
   centring has to come from the box itself, not from extra padding. */
.content-box.bordered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.content-box.bordered > .img-wrapper:empty { display: none; }
.content-box.bordered h3 { margin: 0; font-size: 19px; line-height: 1.22; }
.content-box.bg { background-color: var(--ed-blue-tint); }

/* --- .nav-pills.nav-justified --------------------------------------------
   Used as a tab strip on the Future Leaders and Geo-Engineers Without Borders
   pages. Bootstrap's default pills are rounded blue lozenges; render them as
   an editorial segmented bar instead. */
.nav-pills.nav-justified {
    border: 1px solid var(--ed-line);
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}
.nav-pills.nav-justified > li { border-right: 1px solid var(--ed-line); }
.nav-pills.nav-justified > li:last-child { border-right: 0; }
.nav-pills.nav-justified > li > a {
    border-radius: 0;
    font-family: var(--ed-sans);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .3px;
    color: var(--ed-slate);
    padding: 14px 12px;
    border-bottom: 3px solid transparent;
    transition: .18s;
}
.nav-pills.nav-justified > li > a:hover,
.nav-pills.nav-justified > li > a:focus {
    background: var(--ed-blue-tint);
    color: var(--ed-navy);
}
.nav-pills.nav-justified > li.active > a,
.nav-pills.nav-justified > li.active > a:hover,
.nav-pills.nav-justified > li.active > a:focus {
    background: var(--ed-navy);
    color: #fff;
    border-bottom-color: var(--ed-crimson);
}
@media (max-width: 767px) {
    .nav-pills.nav-justified > li { border-right: 0; border-bottom: 1px solid var(--ed-line); }
    .nav-pills.nav-justified > li:last-child { border-bottom: 0; }
}

/* --- .wrapper-post (news index + technical-committee news) ----------------
   theme.css: flat 1px #dadada box, 30px padding, black headings. Turn each
   entry into an editorial card with a serif headline and a crimson rule. */
.wrapper-post {
    border: 1px solid var(--ed-line);
    border-left: 3px solid var(--ed-crimson);
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    transition: box-shadow .18s;
}
/* No translate on hover: lifting the card while the pointer is on its button
   made the button appear to slide away underneath the cursor. */
.wrapper-post:hover {
    box-shadow: 0 10px 24px rgba(120,30,34,.10);
}
/* Show pages (news/{alias}, events/{alias}, bulletin, lectures, …) render one
   article's full content. A card frame and hover lift are wrong there, so those
   views tag their wrapper .ed-post-plain. Listing pages keep the card. */
.wrapper-post.ed-post-plain,
.wrapper-post.ed-post-plain:hover {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    background: transparent;
}
.wrapper-post.ed-post-plain .wrapper-post-text { padding-left: 0; padding-right: 0; }

/* news_entry.blade.php nests .wrapper-post inside .wrapper-post, which doubled
   the border. Neutralise the inner one rather than risk editing shared markup. */
.wrapper-post .wrapper-post {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
.wrapper-post .wrapper-post:hover { box-shadow: none; }

.wrapper-post-text h3 {
    font-family: var(--ed-serif);
    font-weight: 500;
    letter-spacing: -.4px;
    line-height: 1.2;
    text-transform: none !important; /* .text-uppercase shouts in a serif face */
    margin-top: 0;
}
.wrapper-post-text h3 a { color: var(--ed-navy); }
.wrapper-post-text h3 a:hover { color: var(--ed-crimson); }

.wrapper-post .post-date-author {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ed-line);
}
.post-date-author li { font-family: var(--ed-sans); font-size: 12px; letter-spacing: .4px; }
.post-date-author li > a { color: var(--ed-slate); }
.post-date-author li > a .fa { color: var(--ed-crimson); }

.wrapper-post p { color: var(--ed-body); }
.wrapper-post-text img { max-width: 100%; height: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   10. Technical committee pages
   -------------------------------------------------------------------------- */

/* 15 views open a .container inside the one master already provides, which
   adds a second 15px gutter each side and narrows the content. Neutralise the
   inner one rather than restructure 15 files. */
.container .container {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.tc-hero {
    margin-bottom: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.tc-hero img { width: 100%; height: auto; }

/* Vertical tab rail on TC pages (.nav-pills.nav-stacked). Bootstrap ships it as
   detached rounded lozenges; render it as one editorial rail instead. */
.nav-pills.nav-stacked {
    border: 1px solid var(--ed-line);
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}
.nav-pills.nav-stacked > li + li { margin-top: 0; }
.nav-pills.nav-stacked > li { border-bottom: 1px solid var(--ed-line); }
.nav-pills.nav-stacked > li:last-child { border-bottom: 0; }
.nav-pills.nav-stacked > li > a {
    border-radius: 0;
    font-family: var(--ed-sans);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--ed-slate);
    padding: 12px 14px;
    border-left: 3px solid transparent;
    transition: .18s;
}
.nav-pills.nav-stacked > li > a:hover,
.nav-pills.nav-stacked > li > a:focus {
    background: var(--ed-blue-tint);
    color: var(--ed-navy);
    border-left-color: var(--ed-crimson);
}
.nav-pills.nav-stacked > li.active > a,
.nav-pills.nav-stacked > li.active > a:hover,
.nav-pills.nav-stacked > li.active > a:focus {
    background: var(--ed-navy);
    color: #fff;
    border-left-color: var(--ed-crimson);
}

/* .nav-tabs.nav-justified — the tab strip on TC pages without sub-pages. */
.nav-tabs.nav-justified > li > a {
    border-radius: 2px 2px 0 0;
    font-family: var(--ed-sans);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ed-slate);
}
.nav-tabs.nav-justified > li.active > a,
.nav-tabs.nav-justified > li.active > a:hover,
.nav-tabs.nav-justified > li.active > a:focus {
    color: var(--ed-navy);
    box-shadow: inset 0 2px 0 var(--ed-crimson);
}

/* theme.css paints .btn-blue #34495e, a slate-blue that fights the red brand.
   Neutral dark reads as a clear secondary next to the navy primary. */
.btn-blue {
    background-color: var(--ed-ink);
    border-color: var(--ed-ink);
    color: #fff;
}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* Accordion panels inside the TC tabs */
.panel-acc .panel-heading a { font-family: var(--ed-sans); font-weight: 600; color: var(--ed-navy); }
.panel-acc .panel-heading a:hover { color: var(--ed-crimson); }

/* theme.css paints .row-pills with a flat #f4f5f6 slab behind both the tab rail
   and its content. Now that the rail is a bordered white card in its own right,
   the slab only muddies the page. theme.css also zeroes the column padding
   (.row-pills > div), so the panel needs its own gutter off the rail. */
.row-pills { background-color: transparent; }

/* Gutter only for the vertical rail (.row-pills-left). Layouts with a
   horizontal strip (.row-pills-justified-top, e.g. /the-society) sit under
   their tabs and must not be indented. */
@media (min-width: 992px) {
    .row-pills-left .tab-content { padding: 0 0 0 26px; }
}
@media (max-width: 991px) {
    .row-pills-left .tab-content { padding: 20px 0 0; }
}

/* --- /publications tiles --------------------------------------------------
   The page listed its links as bulleted <li>s; they are now content-box tiles.
   The tile is itself the anchor, so the colour goes on the box (the
   .content-box.bordered a:not(.btn) rule only reaches descendants). */
#publications-container .pub-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 88px;
    margin-bottom: 14px;
    padding: 14px 16px;
    font-family: var(--ed-sans);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: var(--ed-navy);
}
#publications-container .pub-tile:hover,
#publications-container .pub-tile:focus {
    color: var(--ed-crimson);
    text-decoration: none;
}
#publications-container h3 {
    font-size: 15px;
    font-family: var(--ed-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ed-navy);
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--ed-navy);
}

/* --- Board-level committee tiles -----------------------------------------
   The view pinned every tile to an inline height:110px, which the larger
   heading overflowed. Equal heights now come from the grid, so tiles grow
   with their title instead of clipping it. */
.bl-committees {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-left: 0;
    margin-right: 0;
}
.bl-committees > div {
    width: auto;
    float: none;
    padding: 0;
    margin-top: 0 !important;
}
.bl-committees .content-box.bordered {
    height: 100%;
    min-height: 118px;
}
@media (min-width: 768px) and (max-width: 991px) {
    .bl-committees { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .bl-committees { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   11. Responsive repairs
   -------------------------------------------------------------------------- */

/* A .row nested directly inside another .row (no column between) applies the
   -15px gutter margins twice, pushing 30px past the viewport. Seen on
   /register. Harmless to normalise: a row in a row has no gutter to cancel. */
.row > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Editor-pasted content often carries bare URLs as link text. With the default
   overflow-wrap they cannot break and force a horizontal scrollbar on phones
   (a 405px anchor in a 375px viewport on the TC pages). */
.wrapper-post-text,
.tab-content,
.panel-body,
.content-box,
.section-heading-page .heading-page {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.wrapper-post-text a,
.tab-content a,
.panel-body a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Wide tables and editor-pasted iframes/embeds must scroll inside their own
   box rather than stretching the page. */
.wrapper-post-text table,
.tab-content table,
.panel-body table { max-width: 100%; }

.wrapper-post-text iframe,
.tab-content iframe,
.panel-body iframe { max-width: 100%; }

/* DataTables pagination is white-space:nowrap (see issmge-legacy-inline.css), so
   a long page-number run cannot wrap and pushes the page wide — 486px inside a
   375px viewport on /publications/issmge-bulletin. Let it wrap on small screens. */
@media (max-width: 991px) {
    div.dataTables_wrapper div.dataTables_paginate,
    div.dataTables_wrapper div.dataTables_paginate ul.pagination,
    div.dataTables_wrapper div.dataTables_paginate span {
        white-space: normal;
    }
    div.dataTables_wrapper div.dataTables_paginate { text-align: center; }
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_length { white-space: normal; }
    div.dataTables_wrapper div.dataTables_filter input { max-width: 100%; }
}

/* Video embeds pasted by editors carry hardcoded pixel widths (Wistia ships a
   640px box). Cap them so they shrink on phones. */
.wistia_embed,
.wistia_responsive_padding,
.wistia_responsive_wrapper {
    max-width: 100% !important;
}
embed, object, video { max-width: 100%; }

/* theme.css gives .tab-content a flat 16px padding, which on a phone sits on top
   of the column's 15px and the container's 15px — 31px of dead gutter each side
   of a 375px screen. Drop the horizontal half; the column already provides it.
   (.row-pills-left keeps its own mobile rule above, which is already flush.) */
@media (max-width: 767px) {
    .tab-content {
        padding-left: 0;
        padding-right: 0;
    }
}



/* Filter forms (#search-form: lexicon, news, Future Leaders) lay their fields out
   as bare .col-sm-* with no .form-group, so their mobile spacing comes entirely
   from theme.css's `[class^="col"] + [class^="col"] { margin-top: 40px }`.
   theme.css then cancels that inside .row-pills — correct for the tab rail, but
   the lexicon's form sits inside one too, so its fields collapsed flush together.
   Give every filter form the same modest gap: 40px is the theme's page rhythm and
   too loose between form controls. The second selector must out-specify
   theme's `.row-pills [class^="col"] + [class^="col"]`. */
@media (max-width: 767px) {
    #search-form .row > [class^="col"] + [class^="col"],
    .row-pills #search-form .row > [class^="col"] + [class^="col"] {
        margin-top: 12px;
    }
}