/*
Theme Name: ITP Help Theme
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: This theme, customized for the ITP Help Website, is a child theme of Twenty Twenty-Four. Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

* {
  font-family: "Open Sans", sans-serif !important;
  box-sizing: border-box;
}

body {
  background-color: #fff !important;
}

.header {
  background-color: #57068c;
  color: #fff;
  display: flex;
  padding: 1em 2em;
}

.header a {
  color: #fff;
  text-decoration: none;
}

::selection{
  background-color: #e8dbee;
  color: #000;
}

div.search-container ul, 
footer ul {
  list-style: none;
  padding: 0;
}

div.title h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 0 10px;
  color: #fff;
}

div.title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: none !important;
  width: 100%;
}

div.title > div.logo {
  width: 25px;
  height: 25px;
  background-image: url("https://itp.nyu.edu/branding/header/interactiveLogo.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

nav {
  margin: 0 0 0 auto;
}

nav ul {
  display: flex;
  gap: 1em;
  padding: 0;
  flex-direction: row;
  margin: 0;
  flex-wrap: wrap;
}

nav ul li a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}

div.search-container h3 {
  text-align: center;
  line-height: 54px; /* 135% */
  font-weight: 600;
  margin: 2em;
  position: relative;
  z-index: 1;
}

div.search-container {
  background: #eee6f3;
  /* background-image: url("https://itp.nyu.edu/help_new/wp-content/uploads/2024/06/23ae66dbd15d56cd4f56d483d80561e2.png"); */
  background-size: cover;
  background-position-x: 10px;
  background-blend-mode: multiply;
  margin: 0;
  padding: 6em 10em;
  --wp--style--global--content-size: 1000px;
  position: relative;
  overflow: hidden;
}

figure.hero {
  pointer-events: none;
  user-select: none;
  position: absolute;
  top: -10em;
  left: 0;
  margin-top: 0;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  width: 100% !important;
  height: 150% !important;
  right: 0;
  max-width: none !important;
}

figure.hero > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

form.search-bar {
  position: relative;
  z-index: 1;
}

form.search-bar div {
  position: relative;
  display: flex;
  flex-direction: row;
}

form.search-bar div input {
  border: 2px solid #d6d6d6;
  border-radius: 0 !important;
  padding: 10px;
  transition: all 0.9s cubic-bezier(0.075, 0.82, 0.165, 1);
  outline: 1px solid transparent;
}

form.search-bar div input:focus {
}

div.search-container form > div > button {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0LjI1IDI0LjI1TDE4LjgxMjUgMTguODEyNU0yMS43NSAxMS43NUMyMS43NSAxNy4yNzI4IDE3LjI3MjggMjEuNzUgMTEuNzUgMjEuNzVDNi4yMjcxNSAyMS43NSAxLjc1IDE3LjI3MjggMS43NSAxMS43NUMxLjc1IDYuMjI3MTUgNi4yMjcxNSAxLjc1IDExLjc1IDEuNzVDMTcuMjcyOCAxLjc1IDIxLjc1IDYuMjI3MTUgMjEuNzUgMTEuNzVaIiBzdHJva2U9IiM3MDJCOUQiIHN0cm9rZS13aWR0aD0iMi42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  border: 2px solid #d6d6d6;
  border-left: none;
  background-color: #fff;
  border-radius: 0 !important;
  aspect-ratio: 1/1 !important;
  padding: 1.5em;
}

div.search-container form > div > button:hover {
  background-color: transparent;
  border-color: #d6d6d6;
}

div.search-container > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: flex-start;
  padding: 0;
  position: relative;
  z-index: 1;
}

div.search-container > ul > li {
  background: #fff;
  border: 1px solid #d6d6d6;
  padding: 0.5em 1em;
  flex-grow: 1;
  text-align: center;
}

div.search-container > ul > li > a {
  color: #000;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

div.content {
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 5em auto;
  flex-wrap: wrap !important;
}

div.content-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 200px);
  align-items: flex-start;
}

div.card.timely-links {
  grid-row: span 2;
  height: fit-content;
}

