/* ==========================================================================
   JAGRITI DHAM - "STEP INTO JAGRITI DHAM"   --  #contact
   css/contact-lux.css        2026-09-09
   ==========================================================================
   EXTRACTED FROM css/home-lux.css ON 2026-09-09 AND NOW SHARED.

   This section is emitted by EIGHTEEN templates - about.php, longstay.php,
   day-at-jagriti-dham.php, jivagram-ayurvedic-wellness.php, photo-gallery.php,
   front-page.php, index.php, archive.php, single.php and the rest - each with
   its own copy of the same markup. The styling used to live in home-lux.css,
   which is enqueued on the FRONT PAGE ONLY, so every other page showed the
   section in the theme's old dress.

   It is now its own file, enqueued SITEWIDE from functions.php. Change this
   file once and every page that carries the section changes with it.

   Self-contained by construction: every selector below is scoped to #contact,
   and the one external token it reads - var(--jd-h-nav) - is declared on :root
   in css/header-lux.css, which is also enqueued sitewide.
   ========================================================================== */
/* ==========================================================================
   "Step into Jagriti Dham"   --  #contact
   ==========================================================================
   Front page only. The heading lives in the ACF field form_heading; the form
   is Contact Form 7 id 32, seven fields plus a maths captcha.

   This is the one section on the page somebody has to USE rather than read,
   so most of what follows is about the form rather than the frame.

   WHAT WAS WRONG:

   1. THE PLACEHOLDERS ARE THE SAME COLOUR AS TYPED TEXT. style.css:331 sets
      `::placeholder{ color:#151515 !important }` sitewide - the same
      #151515 that style.css:317 gives the input's own text. So an empty
      field and a filled one look identical. On a form with NO labels at all,
      where the placeholder is the only thing naming the field, that means
      every field reads as already answered.

   2. THERE IS NO VISIBLE FOCUS INDICATOR. style.css:65 zeroes `:focus`
      sitewide, and style.css:346 does it again for textarea and select. A
      keyboard user tabbing through seven fields gets nothing on screen at
      any point. Measured: outline-style computes to `none` on every control.

   3. THE MATHS CAPTCHA INPUT IS 23x26px. It is the last thing between a
      visitor and sending the form, it is a required field, and it is a third
      of the 44px touch minimum with a browser-default inset border that
      matches nothing else on the page.

   4. Per-field error messages are switched off. style.css:1956 sets
      `.wpcf7-not-valid-tip{ display:none }`, so a failed submit says only
      "one or more fields have an error" at the bottom and never points at
      which. Seven fields, one generic message.

   5. #fff on #cbb279 for the heading (style.css:857) is 2.06:1. The same
      pairing turned up on the gallery caption and the testimonial pagination
      and fails just as hard here.

   6. .sticky_div is `top:100px` against a 102px condensed header, the same
      as the compassion panel - the heading slid under the header when it
      stuck. And it stayed sticky below 992, where the column is full width.

   7. `padding: 20px 0` for the section that closes the page.

   AND ONE THAT IS ONLY NOT A BUG BY ACCIDENT: style.css:323 says
   `input.form-control:focus{ color:#fff }` - white text on a white field the
   moment you click into it. It never fires because the base rule two lines
   above carries `color:#151515 !important`, and !important beats an
   unflagged declaration whatever the selector. Left alone; noted so nobody
   "tidies up" that !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The ground
   --------------------------------------------------------------------------
   Brass is right here - it is the site's accent and it follows the deep
   green of Green Advantages the way the palette intends. What it needed was
   depth: the paper grain, a gentle vertical fall, and hairlines to close it,
   so it reads as the last panel of the page rather than a flat swatch. */
#contact{
  position:relative;
  padding:76px 0 80px;
  background-color:#cbb279;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 40%, rgba(74,58,22,.1) 100%);
  border-top:1px solid rgba(74,58,22,.35);
  border-bottom:1px solid rgba(74,58,22,.35);
}

/* --------------------------------------------------------------------------
   The left column
   -------------------------------------------------------------------------- */

