/**
Theme Name: Twenty Twenty-One Child (Project Areya)
Author: Patrick Phutthavong
Author URI: http://patfp.com
Description: Twenty Twenty-One child theme for the Project Areya website
Version: 1.0
Text Domain: twentytwentyone-child
Template: twentytwentyone
*/

/*
* MAIN COLOUR SCHEME:
* Black Background
* White Text
* Accent v1 Colour: Gray #333333
* Accent v2 Colour: Gold #c5802a Leave it universal across all projects.
*
* FONTS:
* "Tinos" via Google Fonts
* "Work Sans" via Google Fonts
*/

body {
    /** BEGIN CSS VARIABLES **/
    --colour--universal-bg: black;
    --colour--universal-text: white;
    --colour--universal-accent-v1: #333333;
	--colour--universal-accent-v2: #c5802a;
    --colour--universal-links: white;
    --colour--universal-links-hover: var(--colour--universal-accent-v2);
    --colour--mobile-menu-bg: black;
    --colour--mobile-menu-text: white;
    --footer--color-link: var(--colour--universal-links);
    /** END CSS VARIABLES **/
	background-color: var(--colour--universal-bg) !important;
    color: var(--colour--universal-text) !important;
}

/* LINKS: Overall */
/**
* https://web.archive.org/web/20220421152647/https://highonmeta.com/change-the-on-click-color-of-links-in-wordpress-twenty-twenty-one-theme/
*
* By default, links in WordPress Twenty Twenty One theme have a background color that’s displayed when they are clicked.
* The following CSS code hides that feature.
*/
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	color: var(--wp--style--color--link, var(--global--color-black));
    background-color: transparent !important;
}
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	color: var(--wp--style--color--link, var(--global--color-white));
    background-color: transparent !important;
}


.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
	text-decoration: underline;
	text-decoration-style: solid !important;
}

a:link      {color: var(--colour--universal-links); text-decoration: underline;}
a:visited   {color: var(--colour--universal-links); text-decoration: underline;}
a:active    {color: var(--colour--universal-links); text-decoration: underline;}
a:hover     {color: var(--colour--universal-links-hover); text-decoration: underline !important;}
/* LINKS: Main content Area of every page */
.content-area a:link      {color: var(--colour--universal-links); text-decoration: underline;}
.content-area a:visited   {color: var(--colour--universal-links); text-decoration: underline;}
.content-area a:active    {color: var(--colour--universal-links); text-decoration: underline;}
.content-area a:hover     {color: var(--colour--universal-links-hover); text-decoration: underline !important;}
/* Desktop Top-right Menu AND Mobile Hamburger Menu */
.primary-navigation .primary-menu-container > ul > .menu-item > a {
    font-family: 'Tinos', serif;
    font-size: 24px;
    letter-spacing: 2.0pt;
    text-transform: uppercase;
}
.primary-menu-container a:link      {color: var(--colour--universal-links); text-decoration: underline;}
.primary-menu-container a:visited   {color: var(--colour--universal-links); text-decoration: underline;}
.primary-menu-container a:active    {color: var(--colour--universal-links); text-decoration: underline;}
.primary-menu-container a:hover     {color: var(--colour--universal-links-hover); text-decoration: underline !important;}
/* Remove dotted outline from Hamburger menu button and close button */
.site .button:focus,
button:focus,
input[type=submit]:focus,
input[type=reset]:focus,
.wp-block-search .wp-block-search__button:focus,
.wp-block-button .wp-block-button__link:focus,
.wp-block-file a.wp-block-file__button:focus {
	outline-offset: 0;
	outline: none;
}
/* Mainly to scale these SVGs: Hamburger Menu Icon and Close X */
.svg-icon-transform {
    transform: scale(1.5);
}
/* MOBILE HAMBURGER MENU */
/* Has to be padding-bottom to overwrite the default value set by the theme. 
This is the spacing underneat the final menu item. */
.primary-navigation > div > .menu-wrapper {
    padding-bottom: 50px;
}
.mobile-menu-underneath {
    /*background-color: violet;*/
}
.primary-navigation-open .menu-button-container {
    background-color: var(--colour--mobile-menu-bg);
}
.primary-navigation-open .primary-navigation > .primary-menu-container {
    background-color: var(--colour--mobile-menu-bg);
}
.menu-button-container #primary-mobile-menu {
    color: var(--colour--mobile-menu-text);
}

