/*
 Theme Name: 1pen 2025 - Child
 Template: onepen-core
 Author: Miss Helen
 Author URI: https://1pen.dk
 Description: Child theme for 1pen 2025 - Theme.
 Version: 1.0
 Text Domain: onepen-2026
*/


/* ========== Site tokens (kept) ========== */
:root{
  --surface-dark:#0B0F12;
  --text:#F5F7F8;
  --accent-gold:#D4B66C;
  --link: var(--accent-gold);
  --link-hover:#f6e6bd;
  --hairline: rgba(255,255,255,.14);
  --header-h:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:#000;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover)}

/* header/nav, canvas, audio etc. — keep anything you already had … */

/* ========== TERMS / POLICY TEXTBOX ========== */
/* IMPORTANT: the Gutenberg Group must have the class: onepen-textbox */
.wp-block-group.onepen-textbox{
  /* spacing under your page title/badge */
  margin: 140px auto 80px;
  width: min(860px, 92vw);
  padding: 32px 36px;

  /* frosted glass */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,.02) 70%),
    linear-gradient(180deg, rgba(18,28,32,.58), rgba(10,20,24,.68)),
    rgba(8,16,20,.46) !important;   /* beat any theme-global */
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset -1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);

  /* scroll if long */
  max-height: min(78vh, 900px);
  overflow-y: auto !important;

  /* typography */
  color:#eef4f6;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.65;

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(212,182,108,.9) transparent;
}

/* Headings inside the box */
.wp-block-group.onepen-textbox h1,
.wp-block-group.onepen-textbox h2,
.wp-block-group.onepen-textbox h3{
  font-family:"Tangerine", cursive;
  color:#f6e6bd;
  text-shadow:0 2px 0 rgba(0,0,0,.55);
  line-height:1.1;
  margin:0 0 .35em;
}
.wp-block-group.onepen-textbox h1{ font-size: clamp(42px, 7vw, 56px); }
.wp-block-group.onepen-textbox h2{ font-size: clamp(30px, 5vw, 40px); }
.wp-block-group.onepen-textbox h3{ font-size: clamp(24px, 4vw, 30px); }

/* Text rhythm & links */
.wp-block-group.onepen-textbox p{ margin:0 0 1em; }
.wp-block-group.onepen-textbox ul,
.wp-block-group.onepen-textbox ol{ margin:.2em 0 1em 1.2em; }
.wp-block-group.onepen-textbox li{ margin:.2em 0; }
.wp-block-group.onepen-textbox a{
  color:#d4b66c; text-decoration:none;
}
.wp-block-group.onepen-textbox a:hover{
  color:#f6e6bd; text-shadow:0 0 8px rgba(212,182,108,.25);
}

/* Hairline rules inside */
.wp-block-group.onepen-textbox hr{
  border:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  margin:24px 0;
}

/* WebKit scrollbar (thin line + ornament thumb) */
.wp-block-group.onepen-textbox::-webkit-scrollbar{ width:6px; }
.wp-block-group.onepen-textbox::-webkit-scrollbar-track{ background:transparent; }
.wp-block-group.onepen-textbox::-webkit-scrollbar-thumb{
  background-color: rgba(212,182,108,.9);
  background-image: url("https://1pen.dk/wp-content/uploads/2025/09/Scrool-btn.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  border-radius:8px;
  min-height:36px;
  border:1px solid rgba(0,0,0,.35);
}
.wp-block-group.onepen-textbox::-webkit-scrollbar-thumb:hover{ background-color:#e0c782; }

@media (max-width:640px){
  .wp-block-group.onepen-textbox{
    margin: 110px auto 64px;
    padding: 24px;
    width: min(94vw,860px);
    font-size: 16px;
    max-height: 74vh;
  }
}
/* ---- 1) Typography in the textbox ---- */
.wp-block-group.onepen-textbox{
  /* font stack: modern, readable, lighter */
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  font-weight: 400;                 /* lighter than default */
  font-size: 15px;
  line-height: 1.65;
  color: #eef4f6;
}

/* Optional: headings stay in Tangerine but a touch lighter */
.wp-block-group.onepen-textbox h1,
.wp-block-group.onepen-textbox h2,
.wp-block-group.onepen-textbox h3{
  font-weight: 600;                 /* less heavy glow overall */
}

/* ---- 2) Make the scrollbar a slim “button” thumb ---- */
/* WebKit (Chrome, Edge, Safari) */
.wp-block-group.onepen-textbox::-webkit-scrollbar{
  width: 12px;                      /* overall rail width */
}
.wp-block-group.onepen-textbox::-webkit-scrollbar-track{
  background: transparent;          /* hide the yellow-looking track */
}
.wp-block-group.onepen-textbox::-webkit-scrollbar-thumb{
  /* gold button look + your ornament centered */
  background-color: rgba(212,182,108,.55);                  /* gold base */
  background-image: url("https://1pen.dk/wp-content/uploads/2025/09/Scrool-btn.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;                                /* “button” glyph */
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  min-height: 36px;
}
.wp-block-group.onepen-textbox::-webkit-scrollbar-thumb:hover{
  background-color: rgba(224,199,130,.8);
}
.wp-block-group.onepen-textbox::-webkit-scrollbar-thumb:active{
  background-color: rgba(224,199,130,1);
}

/* Firefox */
.wp-block-group.onepen-textbox{
  scrollbar-width: thin;
  scrollbar-color: rgba(212,182,108,.7) transparent;         /* thumb / track */
}
/* Ensure header always renders and sits above the textbox */
.site-header{
  display: flex !important;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;                     /* above the page content and the textbox */
  pointer-events: auto;
}

/* Give the main content space so header doesn't overlap it */
.wp-site-blocks, .onepen-stage{
  padding-top: clamp(64px, 7vh, 90px);
}
/* Universal frosted textbox */
.onepen-textbox {
  margin: 120px auto 80px;
  width: min(760px, 90vw);
  padding: 34px 38px;
  max-height: min(78vh, 900px);
  overflow-y: auto;

  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,.02) 70%),
    linear-gradient(180deg, rgba(18,28,32,.58), rgba(10,20,24,.68)),
    rgba(8,16,20,.46);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset -1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);

  color: #eef4f6;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  font-family: "Segoe UI", Arial, sans-serif; /* sans serif, lighter */
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;

  scrollbar-width: thin;
  scrollbar-color: rgba(212,182,108,.9) transparent;
}

