/*
Theme Name: Pageking Flex (child)
Template: pk-theme-child
Author: Pageking
Author URI: https://www.pageking.nl/
Description: Pageking is een thema voor WordPress dat is ontworpen voor Pageking websites.
Requires at least: 5.9
Tested up to: 6.7.2
Requires PHP: 8.3
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ─── FONT SMOOTHING ──────────────────────────────────────────── */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ─── CLS OPTIMIZATION ────────────────────────────────────────── */

img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

img[width][height] {
    aspect-ratio: auto;
}


/* ─── LAYOUT ──────────────────────────────────────────────────── */

.flex-layout {
    display: inline-block;
}

/* First layout in the repeater gets no margin-top */
.flex-repeater .flex-content .flex-layout:nth-child(1) {
    margin-top: unset;
}


/* ─── PAGE CONTENT DEFAULTS ───────────────────────────────────── */

.pk-page-content h1,
.pk-page-content h2,
.pk-page-content h3,
.pk-page-content h4,
.pk-page-content h5,
.pk-page-content h6 {
    margin-top: 0;
    margin-bottom: 0;
}

.pk-page-content p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.pk-page-content ul,
.pk-page-content ol {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-left: 1.1rem;
}

.pk-page-content li {
    margin-bottom: 0.5rem;
}

.pk-page-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.pk-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.pk-page-content th,
.pk-page-content td {
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.pk-page-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
}

.pk-page-content hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 2rem 0;
}


/* ─── CUSTOM MENU ──────────────────────────────────────────────────── */

.custom-menu {
  display: flex;
  align-items: center;
  gap: 0.75rem max(.5rem, var(--su));
  flex-wrap: wrap;
}


/* ─── FOOTER ──────────────────────────────────────────────────── */

.pk-footer {
    padding-inline: var(--pk-site-gutter);
}


/* ─── MEDIA QUERIES ───────────────────────────────────────────── */

@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 992px) {

}

@media screen and (max-width: 767px) {
  
  .pk-page header > .pk-header-wrapper, .flex-layout {
    padding-inline: 1rem;
  }

}

@media screen and (max-width: 480px) {

}