/*
Theme Name:     TwentyT4 - Child Root
Theme URI:      https://wordpress.org/themes/twentytwentyfour/
Description:    Child theme from Twenty Twenty-Four for Root-site
Author:         Jill Karlsson
Author URI:     https://nobox.se
Template:       twentytwentyfour
Version:        1.1
Text Domain:    twentytwentyfour
*/

:where(.wp-site-blocks *:focus){
  outline-width:2px;
  outline-style:solid;
}

.wp-block-button.is-style-outline:focus, 
.wp-block-button.is-style-outline .wp-block-button__link:focus, 
footer a:focus {
  outline-color: #fff;
} 
input:focus,
select:focus,
textarea:focus {
  outline-width:2px;
  outline-style:solid;
  outline-offset: 2px;
}

main {
  margin-top:0px;
  position:relative;
}

main h2 {
  margin-top:40px;
}
@media (max-width: 650px) {
  h1, h2, h3 {
    /* break if to long word with hyphens;*/
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  main h2 {
    margin-top:20px;
  }
}

main .wp-block-gallery {
  margin-bottom:20px;
}

/* pdf-file style */ 
main .wp-block-file a:first-of-type {
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #E9EDEC;
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

main .wp-block-file a:first-of-type::before {
  content: "Ladda ner fil:";
  font-weight: bold;
  margin-right: 8px;
}

/* add svg icon after the link text */
main .wp-block-file a:first-of-type::after {
  content: url('data:image/svg+xml;utf8,<svg width="19" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.938 6.64V0H1.171A1.17 1.17 0 0 0 0 1.172v22.656C0 24.478.522 25 1.172 25h16.406a1.17 1.17 0 0 0 1.172-1.172V7.813h-6.64a1.175 1.175 0 0 1-1.172-1.172Zm3.732 10.32-4.708 4.674a.833.833 0 0 1-1.173 0L4.08 16.96a.78.78 0 0 1 .549-1.336h3.183v-3.906c0-.432.35-.781.78-.781h1.563c.432 0 .781.35.781.78v3.907h3.183a.781.781 0 0 1 .55 1.336Zm3.738-11.833L13.628.342a1.17 1.17 0 0 0-.83-.342H12.5v6.25h6.25v-.298c0-.307-.122-.605-.342-.825Z" fill="%23000"/></svg>');
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
  margin-top:4px;
}
main .wp-block-file a:first-of-type:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
/* pdf-file style end */ 

header.wp-block-template-part {
  box-shadow: 0px 10px 30px 0px #00000026; 
  position:relative; 
  z-index:10;
}

footer .footer_slogan {
  margin-top: 0px;
}
footer .social-links img {
  height: 24px;
  width: auto;
}
footer .social-links a {
  color: #fff;
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: color 0.3s ease, border-bottom 0.3s ease;
}
footer .social-links a:hover {
  color: #fff;
  border-bottom: 2px solid white;
  padding-bottom: 3px;
}

.link-with-arrow {
  font-size:20px;
  display: inline-flex;
  align-items: center;
  gap: 1em;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}
.link-with-arrow span {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
}

.link-with-arrow .arrow {
  transition: transform 0.3s ease, color 0.3s ease;
  height: 20px;
  width: 22px;
}

.link-with-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-with-arrow:hover span {
  color: #0D5C4D; /* hovercolor green */
  transform: translateX(4px);
  transition: all 0.3s ease;
}

/* button hover */
.wp-element-button:hover,
.wp-block-button__link:hover, 
.is-style-outline .wp-block-button__link:hover {
  background-color: #567D7A !important; /* green */
  color: #fff !important;
}

/* school list filter */
.school-filter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

@media (max-width: 800px) {
  .school-filter {
    gap: 10px;
  }
}

.school-filter #freesearch {
  display: flex;
  flex-grow: 1;
  padding: 12px 16px;
  font-size: 20px;
  line-height: 24px;
  border: 1px solid #BABABA;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.school-filter #freesearch::placeholder {
  color: #A1A1A1;
  opacity: 1; /* Firefox */
  font-style: italic;
}

@media (max-width: 800px) {
  .school-filter #freesearch {
    padding: 9px 16px;
    font-size: 20px;
    line-height: 24px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.school-filter .wp-block-button {
  display: flex;
}

.school-filter .wp-element-button {
  word-break: keep-all;
}

@media (min-width: 800px) {
  .school-filter .wp-element-button {
    min-width: 120px;
  }
}
.schools_filtered {
  margin-bottom: -20px;
}

/* school list */
.category {
  background-color: white;
  border: 1px solid #E9EDEC;
  border-left: 8px solid #567D7A;
  padding: 20px;
  margin-bottom: 40px;
}

.category h3 {
  margin-top:0px;
}

.category ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  column-count: 3;
  column-gap: 40px;
}

.category ul li {
  margin-bottom: 8px;
}

.category ul li a {
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.category ul li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (max-width: 1100px) {
  .category ul {
    column-count: 2;
  }
}

@media (max-width: 800px) {
  .category ul {
    column-count: 1;
  }
}
.footer_slogan_wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
footer .logoslogan a {
  display: flex;
  align-items: center;
}
footer .logoslogan img {
  height:auto; 
  width:130px !important;
  flex-shrink: 0;
}
footer .footer_slogan {
  max-width: 450px;
}

@media (max-width: 800px) {
  footer .logoslogan img {
    height:auto; 
    width:60px !important;
  }
  .footer_slogan_wrapper {
    gap: 20px;
  }
}

@media (max-width: 650px) {
  .slogan { 
    display:none !important; 
  }
  header.wp-block-template-part .mainlogo img { 
    height:auto; 
    width:105px !important;
  }

  .wp-block-gallery {
    gap: 20px !important;
  }

  footer .footer_slogan {
    margin-top: 0px;
    display: flex;
  }
}

/* shortcode show latest posts style */
.list-recent-posts {
  margin-bottom:50px;
}
.recent-posts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) {
  .recent-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .recent-posts-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.recent-post-school {
  font-size:0.875rem;
}
.recent-post-item {
  background-color: white;
  border: 1px solid #E9EDEC;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.recent-post-item:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.recent-post-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.recent-post-content h3 {
  margin-top:0px;
  flex-grow: 1;
}
.recent-post-content span {
  text-align: right;
}
.recent-post-img {
  width: 100%;
  aspect-ratio: 345/276;
  max-height: 276px;
  height: auto;
  display: block;
  background-color: #01305080;
}
.recent-post-img img {
  width: 100%;
  aspect-ratio: 345/276;
  height: auto;
  max-height: 276px;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 650px) {
  .recent-post-img:empty {
    display: none; /* collapse area if no image */
  }
}

.back-button {
  margin-top: 40px;
}
.back-button .wp-block-button__link,
.back-button .wp-element-button, 
.show-all-schools-btn {
  background-color: var(--wp--preset--color--primary, #247869);
  color: var(--wp--preset--color--base, #fff);
  display: inline-block;
  padding: 0.6em 1.4em;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  border: none;
  font-size: 1.25rem;
  border-radius: 0; 
  transition: background-color 0.2s ease;
}

.show-all-schools-link {
  font-size: 1rem; 
}


/* school header added in single.html */
.extraheader .wp-block-site-title {
  font-size: 0.875rem !important; 
  font-weight: normal;
}
.extraheader .wp-block-site-title a {
  display: inline-flex;
  align-items: center;
}
.extraheader .wp-block-site-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.extraheader .wp-block-site-title a::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none"><path fill="%23212121" d="M13.082.86a1.203 1.203 0 0 0-1.728.013 1.27 1.27 0 0 0 .013 1.767l6.563 6.614H1.222c-.675 0-1.222.56-1.222 1.25s.547 1.25 1.222 1.25h16.7l-6.555 6.606a1.27 1.27 0 0 0-.013 1.767 1.203 1.203 0 0 0 1.728.014l8.462-8.528a1.587 1.587 0 0 0 0-2.226L13.082.86Z"/></svg>');
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-bottom: 2px;;
  vertical-align: middle;
  transform: rotate(-180deg) scale(0.7);
  height: auto;
  width: auto;
}