/* WebKit scrollbar with button ornament */
.onepen-textbox::-webkit-scrollbar { width: 16px; }
.onepen-textbox::-webkit-scrollbar-track { background: transparent; }
.onepen-textbox::-webkit-scrollbar-thumb {
  background: transparent url("https://1pen.dk/wp-content/uploads/2025/09/Scrool-btn.webp") no-repeat center;
  background-size: 16px 16px;
  border-radius: 8px;
}

/* Headings */
.onepen-textbox h1, .onepen-textbox h2, .onepen-textbox h3 {
  font-family:"Tangerine", cursive;
  color:#f6e6bd;
  text-shadow:0 2px 0 rgba(0,0,0,.55);
}

/* Responsive */
@media (max-width:720px){
  .onepen-textbox {
    margin: 96px auto 64px;
    padding: 26px 24px;
    font-size: 16px;
    max-height: 74vh;
  }
}

/* === 1pen — universal frosted textbox (Group block with "onepen-textbox") === */
/* Target exactly the Gutenberg Group element that carries the class */
.wp-block-group.onepen-textbox{
  /* position + spacing under the fixed header / page badge */
  margin: calc(var(--header-h,64px) + 40px) auto 80px !important;
  width: min(860px, 92vw) !important;
  padding: clamp(22px, 3vw, 36px) !important;
  border-radius: 18px !important;

  /* frosted glass background */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,.02) 70%),
    linear-gradient(180deg, rgba(18,28,32,.58), rgba(10,20,24,.68)),
    rgba(8,16,20,.46) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset -1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;

  /* scrolling */
  max-height: min(78vh, 900px) !important;
  overflow-y: auto !important;

  /* typography */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 300;                 /* lighter */
  font-size: 17px;
  line-height: 1.65;
  color: #eef4f6;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* Gold headings inside the box */
.wp-block-group.onepen-textbox h1,
.wp-block-group.onepen-textbox h2,
.wp-block-group.onepen-textbox h3{
  font-family: "Tangerine", cursive;
  color: #f6e6bd;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
  line-height: 1.1;
  margin: 0 0 .35em;
}
.wp-block-group.onepen-textbox h1{ font-size: clamp(42px, 7vw, 56px); }
.wp-block-group.onepen-textbox h2{ font-size: clamp(30px, 5vw, 40px); }
.wp-block_group.onepen-textbox h3{ font-size: clamp(24px, 4vw, 30px); }

