/*!
 * StaticPress theme "Blocksy" - tokens.css
 *
 * Layer 1 of 4: design tokens, reset, typography and accessibility.
 *
 * Every custom property below is the one the original theme uses (they are
 * generated by inc/css/fundamentals.php::blocksy_output_css_vars and by the
 * `inc/dynamic-styles/global/*` files), so the rest of the ported stylesheet
 * can keep the original selectors and values:
 *
 *   --theme-palette-color-1..8   inc/classes/colors.php default palette
 *   --theme-*                    computed globals (colors, spacing, borders)
 *   --theme-*-container-max-width   inc/options/general/layout.php
 *   --theme-content-vertical-spacing
 *   --theme-button-*             inc/options/general/buttons.php
 *   --sidebar-*                   inc/options/general/sidebar.php
 *   --grid-columns-gap, --card-*  inc/options/general/posts-listing.php
 *   breakpoints                   sm 480 / md 690 / lg 1000 / xl 1200
 *
 * The palette keeps the Blocksy blue as the single accent colour; the dark
 * surface tokens are the "深浅混搭" half of the design - the original derives
 * a dark header/footer from the same palette through the customiser, the port
 * freezes that choice into tokens.
 */

/* ---------------------------------------------------------------- tokens */
:root {
    /* Palette (Blocksy default) */
    --theme-palette-color-1: #2872fa;
    --theme-palette-color-2: #1559ed;
    --theme-palette-color-3: #3a4f66;
    --theme-palette-color-4: #192a3d;
    --theme-palette-color-5: #e1e8ed;
    --theme-palette-color-6: #f2f5f7;
    --theme-palette-color-7: #fafbfc;
    --theme-palette-color-8: #ffffff;

    /* Dark surface: header, mobile header, drawer, hero band, footer */
    --theme-dark-surface: #121c2e;
    --theme-dark-surface-2: #0b1421;
    --theme-dark-border: rgba(255, 255, 255, 0.1);
    --theme-dark-heading: #ffffff;
    --theme-dark-text: rgba(226, 235, 246, 0.72);
    --theme-dark-text-strong: rgba(232, 240, 250, 0.92);

    /* Globals */
    --theme-text-color: var(--theme-palette-color-3);
    --theme-link-initial-color: var(--theme-palette-color-1);
    --theme-link-hover-color: var(--theme-palette-color-2);
    --theme-link-active-color: var(--theme-palette-color-1);
    --theme-border-color: var(--theme-palette-color-5);
    --theme-headings-color: var(--theme-palette-color-4);
    --theme-selection-text-color: #ffffff;
    --theme-selection-background-color: var(--theme-palette-color-1);
    --theme-text-active-color: #ffffff;

    --theme-border: none;
    --theme-border-top: none;
    --theme-border-bottom: none;
    --theme-border-radius: 4px;
    --theme-box-shadow: 0 12px 18px -6px rgba(34, 56, 101, 0.06);
    --theme-box-shadow-strong: 0 18px 28px -12px rgba(20, 38, 71, 0.18);
    --theme-image-border-radius: 3px;
    --theme-transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --theme-content-spacing: 1.5em;
    --theme-list-indent: 2.5em;
    --theme-frame-size: 0px;
    --admin-bar: 0px;

    /* Typography */
    --theme-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei',
        'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans SC', 'Noto Sans CJK SC',
        Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --theme-font-size: 16px;
    --theme-font-weight: 400;
    --theme-line-height: 1.65;
    --theme-letter-spacing: 0em;

    /* Layout */
    --theme-normal-container-max-width: 1290px;
    --theme-narrow-container-max-width: 750px;
    --theme-wide-offset: 130px;
    --theme-container-edge-spacing: 90vw;
    --theme-container-width-base: var(--theme-container-edge-spacing);
    --theme-container-width: min(100%, var(--theme-container-width-base));
    --theme-content-vertical-spacing: 60px;

    /* Buttons */
    --theme-button-min-height: 40px;
    --theme-button-padding: 5px 20px;
    --theme-button-border-radius: 4px;
    --theme-button-text-initial-color: #ffffff;
    --theme-button-text-hover-color: #ffffff;
    --theme-button-background-initial-color: var(--theme-palette-color-1);
    --theme-button-background-hover-color: var(--theme-palette-color-2);

    /* Sidebar */
    --sidebar-width: 27%;
    --sidebar-gap: 4%;
    --sidebar-offset: 50px;
    --sidebar-widgets-spacing: 40px;
    --sidebar-inner-spacing: 35px;

    /* Posts listing */
    --grid-columns-gap: 30px;
    --grid-template-columns: repeat(3, minmax(0, 1fr));
    --card-inner-spacing: 30px;
    --card-element-spacing: 20px;
    --card-border: 1px solid var(--theme-border-color);

    /* Header / drawer */
    --header-height: 120px;
    --header-mobile-height: 70px;
    --menu-items-spacing: 25px;
    --menu-item-height: 100%;
    --side-panel-width: 500px;
    --side-panel-offset: 0px;
    --theme-panel-reveal-right: 25%;

    /* Modal panels (the search dialog of partials/search.html) */
    --modal-panel-width: 640px;
    --modal-panel-offset: 30px;
}

