/* ---------------------------------------------------------------------------
   hc-advertise-v2.css
   The add-your-business page, v2.

   Colours are literal here on purpose. --accent-dark resolves to #E5B23A from
   :root in hc-theme.css and to #D8A422 from body.hc-v2 in hc-shell-v2.css, so
   a page that uses the variable looks different depending on which classes
   happen to be on the body. The amber in here is always #F2C14E with #D8A422
   for the script, matching the news and events pages.

   Type is #000 throughout. No opacity on text, because opacity on black is
   just grey by another name.
--------------------------------------------------------------------------- */

.adv2{padding:48px 0 76px;color:#000;background:#fff}
.adv2 .wrap{width:min(1320px,calc(100% - 40px));margin:0 auto}

/* Zero specificity, so a button's own colour rule still wins. A plain
   ".adv2 a" is (0,1,1) and quietly beats every single-class rule. */
:where(.adv2) a{color:inherit;text-decoration:none}

/* ---------- head ---------- */

.adv2-head{text-align:center;max-width:780px;margin:0 auto 30px}
.adv2-script{margin:0 0 6px;font-family:'Caveat',cursive;font-weight:600;
  font-size:2rem;line-height:1;color:#D8A422}
.adv2-head h1{margin:0 0 14px;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.04;
  letter-spacing:-.035em;font-weight:800;color:#000}
.adv2-sub{margin:0;font-size:1.0625rem;line-height:1.55;color:#000}

.adv2-need{max-width:780px;margin:0 auto 40px;border:1px solid #E5E7EB;
  border-radius:20px;background:#FBFAF8;padding:20px 26px;text-align:center;
  font-size:1rem;line-height:1.5;color:#000}
.adv2-need b{font-weight:800}

/* ---------- layout ---------- */

.adv2-grid{display:flex;gap:48px;align-items:flex-start}
.adv2-form{flex:999 1 720px;min-width:0;display:flex;flex-direction:column;gap:42px}
.adv2-side{flex:1 1 340px;min-width:0;max-width:400px;
  display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}

/* ---------- alerts ---------- */

.adv2-alert{margin:0 0 26px;border-radius:18px;padding:18px 22px;
  font-size:1rem;line-height:1.5;color:#000}
.adv2-alert.ok{background:#F2C14E}
.adv2-alert.err{background:#FDECEC;border:1px solid #F5C2C2}
.adv2-alert b{display:block;font-weight:800;margin-bottom:6px}
.adv2-alert ul{margin:8px 0 0;padding-left:20px}
.adv2-alert li{margin-bottom:4px}

/* ---------- fieldsets ---------- */

.adv2-fs{border:0;margin:0;padding:0;min-width:0}
.adv2-lg{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;
  padding-bottom:12px;border-bottom:2px solid #0F1424}
.adv2-lg h2{margin:0;font-size:1.375rem;letter-spacing:-.03em;font-weight:800;color:#000}
.adv2-lg span{font-family:'Caveat',cursive;font-weight:600;font-size:1.375rem;
  line-height:1;color:#D8A422}

.adv2-stack{display:flex;flex-direction:column;gap:22px}
.adv2-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.adv2-span2{grid-column:span 2}

/* ---------- controls ---------- */

/* These base rules are wrapped in :where() so they carry no specificity at
   all. A plain ".adv2 label" is (0,1,1) and silently beats every single-class
   component rule like .adv2-pick (0,1,0), which is how the styled upload
   button ended up rendering as a black block and the social prefix fields
   ended up with two borders. :where() means the component always wins. */
:where(.adv2) label{display:block;font-size:.875rem;font-weight:800;margin-bottom:8px;color:#000}
.adv2-req{color:#D8A422}

:where(.adv2) :where(input[type=text],input[type=email],input[type=tel],
  input[type=number],select,textarea){
  width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem;color:#000;
  background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:15px 18px;outline:0}
:where(.adv2) :where(input,textarea)::placeholder{color:#767676;opacity:1}
:where(.adv2) textarea{resize:vertical}
:where(.adv2) :where(input,select,textarea):focus{border-color:#0F1424;
  box-shadow:0 0 0 3px rgba(242,193,78,.45)}
:where(.adv2) select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:18px;
  padding-right:48px}

.adv2-hint{margin:7px 0 0;font-size:.84375rem;line-height:1.45;color:#000}
.adv2-hint b{font-weight:800}

/* The platform sits inside the control, so there is nothing to guess about
   whether they wanted a handle or a whole link. */
.adv2-pre{display:flex;align-items:stretch;border:1px solid #E5E7EB;
  border-radius:14px;overflow:hidden;background:#fff}
.adv2-pre b{flex:none;display:flex;align-items:center;padding:0 2px 0 18px;
  background:#F3F2EE;font-size:.9375rem;font-weight:700;white-space:nowrap;color:#000}
.adv2-pre input{border:0;border-radius:0;padding-left:8px}
.adv2-pre:focus-within{border-color:#0F1424;box-shadow:0 0 0 3px rgba(242,193,78,.45)}
.adv2-pre:focus-within input{box-shadow:none}

/* ---------- category combo ---------- */

.adv2-combo{position:relative}
.adv2-combo-panel{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);
  max-height:280px;overflow:auto;background:#fff;border:1px solid #E5E7EB;
  border-radius:14px;box-shadow:0 18px 40px rgba(15,20,36,.14);padding:6px}
.adv2-combo-panel button{display:block;width:100%;text-align:left;border:0;
  background:none;font-family:inherit;font-size:.9375rem;font-weight:600;color:#000;
  padding:11px 14px;border-radius:10px;cursor:pointer}
.adv2-combo-panel button:hover,.adv2-combo-panel button:focus{background:#F3F2EE;outline:0}
.adv2-combo-other{border-top:1px solid #E5E7EB !important;border-radius:0 0 10px 10px !important;
  margin-top:4px}

/* ---------- photo tiles ---------- */

.adv2-drop{border:2px dashed #E5E7EB;border-radius:20px;background:#FBFAF8;padding:24px}
.adv2-drop.is-req{border-color:#D8A422;background:#FFFBF0}
.adv2-drop.drag{border-color:#0F1424;background:#F3F2EE}
.adv2-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:#F3F2EE}
.adv2-drop.is-req .adv2-ico{background:#F2C14E}
.adv2-ico svg{width:21px;height:21px}

/* The browser's own file button cannot be styled, so it is taken out of the
   layout and a label is dressed up in its place. Hidden this way rather than
   with display:none, because display:none would take it out of the tab order
   and off the form. */
.adv2-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.adv2-pick{display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;
  height:46px;padding:0 22px;border-radius:999px;border:0;
  background:#0F1424;color:#fff;font-family:inherit;font-size:.9375rem;
  font-weight:800;line-height:1;cursor:pointer;transition:background .14s ease}
.adv2-pick:hover{background:#000}
.adv2-pick svg{width:17px;height:17px;flex:none}
.adv2-file:focus-visible+.adv2-pick{box-shadow:0 0 0 3px rgba(242,193,78,.9)}

/* once something is picked, the button offers to swap it instead */
.adv2-pick .swap{display:none}
.adv2-drop.has-file .adv2-pick .pickword{display:none}
.adv2-drop.has-file .adv2-pick .swap{display:inline}

/* Chosen photos, each with its own remove button. Names are written with
   textContent, never innerHTML: a file can be called anything at all and it
   is about to be printed onto the page. */
.adv2-thumbs{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 0}
.adv2-thumbs:empty{display:none}

.adv2-thumb{position:relative;width:108px}
.adv2-thumb img{display:block;width:108px;height:81px;object-fit:cover;
  border-radius:12px;border:1px solid #E5E7EB;background:#fff}
.adv2-thumb-name{display:block;margin-top:6px;font-size:.75rem;font-weight:700;color:#000;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.adv2-thumb-x{position:absolute;top:-9px;right:-9px;width:30px;height:30px;padding:0;
  border:2px solid #fff;border-radius:999px;background:#0F1424;color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(15,20,36,.32)}
.adv2-thumb-x:hover{background:#B3261E}
.adv2-thumb-x svg{width:13px;height:13px}
/* 30px reads better on the corner of a thumbnail, but the thing you press is
   the full 44px. */
.adv2-thumb-x::after{content:"";position:absolute;inset:-7px}

.adv2-note{display:none;margin:14px 0 0;font-size:.84375rem;font-weight:700;color:#000;
  border-radius:12px;padding:11px 15px;background:#FDECEC;border:1px solid #F5C2C2}
.adv2-note.show{display:block}
.adv2-note.busy{background:#F3F2EE;border-color:#E5E7EB}

.adv2-cover{display:flex;gap:26px;align-items:flex-start}
.adv2-cover-col{flex:1;min-width:0}
.adv2-safe{flex:none;width:240px}
/* The band that survives the crop, drawn to scale: a 16:9 photo shows roughly
   its middle half once the page puts it in a wide strip. */
.adv2-safe-box{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;
  overflow:hidden;background:#E8E4DA}
.adv2-safe-box i{position:absolute;left:0;right:0;height:24.5%;background:#0F1424;opacity:.55}
.adv2-safe-box i:first-child{top:0}
.adv2-safe-box i:last-child{bottom:0}
.adv2-safe-box span{position:absolute;left:0;right:0;top:24.5%;height:51%;
  border-top:2px solid #F2C14E;border-bottom:2px solid #F2C14E;
  display:grid;place-items:center}
.adv2-safe-box b{font-size:.75rem;font-weight:800;background:#F2C14E;color:#000;
  padding:4px 10px;border-radius:999px}

.adv2-pics{margin-top:22px;display:grid;grid-template-columns:1fr 1.45fr;gap:22px}
.adv2-pics .adv2-drop:first-child{text-align:center}
.adv2-pics .adv2-drop:first-child .adv2-ico{display:inline-grid}
.adv2-pics .adv2-drop:first-child .adv2-thumbs{justify-content:center}
.adv2-gal{display:flex;align-items:center;gap:22px}
.adv2-gal .adv2-ico{flex:none}
.adv2-gal>div{flex:1;min-width:0}

/* ---------- submit ---------- */

.adv2-submit{display:flex;align-items:center;gap:24px;padding-top:2px;flex-wrap:wrap}
.adv2-btn{height:60px;padding:0 10px 0 30px;border:0;border-radius:999px;
  background:#F2C14E;color:#000;font-family:inherit;font-size:1.0625rem;font-weight:800;
  cursor:pointer;display:inline-flex;align-items:center;gap:16px;
  transition:background .14s ease}
.adv2-btn:hover{background:#D8A422}
.adv2-btn:disabled{cursor:default;background:#E5E7EB}
.adv2-btn i{width:44px;height:44px;flex:none;border-radius:999px;background:#fff;
  display:grid;place-items:center;font-style:normal}
.adv2-btn i svg{width:17px;height:17px}
.adv2-submit p{margin:0;font-size:.90625rem;line-height:1.5;max-width:340px;color:#000}

/* ---------- sidebar ---------- */

.adv2-card{border:1px solid #E5E7EB;border-radius:24px;padding:28px 30px;color:#000}
.adv2-card.tint{background:#FBFAF8}
.adv2-card h2{margin:0 0 14px;font-size:1.25rem;letter-spacing:-.03em;font-weight:800;color:#000}
.adv2-card ul,.adv2-card ol{margin:0;padding-left:20px;font-size:.96875rem;line-height:1.6}
.adv2-card li{margin-bottom:10px}
.adv2-card li:last-child{margin-bottom:0}

/* ---------- narrow ---------- */

@media (max-width:980px){
  .adv2-grid{flex-direction:column;gap:36px}
  .adv2-side{position:static;max-width:none;width:100%;
    flex-direction:row;flex-wrap:wrap}
  .adv2-side .adv2-card{flex:1 1 300px}
}

@media (max-width:820px){
  .adv2-cover{flex-direction:column;gap:20px}
  .adv2-safe{width:100%;max-width:300px}
  .adv2-pics{grid-template-columns:1fr}
  .adv2-gal{align-items:flex-start}
}

@media (max-width:640px){
  .adv2{padding:32px 0 56px}
  .adv2 .wrap{width:min(1320px,calc(100% - 32px))}
  .adv2-two{grid-template-columns:1fr}
  /* A span-2 item on a one-column grid does not just span, it CREATES a
     second column, which put the social fields back side by side at phone
     width however narrow the screen got. */
  .adv2-span2{grid-column:auto}
  .adv2-form{gap:34px}
  .adv2-need{text-align:left}
  .adv2-side{flex-direction:column}
  .adv2-submit{gap:16px}
  .adv2-btn{width:100%;justify-content:space-between;padding:0 10px 0 26px}
  .adv2-submit p{max-width:none}
  /* Stacked, because linkedin.com/company/ beside the box left about 150px
     to type a name into. */
  .adv2-pre{display:block}
  .adv2-pre b{display:block;width:100%;box-sizing:border-box;padding:9px 16px;
    font-size:.8125rem;border-bottom:1px solid #E5E7EB}
  .adv2-pre input{padding:13px 16px}
}