/* Local tasks */
.full-article .local-tasks,
.local-tasks {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
}

.full-article .local-tasks>li,
.local-tasks>li {
  position: initial;
  display: inline;
  margin: 0;
  padding: 0;
  font-size: 0.81rem;
  font-weight: bold;
  text-transform: uppercase;
}

.full-article .local-tasks>li::before,
.local-tasks>li::before {
  content: none;
}

.full-article .local-tasks>li:not(:last-child)::after,
.local-tasks>li:not(:last-child)::after {
  content: "|";
  margin: 0 0.1em 0 0.25em;
}

/* Cookie notice */
#cookieNotice {
  display: none;
}

/* Newsletter floating call to action */
#floatingNewsletterCTA p span {
  text-transform: lowercase;
}

/* Status messages */
.status-messages {
  margin: 20px 0;
  padding: 20px;
  font-weight: bold;
  border-radius: 30px;
  background-color: #d5cfdf;
}

.webform-submission-form .status-messages {
  display: none;
}

.status-messages .status-message {
  margin-bottom: 10px;
  text-align: left;
}

.status-messages .status-message:first-child {
  margin-bottom: 0;
}

/* reCAPTCHA */
.grecaptcha-badge {
  display: none;
}

/* Onomasticon tool tips */
.onomasticon {
  border-bottom: 1px dotted #757983;
}

h2 .onomasticon,
h3 .onomasticon {
  border-bottom: 1px dotted #22497d;
}

.onomasticon-extra-element:hover,
.onomasticon-extra-element:focus {
  background: #22497d;
  box-shadow: 0 0 0 10px #22497d;
  color: #ffffff;
}

.onomasticon-extra-element.onomasticon-orientation-below:hover,
.onomasticon-extra-element.onomasticon-orientation-below:focus {
  border-radius: 0.5em;
  border-bottom: none;
}

.onomasticon-extra-element .onomasticon-term-description {
  background: #22497d;
  color: #ffffff;
}

h2 .onomasticon-extra-element.onomasticon-orientation-below .onomasticon-term-description {
  top: calc(2.4em + 40px);
}

h3 .onomasticon-extra-element.onomasticon-orientation-below .onomasticon-term-description {
  top: calc(1.7em + 40px);
}

p .onomasticon-extra-element.onomasticon-orientation-below .onomasticon-term-description {
  top: calc(1em + 40px);
}

.full-article h2 .onomasticon,
.full-article h3 .onomasticon {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.form-box .js-form-type-webform-multiple {
  margin-bottom: unset;
  border: 1px solid #D7DEDE;
  padding: 10px;
}

.form-box .js-form-type-webform-multiple table {
  width: 100%;
  margin-bottom: 0;
  margin-top: 0;
}

.form-box .js-form-type-webform-multiple table tbody tr td {
  border-top: unset;
}

.form-box .js-form-type-webform-multiple table tbody {
  background: unset;
}

.form-box .js-form-type-webform-multiple table thead tr th {
  padding: 0;
}

.form-box .tabledrag-toggle-weight-wrapper {
  display: none;
}

.form-box .js-form-type-webform-multiple .button {
  align-items: center;
  background: #ffd439;
  border-radius: 50px;
  /*color: var(--color-primary-dark);*/
  width: max-content;
  transition-duration: .3s;
  position: relative;
  text-decoration: none;
  border: 0;
  padding: 15px 20px 15px 20px;
  text-transform: uppercase;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 18px;
  font-family: vinyl, sans-serif;
  color: var(--color-primary-dark);
}

.form-box .js-form-type-webform-multiple .button:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-highlight-hover);
}

.form-box .js-form-type-webform-multiple .webform-multiple-add {
  margin-left: 25px;
}

.form-box .js-form-type-webform-multiple .js-form-type-number,
.form-box .js-form-type-webform-multiple .webform-multiple-table--handle {
  display: none;
  height: 0;
  width: 0;
}

@media (max-width: 768px) {
  .webform-multiple-table-responsive td.webform-multiple-table--operations {
    top: 50%;
  }

  .webform-multiple-table .form-item .form-text,
  .webform-multiple-table .form-item .form-email,
  .webform-multiple-table .form-item .form-tel,
  .webform-multiple-table .form-item .form-date,
  .webform-multiple-table .form-item .form-select,
  .webform-multiple-table .form-item .form-textarea {
    width: 85%;
  }

  .paragraph--type--local-video video {
    width: 100%;
    height: 300px;
  }
}

@media (min-width: 769px) {
  .paragraph--type--local-video video {
    width: 100%;
    height: 600px;
  }
}

.paragraph.paragraph--type--webform.paragraph--view-mode--default {
  padding: 30px;
  border-radius: 30px;
  box-sizing: border-box;
  margin-bottom: 70px;
}

.paragraph.paragraph--type--webform.paragraph--view-mode--default h2 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 0;
}

.paragraph.paragraph--type--webform.paragraph--view-mode--default p {
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

@media (min-width: 992px) {
  .paragraph.paragraph--type--webform.paragraph--view-mode--default {
    max-width: 1090px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px;
  }
}

table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 20px 0;
  -webkit-overflow-scrolling: touch;
}

/* 2. Scrollbar */
table::-webkit-scrollbar {
  height: 10px;
  display: block;
}

table::-webkit-scrollbar-thumb {
  background: #1A3461;
  border-radius: 5px;
}

table::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 2. Cell Optimization */
table th,
table td {
  min-width: 150px;
  padding: 12px;
  word-break: break-word;
  vertical-align: top;
  border: 1px solid #ddd;
}

table td p,
table th p {
  display: block !important;
  margin: 0 !important;
}

