/*
Theme Name: PPID
Theme URI: https://aieiii.com/ppidwptheme
Author: Ibnu Athaillah
Author URI: https://aieiii.com/
Description: Tema Wordpress yang dibuat khusus untuk keperluan webstie PPID.
Tags: blog, one-column, full-width-template
Version: 1.0
Tested up to: 7.0
*/

:root {
    --text-color: #404040;
    --soft-color: #b2b2b2;
    --link-color: #df4949;
    --contain: 1700px;
    --screen-padding: 5rem;
}

@media (max-width: 700px) {
    :root {
        --contain: 600px;
        --screen-padding: 2rem;
    }
}

/* Reset */
html,
body,
p,
ul,
ol,
li,
a,
h1,
h2 {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

html {
    font-size: 18px;
    scrollbar-gutter: stable;
    scrollbar-color: var(--soft-color) transparent;
}

body {
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

/* Logo */

.logo {
    display: flex;
    gap: 2.5ch;
}

.logo a {
    color: var(--text-color);
}

.logo-ppid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1ch;
    font-weight: 600;
    font-size: 1em;
}

.logo-ppid img {
    height: 6ch;
}

.logo .logo-ppid {
    align-items: flex-end;
    text-align: right;
    padding: 0 3ch;
    border-right: solid 1px var(--soft-color);
}

.logo-akb {
    display: flex;
    align-items: center;
    gap: 2ch;
    font-weight: 600;
    font-size: 1.1em;
}

.logo-akb img {
    height: 7ch;
    filter: contrast(80%);
}

/* Header */

header {
    --bg: #ffffff;
    --height: 16ch;
    background-color: var(--bg);
    border-block: 1px solid var(--soft-color);
    display: flex;
    height: var(--height);
    width: 100%;
}

@media (orientation: landscape) {
    header {
        font-size: clamp(0.55rem, 1.2vh, 1rem);
    }
}

@media (orientation: portrait) {
    header {
        font-size: clamp(0.55rem, 1.2vw, 1rem);
    }
}

header .logo {
    flex-grow: 1;
}

header .logo-ppid {
    width: 24ch;
}

header .logo-akb {
    width: 36ch;
}

header .logo-akb p span {
    display: block;
}

@media (max-width: 700px) {
    header {
        --height: 12ch;
    }

    header .logo-ppid {
        flex-direction: row;
        width: 31ch;
        gap: 2ch;
    }

    header .logo-akb {
        width: auto;
    }

    header .logo-ppid p {
        text-align: left;
    }

    header .logo .logo-ppid {
        align-items: center;
    }

    header .logo-akb p {
        display: none;
    }
}

.menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-btn label {
    cursor: pointer;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-color);
    text-align: center;
    font-size: 1em;
}

.menu-btn label::after {
    content: "";
    display: block;
    width: 6ch;
    height: 6ch;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center; 
}

header .menu-btn {
    width: var(--height);
    border-left: solid 1px var(--soft-color);
}

header .menu-btn label::after,
#top-nav .menu-btn label::after {
    background-image: url(./img/menu.svg);
}

header.on-index {
    --bg: transparent;
    position: absolute;
    top: 0;
    z-index: 1;
    border: none;
}

header.on-index .logo {
    padding: 1em 0;
}

header.on-index .menu-btn {
    border: none;
    filter: invert(1) brightness(3);
}

header.on-index a {
    color: #ffffff;
}

header.on-index .logo-ppid img {
    filter: invert(1) brightness(2);
}

/* Top Navigation */

#top-nav {
    --height: 12ch;
    position: fixed;
    z-index: 9;
    background-color: #ffffff;
    display: flex;
    height: var(--height);
    width: 100%;
    border-bottom: solid 1px var(--soft-color);
}

@media (orientation: landscape) {
    #top-nav {
        font-size: clamp(0.5rem, 1.1vh, 1rem);
    }
}

@media (orientation: portrait) {
    #top-nav {
        font-size: clamp(0.5rem, 1.1vw, 1rem);
    }
}

