/*
 Theme Name:   Pink Gallica 2023
 Theme URI:    https://pinkgallica.com
 Description:  Custom Theme
 Author:       Mishi
 Author URI:   https://pinkgallica.com
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         two-columns, right-sidebar, responsive-layout
 Text Domain:  pinkgallica2023
*/
/* SETUP */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
:root {
    --bg-color: rgb(236, 235, 236);
    --font-color: #391027;
    --link-color: rgb(45, 159, 208);
    --link-hover-color: rgb(5, 87, 122);
    --nav-color: rgb(250, 12, 171);
    --tag-color: rgb(45, 159, 208);
    --em-color: #c03131;
    --em-bg-color: #faf6f6;
    --kbd-color: white;
    --blockquote-bg-color: #ffeaef;
    --alt-blockquote-bg-color: #626a74;
    --alt-kbd-bg-color: rgb(51, 51, 51);
    --alt-em-color: white;
    --alt-em-bg-color: rgb(92, 92, 92);
    --alt-bg-color: #393939;
    --alt-font-color: #ededed;
    --alt-nav-color: white;
  }
html, body {
    height: 100%;
}
body {
    background: #d9a7c7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fffcdc, #d9a7c7);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fffcdc, #d9a7c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-font-smoothing: antialiased;
    color: var(--font-color);
    font-family: 'Abel', sans-serif;
    font-size: 1.2rem;
    line-height: 1.4;
}
/* IMAGES */
img, picture, video, canvas, svg {
    max-width: 100%;
}

.aligncenter>figcaption {
	text-align: center;
}

.responsive {
    max-width: 100%;
    height: auto;
}
.featured-media {
    width: 100%;
    border-radius: .2rem;
}

/* YouTube */
	.youtube-video {
	  aspect-ratio: 16 / 9;
	  width: 100%;
}

/* FONT */
em {
    color: var(--em-color);
    background-color: var(--em-bg-color);
    border-radius: .2rem;
}
kbd {
    background-color: rgb(255, 255, 255);
    border: 1px solid #d3d3d3;
    padding: 0 .2rem;
    border-radius: .25rem;
    font-size: large;
}
blockquote {
    margin: 0 2rem;
    border-left: 2px solid rgb(82, 82, 82);
    padding: 1rem;
    background-color: var(--blockquote-bg-color);
}
.comments-link {
    font-size: larger;
    font-weight: bold;
}
aside h1 {
    margin-top: .25rem;
}
.small-text {
    font-size: 1rem;
    margin-top: 0;
}
::selection {
    color: black;
    background: rgb(241, 245, 118);
}
/* LINKS */
a:link, a:active, a:visited {
    color: var(--link-color);
}
a:hover {
    color: var(--link-hover-color);
}
.tagged a:link, .tagged a:active, .tagged a:visited {
    color: rgb(255, 255, 255);
    text-decoration-line: none;
    background-color: var(--tag-color);
    border-radius: .2rem;
    padding: 0 .25rem;
    text-decoration-thickness: 2px;
}
.tagged a:hover {
    background-color: rgb(77, 75, 86);
    border-radius: .2rem;
}
/* SEARCH */
.search-field {
    border-radius: .5rem;
    border: 1px solid black;
    width: 135px;
	margin-right: -.25rem;
}
.search-submit {
    background: none;
    border: none;
    border-radius: .5rem;
}

.wp-element-button {
    background: none;
    border-radius: .5rem;
}
.wp-block-search__input {
    border-radius: .5rem;
}
/* THEME */
#toggle-btn {
    font-size: larger;
    background: none;
    border: none;
}
.alt-toggle {
    background: none;
    border: none;
}
  .alt-toggle {
    background: none;
    border: none;
}
.alt-mode {
    background: #304352;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #d7d2cc, #304352);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #d7d2cc, #304352); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
    color: var(--alt-font-color);
}
.alt-mode .pretty-wrapper {
    background: var(--alt-bg-color);
    color: white;
    border: 1px solid #333333;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.alt-mode ul.main-nav li a:link, .alt-mode ul.main-nav li a:active, .alt-mode ul.main-nav li a:visited {
    color: var(--alt-font-color);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
}
.alt-mode ::selection {
    color: black;
    background: rgb(213, 206, 77);
}
.alt-mode em {
color: var(--alt-em-color);
background-color: var(--alt-em-bg-color);
}
.alt-mode kbd {
    color: var(--alt-kbd-color);
    background-color: var(--alt-kbd-bg-color); 
}
.alt-mode blockquote {
    color: var(--alt-blockquote-color);
    background-color: var(--alt-blockquote-bg-color);
    
}
/* NAV */
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  
}
nav {
    border-bottom: 2px dashed #eee;
}
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 1.25rem 0;
    gap: 1rem;
}
.hamburger { /*hide the burger button on big screens*/
    display: none;
}