/* Paragraph rhythm & links inside */
.wp-block-group.onepen-textbox p{ margin: 0 0 1em; }
.wp-block-group.onepen-textbox ul,
.wp-block-group.onepen-textbox ol{ margin: .2em 0 1em 1.2em; }
.wp-block-group.onepen-textbox li{ margin: .2em 0; }
.wp-block-group.onepen-textbox a{ color:#d4b66c; text-decoration:none; }
.wp-block-group.onepen-textbox a:hover{ color:#f6e6bd; text-shadow:0 0 8px rgba(212,182,108,.25); }

/* Hairline rules */
.wp-block-group.onepen-textbox hr{
  border:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  margin: 24px 0;
}

/* Custom scrollbar — “thin line” rail + your ornament as the thumb (WebKit) */
.wp-block-group.onepen-textbox::-webkit-scrollbar{ width: 8px; }
.wp-block-group.onepen-textbox::-webkit-scrollbar-track{ background: transparent; }
.wp-block-group.onepen-textbox::-webkit-scrollbar-thumb{
  background-color: rgba(212,182,108,.9);                     /* gold column */
  background-image: url("https://1pen.dk/wp-content/uploads/2025/09/Scrool-btn.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;                                 /* your “button” */
  border-radius: 8px;
  min-height: 36px;
  border: 1px solid rgba(0,0,0,.35);
}
.wp-block-group.onepen-textbox::-webkit-scrollbar-thumb:hover{ background-color:#e0c782; }

/* Firefox scrollbar (cannot use an image; color only) */
.wp-block-group.onepen-textbox{
  scrollbar-width: thin;
  scrollbar-color: rgba(212,182,108,.9) transparent;
}

/* Phones */
@media (max-width:640px){
  .wp-block-group.onepen-textbox{
    margin: 110px auto 64px;
    padding: 22px;
    width: min(94vw,860px);
    font-size: 16px;
    max-height: 74vh;
  }
}
/* === ONEPEN FOOTER START === */
.onepen-orb{
  position:fixed; right:clamp(14px,2.2vw,22px); bottom:clamp(14px,2.2vw,22px);
  z-index:10010; background:none; border:none; padding:0; line-height:0; cursor:pointer;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
.onepen-orb::after { content: ''; }
.onepen-orb img{ display:block; width:clamp(26px,2.2vw,32px); height:auto; }

#onepen-footer{ position:fixed; left:0; right:0; bottom:0; z-index:10000; }
#onepen-footer { position: relative; } /* container hidden by [hidden] anyway */
.onepen-footer-panel{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .45s ease, opacity .35s ease;
  padding:18px 12px 12px; max-height:60vh; overflow:auto;
}
body.orb-open { overflow: hidden; }  /* lock scroll while panel is open */
body.orb-open .onepen-footer-panel{ transform: translateY(0); opacity: 1; }

.onepen-footer .wp-block-columns.onepen-footer-nav{
  display:grid; grid-template-columns:24% 1fr 1fr 1fr 24%;
  align-items:start; justify-items:center; column-gap:clamp(24px,5vw,60px);
  margin-inline:auto; max-width:min(1200px,92vw); position:relative;
}
.onepen-footer .wp-block-column{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.onepen-footer .divider-img{ pointer-events:none; height:280px; width:auto; opacity:.9; }
.onepen-footer .copyright{ margin-top:12px; text-align:center; opacity:.85; }

@media (max-width:800px){
  .onepen-footer .wp-block-columns.onepen-footer-nav{ grid-template-columns:1fr; row-gap:24px; }
  .onepen-footer .divider-img{ display:none; }
}
/* === ONEPEN FOOTER END === */

/* === ONEPEN FOOTER: sliding panel === */
.onepen-footer { position: relative; }

.onepen-orb {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  border: 0;
  padding: 0;
  background-image: url('footer_button.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 1002;
}
.onepen-orb:focus { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }
/* hide any fallback text inside the button visually */
.onepen-orb, .onepen-orb * { color: transparent; font-size: 0; line-height: 0; }

.onepen-footer-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .45s ease, opacity .35s ease;
  /* allow clicks even if we previously used [hidden] somewhere */
  display: block !important;
}
.onepen-footer-panel[hidden] { display: none; }
/* Keep your columns and dividers clickable and centered; do NOT set font or color here */
.onepen-footer-panel .onepen-footer-nav { max-width: 1100px; margin: 24px auto; }
.onepen-footer-panel .divider-img { pointer-events: none; }

@media (max-width: 800px) {
  .onepen-footer-panel .onepen-footer-nav { padding: 16px; }
}

/* === ONEPEN SLIDING FOOTER PANEL — OVERLAY === */
#onepen-footer-panel[hidden] { display: block; visibility: hidden; } /* keep in DOM for transform calc */

#onepen-footer-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;                    /* above everything */
  pointer-events: none;             /* block clicks when closed */
  transform: translateY(100%);      /* start off-screen */
  transition: transform 240ms ease-out, visibility 0s linear 240ms;
  background: rgba(0,0,0,.72);      /* dark transparent veil */
  backdrop-filter: blur(4px);
}

/* when open, slide in and accept input */
body.orb-open #onepen-footer-panel {
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
  transition: transform 240ms ease-out;
}

/* inner layout remains centered and wide */
#onepen-footer-panel .onepen-footer,
#onepen-footer-panel .onepen-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 34px;
}

/* lock page scroll while panel open */
body.orb-open { overflow: hidden; }

/* make sure page canvas still fills viewport behind the overlay */
html, body { height: auto; min-height: 100%; }
.wp-site-blocks { min-height: 100vh; }