/* style.css:690 is top:100px sitewide; the condensed header is 0 + 56 + 46 =
   102 (css/header-lux.css:486-491). Below 992 the columns stack and there is
   nothing to be sticky beside. Default static, one min-width - no seam. */
#contact .sticky_div{ position:static; }
@media (min-width:992px){
  #contact .sticky_div{
    position:sticky;
    top:calc(56px + var(--jd-h-nav, 46px) + 24px);
  }
}

#contact .section-title{ margin-bottom:0; }

#contact .section-title h2{
  font-family:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(30px, 3.2vw, 44px);
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.014em;
  color:#2b3f2f;              /* 5.49:1 on the brass, against 2.06:1 for #fff */
  text-align:left;
  margin:0;
}
/* the section mark, left-aligned to match a left-aligned heading - the other
   six sections centre it */
#contact .section-title h2::after{
  content:"";
  display:block;
  width:150px; height:9px;
  margin:22px 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Crect width='17' height='9' fill='%23cbb279'/%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%234a3a16'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(74,58,22,.55) 0%, rgba(74,58,22,.55) 76%, rgba(74,58,22,0) 100%);
  background-repeat:no-repeat, no-repeat;
  background-position:left 34px center, left center;
  background-size:17px 9px, 100% 1px;
}

#contact .sticky_div p{
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;
  line-height:1.7;
  color:#241f12;              /* 8.0:1 on the brass */
  margin:24px 0 0;
  /* Justified, as asked, and as the reference section on infinityheights.in
     sets its own left column. hyphens comes with it: justification stretches
     the spaces on a line, and in a column this narrow there is nowhere else
     for the slack to go unless words can break. Measured gaps are in
     README-HOME.md - this is a 407px column, which is narrower than the
     860px where justify sits at 1.4x. */
  text-align:justify;
  -webkit-hyphens:auto;
          hyphens:auto;
}

/* --------------------------------------------------------------------------
   The form
   --------------------------------------------------------------------------
   Built to the pattern of the enquiry form in the "Guwahati's Most Exclusive
   Hill-Top Address" section on infinityheights.in, measured off that page:

       card      #fff, radius 16px, padding 28px 26px,
                 box-shadow 0 10px 30px rgba(0,0,0,.1)
       fields    #fff, radius 8px, 1px solid #d8e0dc, padding 10px 14px
       submit    solid fill, radius 30px (a pill), padding 13px 32px, 190x50
       gutter    g-2

   The wrapper .wpcf7 div that CF7 prints is what carries the card there, and
   it is in this markup too, so it needs no template change.

   TWO DELIBERATE DIFFERENCES from the reference, both about this audience
   rather than about the look:

     - the fill stays Jagriti's #2f4634 rather than Infinity Heights' #006a34.
       The shape is what was asked for; the colour belongs to the other brand.
     - the field type stays 16px rather than 14px. Below 16px iOS zooms the
       whole page in the moment a field is focused and the visitor has to
       pinch back out between every one. If you would rather match exactly,
       it is the one font-size below.

   The card also changes what the rest of this block sits on: everything
   inside .wpcf7 is now on white, not on the brass, so the error text, the
   response box and the Google Sheets note are all recoloured for white. */
#contact .wpcf7{
  background:#ffffff;
  border-radius:16px;
  padding:28px 26px;
  box-shadow:0 10px 30px rgba(43,33,10,.13);
}

#contact .wpcf7-form .row.g-2{ --bs-gutter-x:8px; --bs-gutter-y:8px; }

/* One rule for text inputs, selects and the textarea, because they were three
   different things: the inputs had no border at all (style.css:315), the
   selects had Bootstrap's #ced4da, and the captcha had the browser's default
   inset. */
#contact input.form-control,
#contact textarea.form-control,
#contact .form-select,
#contact input.wpcf7-mathcaptcha{
  background-color:#ffffff;
  /* the reference's own field border. It is very light, which works because
     the fields now sit on a white card rather than straight on the brass -
     that is the same reason it works on infinityheights.in, where the card
     is white on a pale grey ground. */
  border:1px solid #d8e0dc;
  border-radius:8px;
  font-size:16px;
  line-height:1.4;
  color:#151515;
  padding:11px 14px;
  min-height:48px;
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#contact textarea.form-control{ min-height:132px; padding:12px 14px; resize:vertical; }