ul.main-nav li a:link, ul.main-nav li a:active, ul.main-nav li a:visited {
    color: var(--nav-color);
    text-decoration-line: underline;
    font-weight: bold;
    text-decoration-thickness: 2px;
}
ul.main-nav li a:hover {
    color:var(--tag-color);
}
.nav-logo {
    flex-grow: 1;
    font-size: xx-large;
    font-family: 'PT Sans Narrow', sans-serif;
}
.main-nav input[type=text] {
    padding: .2rem;
    border-radius: 1rem;
    width: 150px;
  }
.main-nav .search-container button {
    padding: 6px;
    background: none;
    font-size: 17px;
    border: none;
    cursor: pointer;
  }
/* PAGINATION */
.pagination {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}
ul.pagination li {
    list-style: none;
}
/* GRID */
main {
    grid-area: main;
}
section {
    grid-area: section;
}
aside {
    grid-area: aside;
    }
    
.grid-padding {
    padding: 0 1rem;
}
    
.grid { /* Mobile First */
    display: grid;
    gap: 2rem;
    margin-top: 1.5rem;
    grid-template-areas:
        "main"
        "section"
        "aside";
}
.grid li {
    list-style-type: "🧁";
}
    
.grid-single { /* Page / Single */
    display: grid;
    margin-top: 1.5rem;
    grid-template-areas:
        "section";
}
/* OLD POSTS */
.oldposts-info p {
    margin: 0;
    font-size: small;
}
.oldposts-item {
    width: 31.5%;
    padding: 5px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: .25rem;
    position: relative;
    border-radius: .5rem;
}
.oldposts-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.oldposts-item h2 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
    .oldposts-item {
        width: 46.5%;
    }
    }  
    @media only screen and (max-width : 768px) {
    .oldposts-item {
        width: 46%;
    }
    }    
    @media only screen and (max-width : 480px) {  
    .oldposts-item {
        width: 100%;
    }
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: 'PT Sans Narrow', sans-serif;
        margin-bottom: .5rem;
    }
    p {
        margin: 1rem 0;
    }
    .main-wrapper {
        max-width: 1040px;
        margin: 0 auto;
        padding: 1rem;
    }
.pretty-wrapper {
    margin-top: 1.5rem;
    border: 1px solid #cecece;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: .5rem;
    background: white;
    padding: 1rem;
}
/* RESPONSIVE IMG */

.theme-switch-wrapper {
    display: flex;
    align-items: center;
  }
  .theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
  }
  .theme-switch input {
    display: none;
  }
  .slider {
    background-color: #ccc;
    bottom: 0;
    cursor: default;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.5s;
    border-radius: 34px;
  }
  .slider:before { /* the actual ball */
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: 0.5s;
    width: 26px;
    border-radius: 50%;
  }
  input:checked + .slider {
    background-color: #ffd17c;
  }
  input:checked + .slider:before { /* move ball to right */
    transform: translateX(26px);
  }
  .feather-moon {
    opacity: 0;
    left: 9px;
    bottom: 9px;
    transform: translateX(4px);
  }
  /* FOOTER */
.footer {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}
  @media screen and (min-width:769px){ 
    .grid {
        margin-top: 0;
        grid-template-columns: 3fr 1fr;
        grid-template-areas:
        "nav nav"
        "main aside"
        "section aside"
        "footer footer";
    }
}
@media screen and (min-width: 769px) { /*show the links on big screen*/
    .nav-links {
      display: flex !important;
      gap: 1rem;
    }
  }
@media screen and (max-width: 768px) {
    .hamburger {
        display: block;
        background: none;
        border: none;
        font-size: larger;
        color: #545454;
    } 
    .appearinmobile { /*styling of the hidden links*/
        display: block;
        text-align: right;
        margin-top: 1rem;
        line-height: 2.5rem;
    }
    .main-nav { /*main nav wrapper*/
        display: block;
    }
    .main-nav2 { /*lines up logo text and burger*/
        display: flex;
        align-items: center;
    }
    .nav-links { /*the hidden parts, display none by default*/
        display: none;
    }
  }