/* Appear from the top when page scrolled certain pixels */
@supports (animation-timeline: scroll()) {
    #top-nav {
        animation: top-nav-key linear both;
        animation-timeline: scroll(root block);
        animation-range: 150px 200px;
    }

    @keyframes top-nav-key {
        from {
            top: calc(-1 * (var(--height) + 1px));
        }

        to {
            top: 0ch;
        }
    }
}

#top-nav .logo {
    flex-grow: 1;
}

#top-nav .logo-ppid {
    width: 38ch;
    gap: 2ch;
    flex-direction: row;
    text-align: left;
    align-items: center;
}

#top-nav .logo-akb {
    width: 36ch;
}

#top-nav .menu-btn {
    width: var(--height);
    border-left: solid 1px var(--soft-color);
}

@media (max-width: 700px) {
    #top-nav .logo-ppid {
        width: auto;
    }

    #top-nav .logo-akb {
        width: auto;
    }

    #top-nav .logo p {
        display: none;
    }
}

/* Full Screen Menu */

#menu-toggle {
    display: none;
}

#menu-box {
    --bg: #fafafa;
    --color: #404040;
    background-color: #000000a4;
    background-image: url(./img/half-dark.png);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

@media (orientation: landscape) {
    #menu-box {
        font-size: clamp(.7rem, 1.5vh, 1.3rem);
    }
}

@media (orientation: portrait) {
    #menu-box {
        font-size: clamp(.7rem, 1.5vw, 1.3rem);
    }
}

#menu-box * {
    color: var(--color);
}

#menu-toggle:checked ~ #menu-box {
    opacity: 1;
    pointer-events: auto;
}

#menu-toggle:not(:checked) ~ #menu-box {
    opacity: 0;
    pointer-events: none;
}

body:has(#menu-toggle:checked) {
    overflow: hidden;
}

#menu-box .menu-btn {
    position: absolute;
    top: 4ch;
    right: 4ch;
}

#menu-box .menu-btn label {
    font-size: .75em;
}

#menu-box .menu-btn label::after {
    background-image: url(./img/close.svg);
}

#menu {
    background-color: var(--bg);
    padding: 5ch;
    height: calc(100vh - 10ch);
    transition: margin-right .5s ease;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
    display: flex;
    gap: 3ch;
    justify-content: flex-start;
    overflow: scroll;
}

#menu-toggle:checked ~ #menu-box #menu {
    margin-right: 0vw;
}

#menu-toggle:not(:checked) ~ #menu-box #menu {
    margin-right: -100vw;
}

#menu ul {
    display: flex;
    flex-direction: column;
    gap: 1.75ch;
}

#menu .main-menu {
    gap: 3ch;
    padding-bottom: 3ch;
}

#menu .reg-menu {
    height: 90%;
    justify-content: flex-end;
}

#menu .reg-menu a {
    font-size: 1em;
}

#menu li h1 {
    font-size: 1em;
    font-weight: 500;
    color: var(--soft-color);
}

#menu li a {
    font-size: 1.2em;
}

#menu li a:hover {
    color: var(--link-color);
}

@media (orientation: portrait) {
    #menu {
        flex-direction: column;
    }

    #menu .main-menu {
        border-right: none;
    }
}

@media (orientation: landscape) {
    #menu {
        flex-direction: row;
    }

    #menu .main-menu {
        flex-direction: row;
        border-right: solid 1px var(--soft-color);
        padding-right: 4ch;
    }
}

/* Main Document */

main h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2.5em;
    margin-bottom: 1rem;
}

section {
    width: 100%;
    padding: 6rem 0 7rem 0;
    padding-inline: max(5rem, calc((100% - var(--contain)) / 2));
    box-sizing: border-box;
}

.special-section h1 {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    section {
        padding: 3rem 0 4rem 0;
        padding-inline: max(3rem, calc((100% - var(--contain)) / 2));
        font-size: 0.8em;
    }
}

/* Tile Menu */

#tile-menu {
    --text-color: #ffffff;
    background: linear-gradient(160deg,#1b1b1b 0%, #2f3d59 100%);
    border-top: solid 1px #161616;
    font-size: .8rem;
}

#tile-menu,
#tile-menu a {
    color: var(--text-color);
}

#tile-menu > p {
    margin-bottom: 5ch;
}

#tile-menu ul {
    display: flex;
    gap: 4ch;
}

