/*
Theme Name: Hearth Talk Wordpress Theme
Author: Gladys
Description: Custom theme for Hearth Talk
Version: 0.0.1
Tested up to: 5.9.4
*/

/* Base */
* {
    transition: all 0.15s ease 0s;
}

html, body {
    --background-color: #FBFAF3;/* warm white */
    --stroke-color: rgba(20,0,0,0.5);
    --accent-color-yellow: rgba(237, 212, 124, 1.0);
    background-color: var(--background-color); 
    width:100%;
    min-height:100vh;
    margin:0;
}

.htlogo {
    background-image:url('assets/HT_logo.svg');
    background-size:cover;
    background-repeat:no-repeat;
    background-position-y: center;
}
.wp-block-columns {
    column-gap: 2em;
}
.ht-contacts {
    column-gap: 2em;
    row-gap: 2em;
}

/* Typography */
body {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1em;
}
h1, h2, h3 {
    font-family: 'Zen Maru Gothic', sans-serif;
}
h1 {
    font-size:2.25rem;
    font-weight:400;
}
h2 {
    font-size:1.8rem;
    font-weight:500;
}
h3 {
    font-size:1.4rem;
    font-weight:500;
}
h4 { 
    /* used for small blocks in lists */
    font-size:1.1rem;
    font-weight:500;
}
p {
    line-height:1.6rem;
}
a {
    color: black;
}
nav ul li {
    font-size:1.25rem;
    font-weight:400;
}
nav p, nav p a {
    font-size:0.8rem;
    font-weight:400;
}
nav i.icon, footer i.icon{
    font-size:x-large;
    margin-right:8px;
    vertical-align:middle;
    min-width:1rem;
}
nav a{
    color:black;
    text-decoration:none;
}
span.material-symbols-outlined {
    vertical-align:text-bottom;
    padding-left:0.5rem;
}
.ht-contact {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 600;
}
.ht-contact a {
    text-decoration: none;
    color: black;
}


/* Layout */
/* Wide: in-layout navigation */
body {
    --in-wrapper-left-margin: 0 5vw;
    --logo-height: 60px;
    --header-padding-bottom: 0px;
    --right-col-left-padding: 24px;
    --ht-home-skyline-space-wide: 21vh;
    --ht-home-skyline-space-medium: calc(100vw / 4);
    --ht-home-skyline-space-narrow: 3vh;
}

.background {
    position:absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: calc(var(--header-padding-bottom) + var(--logo-height));
    border-bottom: 1px solid var(--stroke-color);
}
.ht-home-skyline {
    position:absolute;
    height: auto;
    width: auto;
    max-height: calc(var(--logo-height) + var(--ht-home-skyline-space-wide));
    max-width: calc(86vw - 200px);
    top:56px;
    left:0;
}
.ht-home-skyline-space {
    height: var(--ht-home-skyline-space-wide) !important;
    max-height: 400px;
}
.htlogo {
    max-width:340px;
    height: var(--logo-height);
    margin: var(--in-wrapper-left-margin);
}
.wrapper {
    display: grid;
    width: fit-content;
    margin: 0 auto;
    grid-template-columns: minmax(auto,980px) minmax(200px,300px);
    column-gap:10vw;
    align-items:start;
}
header {
    position:relative;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding-bottom: var(--header-padding-bottom);
}
.header-right {
    position: relative;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: calc(var(--header-padding-bottom) + var(--logo-height));
}
.nav-toggle, .nav-header {
    position: absolute;
    bottom: 7px;
    left: var(--right-col-left-padding);
}
.nav-toggle {
    display:none;
}
main {
    box-sizing:border-box;
    padding: var(--in-wrapper-left-margin);
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin-top: var(--right-col-left-padding);
}
footer {
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align:center;
    grid-column: 1 / 3;
}
nav {
    box-sizing:border-box;
    padding: var(--right-col-left-padding);
    align-self: start;
    z-index:999;
    position:sticky;
    top:0 !important;
    margin-top:1px;
}

