/* Scripps Tweaks: socials (STW_Socials). The site's social follow icons, drawn by the theme's own SR_SocialFollowButtons component
   (a 40px ring with a gold circle that grows on hover); this sheet only adds what an editor chooses for one block: how the icons
   line up, their size and color and the space between them, and the space above and below the block.
   Every selector carries the block's class as well as its tag, so it outweighs the theme's rules whatever order the two sheets load in. */

flynt-component[name='STW_Socials'] {
  display: block;
}

/* A block with every network left out has nothing to draw: the page's wrapper for it leaves the grid, so it adds no row gap. */
.robustStory__module:has(> flynt-component.stwSocials--empty) {
  display: none !important;
}

/* An optional line of text above the icons. */
.stwSocials .stwSocials__label {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 16px;
}

/* Size and gap: the circle, the two rings inside it and the glyph follow the size (40px and a glyph scale of 1 is the theme's own). */
flynt-component[name='STW_Socials'].stwSocials .socialFollow__list {
  gap: var(--stw-soc-gap, 16px);
}

flynt-component[name='STW_Socials'].stwSocials .socialFollow__link {
  block-size: var(--stw-soc-size, 40px);
  inline-size: var(--stw-soc-size, 40px);
}

flynt-component[name='STW_Socials'].stwSocials .socialFollow__link::before {
  block-size: calc(var(--stw-soc-size, 40px) - 4px);
  inline-size: calc(var(--stw-soc-size, 40px) - 4px);
}

flynt-component[name='STW_Socials'].stwSocials .socialFollow__link::after {
  block-size: calc(var(--stw-soc-size, 40px) - 6px);
  inline-size: calc(var(--stw-soc-size, 40px) - 6px);
}

flynt-component[name='STW_Socials'].stwSocials .socialFollow__glyph {
  transform: scale(var(--stw-soc-scale, 1));
}

/* Alignment of the icons (and the heading above them). Spread puts the first icon at the left edge and the last at the right. */
.stwSocials--left .socialFollow__list {
  justify-content: flex-start;
}

.stwSocials--center .socialFollow__list {
  justify-content: center;
}

.stwSocials--right .socialFollow__list {
  justify-content: flex-end;
}

.stwSocials--spread .socialFollow__list {
  justify-content: space-between;
}

.stwSocials--center .stwSocials__label {
  text-align: center;
}

.stwSocials--right .stwSocials__label {
  text-align: right;
}

/* Colour. One palette colour (--stw-soc-icon, set when the editor chooses one; navy otherwise) colours the icons (the glyph paths
   follow the link's color) and the ring around each one. The inside of the circle is always white (the theme's faint inner tint
   becomes solid white), so the icons read the same on any background. The heading is not part of this: it follows the page's
   text, or the text color of a Section the block sits in (--stw-fg, from the section-background fix). The hover state is the
   theme's own, a gold circle with a navy glyph, written out below because these rules would otherwise win over it. */
flynt-component[name='STW_Socials'].stwSocials .socialFollow__link {
  background-color: var(--color-white);
  border-color: var(--stw-soc-icon, var(--color-strength));
  color: var(--stw-soc-icon, var(--color-strength));
}

flynt-component[name='STW_Socials'].stwSocials .socialFollow__link::before {
  background-color: var(--color-white);
}

flynt-component[name='STW_Socials'].stwSocials .socialFollow__link:hover,
flynt-component[name='STW_Socials'].stwSocials .socialFollow__link:focus-visible {
  color: var(--color-strength);
}

.stwSocials .stwSocials__label {
  color: var(--stw-fg, var(--color-strength));
}

@media (max-width: 599px) {
  /* On a phone the icons wrap in rows and a spread row would leave uneven holes: they line up on the left instead. */
  .stwSocials--spread .socialFollow__list {
    justify-content: flex-start;
  }
}

/* Space above and below the block: the exact gap to the neighbouring block, the same convention as the Wysiwyg spacing choices
   (Wysiwyg blocks: set the space above and below), written for the story page builder this block is offered in. The row gap
   (--module-gap, 72px) is the base, so a gap of N is N minus the row gap. Space above does nothing for the first block of a page.
   When both blocks speak (the one above says Space below, this one says Space above), this block's Space above wins. These rules
   are the same as that fix's for a block that carries data-stw-above / data-stw-below, so with both fixes on nothing doubles. */

.robustStory__module:not(:first-child):has(> flynt-component[name='STW_Socials'][data-stw-above='0']) {
  margin-block-start: calc(0px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[name='STW_Socials'][data-stw-above='16']) {
  margin-block-start: calc(16px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[name='STW_Socials'][data-stw-above='24']) {
  margin-block-start: calc(24px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[name='STW_Socials'][data-stw-above='32']) {
  margin-block-start: calc(32px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[name='STW_Socials'][data-stw-above='48']) {
  margin-block-start: calc(48px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[name='STW_Socials'][data-stw-above='64']) {
  margin-block-start: calc(64px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[name='STW_Socials'][data-stw-above='96']) {
  margin-block-start: calc(96px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[name='STW_Socials'][data-stw-below='0']) + .robustStory__module:not(:has(> flynt-component[data-stw-above])):not(:has(> flynt-component[data-stw-sec-above])) {
  margin-block-start: calc(0px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[name='STW_Socials'][data-stw-below='16']) + .robustStory__module:not(:has(> flynt-component[data-stw-above])):not(:has(> flynt-component[data-stw-sec-above])) {
  margin-block-start: calc(16px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[name='STW_Socials'][data-stw-below='24']) + .robustStory__module:not(:has(> flynt-component[data-stw-above])):not(:has(> flynt-component[data-stw-sec-above])) {
  margin-block-start: calc(24px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[name='STW_Socials'][data-stw-below='32']) + .robustStory__module:not(:has(> flynt-component[data-stw-above])):not(:has(> flynt-component[data-stw-sec-above])) {
  margin-block-start: calc(32px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[name='STW_Socials'][data-stw-below='48']) + .robustStory__module:not(:has(> flynt-component[data-stw-above])):not(:has(> flynt-component[data-stw-sec-above])) {
  margin-block-start: calc(48px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[name='STW_Socials'][data-stw-below='64']) + .robustStory__module:not(:has(> flynt-component[data-stw-above])):not(:has(> flynt-component[data-stw-sec-above])) {
  margin-block-start: calc(64px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[name='STW_Socials'][data-stw-below='96']) + .robustStory__module:not(:has(> flynt-component[data-stw-above])):not(:has(> flynt-component[data-stw-sec-above])) {
  margin-block-start: calc(96px - var(--module-gap)) !important;
}