/* LINKS: Blog Pagination */
.pagination .nav-links > a:link     {color: var(--colour--universal-links); text-decoration: underline;}
.pagination .nav-links > a:visited  {color: var(--colour--universal-links); text-decoration: underline;}
.pagination .nav-links > a:active   {color: var(--colour--universal-links); text-decoration: underline;}
.pagination .nav-links > a:hover    {color: var(--colour--universal-links-hover); text-decoration: underline !important;}

/* h tag CSS */
h1, h1.entry-title, h1 a, h2, h2.entry-title, h2 a, h3, h4, h5 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
	margin-top: 30px !important;
	margin-bottom: 30px !important;
}
h1.site-title {
    color: var(--colour--universal-text);
}
.singular .entry-title, .page-title {
    font-size: 48px !important;
}
.headertagline {
    color: var(--colour--universal-accent-v2);
	font-family: 'Tinos', serif;
    letter-spacing: 1.8pt;
    text-transform: uppercase;
	font-style: italic;
}
hr {
    height: 3px;
    background-color: var(--colour--universal-accent-v2);
    border: none;
}
p {
	margin-top: 20px !important;
    margin-bottom: 20px !important;
}
/* CSS for all tags */
.left-vertical-line-v1 {
    padding-left: 40px;
    border-left: 5px solid var(--colour--universal-text);
}
.left-vertical-line-v2 {
    padding-left: 40px;
    border-left: 10px solid var(--colour--universal-accent-v2);
	font-weight: bold;
	font-style: italic;
	font-size: 0.8em;
}
.quotation-mark {
	color: var(--colour--universal-accent-v2);
	font-weight: bold;
}
.photo-float {
    text-align: center;
}
.photo-float-left, .photo-float-right {
	float: none;
	clear: both;
	margin-bottom: 40px;
}
.photo-description {
    font-size: 0.7em;
    font-weight: bold;
    margin-top: 30px;
    letter-spacing: 2px;
}
.photo-credit {
    margin-top: 30px;
    font-weight: bold;
    font-style: italic;
    font-size: 0.7em;
    letter-spacing: 2px;
}
.note-box {
    color: var(--colour--universal-bg);
    background-color: var(--colour--universal-text);
    padding: 10px 40px;
    margin: 50px 0px;
    letter-spacing: 1pt;
    border-left: 10px solid var(--colour--universal-accent-v2);
}
.note-box-title {
    color: var(--colour--universal-accent-v2);
    font-family: 'Tinos', serif;
    letter-spacing: 1.8pt;
    text-transform: uppercase;
    font-style: italic;
}
.note-box > ul {
    margin: 0px 10px;
    padding-left: 0px !important;
}

/* This is to increase the width of content area so it's not one thin rectangle
https://medium.com/@bharatkaravadra/how-to-customise-the-content-width-of-the-twenty-twenty-theme-491ce61c8061
*/
.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width {
    max-width: 22rem !important;
}
/* Increase width for blog dates and "Read more" links in /blog */
.blog-post-fulldate {
    max-width: 22rem !important;
}
.blog-page-readmore-link {
    max-width: 22rem !important;
}

.entry-content, .nav-next-text, .nav-prev-text {
    font-size: 14pt !important;
    letter-spacing: 3pt;
}

/* Customizing blog posts */
.blog-post-fulldate, .blog-page-readmore-link {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    font-size: 30px;
}
.blog-post-month {
    text-transform: uppercase;
}
.blog-post-day {
    color: var(--colour--universal-accent-v2);
}
.blog-page-readmore-link {
    text-transform: uppercase;
    font-size: 20px;
}

/** SITE HEADER RELATED **/
.desktop-header-main-logo {
    display: none;
    margin: auto;
    width: 450px;
    padding: 40px;
}
/* To reduce vertical spacing on the top and bottom of nav menu. */
.site-header {
    padding-top: 0;
    padding-bottom: 0;
}
.site-title a:link, .site-title a:visited, .site-title a:active {
    color: var(--colour--universal-text);
}
.page-header {
    /** Horizontal line under h1 and above content **/
    border-bottom: 3px solid var(--colour--universal-accent-v1);
}

