/*
Theme Name: Omarrashid 2024
Author: Fabio Venni
*/

:root {
    --column-max-width: calc(960px / 3);
    --card-min-width: 360px;
    --card-width: min(var(--card-min-width), 90%);
    --shadow-width: 1px;
    --icon-width: 5px;
    --icon-size: 1.5;
    --gap-size: 1rem;
    --border-radius: var(--gap-size);
    --pill-border-radius: calc(var(--border-radius) / 4);
    --around-top-nav: 2;
    --vertical-gap-multiplier: 5;
    --article-width: 1180px;
    --border-top-width: 0;
    --color-foreground: black;
    --color-background: white;
    --border-top-color: var(--color-background);
    --color-accent: #F00;
    --color-white: white;
    --color-black: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-foreground: white;
    --color-background: black;
  }
}


.dark {
  --color-foreground: white;
  --color-background: black;
}

* {
  box-sizing: border-box;
}
h1, h2, h3, h4, p, figure {
  margin: 0;
  padding: 0;
  border: 0;
}
html, body {
  overscroll-behavior: none;
}
html {
  padding: 0;
  margin: 0;
  /* background: linear-gradient(
      350deg, 
      oklch(80% 0.15 85), 
      oklch(95% 0.2 85)
  ); */
  background-color: var(--color-background);
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-foreground);
  font-family: "Space Grotesk", sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

.column {
  padding: 0 max( 5vw, calc( calc( 100vw - 1280px ) / 2 ));
}
.card-column {
  padding: 0;
  padding-left: max( 5vw, calc( calc( 100vw - 1280px ) / 2 ));
}

main.article {
  padding: 0 max( 5vw, calc( calc( 100vw - 1280px ) / 2 ));
  margin: 0 auto;
}
.home section {
  border-top: var(--border-top-width) solid var(--border-top-color);
  padding-top: calc( var(--vertical-gap-multiplier) * var(--gap-size));
  padding-bottom: calc( var(--vertical-gap-multiplier) * var(--gap-size));
}
.home .card-column {
  padding-right: 0;
}




/* Titles */

.title {
  font-family: "Signika", serif;
  line-height: 1;
}
.title-article {
  font-size: 56px;
  margin-bottom: var(--gap-size);
  color: var(--color-foreground);
}
.title-section {
  font-size: 40px;
  margin-bottom: calc( 2 * var(--gap-size));
  color: var(--color-foreground);
}
.title-footer {
  font-size: 28px;
  margin-bottom: var(--gap-size);
  color: var(--color-foreground);
}



.header {
  background-color: rgba(0, 0, 0, 0.0);       /* #fff */
}
.projects-film  {
  background-color: rgba(0, 0, 0, 0.02);      /* #fbfbfb */
}
.projects-vr {
  background-color: rgba(0, 0, 0, 0.031);     /* #f7f7f7 */
}
.projects-extra {
  background-color: rgba(0, 0, 0, 0.045);     /* #f3f3f3 */
}
footer {
  background-color: rgba(0, 0, 0, 0.067);     /* #eee */
}


