/**
 * Theme Name:        Marta Pereira
 * Theme URI:         
 * Description:       Custom theme for Marta Pereira's portfolio.
 * Version:           1.0.0
 * Author:            Teresa Chow
 * Author URI:        https://teresachow.net
 * Tags:              block-patterns, full-site-editing
 * Text Domain:       martapereira
 * Requires PHP:      8.3.14
 * License:           GNU General Public License v3.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-3.0.html
 */

/* Defines layout and behavior */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* nav */
.navigation a {
  color: #bab8b3;
}
.navigation nav ul {
	list-style-type:none;
}

/* footer */
.footer a {
  font-family: "IBM Plex Mono", monospace;
}
footer .copyright {
  font-family: "IBM Plex Mono", monospace;
  color: #bab8b3;
}

/* reduce widows and orphans */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* template - index */
.project-grid {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

/* ****************************************************************************
 *  PROJECT CONTENT
 **************************************************************************** */
 .wp-block-post-content h2 {
    font-size: 2rem;
    color: var(--wp--preset--color--accent-1);
  }
  .wp-block-post-content h3 {
    margin-top: 4rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--accent-1);
  }
  .wp-block-post-content p {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    max-width: 730px;
  }
  .info-img {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
  .info-img figure {
    flex: 1;
    margin: 0;
    width: auto !important;
    max-width: 100% !important;
  }
  .info-img img {
    width: 100%;
    height: auto;
  }
  .wp-block-post-content figcaption {
    margin-top: 0.5rem;
    text-align: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.6rem;
    color: var(--wp--preset--color--accent-2);
  }
  .wp-block-post-content strong {
    display: inline-block;
    font-family: "IBM Plex Mono", monospace;
    padding-bottom: 0.2rem;
    color: var(--wp--preset--color--accent-3);
    font-size: 0.8rem;
    font-weight: 400;
  }
  .wp-block-post-content a {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
  }
  .wp-block-post-content a:hover {
    font-weight: 700;
  }

/* ****************************************************************************
 *  AGENDA / EVENTS TEMPLATE
 **************************************************************************** */
.agenda-events-wrapper {
  text-align: center;
}

 .agenda-events-wrapper h2 {
  padding-bottom: 1rem;
  color: var(--wp--preset--color--accent-1);
}

.agenda-events-wrapper h3, .agenda-events-wrapper h4, .agenda-location {
  font-family: "IBM Plex Mono", monospace;
}

.agenda-events-wrapper h3 {
  font-size: 1rem;
  font-weight: 700;
  padding: 0 1% 0 1%;
}

.agenda-location, .agenda-events-wrapper h4 {
  padding-top: 0.1rem;
  font-weight: 400;
  color:var(--wp--preset--color--accent-3);
}

.agenda-events-present .agenda-location, .agenda-events-present h4 {
  font-size: 0.8rem;
}

.agenda-events-wrapper table {
  width: 100%;
  padding-top: 1.25%;
}

.agenda-events-wrapper tr td{
  padding: 0.5% 0 0.5% 0;
}

.agenda-events-present {
  margin-top: 2.5%;
}

.agenda-events-past {
  margin-top: 5%;
  margin-bottom: 2.5%;
}

.agenda-events-past h2 {
  text-align: left;
  font-size: 1rem;
}

.agenda-events-past table {
  font-size: 0.8rem;
  border-bottom: 1px solid var(--wp--preset--color--accent-1);
  border-collapse: collapse;
}

.agenda-events-past h3 {
  font-size: 0.8rem;
  color:var(--wp--preset--color--accent-3);
}

.agenda-events-past .agenda-location, .agenda-events-past h4 {
  font-size: 0.6rem;
}

summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: '';
}

summary h2::before {
  content: "▸ ";
  font-size: 1rem;
  transition: transform 0.2s;
}

details[open] summary h2::before {
  content: "▾ ";
}

/* ****************************************************************************
 *  MENU BUTTON : small devices only
 **************************************************************************** */
