/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 15 2026 | 12:33:30 */
/* Nipuna - THE PASSWORD GATE on /leave/.
   =======================================================================
   THIS ONE IS NOT PART OF ANY TEMPLATE. Paste it into
   Appearance > Custom CSS & JS (the "Simple Custom CSS and JS" plugin the
   site already uses), as a new CSS block set to load in the header.
   =======================================================================

   WHY IT CANNOT LIVE IN nipuna-leave.json

   When a post is password protected WordPress replaces the_content() with
   get_the_password_form() BEFORE Elementor ever runs. Measured on the live
   locked page:

       the page's Elementor CSS is not enqueued at all
       there is no .elementor-7927 wrapper on the page
       the form is a direct child of <body>, between </header> and <footer>,
       with no container of any kind around it

   So `selector` does not exist here and no rule shipped inside the page
   template can reach this form. Site Settings is off limits. The plugin is
   what is left -- and it is already where the site keeps one rule for this
   very form (`.post-password-form input[type=submit]{height:unset;
   padding:4px 20px!important}`). That old rule can be deleted once this is
   in; section 5 outranks it either way.

   WHY SO MANY !important

   Everywhere else on this site a page rule wins by starting with `selector`,
   which Elementor expands to a three-class prefix. There is no wrapper here,
   so the most specific thing available is `.post-password-form input[...]`
   at (0,2,1) -- and Site Settings > Theme Style > Form Fields compiles to

       .elementor-kit-5 input:not([type="button"]):not([type="submit"])

   at (0,3,1), because each :not() contributes its argument. It sets
   font-size, padding, colour and border-width, and it wins. The only ways
   past it are body classes (brittle: they change with WordPress) or
   !important (honest: it says out loud that a global rule is being beaten).
   !important is used ONLY on the properties that rule actually sets.

   Markup this dresses, verbatim from the live page -- note the stray </p>
   WordPress emits, which browsers turn into an empty paragraph:

       <form class="post-password-form">
         <input type="hidden" name="redirect_to">
         </p>
         <p>This content is password-protected. ...</p>
         <p><label for="pwbox-N">Password: <input type="password"></label>
            <input type="submit" value="Enter"></p>
       </form>                                                            */

/* ---------- 1. The card ---------- */
/* The header is position:fixed at z-index 50, so an element at the top of
   the document flow sits UNDERNEATH it -- which is exactly what the
   unstyled form did. Measured: 73px tall below 1025, 97px at and above it,
   so the clearance is two numbers rather than a guess. */
.post-password-form{
  box-sizing:border-box;
  width:calc(100% - 40px);
  max-width:460px;
  margin:137px auto 96px;          /* 73 header + 64 */
  padding:28px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-panel);
  font-family:"Manrope",sans-serif;
  text-align:left;
}
@media(min-width:1025px){
  .post-password-form{margin:193px auto 120px;padding:36px 32px}
}

/* A padlock, as a background image on the form's own ::before -- there is no
   element to put an icon in and inventing one would mean injecting markup
   with JavaScript into a page whose whole job is to not show anything. */
.post-password-form::before{
  content:"";
  display:block;
  width:44px;height:44px;
  margin:0 0 20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1728' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E")
    center/20px 20px no-repeat;
}

/* ---------- 2. The message ---------- */
/* doob sets `p{margin-bottom:20px}` on bare paragraphs, and the kit sets its
   own margin-block-end -- both are beaten here at (0,2,0) and (0,1,1)
   respectively, so no !important is needed for the margin. */
.post-password-form p{
  margin:0 0 20px!important;       /* the kit's p rule is (0,1,1) + author */
  font-size:15px;
  line-height:1.6;
  color:var(--ink-500);
}
/* The paragraph WordPress's stray </p> creates. Left alone it adds 20px of
   nothing at the top of the card. */
.post-password-form p:empty{display:none!important}
.post-password-form p:last-of-type{margin-bottom:0!important}

/* ---------- 3. The label ---------- */
/* Core wraps the input INSIDE the label, so "Password:" is a text node and
   the field is its sibling. Making the label a block and the input a block
   is what stacks them; nothing else here needs to move. */
.post-password-form label{
  display:block;
  margin:0;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
  color:var(--ink-800);
  cursor:pointer;
}

/* ---------- 4. The password field ---------- */
/* font-size and padding carry !important because the kit's Form Fields rule
   (0,3,1) sets both; the rest is uncontested and is written plainly. */
.post-password-form input[type="password"]{
  display:block;
  box-sizing:border-box;
  width:100%;
  height:48px;
  margin-top:8px;
  padding:12px 16px!important;     /* kit Form Fields */
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-family:"Manrope",sans-serif;
  font-size:15px!important;        /* kit Form Fields sets 16px */
  line-height:1.5;
  color:var(--ink-900);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.post-password-form input[type="password"]:focus{
  border-color:var(--blue-600);
  outline:none;
  box-shadow:0 0 0 4px rgba(0,130,202,.15);
}

/* ---------- 5. The Enter button ---------- */
/* The site's primary button, rebuilt by hand: .np-btn-primary lives in Site
   Settings and hangs off .elementor-button, which this <input type=submit>
   is not and cannot be made into.

   `body ` at the front is what beats the existing plugin rule
   `.post-password-form input[type=submit]{padding:4px 20px!important}`:
   both carry !important, so specificity decides, and (0,2,2) takes (0,2,1).
   Delete that old block when this goes in and this prefix becomes
   unnecessary -- it is kept so the order of the two blocks does not matter. */
body .post-password-form input[type="submit"]{
  display:block;
  box-sizing:border-box;
  width:100%;
  height:48px!important;
  /* all four sides, not just the top: something in the theme puts a
     10px margin-left on submit inputs, which pushed the button 10px
     right of the field above it -- measured, not guessed */
  margin:20px 0 0!important;
  padding:0 24px!important;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--ink-900)!important;
  color:#fff!important;
  font-family:"Manrope",sans-serif!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:-.01em;
  text-transform:none;
  cursor:pointer;
  transition:background-color .3s var(--ease);
}
body .post-password-form input[type="submit"]:hover{
  background:var(--blue-700)!important;
}
body .post-password-form input[type="submit"]:active{
  background:var(--blue-800)!important;
}
body .post-password-form input[type="submit"]:focus-visible{
  outline:2px solid var(--blue-600);
  outline-offset:3px;
}