/* Title text format (Blue MDE) */
.webform-submission-form .fieldset-legend.js-form-required.form-required {
  font-size: 16px;
  color: var(--color-primary-dark);
  text-transform: none;
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}

/* Asterisk format (Purple MDE) */
.webform-submission-form .fieldset-legend.js-form-required.form-required::after {
  color: #8062D4;
  content: " *";
  display: inline-block;
  margin-left: 4px;
}

/* We apply the same visual format but without the asterisk */
.webform-submission-form .fieldset-legend {
  font-size: 16px;
  color: var(--color-primary-dark);
  font-weight: 700;
  text-transform: none;
  display: block;
  margin-bottom: 5px;
}

/* Remove the default bold styling from radio button labels */
.webform-submission-form .webform-type-radios label {
  font-weight: unset;
}

/* Main container for the radio form item */
.webform-options-display-one-column .js-form-type-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  margin-bottom: 1rem;
}

/* Ensure the radio input and label behave as inline elements */
.webform-options-display-one-column .js-form-type-radio .form-radio,
.js-form-type-radio .option {
  display: inline-block;
  margin: 0;
  cursor: pointer;
}

/* Force the description to a new line */
.webform-options-display-one-column .js-form-type-radio .description {
  flex-basis: 100%;
  margin-top: 4px;
  margin-left: 24px;
  /*font-size: 0.85em;
  color: #666;*/
}

/* Description in general */
.webform-type-radios .js-form-type-radio .description {
  font-size: 0.85em;
  color: #666;
}

/* Description in two columns */
.webform-options-display-two-columns .js-form-type-radio .description,
.webform-options-display-three-columns .js-form-type-radio .description,
.webform-options-display-side-by-side .js-form-type-radio .description {
  margin-left: 17px;
}


.webform-options-display-two-columns .form-item {
  display: inline;
}

/* Base positioning context for .box-featured */
.box-featured {
  position: relative;
  overflow: visible;
}

/* ── Emoji pill: straddles the right border of the image on ALL viewports ──
   right:0 + translate(50%,-50%) places the pill's centre exactly on the
   right edge of .box-featured, regardless of image size or device. */

/* 1. Always hide the toggle trigger button — pill is always visible */
.box-featured .action-control .btn-action {
  display: none;
}

/* 2. Pill container: absolute, centred vertically, inside the right side of the image */
.box-featured .action-control {
  position: absolute;
  top: 50%;
  right: 15px;
  bottom: auto;
  left: auto;
  display: block;
  width: auto;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  z-index: 10;
}

/* 3. Vertical pill — compact white capsule */
.box-featured .action-control .list-action,
.box-featured .action-control .list-action.active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: none;
  width: 3.5rem;
  max-width: 3.5rem;
  height: auto;
  padding: 0.7rem 0.5rem;
  gap: 0.85rem;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 1px 30px rgba(26, 52, 97, 0.15);
  font-size: 1rem;
  box-sizing: border-box;
  overflow: visible;
}

/* 4. Each flag: full width, centred */
.box-featured .action-control .list-action .flag {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 5. Link: icon on top, count below */
.box-featured .action-control .list-action .flag>a,
.box-featured .action-control .list-action a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  width: 1.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: #1A3461;
  text-decoration: none;
}

/* 6. Icon size */
.box-featured .action-control .list-action a span.icon:before {
  margin-bottom: 0.3rem;
  width: 1.4rem;
  height: 1.4rem;
}

/* 7. Detail pages: .date (~41px) sits in flow above the image inside .box-featured.
      Shift the pill down by half that height so it stays centred on the image. */
.detail-story .box-featured .action-control {
  top: calc(50% + 20px);
  transform: translateY(-50%);
}

/* ── iPad override (768px–1024px) ──────────────────────────────────────────
   On tablet the image has lateral margins so there is space outside it.
   Straddle the right border: pill centre sits exactly on the image edge. */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .box-featured .action-control {
    right: 0;
    transform: translate(50%, -50%);
  }

  .detail-story .box-featured .action-control {
    top: calc(50% + 20px);
    transform: translate(50%, -50%);
  }
}

/* ── iPad Pro override (1024px–1366px) ─────────────────────────────────────
   iPad Pro portrait = 1024px, landscape = 1366px.
   Must start at 1024px (not 1025px) so it overrides the iPad Mini rule which
   also covers 1024px via max-width:1024px — cascade order ensures this wins.
   Pill stays fully inside the image, same as desktop. */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .box-featured .action-control {
    right: 15px;
    transform: translateY(-50%);
  }

  .detail-story .box-featured .action-control {
    top: calc(50% + 20px);
    transform: translateY(-50%);
  }
}

/* ── Desktop override (> 1366px): Straddle the right border of the image ──────
   Applies to both stories and recipes (both use .box-featured .action-control).
   The pill centre sits exactly on the right edge of the image container, producing
   the "straddling" effect requested in feature/2029.
   The .action-control is now moved INSIDE .card-featured.card-image (stories) and
   .box-featured__image (recipes), so top: 50% centres it on the actual image.
   The detail-story top override (calc 50% + 20px) is reset here because the pill
   is no longer inside .box-featured alongside the .date element. */
@media screen and (min-width: 1367px) {
  .box-featured .action-control {
    right: 0;
    transform: translate(50%, -50%);
  }

  /* Reset story-specific offset: pill is now inside .card-featured.card-image,
       which contains no .date element, so plain 50% is correct. */
  .detail-story .card-featured.card-image .action-control,
  .detail-story .box-featured .action-control {
    top: 50%;
    transform: translate(50%, -50%);
  }

  /* Recipes: pill inside .box-featured__image — centred on image, no offset needed. */
  .box-featured__image .action-control {
    top: 50%;
    transform: translate(50%, -50%);
  }
}