/* Faccia

.faccia {
  display: block;
  max-width: 100%;
  aspect-ratio: 0.8;
}
.faccia img {
  border-radius:var(--border-radius);
  width: 100%;
}
@media screen and (min-width: 475px) {
  .faccia {
    max-width: var(--column-max-width);
  }  
} */
.home header {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.home header nav {
  margin: auto
}
.header {
  display: flex;
  gap: var(--gap-size);
  flex-wrap: wrap;
  justify-content: space-between;
}

.logo + .tag-cloud {
  margin-top: var(--gap-size);
  padding: 0 5vw; 
}

article .header {
  display: block;
  margin-bottom: calc( 2 * var(--gap-size) );
}



.masthead {
  padding-top: calc( 5 * var(--gap-size));
  align-self: center;
  margin: 0 auto;
}
.masthead ul {
  display: flex;
}
.head-cloud {
  align-self: center;
  width: var(--column-max-width);
}
.head-cloud .tag-cloud {
  justify-content: flex-end;
}
.logo {
  max-width: calc( var(--column-max-width) - calc( 2 * var(--gap-size) ) );
  display: block;
  margin: 0 auto;
}
.logo path {
  fill: var(--color-foreground);
  transition: background-color 0.15s ease;
}
.header-logo path {
  fill: var(--color-black);
}
.logo-footer-anchor {
  margin: calc( calc( 2 * var(--vertical-gap-multiplier)) * var(--gap-size) ) auto 0;
  width: var(--column-max-width);
  display: block;
}
.logo-footer-anchor path {
  fill: var(--color-foreground);
  transition: fill 0.15s ease;
}
a:hover .logo path {
  fill: var(--color-accent);
}
.links {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: calc( var(--gap-size) / 2 )
}
.links a {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: calc( var(--gap-size) / 2 );
  text-decoration: none;
  color: var(--color-foreground);
  background-color: var(--color-background);
  padding-left: calc( 3/8 * var(--gap-size));
}
.links a:hover {
  color: var(--color-background);
}
.esplora .links svg {display: none;} 
.links a:hover svg path {
  stroke:var(--color-background);  
}
.contatti .links a:hover svg path {
  fill: var(--color-background);
  stroke:var(--color-background);
}
.links svg {
  width: calc( var(--icon-size) * var(--gap-size) );
}
header nav ul {
  gap: var(--gap-size);
  justify-content: center;
}

.projects {
  margin: 0 auto;
  position: relative;
}

.cards {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}
.cards ul {
  list-style-type: none;
  display: flex;
  gap: var(--gap-size);
  margin: 0;
  padding: 0;
  /* padding-right: var(--gap-size); */
  border: 0;
}
.cards li {
  width: var(--card-width);
  aspect-ratio: 0.7;
  border-radius: var(--border-radius);
  background-color: var(--color-accent);
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  contain: layout style paint;
}
.cards:not('column') li:last-child {
  margin-right: var(--gap-size);
}
.cards-video li {
  aspect-ratio: 16/9;
  background-color: var(--color-foreground);
}
.cards a {
  display: contents;
  -webkit-tap-highlight-color: transparent;
}
.cards a:hover img {
  filter: brightness(1.15);
}
.carousel .cards ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(279px, 1fr));
  gap: calc( 1.5 * var(--gap-size));
}
.carousel .cards li {
  width: auto;
}
.cards .wp-post-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: static !important;
}
.cards .item-content {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 1rem;
}
.cards .item-empty {
  margin-right: var(--gap-size);
  background-image: url('https://omarrashid.it/wp-content/themes/omarrashid/logo_filigrana.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-blend-mode: luminosity;
  background-size: 80%;
}
.cards .item-empty a {
  display: flex;
  text-align: center;
  color: var(--color-background);
  font-weight: bold;
  text-decoration: none;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}
.cards .item-empty a:hover {
  color: var(--color-foreground);
}
.cards .item-empty i {
  padding: calc( 2 * var(--gap-size));
  text-shadow: 0 1px 2px var(--color-accent);
  margin: auto;
  font-style: normal;
}
.cards 
.contact ul {
  margin: 0;
}
.thumb_label {
  color: var(--color-white);
  font-size: 28px;
  margin-bottom: .5rem;
  line-height: 1;
}
.metadata {
  display: flex;
  flex-wrap: wrap;
  gap: calc( var(--gap-size) / 2 );
}
article a {
  padding: 0 .25rem;
  color: var(--color-foreground);
}
.tag {
  display: block;
  color: var(--color-background);
  background-color: var(--color-foreground);
  border-radius: calc( var(--pill-border-radius) );
  text-decoration: none;
  padding: calc( var(--gap-size) / 4) calc( var(--gap-size) / 1.5);
}
.tag-cloud {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc( var(--gap-size) / 2 );
  padding: 0;
  margin: 0;
}
.tag-cloud li {
  display: contents;
}
.post-entry + .tag-cloud,
h1 + .post-entry {
  margin-top: var(--gap-size);
}
.post-entry .tag-cloud {
  margin-top: calc( 2 * var(--gap-size) );
}
a.tag {
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.metadata .tag {
  padding: 0 calc( var(--gap-size) / 4 );
}
.chromes {
  gap: calc( var(--gap-size) / 2 );
  margin: 0 auto calc( 2 * var(--gap-size));
  padding: 0;
}



.scroll {
  display: none;
  position: absolute;
  top: calc(var(--vertical-gap-multiplier) * var(--gap-size));
  right: calc( 2 * var(--gap-size));
  gap: calc(var(--gap-size) / 2);
}

@media screen and (min-width: 450px) {
  .scroll {
    display: flex;
  }
}
button.tag:not(:disabled):hover {
  background-color: var(--color-accent);
}
.scroll-btn {
  display: flex;
  appearance: none;
  font: unset;
  border: unset;
  cursor: pointer;
  border: 0;
}
.scroll-btn.tag {
  padding: calc( var(--gap-size) / 4);
}
.scroll-btn:disabled {
  opacity: .25;
}
.scroll-btn svg {
  width: calc( 2 * var(--gap-size));
}
.scroll-left svg {
  transform: rotate(180deg);
}
.scroll-btn path {
  stroke: var(--color-background);
}

.wp-post-image {
  width: calc( 2rem + 100%);
  position: relative;
  left: -1rem;
  height: auto;
}
footer {
  padding: calc( var(--vertical-gap-multiplier) * var(--gap-size) ) 5vw;
  padding-bottom: calc( 2 * calc( var(--vertical-gap-multiplier) * var(--gap-size) ));
}
body:not(.home) footer {
  margin-top: calc( var(--vertical-gap-multiplier) * var(--gap-size) );
}
.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc( 4 * var(--gap-size) ) calc( 1 * var(--gap-size) );
  container-type: inline-size;
  container-name: footer;
  padding: 0;
  border: 0;
  border-top: var(--border-top-width) solid var(--border-top-color);
  margin: 0 auto;
  max-width: 1280px;
}

a.tag:hover {
  background-color: var(--color-accent);
}
@container footer (min-width: 960px) {
  /* * > * {
    padding-top: 0;
  } */
  .content {
    max-width: var(--column-max-width);
  }
}
footer .logo {
  margin: calc( calc( 2 * var(--vertical-gap-multiplier) ) * var(--gap-size)) auto;
}
footer .contatti path {
  fill: var(--color-foreground);
} 


.navigation {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding: 0 max( 5vw, calc( calc( 100vw - 1280px ) / 2 ));
  margin: calc(var(--vertical-gap-multiplier) * var(--gap-size)) 0 0;
  gap: var(--gap-size);
  flex-wrap: wrap;
}
.navigation .next {
  margin-left: auto;
}

.movie-meta {
  width: fit-content;
  display: grid;
  gap: var(--gap-size);
  margin: calc(var(--vertical-gap-multiplier) * var(--gap-size)) auto;
}
@media (min-width: 960px) {
  .movie-meta {
    grid-template-columns: var(--column-max-width) 1fr;
  }
}
.movie-meta h3 {
  margin: 0;
}
.movie-meta ul {
  margin-top: 0;

  padding-left: 0;
  max-width: 30rem;
  list-style-type: none;
}


.movie-meta-list th,
.movie-meta-list td {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 24px;
}

.movie-meta-list th {
  text-align: right;
  color: var(--color-accent);
  vertical-align: top;
}
.movie-meta-list td {
  max-width: var(--column-max-width);
}
.movie-meta-list {
  border-collapse: separate;
  border-spacing: var(--gap-size) calc( var(--gap-size) / 2 );
}


.locandina {
  width: 100%;
  border-radius: var(--border-radius);
}
article > picture.locandina {
  margin: calc( var(--vertical-gap-multiplier) * var(--gap-size) ) 0;
  display: block;
}
.locandina + header {
  margin-top: calc( var(--vertical-gap-multiplier) * var(--gap-size) );
}
header.section-page {
  margin: calc( var(--vertical-gap-multiplier) * var(--gap-size) ) 0;
}
.section-page .logo {
  margin-bottom: calc( var(--vertical-gap-multiplier) * var(--gap-size) );
}
@media screen and (min-width: 750px) {
  header.section-page {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(279px, 1fr));
    gap: var(--gap-size);
  }    
  .section-page .header-content {
    align-self: center;
    grid-column-start: 2;
    grid-column-end: -1;
  }
  .section-page .logo {
    margin-bottom: 0;
    grid-column: span 1;
    align-self: center;
  }
}