/* The placeholder finally reads as a prompt rather than as an answer.
   !important because style.css:331 carries it. 5.61:1, so it is still
   comfortably legible - it is the only thing naming these fields. */
#contact ::-moz-placeholder{ color:#5f6b5c !important; opacity:1; }
#contact ::placeholder{ color:#5f6b5c !important; opacity:1; }

/* THE FOCUS RING. style.css:65 (`:focus{outline:0;box-shadow:none}`) and
   style.css:346 both switch this off; naming the element type puts these at
   (1,2,1) and (1,1,1), which clears both without !important. */
#contact input.form-control:focus,
#contact textarea.form-control:focus,
#contact .form-select:focus,
#contact input.wpcf7-mathcaptcha:focus{
  border-color:#2b3f2f;
  box-shadow:0 0 0 3px rgba(43,63,47,.22);
  background-color:#ffffff;
  color:#151515;
}
#contact input.form-control:focus-visible,
#contact textarea.form-control:focus-visible,
#contact .form-select:focus-visible,
#contact input.wpcf7-mathcaptcha:focus-visible,
#contact .wpcf7-submit:focus-visible{
  outline:2px solid #24331f;
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   The maths captcha
   --------------------------------------------------------------------------
   The markup is an input followed by a bare text node - " + 3 = 4" - inside
   .mathcaptcha_div, so the sum can be set as a unit and the box brought up to
   size without touching the plugin. */
#contact .mathcaptcha_div{
  display:flex;
  align-items:center;
}
#contact .mathcaptcha_div .wpcf7-form-control-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  color:#2f3327;              /* on the white card now, not on the brass */
}
#contact input.wpcf7-mathcaptcha{
  width:62px;
  min-height:48px;
  padding:11px 8px;
  text-align:center;
  font-weight:600;
}

/* --------------------------------------------------------------------------
   The submit button
   --------------------------------------------------------------------------
   style.css:422-437 carries three !important declarations on .btn-primary -
   padding, a 1px white border and the text colour - so these three have to be
   answered in kind. The rest is ordinary. */
#contact .wpcf7-submit,
#contact .wpcf7-form-control.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:190px;
  min-height:50px;
  padding:13px 32px !important;
  border:0 !important;        /* style.css:435 puts a 1px white border here */
  color:#f6edd8 !important;   /* 8.81:1 on the fill */
  background-color:#2f4634;
  background-image:linear-gradient(0deg, #24331f, #24331f);
  background-size:100% 0;
  background-repeat:no-repeat;
  background-position:bottom;
  border-radius:30px;         /* the pill, from the reference */
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  box-shadow:0 8px 18px -10px rgba(36,51,31,.7);
  transition:background-size .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
#contact .wpcf7-submit:hover,
#contact .wpcf7-form-control.btn-primary:hover{
  background-size:100% 100%;
  color:#f6edd8 !important;
  box-shadow:0 12px 22px -10px rgba(36,51,31,.8);
}

/* --------------------------------------------------------------------------
   Errors
   --------------------------------------------------------------------------
   style.css:1956 hides the per-field message outright. Un-hidden here only -
   other forms on the site keep whatever they do now - and set as a note under
   the field it belongs to. */
#contact .wpcf7-not-valid-tip{
  display:block;
  margin:6px 0 0;
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:#8c2f2f;              /* 8.2:1 on the white card */
}
/* the colour is not carrying this on its own - the border weight changes too,
   so it does not depend on seeing red */
#contact .wpcf7-not-valid{
  border-color:#8c2f2f !important;
  border-width:2px !important;
}

/* CF7 leaves this div in the markup and empty until something happens, and
   its own stylesheet is what normally keeps it out of the way. Giving it a
   border and padding here means an empty one would render as a bordered
   strip if that ever stopped being true, so :empty settles it independently
   of any class CF7 does or does not add. */