@media (max-width: 999.98px) {
    :root {
        --header-height: var(--header-mobile-height);
        --side-panel-width: 65vw;
        --theme-content-vertical-spacing: 50px;
    }
}

@media (max-width: 689.98px) {
    :root {
        --side-panel-width: 90vw;
        --theme-content-vertical-spacing: 44px;
    }
}

/* ----------------------------------------------------------------- reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--theme-palette-color-7);
    color: var(--theme-text-color);
    font-family: var(--theme-font-family);
    font-size: var(--theme-font-size);
    font-weight: var(--theme-font-weight);
    line-height: var(--theme-line-height);
    letter-spacing: var(--theme-letter-spacing);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

body[data-panel] {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    color: var(--theme-headings-color);
    font-weight: 700;
    line-height: 1.4;
}

h1 { font-size: 40px; }
h2 { font-size: 35px; }
h3 { font-size: 30px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

@media (max-width: 999.98px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    h4 { font-size: 21px; }
}

@media (max-width: 689.98px) {
    h1 { font-size: 27px; }
    h2 { font-size: 24px; }
    h3 { font-size: 21px; }
    h4 { font-size: 19px; }
}

p {
    margin: 0 0 var(--theme-content-spacing);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--theme-link-initial-color);
    text-decoration: none;
    transition: var(--theme-transition);
}

a:hover,
a:focus {
    color: var(--theme-link-hover-color);
}

ul, ol {
    margin: 0 0 var(--theme-content-spacing) 0;
    padding-inline-start: var(--theme-list-indent);
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

img {
    display: block;
    border-style: none;
}

svg {
    display: block;
}

.ct-icon {
    flex: 0 0 auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 var(--theme-content-spacing);
}

th, td {
    padding: 10px 14px;
    border: 1px solid var(--theme-border-color);
    text-align: start;
    vertical-align: top;
}

thead th {
    background-color: var(--theme-palette-color-6);
    font-weight: 600;
}

blockquote {
    margin: 0 0 var(--theme-content-spacing);
    padding: 4px 0 4px 22px;
    border-inline-start: 3px solid var(--theme-palette-color-1);
    color: var(--theme-palette-color-4);
    font-style: normal;
}

blockquote p:last-child {
    margin-bottom: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--theme-border-color);
    margin: 34px 0;
}

figure {
    margin: 0 0 var(--theme-content-spacing);
}

figcaption {
    margin-top: 0.6em;
    font-size: 14px;
    color: var(--theme-text-color);
    text-align: center;
}

code, kbd, pre, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.9em;
}

code {
    padding: 0.15em 0.4em;
    border-radius: 3px;
    background-color: var(--theme-palette-color-6);
    color: var(--theme-palette-color-4);
}

pre {
    margin: 0 0 var(--theme-content-spacing);
    padding: 18px 20px;
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-palette-color-6);
    overflow: auto;
}

pre code {
    padding: 0;
    background: none;
}

::selection {
    color: var(--theme-selection-text-color);
    background-color: var(--theme-selection-background-color);
}

/* --------------------------------------------------------- accessibility */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    clip: auto;
    clip-path: none;
    overflow: visible;
    white-space: normal;
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-palette-color-1);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

:focus-visible {
    outline: 2px solid var(--theme-palette-color-1);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ utilities */
/* 2-basics/utilities.scss - the responsive visibility helpers the theme
   prints in its markup (partials/sidebar.html carries ct-hidden-md
   ct-hidden-sm). The breakpoints are the theme ones: sm 480, md 690, lg 1000. */
@media (max-width: 479.98px) {
    .ct-hidden-sm {
        display: none !important;
    }
}

@media (min-width: 690px) and (max-width: 999.98px) {
    .ct-hidden-md {
        display: none !important;
    }
}

@media (min-width: 1000px) {
    .ct-hidden-lg {
        display: none !important;
    }
}

.hidden {
    display: none;
}

.aligncenter {
    clear: both;
    display: block;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}