/** MAIN CONTENT AREA RELATED **/
.site-main > article > .entry-footer {
    /** Meta info for each blog post **/
    color: var(--colour--universal-text);
}

/** SITE FOOTER RELATED **/
.site-footer > .site-info .privacy-policy, .site-footer > .site-info .powered-by {
    color: var(--colour--universal-text);
}
.site-footer > .site-info {
    border-top: 3px solid var(--colour--universal-accent-v1);
    color: var(--colour--universal-text);
}
.no-widgets .site-footer {
    margin-top: 0px !important;
}
footer > div.col-full {
    /*background-color: blueviolet;*/   
}
.mobile-footer {
	text-align: center;
}
.mobile-footer-content-project-areya-logo,
.mobile-footer-content-copyright,
.mobile-footer-social-media,
.mobile-footer-content-project-areya-vertical-shape
{
	margin-bottom: 20px;
}
.desktop-footer {
	display: none !important;
}
.desktop-footer-content-project-areya-logo,
.desktop-footer-content-copyright,
.desktop-footer-content-scribble-dot
{
	margin-bottom: 15px;
	text-align: right;
}
.desktop-footer-menu-item,
.desktop-footer-social-media {
    margin-bottom: 15px;
}
.desktop-footer-social-media {
    margin-top: 30px;
}
.desktop-footer-content-navmenu {
    font-family: 'Tinos', serif;
    font-size: 24px;
    letter-spacing: 2.0pt;
    text-transform: uppercase;
}
.mobile-footer-content-copyright, .desktop-footer-content-copyright {
    font-size: 12pt !important;
    letter-spacing: 3pt;
}

/** STYLES FOR A SINGLE BLOG POST **/
.singular .entry-title {
    color: var(--colour--universal-text);
}
.singular .entry-header {
    border-bottom: 3px solid var(--colour--universal-accent-v1);
    padding-bottom: calc(2 * var(--global--spacing-vertical));
    margin-bottom: calc(3 * var(--global--spacing-vertical));
}
nav.navigation.post-navigation {
    display: none;
}
/** STYLES FOR /blog and SINGLE BLOG POST **/
.pagination .nav-links > *.prev, .comments-pagination .nav-links > *.prev {
    color: var(--colour--universal-links);
}
.pagination .nav-links > *.next, .comments-pagination .nav-links > *.next {
    color: var(--colour--universal-links);
}
.pagination .nav-links > *, .comments-pagination .nav-links > * {
    color: var(--colour--universal-links);
}
.pagination .nav-links > *.current, .comments-pagination .nav-links > *.current {
    text-decoration: none;
    color: var(--colour--universal-accent-v2);
}
/* This is for the pagnation text so that it sort of stacks on mobile. */
.pagination .nav-links, .comments-pagination .nav-links {
    display: flow-root;
    text-align: center;
}
/* This is for the pagnation container. */
.pagination, .comments-pagination {
    border-top: 3px solid var(--colour--universal-accent-v1);
    padding-top: var(--global--spacing-vertical);
    margin: var(--global--spacing-vertical) auto;
}

/*==================================================
=            Bootstrap 5 Media Queries             =
==================================================*/

/**
* https://getbootstrap.com/docs/5.0/layout/breakpoints/
*
* Piggybacking off Bootstrap 5 breakpoints for responsive design.
*
* Styling for Mobile Devices first and then outwards towards desktop computers.
*
* Using Bootstrap v5.3.0-alpha1 via the plugin enqueue.
*
*/

/*==========  Mobile First Method  ==========*/