ul.gallery {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc( var(--column-max-width) / 2 ), 1fr));
  gap: var(--gap-size);
}
ul.gallery a {
  display: block;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border:  0;
}
ul.gallery .attachment-listing.size-listing {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: static;
  border-radius: calc( var(--border-radius) / 2 );
}
/* Initially hide the back-to-top link */
.back-to-top {
  font: unset;
  border: unset;
  cursor: pointer;
  display: none;
  position: fixed;
  bottom: var(--gap-size);
  right: var(--gap-size);
  z-index: 999;
}
/* Show the back-to-top link */
.back-to-top.visible {
  display: block;
}
.tag.selected {
  background-color: var(--color-accent);
}
.title a {
  text-decoration: none;
  color: var(--color-foreground);
}
.title a:hover {
  text-decoration: underline;
}
.title i {
  color: var(--color-accent);
  font-style: normal;
}
.entry-content {
  font-weight: bold;
}
.entry-content + p {
  margin-top: calc(2 * var(--gap-size));
}

.breadcrumb {
  padding: 0 5vw;
  margin: calc( 2 * var(--gap-size)) auto calc( var(--vertical-gap-multiplier) * var(--gap-size));
}
.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  gap: calc( var(--gap-size) / 2);
  padding: 0;
  margin: 0;
}
.breadcrumb li:not(:has(a)) {
  padding: calc( var(--gap-size) / 4) calc( var(--gap-size) / 2);
}

