/*
Theme Name: Amigatalk
Theme URI: https://amigatalk.com
Author: Alejandra Barahona
Author URI: https://barahona.co.uk
Description:This theme is created for my major project in web design, the design is minimalistic based on the branding of the amiga talk project.
Requires at least: 5.6
Tested up to: 5.9
Requires PHP: 8.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: amigatalk
Tags: one-column, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/
/*—————————————————————————————————————————————————————————————————*/

/* ———————————————————————————— CSS PART ONE (CSS FONT, COLOURS AND CSS RESET) ***********************


/*—————————————————————————————————————————————————————————————————*/

/* ———————————————————————————— COLOURS ***********************
#000					text colour
#333					headers

*********************** END template notes ———————————————————————————— */

/*-—————————————————————————————————————————————————————————————————*/
 /* DESIGN NOTES	
 
 fontfamily	 'Noto Sans', Calibri, Helvetica, sans-serif;
 
 FAF4E2		LIGHT DUN	    = Background
 AE93A0		DUST PINK	    = Decoration Nav Menu
 876327		WOODEN BROWN	= Decoration Footer
 A69A6E	    LIGHT GREEN		= Decoration Footer
 182207		DARK GREEN		= Body text

 /* Most of the comments are my annotations to help me not forget the new things I have learned and their meaning.
 ---------------------------------------------------*/
 /* RESETS based on
 http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
---------------------------------------------------*/
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
	 margin: 0;
	 padding: 0;
	 border: 0;
	 vertical-align: baseline;
	 font: inherit;	
	 text-rendering: optimizeLegibility;			
 }
 
 /* HTML5 reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
	 display: block;
 }
 
 * {
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
 }
 /*—————————————————————————————————————————————————————————————————*/
/* ———————————————————————————— CSS PART TWO (THEME SPECIFIC CSS) ***********************
/*—————————————————————————————————————————————————————————————————*/
/* ---------------------------------------------------
GENERAL STYLING RULES IN ALL THE PAGES NAVIGATION IS THE SAME--------------------------------------------------- */

/* assigning colours by name (easy to remember)*/
:root{
    /* Measurements */
    --amigatalk-big-padding: 60px 0;
    --amigatalk-mobile-padding: 20px 0;
    --amigatalk-light-padding: 0 25px;
    /* Colours */
    --amigatalk-dun: #FAF4E2;
    --amigatalk-pink1: #AE4865;
    --amigatalk-pink2: #845E73;
    --amigatalk-green1: #A69A6E;
    --amigatalk-green2: #182207;
    --amigatalk-wooden: #876327;
  
}
/* Change the default behaviour, setting the size of the content box*/
*,
::after,
::before {
    box-sizing: border-box;
}
/* Backup fonts and font shorthand*/

body{
    font-family: 'Noto Sans', Calibri, Helvetica, sans-serif;
   font-size: 1rem;
}
/* ---------------------------------------------------
TEXT, LINKS, IMG AND MAIN CONTAINER
--------------------------------------------------- */
/* For accesibility porpouse, I will start using rem for the font sizes*/
h1{
    font-size: 4rem;
    line-height: 3rem;
    margin: 10px;
}
h2{
    font-size: 3rem;
    line-height: 4.0rem;
    font-weight: bold;
  
}
h3{
    font-size: 2.5rem;
    line-height: 3rem;
    
   }

p{
    font-size: 1.3rem;
    line-height: 2.5rem;
}
 /*The var() CSS for insert the value of a custom property*/
a{
    color: var(--amigatalk-pink1);
    text-decoration: none;
}
a:hover,
a:visited{
    color: var(--amigatalk-pink2);
    text-align: left;
}
img {
    max-width: 100%;
    height: auto;
}
/*Flexbox to keep everthing in the middle*/
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    
}