nav > ul {
    list-style-type: none;
    padding-left: 0;
}

nav ul li {
    padding-top:1em;
    padding-bottom:1em;
}
nav ul li:hover {
    background-color: var(--accent-color-yellow);
}
nav ul li:not(:last-of-type){
    border-bottom: 1px solid #BBBBBB;
}
nav a span:not(.ht-email):hover{
    text-decoration:underline;
}
nav > p > a:hover i{
    transform:scale(1.1);
    transform-origin: 50%;
}

.ht-contacts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-bottom:2rem;
}
.ht-contact {
    display: flex;
    flex-direction:column;
    justify-content: start;
    align-items: center;
    text-align: center;
    word-wrap:break-word;
}
.ht-contact:not(.email):hover {
    transform:scale(1.1);
    transform-origin:50%;
}
.ht-contact-icon {
    width: 100px;
    height: auto;
}

/* Medium: toggled on, set-width nav */
@media only screen and (max-width:1080px) and (min-width:701px){
    .ht-home-skyline-space {
        height: var(--ht-home-skyline-space-medium) !important;
    }
    .ht-home-skyline {
        width:100vw;
        max-width: unset;
        height:auto;
        max-height: unset;
    }
    .wrapper {
        column-gap:4vw;
    }
    main {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    .nav-header {
        display: none;
    }
    .nav-toggle {
        display: initial;
        cursor:pointer;
    }
    .nav-toggle:hover span:nth-child(2), .nav-toggle:focus span:nth-child(2) {
        transform:scale(1.2);
        transform-origin: 50%;
    }
    #nav-menu {
        display: none;
        background-color: var(--background-color); 
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        align-self:stretch;
        height:100vh;
        overflow-y:hidden;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 15px 29px 0px;
    }
    .ht-contacts {
        grid-template-columns: 1fr 1fr;
    }
}
/* Small: toggled on, full-width nav */
@media only screen and (max-width:700px){
    .ht-home-skyline-space {
        height: var(--ht-home-skyline-space-narrow) !important;
    }
    .ht-home-skyline {
        position:fixed;
        max-width:125vw;
        width:125vw;
        height:auto;
        top: auto;
        bottom: 0;
        left: -15%;
        background: rgb(251,250,243);
        background: linear-gradient(0deg, rgba(251,250,243,1) 0%, rgba(251,250,243,1) 50%, rgba(251,250,243,0.7) 80%,rgba(251,250,243,0) 100%)    }
    .ht-home-campfire {
        visibility:hidden;
    }
    .wrapper {
        grid-template-columns: 1fr 50px;
        grid-template-rows: var(--logo-height) 1fr;
        column-gap:0;
    }
    .wrapper.homepage {
        grid-template-columns: auto minmax(auto,200px);
    }
    main {
        grid-column: 1 / 3;
    }
    .htlogo {
        max-width: 226px;
    }
    .header-right {
        grid-row: 1 / 2;
    }
    .nav-header {
        display: none;
    }
    .nav-toggle:not(.homepage) > span:first-child {
        display:none;
    }
    .nav-toggle {
        left:0;
        display: initial;
        cursor:pointer;
    }
    .nav-toggle:hover span:nth-child(2), .nav-toggle:focus span:nth-child(2) {
        transform:scale(1.2);
        transform-origin: 50%;
    }
    .nav-toggle:not(.homepage) span.material-symbols-outlined {
        vertical-align:super;
    }
    #nav-menu {
        display: none;
        background-color: var(--background-color); 
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        align-self:stretch;
    }
    .ht-service-type {
        margin-bottom: 24px;
        height: fit-content !important;
        min-height: auto !important;
    }
    .ht-numbered-section-content-indent {
        margin-right: 1.6em;
    }
    .ht-contacts {
        grid-template-columns: 1fr 1fr;
    }
    .ht-contact {
        word-break:break-all;
    }
    .ht-contact-icon {
        width: 80px;
        height: auto;
    }

}