div.timely-links-title div.collapse-btn,
div.calendar-title div.collapse-btn {
  display: none;
}

div.card.timely-links h4 {
}

div.timely-links-title {
  border-bottom: 1px solid #702b9d;
}

div.timely-links ul li {
  padding: 0.2em !important;
}

div.content-container div {
  grid-row: span 4;
}

div.card.calendar {
  grid-row: 4/9;
}

div.card div:nth-child(1) {
  width: 100%;
}

div.card {
  min-width: 271px;
  display: flex;
  flex-direction: column;
  width: auto;
  height: 100%;
  padding: 30px 20px;
  justify-content: flex-start;
  /* align-items: center; */
  gap: 10px;
  border: 2px solid #f2f2f2;
  background: var(--White, #fff);
  box-shadow: 0px 16.8px 22.4px -5.6px rgba(16, 24, 40, 0.08),
    0px 5.6px 8.4px -2.8px rgba(16, 24, 40, 0.03);
}

div.card h4 {
  width: 100%;
  font-size: 18px;
  font-weight: 800;
  border-bottom: 2px solid #f2f2f2;
  padding-bottom: 24px;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

div.card.timely-links h4 {
  font-size: 15px;
  text-align: left;
  border-bottom: 0;
}

div.card ul,
div.card ul {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0;
  margin: 0 !important;
}

div.card ul li {
  font-size: 14px;
  font-weight: 400;
  padding: 0.5em 0;
}

div.card img {
  width: 160px;
  pointer-events: none;
  user-select: none;
  /* margin: 0.5em 3em; */
}

div.card figure {
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}

div.card ul li a {
  text-decoration: none !important;
}

div.calendar h4 {
  text-align: left !important;
}

footer {
  background-color: #330662;
  margin-top: 10em;
  padding-bottom: 4em;
}

footer > div {
  padding-bottom: 0 !important;
}

footer div.footer-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap !important;
  align-items: center;
  padding: 1em;
  color: #fff;
  max-width: none !important;
}

footer div.footer-content > div:nth-child(1) {
  align-items: center !important;
}

footer div.footer-content h4,
h5,
h6 {
  color: #fff;
}

footer div.footer-content h4 {
  /* font-size: 18px; */
  font-weight: 700;
}

body > div.wp-site-blocks > footer > div.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.footer-content.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-12.wp-block-group-is-layout-flex > div.wp-block-group.is-vertical.is-layout-flex.wp-container-core-group-is-layout-8.wp-block-group-is-layout-flex > div > figure, footer > div.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.footer-content.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-43.wp-block-group-is-layout-flex > div.wp-block-group.is-vertical.is-layout-flex.wp-container-core-group-is-layout-39.wp-block-group-is-layout-flex > div > figure{
  width: fit-content !important;
}

div.footer-content:nth-child(1) > div:nth-child(2) {
  border-left: 0.5px solid #d6d6d6;
  padding-left: 7em;
}

div.footer-content:nth-child(1) > div:nth-child(3) {
  border-right: 0.5px solid #d6d6d6;
  padding-right: 7em;
}

form.footer-search label {
  display: none;
}

form.footer-search input {
  padding: 1em;
  padding-right: 60px;
  border-radius: 4px;
  border-radius: 4px;
  border: 2px solid #d6d6d6;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

form.footer-search input:focus {
  outline: none;
  box-shadow: 0px 0px 0 0.1em #dedede98;
}

form.footer-search button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjI1IDI2LjI1TDIwLjgxMjUgMjAuODEyNU0yMy43NSAxMy43NUMyMy43NSAxOS4yNzI4IDE5LjI3MjggMjMuNzUgMTMuNzUgMjMuNzVDOC4yMjcxNSAyMy43NSAzLjc1IDE5LjI3MjggMy43NSAxMy43NUMzLjc1IDguMjI3MTUgOC4yMjcxNSAzLjc1IDEzLjc1IDMuNzVDMTkuMjcyOCAzLjc1IDIzLjc1IDguMjI3MTUgMjMuNzUgMTMuNzVaIiBzdHJva2U9IiNBQjgyQzUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
  border: 2px solid #d6d6d6;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  height: 55px;
  margin-left: -50px;
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

form.footer-search button:hover {
  background-color: #f2f2f2;
  border: 2px solid #d6d6d6;
}

form.footer-search button:focus {
  outline: none;
  background-color: #f2f2f2;
}

.external-link {
  position: relative;
  display: block;
}

.external-link::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4IDEzVjE5QzE4IDE5LjUzMDQgMTcuNzg5MyAyMC4wMzkxIDE3LjQxNDIgMjAuNDE0MkMxNy4wMzkxIDIwLjc4OTMgMTYuNTMwNCAyMSAxNiAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWOEMzIDcuNDY5NTcgMy4yMTA3MSA2Ljk2MDg2IDMuNTg1NzkgNi41ODU3OUMzLjk2MDg2IDYuMjEwNzEgNC40Njk1NyA2IDUgNkgxMU0xNSAzSDIxTTIxIDNWOU0yMSAzTDEwIDE0IiBzdHJva2U9IiMxMDE4MjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 20px;
}

div.collapse-title {
  display: none;
}

.align-left.align-left.align-left.align-left {
  margin-left: 0 !important;
}

div.card:not(.timely-links):not(.calendar) > div:last-child {
  overflow-y: auto;
  margin-left: 0 !important;
}

.glow {
  animation: glow 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.page-title {
  font-weight: 600;
  padding-bottom: 1em;
  border-bottom: 1px solid #d6d6d6;
}

.page-subheader {
  background: #eee6f3;
}

.wp-block-post-content a {
  color: #8901e1;
  text-decoration: underline;
  font-weight: 600;
}

.wp-block-post-content h2 {
  font-size: 24px;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 10px 0px #56068c36;
  }
  50% {
    box-shadow: 0 0 20px 5px #56068c1f;
  }
  100% {
    box-shadow: 0px 16.8px 22.4px -5.6px rgba(16, 24, 40, 0.08),
    0px 5.6px 8.4px -2.8px rgba(16, 24, 40, 0.03);
  }
}

div.categories-group {
  display: none;
}

@media screen and (max-width: 1600px) {
  footer div.footer-content {
    flex-direction: column;
    gap: 2em;
    padding: 1em 0;
  }

  footer div.footer-content div {
    border-left: none !important;
    border-right: none !important;
    padding: 0 !important;
    width: 100%;
  }

  footer div.footer-content div form {
    width: 100%;
  }

  footer div.footer-content div h5 {
    margin-right: auto;
  }

  footer div.footer-content:last-child {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}



@media screen and (max-width: 1200px) {
  div.content-container {
    grid-template-areas:
      "a a a a"
      "b b b b"
      "c c c c"
      "d d e e"
      "f f g g"
      "h h i i"
      "j j k k";

    grid-template-rows: repeat(7, auto);
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: 412px;
  }

  div.content {
    margin: 2em auto;
  }

  div.categories-group.categories-group {
    display: flex;
    flex-direction: row;
    grid-area: c;
    grid-row: 3;
  }

  div.categories-group.categories-group > div {
    width: 100%;
  }

  div.categories-group.categories-group h4 {
    margin-right: auto;
  }

  div.card-header {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  }

  div.card-header:hover {
    box-shadow: #c3c3c375 0px 0px 10px 0px;
  }

  div.card-header:has(~ div[style*="display: block;"]) {
    outline: 2px solid #57068c;
  }

  div.search-container ul {
    gap: 0.5em;
  }

  div.search-container ul::before {
    content: "Recommended for you: ";
  }

  div.search-container ul li {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    text-decoration: underline;
    text-align: left;
    flex-grow: 0;
  }

  div.search-container ul li::after {
    content: ",";
  }

  div.search-container ul li:last-child::after {
    content: "";
  }

  div.collapse-title {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  div.collapse-title > h4 {
    width: fit-content;
    margin-right: auto !important;
  }

  div.card {
    all: unset;
    display: flex;
    flex-direction: column;
  }

  div.card.timely-links,
  div.card.calendar {
    overflow: hidden;
  }

  div.card.timely-links h4,
  div.categories-group h4 {
    font-size: 18px;
    padding-bottom: 0.5em;
    font-size: 18px;
    font-weight: 700;
  }

  div.calendar-title,
  div.categories-group {
    border-bottom: #702b9d solid 1px;
  }

  div.card:nth-child(1) {
    grid-area: a;
    grid-row: 1;
  }

  div.card.calendar {
    grid-area: b;
    grid-row: 2;
  }

  div.card.calendar h4 {
    font-weight: 700;
    font-size: 18px;
    padding-bottom: 0.5em;
  }

  div.card:nth-child(2) {
    grid-area: d;
  }

  div.card:nth-child(3) {
    grid-area: e;
  }

  div.card:nth-child(4) {
    grid-area: f;
  }

  div.card:nth-child(6) {
    grid-area: g;
  }

  div.card:nth-child(7) {
    grid-area: h;
  }

  div.card:nth-child(8) {
    grid-area: i;
  }

  div.timely-links-title div.collapse-btn,
  div.calendar-title div.collapse-btn {
    display: block;
  }

  div.card h4 {
    border-bottom: none;
    margin: 0;
    padding: 0;
  }

  div.card:not(.timely-links) ul {
    /* display: none; */
  }

  div.card:not(.timely-links):not(.calendar) > div:first-child {
    padding: 18px 20px;
    border-radius: 4px;
    border: 1px solid var(--Secondary-Color-Medium-Violet-1, #702b9d);
    background: #fff;
  }

  div.card.collapsed:not(.timely-links):not(.calendar) {
    height: 0;
    overflow: hidden;
  }

  /*all cards*/
  div.card:not(.timely-links):not(.calendar) > div:last-child {
    background-color: transparent;
    position: relative;
    display: none;
    height: auto;
    width: calc(200% + 1em);
    border-radius: 4px;
    border: 1px solid var(--Secondary-Color-Medium-Violet-1, #702b9d);
    background: #fff;
    padding: 18px 20px;
  }

  /*even cards*/
  div.card.resources > div:last-child.wp-block-group,
  div.card.academics > div:last-child.wp-block-group,
  div.card.communities > div:last-child.wp-block-group {
    left: calc(-100% - 1em);
  }

  /*odd cards*/
  div.card.facilities > div:last-child.wp-block-group,
  div.card.career > div:last-child.wp-block-group,
  div.card.events > div:last-child.wp-block-group {
  }

  div.timely-links.collapsed,
  div.calendar.collapsed {
    height: 40px;
  }

  div.collapse-btn a {
    all: unset;
    display: block;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgOUwxMiAxNUwxOCA5IiBzdHJva2U9IiMxMDE4MjgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
    width: 20px;
    height: 20px;
    background-position: center;
  }

  div.collapse-btn a:focus,
  div.collapse-btn a:hover {
    background-color: transparent;
  }

  div.collapse-btn a:hover {
    cursor: pointer;
  }

  div.card:not(.collapsed) div.collapse-btn a,
  div.categories-group:not(.collapsed) div.collapse-btn a {
    transform: rotateX(180deg);
  }
}

@media screen and (max-width: 900px) {
  div.search-container {
    padding: 4em 5em;
  }

  div.card:not(.timely-links):not(.calendar) h4 {
    font-size: 16px;
  }

  div.content {
    width: 90%;
  }
}

@media screen and (max-width: 550px) {
  div.search-container {
    padding: 3em 2em;
  }

  div.search-container h3 {
    font-weight: 700;
    font-size: 32px;
    text-align: left;
    margin: 1em;
  }

  div.search-container form {
    margin: 2em;
  }

  div.card:not(.timely-links):not(.calendar) h4 {
    font-size: 14px;
  }
}

.wp-block-details summary {
    font-weight: bold;
    margin-left: -1em;
    text-decoration: underline;
}