@media (max-width: 575px) {
    .container {
        padding: var(--amigatalk-light-padding);
    }
}
@media (min-width: 576px) {
    .container {
        max-width: 540px;
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
@media (max-width: 768px) {
    .searchbox {
        display: none;
    }
    .top-area .container{
        justify-content: center;
    }
}
/* ---------------------------------------------------HOME PAGE---------------------------*/
/* Top Bar Section */
.top-area{ 
    background: #FAF4E2; 
    color: #000000; 
    padding: 50px 0; 
}
/* This ensure that everthing laid out correctly */
.top-area .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Search box in the header */
.searchbox input[type="text"]{
    padding: 10px 10px;
    border: 2px solid #C6C6C6;
}
.searchbox input[type="submit"]{
    padding: 9px 10px;
    background: #000000;
    color: #FFFFFF;
    border: none;
}
@media (max-width: 768px) {
    .searchbox {
        display: none;
    }
    .top-area .container{
        justify-content: center;
    }
}

/* ---------------------------------------------------MAIN MENU---------------------------*/
.menu-area {
	background: var( --amigatalk-green2 );
    padding: 5px 0px ;
}
/* This ensure that everthing laid out correctly */
.main-menu {
    height: 55px;
    display: flex;
    justify-content: center;
}
.main-menu ul {
    margin: 0px;
    padding-left: 0;
}
.main-menu ul li {
    display: inline-block;
    line-height: 55px;
    position: relative;
}

.main-menu ul li a {
    color: #FFFFFF;
    padding: 0 40px;
    text-decoration: none;
    display: block;
    font-size: 1.2rem;
    
}
/* sub-menu --*/
.main-menu ul li a:hover,
.main-menu ul li a:active
{
    color: var( --amigatalk-wooden );
    transition: .8s all;
}
.main-menu ul li a:focus + ul
{
    display: block;
}

.main-menu li.menu-item-has-children::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc( 50% - 6px);
    width: 0px;
    height: 0px;
    border-top: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
}
.main-menu ul.sub-menu {
    position: absolute;
    padding-left:0;
    background: var( --amigatalk-green2 );
    z-index: 1;
    text-align: left;
    display: none;
}
/* to make the sub-menu work properly--*/
.main-menu ul .menu-item-has-children:hover>ul,
.main-menu ul .menu-item-has-children:focus+ul {
    display: block
}
.main-menu ul.sub-menu li {
    width: max-content;
}
.main-menu ul.sub-menu a {
    color: #FFFFFF;
}
/* main-menu button */
.menu-icon,
.check-button {
	cursor: pointer;
	display: none;
}
.menu-icon .bar1, 
.menu-icon .bar2, 
.menu-icon .bar3 {
    width: 28px;
    height: 3px;
    background-color: #FFFFFF;
    margin: 7px 0;
    transition: 0.4s;
}
.menu-icon .bar4 p{
     margin: -50px 30px 0px 20px;
     padding: 20px;
     color: #FFFFFF;
     font-size: 20px;
    
}
/*Mobile-phone-menu small devices*/
@media (max-width: 767px){
    .menu-icon,
    .check-button {
		display: block;
	}

    .check-button{
        border: none;
        background: transparent;
        height: 30px;
    }

    /*  Menu items for the mobile-version */
     
	.main-menu ul{
		position: absolute;
		width: 100%;
        background: var( --amigatalk-dun );
		left: -999px;
		text-align: left;
		transition: all cubic-bezier(.79,.14,.15,.86) .5s;
        padding: 0;
        margin: 0;
        z-index: 1;
	}
    /* Sub-menu style */
    .main-menu ul:not(.sub-menu){
        margin-top: 52px;
    }
	.main-menu ul li{
		display: block;
		margin: 15px 0;
		line-height: 30px;
	}
	.main-menu ul li a {
        color: var( --amigatalk-green2 );
        font-weight: bold;
	}
    .main-menu ul.sub-menu{
        position: relative;
        top: 0;
        margin-left: 30px;
        display: block;
        width: auto;
    }
    .main-menu ul.sub-menu a{
        color: var( --amigatalk-pink2 );
        font-weight: lighter;
    } 
    .main-menu ul.sub-menu{
       background: var( --amigatalk-dun );
       
    }
    /* Javascript to make the menu interactive */
    .show-dropdown{
        left: 0 !important;
    } 
    .animate-button .bar1 {
        -webkit-transform: rotate(-45deg) translate(-4px, 4px);
        transform: rotate(-45deg) translate(-4px, 4px);
    }
    .animate-button .bar2 {opacity: 0;}
    .animate-button .bar3 {
        -webkit-transform: rotate(45deg) translate(-7px, -7px);
        transform: rotate(45deg) translate(-7px, -7px);
    }  
}  

/* ---------------------------------END OF MAIN MENU---------------------------*/
/* ---------------------------------FOOTER ---------------------------*/
.site-footer .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-footer {
	background: var( --amigatalk-green2 );
   
 
}
.site-footer .copyright {
    margin:10px;
    color: #FFFFFF;
    font-size: 1.1rem;
    text-decoration: none;
}


/* Footer - Footer Menu */

.footer-menu ul{ 
    list-style: none; 
    padding: 10px; 
    margin: 0; 
}
.footer-menu ul li{ 
    display: inline;  
    margin: 0 25px 0 0;
}
.footer-menu ul li:last-child{ 
    margin: 0; 
}
.footer-menu ul li a{  
    text-decoration: none;
    color: #FFFFFF;
    
}
.copyright a{
    color: #FFFFFF;
}


.site-footer .copyright p{
    margin: 0;
}


/* Footer Menu Media Queries */
@media (max-width: 768px) {
    .site-footer .container{
        justify-content: safe;
    }
    .site-footer .copyright{
        display: none;
    }
}

@media (max-width: 575px) {
    .site-footer .container{
        flex-wrap: wrap;
    } 
}



/* ---------------------------------END OF FOOTER ---------------------------*/


/* ---------------------------------404 ERROR PAGE---------------------------*/
/* SEARCH FORM  - 404 */
.searchform input[type="text"]{
    padding: 7px 10px;
    border: 1px solid #C6C6C6;
    font-weight: bold;
}
.searchform input[type="submit"]{
    padding: 10px 10px;
    background: var(--amigatalk-pink1);
    color: #FFFFFF;
    border: none;
}
.searchform div{
    display: flex;
    margin-bottom: 50px;
}

.searchform input[type=text]{
    max-width: 70%;
}
.searchform input[type=submit]{
    max-width: 70%;
}

@media (max-width: 991px) {
    .blog .container,
    .archive .container{
        flex-wrap: wrap;
    }
}

.error{
    padding: var( --amigatalk-light-padding);
    justify-content: center;
    margin: 20px ;
}
.error h1, p{
   
    text-align: left;
    margin-bottom: 40px;
    margin-top: 30px;
    
}

/* ---------------------------------404 END OF ERROR PAGE---------------------------*/
/* ----------------------------HERO/ MAIN PAGE ---------------------------*/
/* Hero */
.hero{
    background-size: cover;
    background-position: center center;
    text-align: center;
}
.hero-items{
    padding: var( --amigatalk-light-padding);
    width: 85%;
    
}
.hero .overlay{
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero .intro h1{
    margin-bottom: 30px;
    font-weight: bold;
    color: var( --amigatalk-green2);
    width: 90%;
   
   
}
.hero .intro p{
   color: var( --amigatalk-green2);
   margin-bottom: 30px;
   text-align: left;
   width: 90%;
  
   
}

.hero .hero-items a{
    color: var( --amigatalk-green2);
    padding: 5px 15px;
    display: inline-table;
    background: var( --amigatalk-green1 );
    margin: 10px 0 0;
}
.hero .hero-items a:hover{
    background: var( --amigatalk-pink1 );
    transition: .5s all;
}

/* ------------------------CARDS AREA/ EMOTION PAGE AND ABOUT PAGE ---------------------------*/
.cards{ 
    background: var( --amigatalk-dun ); 
    padding: var( --amigatalk-big-padding); 
    color: var( --amigatalk-green2); 
    
}
.cards .container{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.cards .container > * {
    flex: 1 1 300px;
}
.card-item{
    padding: var(--amigatalk-light-padding);
}

.card-item figure img{ 
    background: var( --amigatalk-green1 );
    padding: 8px; 
}

.cards h4, h2, h1{ 
    text-align: center;
    position: relative;  
    line-height: 4.5rem;
}
.cards h1{
    padding: 30px;
 }
.cards h2{
    font-size: 2rem;
    padding: 20px;
    color: var(--amigatalk-wooden);
    text-align: center;
   
 }
 .cards a{

    text-decoration: underline;
    font-weight: bold;
  
   
 }

.cards h2::after{
    content: '';
    position: absolute;
    background-color: var( --amigatalk-green2 );
    width: 35px;
    height: 5px;
    right: calc( 50% - 15px);
    bottom: 0;
}
.cards p{
padding-left: 250px;
padding-right: 250px;
margin: 30px;
}
 .cards a{
    color: var( --amigatalk-pink1); 
}
.cards h4{
    color: red;
    font-size: 2rem;
    padding: 20px;
    font-weight: bold;
}
/* Cards Template Media queries*/
@media (max-width: 768px) {
    .cards .container{
        flex-direction: column;
        padding: 0;
    }
    .card-item{
        max-width: 90%;
    }
    .cards p{
        padding: 50px;
        margin: 10px;
    }
}

/* ---------------------------------END OF MAIN PAGE---------------------------*/
/* ---------------------------------INNER PAGES-------------------------------- */
/* Blog page display articles and archive widget */
.wp-post-image{ 
    float: left; 
    margin: 0 15px 10px 0; 
}
.blog main .container,
.archive main .container{
    display: flex;
}
.blog .blog-items,
.archive .archive-items{
    padding: 10px 15px 10px 15px;
    flex: 2;
}
.blog .blog-items h2,
.archive .blog-items h2{
    margin-top: 10px;
   
}
.blog article{
    margin-bottom: 80px;
    margin-top: 10px;
}
.blog aside,
.archive aside{
    padding: 10px;
    background: var( --amigatalk-dun );
  
}
.archive aside, h3{
    margin-bottom: 20px;
    color: var(--amigatalk-green2);
}


@media screen and (max-width: 991px ) {
    .blog aside,
    .archive aside,
    .blog .blog-items,
    .archive .archive-items{
        min-width: 100%;
    }
}
/* Display blog */
.blog h1,
.archive h1{
    text-align: left;
    margin-top: 30px;
    font-weight: bold;
    color: var(--amigatalk-green2);
}
article{ 
    display: inline-block;  
     width: 100%; 
}
article h2{
    line-height: 3.5rem;
    margin-bottom: 20px;
    text-transform: none;
    text-align: left;
}


@media (max-width: 991px) {
    .cards .blog .container,
    .archive .container{
        flex-wrap: wrap;
    }
}





/* ---------------------------------------------------
 PAGINATION
--------------------------------------------------- */
/* Pagination */
.amigatalk-pagination{
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.pages{
    margin-top: 40px;

}

/* Pagination for the research results */
 .page-numbers{
    padding: 10px 15px;
    display: inline-block;
    background: var( --amigatalk-dun );
   margin-top: 30px;
   margin-bottom: 20px;
}
.current{
   color: var(--amigatalk-green1);
}

 .prev{
    padding-left: 0;
}
.search-items{
    margin-top: 20px;
    margin-bottom: 20px;
}
.search article{
    margin-bottom: 80px;
    margin-top: 10px;
}

/* ---------------------------------------------------END OF THE WEBSITE---------------------------*/
/* ---------------------------------------------------WP CORE FOR ACCESIBILITY---------------------------*/
 /*------------------------Do not change nothing-------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}  
/* -----------------------------------------------END WP CORE FOR ACCESIBILITY---------------------------*/  

/* -----------------------------------------------END OF THE WEBISTE---------------------------*/