/* Modules */
article {
    padding-bottom: 3rem;
}
article:not(:last-of-type){
    margin-bottom: 3rem;
    border-bottom:1px solid var(--stroke-color);
}
section{
    padding-top: 1.5rem;
}

.ht_single_event {
    background-color: white;
    border: 1px solid #bbbbbb;
    padding: 10px;
    width: 100%;
    margin-bottom:2rem;
    position:relative;
    box-sizing:border-box;
}
.ht_single_event_imgbox {
    height:0;
    width:100%;
    padding-bottom: 53%;
    margin-bottom:1rem;
    position:relative;
    background-origin: border-box;
    background-size:cover;
}
.ht_single_event_imgbox.empty {
    width: 100%;
    background-color: #BAA761;
    background-image:url('assets/HT_group_vector.svg');
    background-size:50%;
    background-repeat:no-repeat;
    background-position: center;
    background-blend-mode: overlay;
}
.ht_single_event img {
    width: 100%;
    height: max-content;
}
.ht_single_event_datebox {
    position:absolute;
    top:10px;
    left:10px;
    background-color: var(--accent-color-yellow);
    width:93px;
    height:93px;
    padding:4px;
    display:flex;
    justify-content: center;
}
.ht_single_event_datebox > span {
    align-self:center;
    text-align:center;
}
.ht_single_event_info {
    margin: 0 1rem;
    padding-bottom: 1rem;
}
.ht_single_event_info p {
    word-break: break-word;
}
.ht_single_event_info a {
    text-decoration:none;
}
.ht_single_event_info .ht-single-event-description a {
    text-decoration:underline;
}
.ht_single_event_info a:hover, .ht_single_event_info a:focus {
    text-decoration:underline;
}
.ht-numbered-section-content-indent {
    margin-left: 1.6em;
}

.ht-service-type, .ht-service-target {
    border-radius: 46px;
    background-color:#BAA761;
    padding: 6px 20px 12px 20px;
    height: 100%;
    min-height:150px;
}
.ht-service-type p, .ht-service-target p {
    font-size: small;
}
.ht-service-target {
    width:fit-content;
    margin: 0 auto;
}
.ht-service-target .wp-block-image {
    margin: 1em 0 0 0;
}


@media (any-hover: hover){
    .ht-email {
        padding-right:4px;
        border-style:dashed;
        border-color: rgba(0,0,0,0);
        border-radius:3px;
        border-width:1px;
    }
    .ht-email:hover {
        border-color: var(--stroke-color);
        background-color: #EDD47C;
        cursor: grabbing;
    }
    .ht-email:active {
        background-color: #a18216;
    }
    .ht-email-prompt {
        visibility:hidden;
        opacity:0;
        display:block;
        width:fit-content;
        padding:3px 8px 5px 8px;
        border-radius:6px;
        background-color: var(--stroke-color);
        color: white;
        text-align:center;
        position:absolute;
        margin-top:1em;
        margin-left:2.5em;
    }
    .ht-email-prompt::after{
        content: "";
        position: absolute;
        top: -14px;
        left: 2.5em;
        border-width: 7px;
        border-style: solid;
        border-color:  transparent transparent var(--stroke-color) transparent;
    }   
    .ht-email:hover + .ht-email-prompt {
        visibility: visible;
        opacity: 1;
        transition-delay:0.05s;
    }
    a.ht-email {
        display:none;
    }
    .green {
        background-color: #00897B;
        color: white;
    }
    
}
@media (any-hover:none) {
    a.ht-email {
        display:inline-block;
    }
    .ht-email,  .ht-email-prompt {
        display:none;
    }
}



/* States */
.show {
    display:block !important;
}
.hide {
    display:none !important;
}