.wp-block-image:not(.locandina),
figure.is-type-video {
  overflow: hidden;
  padding: 0 2.5vw;
}

.wp-block-image:not(.locandina) img {
  width: 100%;
  height: auto;
  margin: calc( var(--vertical-gap-multiplier) * var(--gap-size) ) 0;
  display: block;
  border-radius: var(--border-radius);
}
.wp-block-image.square:not(.locandina) img {
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: calc( var(--vertical-gap-multiplier) * var(--gap-size) ) auto;
}
.wp-block-image.portrait:not(.locandina) img {
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: calc( var(--vertical-gap-multiplier) * var(--gap-size) ) auto;
}
iframe.trailer {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: calc( var(--vertical-gap-multiplier) * var(--gap-size) ) 0;
}
.cards-video iframe.trailer {
  margin: 0;
}
.wp-block-video,
figure.is-type-video {
  width: 100%;
  max-width: 800px;
  margin: calc( var(--vertical-gap-multiplier) * var(--gap-size) ) auto;
}
.wp-block-video video,
figure.is-type-video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius);
  overflow: hidden;
}



/* Lightbox effect using :target */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox img {
  padding: 2vw 2vh;
}
/* Show lightbox when targeted */
.lightbox:target {
  display: flex;
}
a.lightbox:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.lightbox .attachment-listing.size-listing {
  object-fit: contain;
}

#prev, #next {
  display: none; /* Hide by default */
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-background);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}

#prev { left: 10px; }
#next { right: 10px; }

/* Show buttons only when a lightbox is open */
:target ~ #prev,
:target ~ #next {
  display: block;
}

.page article p {
  margin: 0 auto;
  max-width: min(60rem, 95vw);
  color: #666;
  mix-blend-mode: multiply;
}
.dark article p {
  mix-blend-mode: screen;
}
p + p {
  margin-top: var(--gap-size) !important;
}