/* Mobile Menu Hamburger menu dissapears at 482px. */
@media (min-width: 482px) {
    .mobile-menu-underneath {
        display: none;
    }
    .mobile-header-main-logo {
        display: none;
    }
    .desktop-header-main-logo {
        display: block;
    }
    .primary-navigation {
        margin: auto;
    }
    /* This is to increase the width of content area so it's not one thin rectangle
    https://medium.com/@bharatkaravadra/how-to-customise-the-content-width-of-the-twenty-twenty-theme-491ce61c8061
    */
    .post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width {
        max-width: 24rem !important;
    }
    /* Increase width for blog dates and "Read more" links in /blog */
    .blog-post-fulldate {
        max-width: 24rem !important;
    }
    .blog-page-readmore-link {
        max-width: 24rem !important;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	body {
        background-color: red !important;
        background-color: black !important;
    }
	/* This stays at the bottom for cascading purposes.
	This is for the pagnation text so that the the text content hugs the margins. */
	.pagination .nav-links, .comments-pagination .nav-links {
		display: contents !important;
	}
    /* This is to increase the width of content area so it's not one thin rectangle
    https://medium.com/@bharatkaravadra/how-to-customise-the-content-width-of-the-twenty-twenty-theme-491ce61c8061
    */
    .post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width {
        max-width: 30rem !important;
    }
    /* Increase width for blog dates and "Read more" links in /blog */
    .blog-post-fulldate {
        max-width: 30rem !important;
    }
    .blog-page-readmore-link {
        max-width: 30rem !important;
    }
	/** SITE FOOTER RELATED **/
	.desktop-footer {
		display: none !important;
	}
}

/* Medium devices (tablets, 768px and up) */
/* NOTE: And width above this, Storefront considers the theme in DESKTOP view/mode. */
@media (min-width: 768px) {
    body {
        background-color: pink !important;
        background-color: black !important;

    }
    
    /* MAIN CONTENT AREA */
    .content-area {
        width: 100% !important;
    }
    /* This is to increase the width of content area so it's not one thin rectangle
    https://medium.com/@bharatkaravadra/how-to-customise-the-content-width-of-the-twenty-twenty-theme-491ce61c8061
    */
    .post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width {
        max-width: 42rem !important;
    }
    /* Increase width for blog dates and "Read more" links in /blog */
    .blog-post-fulldate {
        max-width: 42rem !important;
    }
    .blog-page-readmore-link {
        max-width: 42rem !important;
    }
	/* CSS for all tags */
    .photo-float {
        text-align: inherit;
    }
	.photo-float-left {
		width: 300px;
    	float: left;
    	margin: 20px 40px 40px 0px;
	}
	.photo-float-right {
		width: 300px;
    	float: right;
    	margin: 20px 0px 40px 40px;
	}
    .photo-description {
        text-align: left;
    }
    .photo-credit {
        margin-top: 30px;
        padding-left: 20px;
        border-left: 10px solid var(--colour--universal-accent-v2);
        text-align: left;
    }

	/** SITE FOOTER RELATED **/
	.mobile-footer {
		display: none !important;
	}
	.desktop-footer {
		display: block !important;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        background-color: green !important;
        background-color: black !important;

    }
    .entry-content {
        font-size: 18pt !important;
        letter-spacing: 3pt;
    }
    /* This is to increase the width of content area so it's not one thin rectangle
    https://medium.com/@bharatkaravadra/how-to-customise-the-content-width-of-the-twenty-twenty-theme-491ce61c8061
    */
    .post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width {
        max-width: 48rem !important;
    }
    /* Increase width for blog dates and "Read more" links in /blog */
    .blog-post-fulldate {
        max-width: 48rem !important;
    }
    .blog-page-readmore-link {
        max-width: 48rem !important;
    }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        background-color: aqua !important;
        background-color: black !important;

    }
    /* This is to increase the width of content area so it's not one thin rectangle
    https://medium.com/@bharatkaravadra/how-to-customise-the-content-width-of-the-twenty-twenty-theme-491ce61c8061
    */
    .post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width {
        max-width: 62rem !important;
    }
    /* Increase width for blog dates and "Read more" links in /blog */
    .blog-post-fulldate {
        max-width: 62rem !important;
    }
    .blog-page-readmore-link {
        max-width: 62rem !important;
    }
	/* CSS for all tags */
	.photo-float-left {
		width: auto;
    	float: left;
    	margin: 30px 70px 70px 0px;
	}
	.photo-float-right {
		width: auto;
    	float: right;
    	margin: 30px 0px 70px 70px;
	}
    
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    body {
        background-color: var(--colour--universal-bg) !important;
    }
}

/*==================================================
=          END Bootstrap 5 Media Queries           =
==================================================*/