/* hosteasy/contact-page.css — PAGE-specific CSS for the Host Easy "Contact Us"
   page (the LIVE https://www.hosteasy.in/contact-us.php).
   =========================================================================
   Loads the shared design system first (tokens + base + header/nav/footer via
   common.css → brand-tokens.css), then styles ONLY this page's sections — every
   selector hangs off the LIVE page's own class names / tags (no invented class):
     .skip-link                       → keyboard skip-to-content (a11y)
     main / .content_area / .content  → the centred reading column (intro + form)
     .content > h1 / .specialParaStyl → the "Contact Us" hero + intro/note lead
     .contacts                        → the three-card contact grid
       .contacts_child                    one card (Contact / Support / Grievance)
       .contacts_box_top (h3)             card header strip
       .contacts_box (img + copy)         card body
       .contacts_box_bottom               button / legal footer of a card
     .content h2                      → the "Send Enquiry" section heading
     .form / .form_row / .frm_rw_50   → the enquiry form shell + rows
       .form_clmn, label, input,          field column, labels and controls
       textarea, #newButton               the gold submit button
   CSS-ONLY design: never a raw hex — every value is a --ho-* token from
   brand-tokens.css. Production pulls the tokens + chrome from common.css /
   brand-tokens.css; the design lives entirely in this one page stylesheet. */
@import "common.css?v=2";

/* contact-page rhythm — key every band to the SAME slightly-smaller, EVEN vertical
   step the home page uses (home-page.css line 15). This sheet loads only on the
   contact page, so scoping a smaller --ho-s-section here tightens the gaps above/
   below the intro, the 3-card grid and the enquiry form to match home's rhythm
   without touching the global token elsewhere (req edit contact-page — spacing). */
:root{--ho-s-section:clamp(34px,4.6vw,66px)}

/* ── skip-link (visually hidden until focused) ─────────────────────────────── */
.skip-link{position:absolute;left:var(--ho-s-2);top:-48px;z-index:80;
  background:var(--ho-card);color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
  font-size:var(--ho-fs-sm);padding:var(--ho-s-2) var(--ho-s-4);border:1px solid var(--ho-brand);
  border-radius:var(--ho-r-sm);box-shadow:var(--ho-e-2);transition:top var(--ho-dur) var(--ho-ease)}
.skip-link:focus{top:var(--ho-s-2)}

/* ── page shell ────────────────────────────────────────────────────────────── */
/* top pad dropped to 0 so the tinted hero band below sits FLUSH under the nav
   (home does the same — the hero hugs the nav). Bottom trimmed --ho-s-8 → --ho-s-5:
   the footer already carries margin-top:--ho-s-section (common.css line 99), so a
   full step here doubled the gap before it — let the footer own the separation
   (home-page.css line 118-121). */
main{display:block;max-width:1080px;margin:0 auto;
  padding:0 var(--ho-s-5) var(--ho-s-5)}

/* ── intro block — .content_area > .content carries the h1 + lead ──────────── */
.content_area{margin:0}
.content_area .content{max-width:760px;margin:0 auto}

/* HERO BAND — the FIRST content_area carries the H1 + intro on the same soft
   --ho-hero-grad band the home hero uses (home-page.css line 18). Answering the edit
   ask ("full width not used why?"): this band lives INSIDE <main> (max-width:1080,
   centred), so a plain grad only painted main's 1080 column — never the browser edge,
   which is what read as "not full width". It now FULL-BLEEDs to the viewport exactly
   like home's TOP-LEVEL .banner does, via margin:calc(50% - 50vw) on each side (the
   negative margins self-correct to reach both viewport edges at any width; NOT
   width:100vw, which overflows past the scrollbar). Vertical padding only — the
   horizontal gutters move to the inner .content so the copy stays in the page column.
   margin-bottom stays 0 so the .contacts grid's own --ho-s-section top margin is the
   single even step below it (no doubling). Scoped :first-of-type, so the 'Send Enquiry'
   content_area is untouched. */
main > .content_area:first-of-type{background:var(--ho-hero-grad);
  border-bottom:1px solid var(--ho-sky-100);
  margin:0 calc(50% - 50vw);
  padding:var(--ho-s-section) 0 calc(var(--ho-s-section) + var(--ho-s-2))}
/* keep the H1 + lead in the SAME centred 1080 column as main so they line up with the
   cards below — this mirrors home's .banner (full-bleed grad) + .banner_content
   (capped, centred) split. 1080 matches main's own cap exactly (box-sizing:border-box
   is global), so the hero copy and the card grid share one measure and one centre. */