/* latin */
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/signika/v25/vEF72_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX4zNpD8E4ASzH1r9gTuoyjkgoNshjgx8.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v21/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUXskPMZBSSJLm2E.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
  U+2190, /* ← left arrow */
  U+2191, /* ↑ already present */
  U+2192, /* → right arrow */
  U+2193, /* ↓ already present */
  U+2212, U+2215, U+FEFF, U+FFFD;
}
.gcse-search {
  min-height: 500px;
}
.pinned {
  position: absolute;
  top:  var(--gap-size);
  left: var(--gap-size);
  text-align: center;
  background-color: var(--color-foreground);
  padding: calc( var(--gap-size) / 4 ) 0;
  border-radius: var(--pill-border-radius);
  z-index:2;
}
.pinned svg {
  display: block;
  object-fit: cover;
  width:  calc( 1.5 * var(--gap-size) );
  height: calc( 1.5 * var(--gap-size) );
}
.pinned svg {
  fill: var(--color-background);
}
.pinned svg path {
  stroke: var(--color-foreground);
}
.back-arrow {
  font-style: normal;
  transform: rotate(-45deg);
  display: inline-block;
}
.prev-arrow {
  font-style: normal;
  transform: rotate(-90deg);
  display: inline-block;
}
.next-arrow {
  font-style: normal;
  transform: rotate(90deg);
  display: inline-block;
}





.switch {
  --switch-border-size: 2px;
  --switch-width:  calc( 4 * var(--gap-size) );
  --switch-height: calc( 2 * var(--gap-size) );
  position: relative;
  display: block;
  width:  calc( var(--switch-width)  + calc(2 * var(--switch-border-size)));
  height: calc( var(--switch-height) + calc(2 * var(--switch-border-size)));
  margin: 0 auto;
  transition: background-color .2 ease;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--color-foreground);
  transition: background-color 0.15s ease;
  border-radius: 999px;
}
.switch:hover .slider {
  background-color: var(--color-accent);
}
.slider::before {
  content: '';
  font-size: 14px;
  line-height: calc( 2 * var(--gap-size) );
  text-align: center;
  font-weight: bold;
  position: absolute;
  height: var(--switch-height);
  width:  var(--switch-height);
  left: var(--switch-border-size);
  top: var(--switch-border-size);
  background-color: var(--color-background);
  transition: transform 0.3s ease;
  border-radius: 999px;
}
.dark .slider::before {
  content: '';
}

input:checked + .slider {
  background-color: var(--color-foreground);
}

input:checked + .slider::before {
  transform: translateX( var(--switch-height) );
}
.switch_icon {
  position: absolute;
  z-index: 2;
  margin: 6px;
  pointer-events: none;
  user-select: none;
}




.night {
  right: 0;
}
.day {
  left: 0;
}
.dark .day path,
.night path {
  fill:   var(--color-background);
  stroke: var(--color-background);
}
.dark .day circle {
  stroke: var(--color-background);  
}
.dark .night path,
.day path {
  fill:   var(--color-foreground);
  stroke: var(--color-foreground);
}
.day circle {
  stroke: var(--color-foreground);
}