#tile-menu ul li {
    flex: 1 1 0;
    max-width: 28ch;
}

#tile-menu a {
    font-size: 1.5em;
    margin-bottom: 1ch;
    border: solid 2pt var(--text-color);
    display: block;
    padding: 1ch 1.5ch;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#tile-menu a:hover {
    background-color: #00000082;
}

#tile-menu br {
    display: none;
}

@media (max-width: 850px) {
    #tile-menu ul {
        flex-direction: column;
    }
}

/* Steps Menu */

#steps-menu {
    --text-color: #101010;
    background: #df4949;
    background: linear-gradient(160deg, #cee6ff 0%, #ffe1f1 100%);;
    border-top: solid 2px #ffffff;
    font-size: .8rem;
}

#steps-menu ol {
    display: flex;
    flex-wrap: wrap;
    gap: 3ch;
    counter-reset: num;
    margin-top: 3ch;
}

#steps-menu ol li {
    flex: 1 1 20%;
    counter-increment: num;
    display: flex;
    flex-direction: column;
    gap: 2ch;
    align-items: flex-start;
}

#steps-menu b {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2em;
}

#steps-menu a {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.3em;
    padding: .4ch .7ch;
    border: solid 2pt var(--text-color);
}

#steps-menu a:hover {
    background-color: #00000025;
}

#steps-menu ol li::before {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #00000025;
    content: counter(num);
    font-size: 6em;
}

#steps-menu br {
    display: none;
}

#steps-menu,
#steps-menu a {
    color: var(--text-color);
}

@media (max-width: 1260px) {
    #steps-menu ol li {
        flex: 1 1 26%;
    }
}

@media (max-width: 980px) {
    #steps-menu ol li {
        flex: 1 1 34%;
    }
}

@media (max-width: 600px) {
    #steps-menu ol li {
        flex: 1 1 50%;
    }
}

/* Banner/Hero */

#banner {
    display: flex;
    align-items: center;
    gap: 5rem;
    padding: 14rem 5rem 10rem 5rem;
    padding-inline: max(5rem, calc((100% - 1600px) / 2));
    color: #ffffff;
    background-image: url(./img/eight-folders.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    font-size: 1rem;
}

#banner h1 {
    font-size: 2.25em;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#banner h1 b {
    font-size: 1.2  em;
    text-transform: uppercase;
}

#banner p {
    font-size: 1.2em;
    font-family: "Source Sans 3", sans-serif;
}

#banner p b {
    font-weight: 500;
    background-color: #ffffff;
    color: var(--text-color);
    display: inline-block;
    padding: 0 .3ch;
}

@media (max-width: 700px) {
    #banner {
        flex-direction: column;
        gap: 3rem;
        padding: 10rem 0 8rem 0;
        padding-inline: max(3rem, calc((100% - var(--contain)) / 2));
    }
}

/* ---------------Footer---------------- */

footer {
    line-height: 1.5em;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

footer::before {
    content: '';
    position: absolute;
    top: 45%;
    left: 25%;
    right: 25%;
    bottom: 0;
    background-image: url(./img/logo-ppid.svg);
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(3);
    z-index: -1;
}

@media (max-width: 600px) {
    footer {
        font-size: 0.8rem;
    }
}

footer nav {
    display: flex;
    padding: 4rem 0 10rem 0;
    width: 100%;
    padding-inline: max(3rem, calc((100% - 1600px) / 2));
    box-sizing: border-box;
}

footer h1 {
    margin-bottom: 2rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#address {
    color: var(--text-color);
}

#address a {
    color: var(--text-color);
    border-bottom: dotted 1px var(--text-color);
}

#copy {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: normal;
    display: flex;
    gap: 5ch;
    justify-content: space-between;
    color: var(--text-color);
    font-size: .75em;
    border-top: solid 1px var(--soft-color);
    width: 100%;
    padding: 3rem;
    padding-inline: max(3rem, calc((100% - 1600px) / 2));
    box-sizing: border-box;
    background-color: #ffffff;
}

#copy a {
    color: #df4949;
}