main > .content_area:first-of-type .content{max-width:1080px;margin-inline:auto;
  padding-inline:var(--ho-s-5)}

.content_area .content > h1{font-size:var(--ho-fs-hero);line-height:var(--ho-lh-tight);
  letter-spacing:var(--ho-tracking-tight);color:var(--ho-hero-ink);font-weight:var(--ho-fw-black);
  text-align:center;margin:0 auto var(--ho-s-4)}

/* intro lead — match the home lead (home-page.css line 32-33): --ho-sky-800 on the
   tinted band, LEFT-aligned (ragged right, cleaner than centred for a full-width
   multi-line sentence) and widened to the hero measure. */
.content_area .content .specialParaStyl{color:var(--ho-sky-800);font-size:var(--ho-fs-md);
  line-height:1.75;text-align:left;margin:0;max-width:none}
.content_area .content .specialParaStyl b{color:var(--ho-ink)}
/* the "Note :" line reads as a quiet tinted callout inside the same paragraph */
.content_area .content .specialParaStyl br + b{color:var(--ho-brand-text)}

/* ── the three contact cards (.contacts → .contacts_child) ─────────────────── */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ho-s-6);
  align-items:stretch;margin:var(--ho-s-section) 0 var(--ho-s-8)}

.contacts_child{display:flex;flex-direction:column;background:var(--ho-card);
  border:1px solid var(--ho-line);border-radius:var(--ho-r-xl);overflow:hidden;
  box-shadow:var(--ho-e-2);position:relative;
  transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.contacts_child:hover{box-shadow:var(--ho-e-3);transform:translateY(-3px);border-color:var(--ho-sky-300)}

/* header strip — the h3 title on a pale cyan wash with a brand top edge */
.contacts_box_top{background:var(--ho-hero-grad);padding:var(--ho-s-5) var(--ho-s-6);
  border-bottom:1px solid var(--ho-sky-200)}
.contacts_box_top h3{margin:0;font-size:var(--ho-fs-lg);font-weight:var(--ho-fw-black);
  color:var(--ho-hero-ink);letter-spacing:var(--ho-tracking-tight);line-height:var(--ho-lh-snug)}

/* card body — icon then copy */
.contacts_box{flex:1 1 auto;padding:var(--ho-s-6);color:var(--ho-body);
  font-size:var(--ho-fs-base);line-height:1.7}
.contacts_box img{display:block;width:56px;height:56px;object-fit:contain;
  margin:0 0 var(--ho-s-4);padding:var(--ho-s-3);background:var(--ho-sky-50);
  border:1px solid var(--ho-sky-100);border-radius:var(--ho-r-lg)}
.contacts_box strong{color:var(--ho-ink);font-weight:var(--ho-fw-bold)}
.contacts_box p{margin:var(--ho-s-2) 0 0}
.contacts_box a{color:var(--ho-link);font-weight:var(--ho-fw-medium);word-break:break-word}
.contacts_box a:hover{color:var(--ho-link-d)}

/* card footer — Create-Ticket button / grievance legal block */
.contacts_box_bottom{margin-top:auto;padding:0 var(--ho-s-6) var(--ho-s-6)}
/* the grievance-officer details sit a step below the card's body copy (req e87847).
   Measured before the change: 13.9px here against 17.9px for .specialParaStyl, so this
   block was already the smallest text on the page; --ho-fs-xs is the only step below and
   there is nothing smaller in the scale. The <b> labels stay the same size as their
   values so the label/value pairing still reads as pairs. */
.contacts_box_bottom p{margin:0;color:var(--ho-body);font-size:var(--ho-fs-xs);line-height:1.75}
.contacts_box_bottom p b{color:var(--ho-ink);font-weight:var(--ho-fw-semi)}
.contacts_box_bottom a{text-decoration:none}

/* the Create-Ticket button — the ONE gold primary action on this page */
.contacts_box_bottom button{display:inline-flex;align-items:center;justify-content:center;
  width:100%;cursor:pointer;font:inherit;font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-base);
  color:var(--ho-gold-ink);background:var(--ho-gold-grad);border:1px solid var(--ho-gold-border);
  border-radius:var(--ho-r-pill);padding:var(--ho-s-3) var(--ho-s-5);box-shadow:var(--ho-e-1);
  transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease)}
.contacts_box_bottom button:hover{box-shadow:var(--ho-e-2);transform:translateY(-1px)}
.contacts_box_bottom button:active{transform:translateY(0)}
/* the live serves stray <br>s after the cards — flow layout owns spacing */
.contacts + .content_area br,.contacts_child > br{display:none}