/* menu icon */
.menu-icon {
  cursor: pointer;
  float: right;
  position: relative;
  user-select: none;
}
.menu-icon .navicon {
  background: var(--wp--preset--color--accent-1);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
  background: var(--wp--preset--color--accent-1);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
.menu-icon .navicon:before {
  top: 5px;
}
.menu-icon .navicon:after {
  top: -5px;
}

/* menu button */
.menu-btn {
  opacity: 0;
}
.menu-btn:checked ~ nav {
  max-height: 400px;
  opacity: 1;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-in;
}
.menu-btn:checked ~ nav ul li {
  max-height: 400px;
  opacity: 1;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-in;
}
.menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* ****************************************************************************
 *  MEDIA QUERIES : index grid only
 **************************************************************************** */
/* 4 columns */
 @media only screen and (min-width: 1200px) {
  .project-grid {
    padding: 5.2% 2.5% 0 3.5%;
  }
  .project-card {
    margin-bottom: 1.4% !important;
    width: 23vw;
    height: 14vw;
    overflow: hidden;
  }
  .project-thumbnail img {
    object-fit: cover;
    object-position: center;
    width: 21vw;
    height: 14vw;
  }
}
/* 3 columns */
@media only screen and (min-width: 971px) and (max-width: 1199px) {
  .project-grid {
    padding: 7.5% 2.5% 0 2.5%;
  }
  .project-card {
    margin-bottom: 2.2% !important;
    width: 30.5vw;
    height: 17vw;
    overflow: hidden;
  }
  .project-thumbnail img {
    object-fit: cover;
    object-position: center;
    width: 28vw;
    height: 17vw;
  }
}
/* 2 columns */
@media only screen and (min-width: 769px) and (max-width: 970px) {
  .project-grid {
    padding: 8.7% 2.5% 0 3.5%;
  }
  .project-card {
    margin-bottom: 3% !important;
    width: 46vw;
    height: 27vw;
    overflow: hidden;
  }
  .project-thumbnail img {
    object-fit: cover;
    object-position: center;
    width: 42vw;
    height: 27vw;
  }
}
/* 1 column */
@media only screen and (max-width: 768px) {
  .project-grid {
    padding: 6.5rem 2.5% 0 3.5% !important;
  }
  .project-card {
    margin-bottom: 2.5% !important;
    width: 94vw;
    height: 52vw;
    overflow: hidden;
  }
  .project-thumbnail img {
    object-fit: cover;
    object-position: center;
    width: 90.5vw;
    height: 52vw;
  }
  .swiper-container {
    padding: 5.75rem 2.5% 0 2.5% !important;
  }
}

/* ****************************************************************************
 *  MEDIA QUERIES : LARGE DEVICES
 *  from tablets (landscape) up
 **************************************************************************** */
@media only screen and (min-width: 769px) {
  .mobile {display: none;}

  /* general - navbar */
  header {
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    z-index: 3;
  }
  .navigation {
    margin: 0 2.5% 0 .8%;
    padding: 1.5% 2.5%;
  }
  nav {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  nav ul li {
    display: inline-block;
  }

  nav .filters li a {
    padding-left: 1em;
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    color: var(--wp--preset--color--accent-3);
  }
  nav .filters li a:hover {
    color: var(--wp--preset--color--accent-2);
  }
  .current-filter a {
    color: var(--wp--preset--color--accent-2) !important;
  }

  nav .info-pages a {
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    padding: 0 .5em 0 .5em;
    color: var(--wp--preset--color--accent-3);
  }
  nav .info-pages a:hover {
    color: var(--wp--preset--color--accent-2);
  }
  .current-page a {
    color: var(--wp--preset--color--accent-2) !important;
  }

  .language {
    margin-left: 2em;
  }
  nav .language a {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    padding: 0 .5em 0 .5em;
    color: var(--wp--preset--color--accent-3);
  }
  nav .language a:hover {
    font-weight: 700;
    color:  var(--wp--preset--color--accent-1);
  }
  nav .language .current-lang a {
    font-weight: 700;
    color:  var(--wp--preset--color--accent-1);
  }

  /* general - footer */
  .footer {
    margin: 0 2.5% 0 .8%;
    padding: 0 2.5% 1.5% 2.5%;
  }
  .social-links {
    padding-top: 0.5rem;
  }
  .social-links p a {
    padding-top: 0.5rem;
    font-size: 0.8em;
  }
  .social-links a:hover {
    font-weight: 700;
  }

  /* template - index */
  .project-card h3 {
    display: flex;
  }
  .project-thumbnail {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    display: inline-block;
  }
  .thumbnail-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .thumbnail-wrapper img {
    opacity: 90%;
  }
  .thumbnail-wrapper:hover img {
    opacity: 100%;
  }
  .rotated-text {
    transform: rotate(270deg);
    transform-origin: left top;
    display: inline-block;
    padding: 92% 0 0 3%;
  }

  /* template - project */
  .project-gallery {
    width: 93%;
  }
  .project-gallery .swiper-slide {
    padding-top: 5.2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 34rem;
    width: auto;
    overflow: hidden;
  }
  .project-gallery .swiper-slide img {
    max-height: 90%;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
  }
  .project-gallery .swiper-caption {
    margin-top: 0.5rem;
    text-align: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.6rem;
    color: var(--wp--preset--color--accent-2);
  }
  .project-gallery .swiper-button-prev,
  .project-gallery .swiper-button-next {
    position: absolute !important;
    width: 40px;
    height: 40px;
    z-index: 1;
    cursor: pointer;
  }
  .project-gallery .swiper-button-prev { left: 0.5rem !important; }
  .project-gallery .swiper-button-next { right: 0.5rem !important; }
  .project-gallery .swiper-button-next::before,
  .project-gallery .swiper-button-prev::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    background: rgba(51,51,51,0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    box-shadow: 0 2px 8px rgba(255,255,255,0.08);
  }
  svg.swiper-navigation-icon {
    width: 10px !important;
    height: 10px !important;
    fill: var(--wp--preset--color--base) !important;
    stroke: var(--wp--preset--color--base) !important;
  }
  svg.swiper-navigation-icon path {
    fill: var(--wp--preset--color--base) !important;
    stroke: var(--wp--preset--color--base) !important;
  }

  /* post content */
  .wp-block-post-content h2 {
    margin-top: 4rem;
  }
  .info-img {
    margin-top: 5.2%;
  }

  /* template - agenda */
  .agenda-nav {
    background-color: #ffffff;
    position: fixed;
    z-index: 3;
    display: block;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    clear: both;
  }
  .agenda-nav .navigation {
    display: flex;
  }
  .agenda-nav h1 {
    margin-right: auto;
  }
  .agenda-nav nav {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  .agenda-events-wrapper {
    margin: 0 2.5% 0 .8%;
    padding: 5.2% 2.5% 0 2.5%;
  }
}

/* ****************************************************************************
 *  MEDIA QUERIES : SMALL DEVICES
 *  smartphones, tablets (portrait), small laptops
 **************************************************************************** */
@media only screen and (max-width: 768px) {
	.mobile {display: block !important;}

  /* general - navbar */
  .navigation {
    position: fixed;
    margin: 0;
    align-items: center;
    padding: 1.5rem 4.5%;
    background-color: #ffffff;
    width: 100%;
    z-index: 3;
  }
  nav {
    width: 100%;
    display: block;
    background: #ffffff;
    position: relative;
    z-index: 1;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease-out, opacity 0.2s ease-in;
  }
  nav ul {
    display: block;
  }
  nav ul li {
    display: block;
    text-align: center;
    margin: 1rem 0;
    font-size: 1rem;
    color: var(--wp--preset--color--accent-3);
  }
  nav .language {
    display: flex;
    gap: 2rem;
    margin: 0 40%;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Mono", monospace;
    border-top: solid 2px var(--wp--preset--color--accent-1);
  }
  nav .language .current-lang a {
    font-weight: 700;
    color:  var(--wp--preset--color--accent-1);
  }
  .current-filter a, .current-page a {
    color: var(--wp--preset--color--accent-2) !important;
  }
  .navigation h1, .agenda-nav h1 a {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    color: var(--wp--preset--color--accent-3);
  }
  .menu-btn {
    width: 2em;
    height: 2em;
    opacity: 0;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }
  .menu-icon {
    display: inline-block;
    vertical-align: middle;
    z-index: 2;
  }
  .menu-btn:checked ~ nav {
    max-height: 400px;
    opacity: 1;
    transition: max-height 0.2s ease-out, opacity 0.2s ease-in;
  }

  /* general - footer */
  .footer {
    padding: 10% 4.5%;
    text-align: center;
  }
  .footer h5 {
    margin-top: 2rem;
  }
  .social-links {
    padding-top: 1rem;
  }
  .social-links p {
    margin-top: 1rem;
  }
  .social-links p a {
    margin-top: 2rem;
    font-size: 1em;
    font-weight: 700;
  }

  /* template - index */
  .project-card h3 {
    display: flex;
    font-size: 0.7rem;
  }
  .project-thumbnail {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    display: inline-block;
  }
  .thumbnail-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .thumbnail-wrapper img {
    opacity: 90%;
  }
  .rotated-text {
    transform: rotate(270deg);
    transform-origin: left top;
    display: inline-block;
    padding: 96.5% 0 0 3%;
  }

  /* template – project */
  .project-gallery .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 32rem;
    overflow: hidden;
  }
  .project-gallery .swiper-slide img {
    max-height: 90%;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
  }
  .project-gallery .swiper-caption {
    margin-top: 0.5rem;
    text-align: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.6rem;
    color: var(--wp--preset--color--accent-2);
  }
  .project-gallery .swiper-button-prev,
  .project-gallery .swiper-button-next {
    position: absolute !important;
    width: 40px;
    height: 40px;
    z-index: 1;
    cursor: pointer;
  }
  .project-gallery .swiper-button-prev { left: 0.5rem !important; }
  .project-gallery .swiper-button-next { right: 0.5rem !important; }
  .project-gallery .swiper-button-next::before,
  .project-gallery .swiper-button-prev::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    background: rgba(51,51,51,0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    box-shadow: 0 2px 8px rgba(255,255,255,0.08);
  }
  svg.swiper-navigation-icon {
    width: 10px !important;
    height: 10px !important;
    fill: var(--wp--preset--color--base) !important;
    stroke: var(--wp--preset--color--base) !important;
  }
  svg.swiper-navigation-icon path {
    fill: var(--wp--preset--color--base) !important;
    stroke: var(--wp--preset--color--base) !important;
  }

  /* post content */
  .wp-block-post-content h2 {
    margin-top: 2rem;
  }
  .info-img {
    margin-top: 5.75rem;
    flex-direction: column;
  }
  .info-img figure {
    flex: unset;
    width: 100%;
    margin-bottom: 2rem;
  }

  /* template - agenda */
  .agenda-nav .navigation{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }
  .agenda-events-wrapper {
    margin: 0 2.5% 0 .8%;
    padding: 18% 2.5% 0 2.5%;
  }
}