article {
    font-size: .8rem;
    width: 100%;
    min-height: 30rem;
    padding: 4rem;
    padding-inline: max(4rem, calc((100% - 1600px) / 2));
    box-sizing: border-box;
    border-bottom: solid 1px var(--soft-color);
    color: var(--text-color);
}

article h1 {
    font-size: 1.5rem;
    margin-bottom: 4rem;
}

article h2 {
    margin: 1ch 0;
}

article p {
    margin-bottom: 2ch;
}

article li b {
    display: block;
    margin-bottom: 2ch;
}

article ol li {
    list-style-type: decimal;
    margin-bottom: 2ch;
}

article ol li ul {
    margin: 2ch 0;
}

article ol li ul li {
    margin-left: 2ch;
    margin-bottom: 0;
    list-style-type: disc;
}

@media (max-width: 700px) {
    article {
        font-size: .7rem;
        padding: 2rem;
        padding-inline: max(2rem, calc((100% - 1600px) / 2));
    }

    article h1 {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
}

.policy {
    font-family: "Cascadia Mono", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin-left: 2ch;
}

/* .data {
    display: flex;
    flex-direction: column;
    gap: 2ch;
    font-family: "Source Sans 3", sans-serif;
}

.data a {
    color: transparent;
    background-image: url(./img/download.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.data ul {
    display: flex;
    flex-direction: row;
    border: solid 1px var(--soft-color);
}

.data ul:nth-child(odd) {
    background-color: #ffffff;
}

.data ul:nth-child(even) {
    background-color: #f5f5f5;
}

.data ul:first-child {  
    background-color: var(--text-color);
    border-color: var(--text-color);
    text-align: center;
    color: #ffffff;
}

.data ul:not(:first-child):hover {
    background-color: #e8e8e8;
}

.data ul li {
    padding: 2ch;
}

.data ul li:first-child {
    font-weight: 500;
    flex: 0 0 4ch;
}

.data ul li:nth-child(2) {
    flex: 1 1 0;
}

.data ul li:last-child {
    flex: 0 0 4ch;
    text-align: center;
}

@media (max-width: 700px) {
    .data ul {
        flex-wrap: wrap;
    }
    
    .data ul li:last-child {
        border-top: solid 1px var(--soft-color);
        flex: 1 0 90%;
    }
} */

/* Collection */

.data {
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    gap: 3ch;
}

.collection article ul {
    flex: 0 1 47%;
    border: solid 1px var(--soft-color);
    display: flex;
    font-family: "Source Sans 3", sans-serif;
    font-size: 1.2em;
}

@media (max-width: 1270px) {
    .collection article ul {
        flex: 0 1 100%;
    }
}

.collection article .num {
    font-weight: 300;
    flex-shrink: 0;
    padding: 2ch 2ch;
    width: 3ch;
    border-right: dashed 1px var(--soft-color);
}

.collection article .name {
    font-weight: 500;
    flex-grow: 1;
    padding: 2ch 4ch 2ch 2ch;
}

.collection article ul .link {
    border-left: dashed 1px var(--soft-color);
}

.collection article ul .link a {
    color: #ffffff;
    display: block;
    height: calc(100% - 1ch);
    padding: 1ch 1ch 0 1ch;
    background-color: #000000;
    filter: invert(1);
}

.collection article ul .link a:hover {
    filter: none;
}

.collection article ul .link a img {
    width: 2ch;
    height: 2ch;
}

article form {
    max-width: 600px;
}

.forminator-ui {
    counter-reset: labelnum;
}

.forminator-ui .forminator-row {
    counter-increment: labelnum;
    margin-left: 4ch;
}

.forminator-ui .forminator-label::before {
    content: counter(labelnum)".";
    margin-left: -4ch;
    display: inline-block;
    position: absolute;
}

.forminator-label {
    font-weight: 600;
    font-size: 1em !important;
}

.document-link {
    display: inline-block;
    color: var(--link-color);
    font-weight: 600;
    border: solid 1px var(--soft-color);
    padding: 3ch 2ch 2ch 2ch;
}

.document-link::before {
    display: block;
    margin-bottom: 2ch;
    margin-left: -.75ch;
    content: "";
    background-image: url(./img/docuemnt-med.svg);
    width: 10ch;
    height: 10ch;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}