#contact .wpcf7-response-output:empty{ display:none; }

#contact .wpcf7-response-output{
  margin:20px 0 0;
  padding:13px 16px;
  border:1px solid #d8e0dc;
  border-radius:8px;
  background:#f7faf8;
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:#2f3327;
}
#contact form.invalid .wpcf7-response-output,
#contact .wpcf7-response-output.wpcf7-validation-errors{
  border-color:#8c2f2f;
  background:#fdf4f4;
  color:#7a2626;              /* 6.9:1 on that tint */
}
#contact form.sent .wpcf7-response-output,
#contact .wpcf7-response-output.wpcf7-mail-sent-ok{
  border-color:#2f4634;
  background:#f2f7f2;
  color:#22331f;
}

/* the Google Sheets line - a footnote, so it should look like one */
#contact .gscf7-frontend-gdpr-notice{
  margin:16px 0 0;
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  color:#5b6157;            /* 6.0:1 on the white card */
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* The columns are col-lg-4 / col-lg-8 on the LG breakpoint but col-md-4 /
   col-md-8 on MD, so between 768 and 991 the intro is squeezed into a 216px
   column - about 29 characters a line at 16.5px, which is unreadable prose
   before you even ask it to justify (measured word gaps there ran to 13x the
   natural space). The reference section on infinityheights.in uses
   col-lg-4 col-md-12 for exactly this reason: it stacks below 992 and only
   splits when there is room. Same here. */
@media (max-width:991.98px){
  #contact{ padding:56px 0 60px; }
  #contact .row > .col-lg-4,
  #contact .row > .col-lg-8{ flex:0 0 auto; width:100%; }
  #contact .sticky_div{ margin-bottom:34px; }
  #contact .section-title h2::after{ width:130px; margin-top:18px; }
}

/* WHERE JUSTIFY HOLDS AND WHERE IT DOES NOT.

   Justified by default, as asked. Justification stretches the spaces on a
   line and every gap on that line stretches equally, so how well it reads is
   a function of how wide the column is. Measured worst gap in this copy, as
   a multiple of the font's own space:

       469px  (1920)        2.3x     fine
       383px  (1280-1440)   3.9x     fine
       371px  (1200)        3.5x     fine
       363px  (414 phone)   3.6x     fine
       324px  (375 phone)   4.2x     loose but holding
       309px  (360 phone)   8.7x     comes apart
       296px  (992-1199)    6.7x     comes apart

   So the two exceptions below are the two column widths where it measurably
   breaks, and nowhere else. Note the shape: justify is the DEFAULT and these
   only subtract from it, so if either query ever fails to match, what you get
   is the justify that was asked for rather than a gap in the styling. */
@media (min-width:992px) and (max-width:1199.98px){
  #contact .sticky_div p{ text-align:left; }
}
@media (max-width:375.98px){
  #contact .sticky_div p{ text-align:left; }
}

@media (max-width:767.98px){
  #contact{ padding:44px 0 48px; }
  #contact .container{ padding-left:18px; padding-right:18px; }
  #contact .wpcf7{ padding:20px 16px; border-radius:14px; }
  #contact .sticky_div p{ font-size:16px; }
  #contact .mathcaptcha_div{ justify-content:flex-start; margin-bottom:14px; }
  /* responsive.css:482 already centres the button on a phone; it just needs
     to not be 89px wide while it does it */
  #contact .wpcf7-submit,
  #contact .wpcf7-form-control.btn-primary{ width:100%; }
}

/* responsive.css:987 and :1101 both set .peachbg h2{font-size:30px}, which
   would flatten the clamp at exactly tablet widths. */
@media (min-width:481px) and (max-width:1024px){
  #contact .section-title h2{ font-size:clamp(30px, 3.6vw, 38px); }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #contact .wow{
    visibility:visible !important;
    animation:none !important;
  }
  #contact input.form-control,
  #contact textarea.form-control,
  #contact .form-select,
  #contact .wpcf7-submit{ transition:none; }
}