#___gcse_0 {
  background-color: var(--color-background);
  color: var(--color-foreground);
}
#___gcse_0 * {
  font-size: 20px;
  font-family: "Space Grotesk", sans-serif !important;
  background-color: transparent;
}
#___gcse_0 .gs-result .gs-title *,
#___gcse_0 .gs-spelling a {
  font-size: 28px !important;
  font-family: "Signika", serif !important;
  color: var(--color-foreground) !important;
}
.page #___gcse_0 a.gs-title:hover {
  color: var(--color-accent) !important;
}
.page .gsc-control-cse {
  padding: 0;
  border: 0;
}
.page table.gsc-input,
.page table.gsc-input tbody,
.page table.gsc-input tr,
.page table.gsc-input td,
.page table.gsc-search-box,
.page table.gsc-search-box tbody,
.page table.gsc-search-box td {
  display: contents;
}
.page table.gsc-search-box > tbody > tr {
  display: flex;
  gap: var(--gap-size);
}
.page table.gsc-search-box td.gsc-input,
.page .gsc-input {
  padding: 0;
}
.page .gsc-input {
  color: var(--color-foreground);
  background-color: transparent !important;
  line-height: 1;
}
.page .gsc-input-box {
  padding: var(--gap-size);
  border-radius: var(--border-radius);
  border: 2px solid var(--color-foreground);
  flex-grow: 1;
}
.page .gsib_a {
  padding: 0;
  display: contents;
}
.page .gsib_b {
  display: none !important;
}
.page button.gsc-search-button,
.page .gsc-search-button-v2 {
  background-color: var(--color-foreground) !important;
  border-radius: var(--border-radius);
}
.page .gsc-search-button-v2 {
  min-width: calc(5 * var(--gap-size));
  border: 0;
  padding: 1rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.page .gsc-search-button-v2:hover {
  background-color: var(--color-accent) !important;
}
.page .gsc-search-button {
  margin: 0;
}
.page form.gsc-search-box {
  margin-bottom: calc(var(--vertical-gap-multiplier) * var(--gap-size));
}
.gsc-search-button-v2 svg {
  fill: var(--color-background) !important;
  transform: scale(1.6);
}

.page .gsc-webResult.gsc-result {
  border: 0 !important;
  margin-bottom: calc(2 * var(--gap-size)) !important;
  padding: 0 !important;
}
.page .gsc-thumbnail-inside,
.page .gsc-url-top {
  padding: 0;
}
.gsc-expansionArea {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-size);
}
.gsc-table-cell-snippet-close {
  align-self: center;
}
.gsc-results {
  width: 100% !important;
  padding: 0 !important;
}
.gsc-above-wrapper-area {
  padding: 0 !important;
  border: 0 !important;
  margin-bottom: calc(2 * var(--gap-size)) !important;
}
.gsc-control-cse .gsc-option-menu {
  background-color: var(--color-background) !important;
}
.gsc-selected-option-container {
  box-shadow: none !important;
  max-width: none !important;
  min-width: auto !important;
  color: var(--color-foreground) !important;
  border: none !important;
}
.gsc-tabHeader.gsc-tabhActive {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.gs-webResult .gs-snippet,
.gs-fileFormatType {
  color: var(--color-foreground) !important;
}
.gs-promotion .gs-visibleUrl,
.gs-webResult .gs-visibleUrl {
  color: var(--color-accent) !important;
}

.page .gsc-table-result {
  display: flex;
  gap: var(--gap-size);
  margin: var(--gap-size) 0 0;
  padding: 0;
}
.gsc-webResult::after {
  content: '';
  display: none;
}
.gsc-table-cell-thumbnail,
.gs-web-image-box,
.gs-promotion-image-box {
  display: contents;
}
.page .gs-image {
  max-width: unset !important;
  max-height: unset !important;
}
.page img.gs-image {
  object-fit: cover;
  max-width: 100% !important;
  height: 100%;
  width: 100%;
  border: 0 !important;
  aspect-ratio: 1 / 1;
  display: block;
}
.page a.gs-image {
  width: calc(10 * var(--gap-size));
  border-radius: var(--pill-border-radius) !important;
  overflow: hidden;
  border: 0 !important;
}
.page .gsc-cursor-page {
  width: calc(3 * var(--gap-size));
  height: calc(3 * var(--gap-size));
  line-height: calc(3 * var(--gap-size));
  text-align: center;
  border-radius: 999px;
  background-color: var(--color-foreground) !important;
  color: var(--color-background) !important;
  margin-right: 0;
}
.page .gsc-cursor-page:hover,
.page .gsc-cursor-current-page {
  background-color: var(--color-accent) !important;
}
.page .gsc-results .gsc-cursor {
  display: flex;
}
.page .gsc-cursor-page + .gsc-cursor-page {
  margin-left: calc(var(--gap-size) / 2);
}
.page .gs-no-results-result .gs-snippet,
.page .gs-error-result .gs-snippet {
  border: 0;
}

.page-template-page-search .column {
}

.page .gs-snippet b {
  color: var(--color-accent);
}