/* ==========================================================================
   DaiPai site styles
   Colors:  background #d69484, text #95302b
   Font:    Arial, Helvetica, sans-serif (applied to everything)
   ========================================================================== */

:root {
    --daipai-bg: #d69484;
    --daipai-text: #95302b;
    --daipai-font: Arial, Helvetica, sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--daipai-bg);
    color: var(--daipai-text);
    font-family: var(--daipai-font);
    line-height: 1.5;
}

/* Use the site font for everything, including form controls and headings
   (browsers do not inherit the font into buttons/inputs by default). */
h1, h2, h3, h4, h5, h6,
p, a, ul, ol, li, dl, dt, dd,
blockquote, cite, figcaption,
table, caption, th, td,
label, legend, button, input, select, textarea,
strong, em, small, code, pre {
    font-family: inherit;
}

a {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Page content container
   Mobile first: only a small spacing to the sides.
   -------------------------------------------------------------------------- */
.daipai_content {
    box-sizing: border-box;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertically centered when the page is short */
    gap: 2rem;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;            /* horizontally centered */
    padding: 1.5rem 1rem;      /* small whitespace on mobile */
}

.daipai_content > * {
    margin-top: 0;
    margin-bottom: 0;
}

.daipai_content img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Footer: centered at the bottom of the page
   (main grows with flex: 1, so the footer is pushed to the bottom)
   -------------------------------------------------------------------------- */
.daipai_footer {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
}

.daipai_footer_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.daipai_footer a {
    text-decoration: none;
}

.daipai_footer a:hover,
.daipai_footer a:focus {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Desktop: content in the middle with generous whitespace around it
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .daipai_content {
        padding: 6rem 3rem;    /* top/bottom and left/right whitespace */
    }

    .daipai_footer {
        padding: 2rem 3rem;
    }
}

/* ==========================================================================
   Header logo (only rendered on pages where it is enabled)
   The logo sits in a circle (red border, site background fill) that floats
   at the top of the page. The header bar itself is transparent, so the page
   content stays visible on both sides of the circle.
   The header is fixed; the body reserves space for the BIG circle, so the
   content does not jump when the circle shrinks while scrolling.
   ========================================================================== */
:root {
    --daipai-circle-d: 130px;        /* circle diameter at the top of the page (mobile) */
    --daipai-circle-d-small: 92px;   /* circle diameter after scrolling (mobile) */
    --daipai-header-pad: 0.75rem;    /* space between viewport edge and circle */
    --daipai-frame-border: 2px;
}

@media (min-width: 768px) {
    :root {
        --daipai-circle-d: 190px;        /* desktop */
        --daipai-circle-d-small: 126px;
        --daipai-header-pad: 1.25rem;
    }
}

body.daipai-has-header {
    box-sizing: border-box;
    padding-top: calc(var(--daipai-circle-d) + 2 * var(--daipai-header-pad));
}

/* The header already provides the top whitespace */
body.daipai-has-header .daipai_content {
    padding-top: 1rem;
}

@media (min-width: 768px) {
    body.daipai-has-header .daipai_content {
        padding-top: 2rem;
    }
}

.daipai_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-sizing: border-box;
    display: flex;
    justify-content: center;        /* circle in the middle */
    align-items: flex-start;
    padding: var(--daipai-header-pad) 1rem;
    background: transparent;
    pointer-events: none;           /* content beside the circle stays clickable */
    transition: padding 0.3s ease;
}

/* The circle (the whole circle is the link) */
.daipai_header__link {
    pointer-events: auto;
    box-sizing: border-box;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--daipai-circle-d);
    height: var(--daipai-circle-d);
    padding: 0;
    border: var(--daipai-frame-border) solid var(--daipai-text);
    border-radius: 50%;
    background-color: var(--daipai-bg);
    text-decoration: none;
    transition: width 0.3s ease, height 0.3s ease;
}

.daipai_header__link:focus-visible {
    outline: 2px solid var(--daipai-text);
    outline-offset: 3px;
}

/* The logo scales with the circle (percentages), so it always fits inside */
.daipai_header__logo {
    display: block;
    width: 76%;
    height: auto;
    max-height: 64%;
    object-fit: contain;
}

/* After scrolling down: smaller circle (and logo) */
.daipai_header.is-scrolled {
    padding-top: calc(var(--daipai-header-pad) / 2);
    padding-bottom: calc(var(--daipai-header-pad) / 2);
}

.daipai_header.is-scrolled .daipai_header__link {
    width: var(--daipai-circle-d-small);
    height: var(--daipai-circle-d-small);
}

/* Keep the fixed header below the WordPress admin bar when logged in */
body.admin-bar .daipai_header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .daipai_header {
        top: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .daipai_header,
    .daipai_header__link {
        transition: none;
    }
}