/* Grievance (Legal) card (3rd) — its .contacts_box body carries ONLY the icon
   (no copy paragraph like Contact/Support), so the stretched flex body opened
   a tall empty gap above the legal details. Don't let that near-empty body
   grow: drop the stray <br> under the icon and pull the legal block up so the
   icon + details read as one tight group at the top of the card. */
.contacts_child:nth-child(3) .contacts_box{flex:0 0 auto}
.contacts_child:nth-child(3) .contacts_box > br{display:none}
.contacts_child:nth-child(3) .contacts_box_bottom{margin-top:0}

/* ── enquiry form — .content_area > .content > h2 + .form ──────────────────── */
.content_area .content > h2{font-size:var(--ho-fs-xl);font-weight:var(--ho-fw-black);
  color:var(--ho-ink);letter-spacing:var(--ho-tracking-tight);line-height:var(--ho-lh-snug);
  text-align:center;margin:0 0 var(--ho-s-6)}

.form{background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-xl);
  box-shadow:var(--ho-e-2);padding:var(--ho-s-7) var(--ho-s-6)}

.form label{display:block;font-weight:var(--ho-fw-semi);font-size:var(--ho-fs-sm);
  color:var(--ho-ink);margin:0 0 var(--ho-s-2)}
.form label font{color:var(--ho-danger)!important;font-size:var(--ho-fs-sm)!important;padding-left:var(--ho-s-1)}

.form_row{margin:0 0 var(--ho-s-5)}
.form_clmn{display:block}

.form input[type=text],.form textarea{width:100%;font:inherit;font-size:var(--ho-fs-base);
  color:var(--ho-ink);background:var(--ho-surface);border:1px solid var(--ho-line-2);
  border-radius:var(--ho-r);padding:var(--ho-s-3) var(--ho-s-4);
  transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.form textarea{resize:vertical;line-height:1.6}
.form input[type=text]::placeholder,.form textarea::placeholder{color:var(--ho-muted)}
.form input[type=text]:focus,.form textarea:focus{outline:none;border-color:var(--ho-brand);
  box-shadow:0 0 0 3px var(--ho-brand-soft)}

/* per-field message slots — tighten the empty gap the live JS fills on error */
.form [id^="message-"]{color:var(--ho-danger);font-size:var(--ho-fs-xs);margin-top:var(--ho-s-1)}

/* submit — the gold primary action */
.form #newButton{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font:inherit;font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-md);color:var(--ho-gold-ink);
  background:var(--ho-gold-grad);border:1px solid var(--ho-gold-border);border-radius:var(--ho-r-pill);
  padding:var(--ho-s-3) var(--ho-s-8);box-shadow:var(--ho-e-1);
  transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease)}
.form #newButton:hover{box-shadow:var(--ho-e-2);transform:translateY(-1px)}
.form #newButton:active{transform:translateY(0)}
/* the submit's own row shouldn't carry the field bottom-gap */
.form .form_row:last-child{margin-bottom:0}

/* ── responsive (1024 / 640 tiers) ─────────────────────────────────────────── */
/* the grievance details step UP on larger screens (req 681afb, correcting the flat
   --ho-fs-xs I shipped in e87847 — that request's wording read two ways and I picked the
   wrong one). Small where it earns its keep: on a phone the card is narrow and these four
   label/value lines stack tightly. 13.9px from 1024 up, 12.4px below, 11.3px on a phone.
   1024 because this sheet already breaks there and it is a canonical tier — no new
   breakpoint invented for four lines of text.
   SIZE IS --ho-fs-md ON REQUEST (req 3d0a28, given as exact CSS): the grievance details
   read at the same size as the card's body copy from 1024 up. I had defaulted to
   --ho-fs-sm and said why — a legal footnote reading as prominently as the main text is
   unusual — and was overruled, which is the user's call on the user's page. Note the
   step at the boundary is large by construction: ~17.5px above 1024, 11.9px below. */
@media (min-width:1024px){
  .contacts_box_bottom p{font-size:var(--ho-fs-md)}
}
@media (max-width:1024px){
  .contacts{grid-template-columns:repeat(2,1fr);gap:var(--ho-s-5)}
}
@media (max-width:640px){
  main{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)}
  /* the calc(50% - 50vw) full-bleed already reaches both edges at every width — only
     the inner copy gutter narrows in step with main's padding */
  main > .content_area:first-of-type .content{padding-inline:var(--ho-s-4)}
  .contacts{grid-template-columns:1fr;gap:var(--ho-s-4)}
  .form{padding:var(--ho-s-6) var(--ho-s-5)}
}
@media (max-width:400px){
  main{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
  main > .content_area:first-of-type .content{padding-inline:var(--ho-s-3)}
}