/* ==========================================================================
   Anika Global — Contact page
   File: wp-content/themes/anika-global/assets/css/contact.css

   Loaded only on pages using the "Contact" template (see functions.php).
   It reuses the theme's tokens — --ag-navy, --ag-blue, --ag-mist, --ag-line,
   --ag-shell, --ag-gutter, --ag-section-y, --ag-ease — and Nunito, so nothing
   here re-declares a colour or a typeface. Every value below is a layout or
   spacing rule specific to this page.
   ========================================================================== */

.agc-page{--agc-card-radius:8px;--agc-gap:24px}

/* --------------------------------------------------------------------------
   1. Page header
   -------------------------------------------------------------------------- */

.agc-hero{
  position:relative;
  background:var(--ag-navy);
  color:var(--ag-white);
  padding:clamp(56px,7vw,96px) var(--ag-gutter) clamp(60px,7vw,100px);
  overflow:hidden;
}
/* A soft brand-blue glow, the same device the homepage CTA uses. */
.agc-hero::after{
  content:"";position:absolute;top:-30%;right:-10%;
  width:min(620px,60vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(27,142,214,.28) 0%,rgba(27,142,214,0) 68%);
  pointer-events:none;
}
.agc-hero__inner{position:relative;z-index:1;max-width:var(--ag-shell);margin:0 auto}
.agc-hero__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.28em;line-height:1.6;
  text-transform:uppercase;color:var(--ag-blue);margin:0 0 20px;
}
.agc-hero__title{
  font-weight:800;font-size:clamp(38px,5.4vw,68px);line-height:1.04;
  letter-spacing:-.015em;margin:0;max-width:18ch;
}
.agc-hero__text{
  font-weight:300;font-size:clamp(16px,1.5vw,20px);line-height:1.65;
  color:var(--ag-on-dark);max-width:60ch;margin:24px 0 0;
}

/* --------------------------------------------------------------------------
   2. Contact detail cards
   -------------------------------------------------------------------------- */

.agc-cards{
  max-width:var(--ag-shell);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--agc-gap);
}
/* Pulled up so the row straddles the navy band and the page below it. */
.agc-cards--overlap{margin-top:calc(-1 * clamp(40px,5vw,72px));position:relative;z-index:2}

.agc-card{
  background:var(--ag-white);
  border:1px solid var(--ag-line);
  border-radius:var(--agc-card-radius);
  padding:30px 26px 32px;
  display:flex;flex-direction:column;gap:6px;
  transition:box-shadow .3s var(--ag-ease),transform .3s var(--ag-ease);
}
a.agc-card:hover{
  box-shadow:0 16px 44px rgba(18,48,71,.13);
  transform:translateY(-3px);
  color:inherit;
}
.agc-card__icon{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#E4F1FB;color:var(--ag-blue);margin-bottom:16px;flex:0 0 auto;
}
.agc-card__label{
  font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1.6;
  text-transform:uppercase;color:var(--ag-muted);margin:0;
}
.agc-card__value{
  font-weight:800;font-size:19px;line-height:1.35;color:var(--ag-navy);margin:0;
  word-break:break-word;
}
a.agc-card:hover .agc-card__value{color:var(--ag-blue)}
.agc-card__note{font-size:14px;line-height:1.6;color:var(--ag-body);margin:4px 0 0}

/* --------------------------------------------------------------------------
   3. Form + aside
   -------------------------------------------------------------------------- */

.agc-split{
  max-width:var(--ag-shell);margin:0 auto;
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,3.5vw,48px);
  align-items:start;
}

.agc-formcard{
  background:var(--ag-white);
  border:1px solid var(--ag-line);
  border-radius:var(--agc-card-radius);
  padding:clamp(28px,3.4vw,48px);
}
.agc-formcard__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.28em;line-height:1.6;
  text-transform:uppercase;color:var(--ag-blue);margin:0 0 14px;
}
.agc-formcard__title{
  font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1.15;
  letter-spacing:-.01em;color:var(--ag-navy);margin:0;
}
.agc-formcard__text{font-size:16px;line-height:1.7;color:var(--ag-body);margin:14px 0 0}
.agc-formcard__body{margin-top:30px}

/* -- Contact Form 7, scoped so it never leaks to other forms -------------- */

/* Both class sets are supported: .agc-* if you write your own form, and the
   .ag-form-* names used by the ready-made "Anika Global — Enquiry" form, so
   that form drops straight in without editing. */
.agc-formcard .agc-grid,
.agc-formcard .ag-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.agc-formcard .agc-full,
.agc-formcard .ag-form-full{grid-column:1/-1}
.agc-formcard .agc-grid > p,
.agc-formcard .ag-form-grid > p{margin:0}
.agc-formcard label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1.6;
  text-transform:uppercase;color:var(--ag-body);margin-bottom:9px;
}
.agc-formcard .wpcf7-form-control-wrap{display:block}
.agc-formcard input[type="text"],
.agc-formcard input[type="email"],
.agc-formcard input[type="tel"],
.agc-formcard input[type="url"],
.agc-formcard input[type="date"],
.agc-formcard select,
.agc-formcard textarea{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:15.5px;color:var(--ag-navy);
  background:var(--ag-mist);
  border:1px solid transparent;border-radius:8px;
  padding:14px 16px;min-height:50px;
  transition:background .2s ease,border-color .2s ease;
}
.agc-formcard textarea{min-height:150px;resize:vertical;line-height:1.6}
.agc-formcard input::placeholder,.agc-formcard textarea::placeholder{color:#8FA3B3}
.agc-formcard input:focus,.agc-formcard select:focus,.agc-formcard textarea:focus{
  outline:none;background:var(--ag-white);border-color:var(--ag-blue);
}
.agc-formcard input[type="file"]{
  width:100%;font-size:14px;color:var(--ag-body);padding:10px 0;
}
.agc-formcard input[type="file"]::file-selector-button{
  font-family:inherit;font-size:13px;font-weight:600;
  background:var(--ag-mist);color:var(--ag-navy);
  border:1px solid var(--ag-line);border-radius:100px;
  padding:9px 18px;margin-right:14px;cursor:pointer;
}
.agc-formcard input[type="submit"],
.agc-formcard .wpcf7-submit{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;background:var(--ag-blue);color:var(--ag-white);border:0;
  font-family:inherit;font-weight:600;font-size:14px;letter-spacing:.02em;
  padding:17px 36px;border-radius:100px;cursor:pointer;
  transition:background .3s ease,transform .3s ease;
}
.agc-formcard input[type="submit"]:hover,
.agc-formcard .wpcf7-submit:hover{background:var(--ag-blue-hover);transform:translateY(-2px)}
.agc-formcard .agc-actions,
.agc-formcard .ag-form-actions{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:4px;
}
.agc-formcard .agc-note,
.agc-formcard .ag-form-note{font-size:13.5px;line-height:1.6;color:var(--ag-body);max-width:44ch}
/* --ag-muted (#7A8B99) is 3.51:1 on white — under AA for text this size.
   --ag-body (#51677A) is 5.88:1 and reads as the same quiet grey. */
.agc-formcard .wpcf7-spinner{margin:0 0 0 6px}
.agc-formcard .wpcf7-not-valid-tip{color:#C0392B;font-size:12.5px;margin-top:7px}
.agc-formcard .wpcf7-response-output{
  grid-column:1/-1;margin:24px 0 0!important;
  border:1px solid var(--ag-line)!important;border-radius:8px;
  padding:14px 18px!important;font-size:14.5px;line-height:1.6;color:var(--ag-navy);
}
.agc-formcard form.sent .wpcf7-response-output{border-color:#2F6B1D!important;background:#EEF7E6}
.agc-formcard form.invalid .wpcf7-response-output,
.agc-formcard form.failed .wpcf7-response-output{border-color:#C0392B!important;background:#FDEEEC}
.agc-form-missing{
  font-size:15px;line-height:1.7;color:var(--ag-body);margin:0;
  background:var(--ag-mist);border-radius:8px;padding:20px 22px;
}
.agc-form-missing code{background:rgba(18,48,71,.08);padding:2px 7px;border-radius:4px;font-size:13.5px}

/* -- Aside ---------------------------------------------------------------- */

.agc-aside{display:flex;flex-direction:column;gap:var(--agc-gap);position:sticky;top:calc(var(--ag-header-h,76px) + 24px)}

.agc-panel{
  background:var(--ag-navy);color:var(--ag-white);
  border-radius:var(--agc-card-radius);padding:32px 30px 34px;
}
.agc-panel__title{
  font-size:12px;font-weight:600;letter-spacing:.28em;line-height:1.6;
  text-transform:uppercase;color:var(--ag-blue);margin:0 0 22px;
}
.agc-steps{list-style:none;margin:0;padding:0;counter-reset:agc}
.agc-steps li{
  counter-increment:agc;position:relative;padding-left:44px;
  padding-bottom:24px;
}
.agc-steps li:last-child{padding-bottom:0}
.agc-steps li::before{
  content:counter(agc,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-weight:700;font-size:14px;color:var(--ag-blue);letter-spacing:.04em;
}
/* Connector line between the numbers */
.agc-steps li:not(:last-child)::after{
  content:"";position:absolute;left:9px;top:24px;bottom:6px;
  width:1px;background:rgba(255,255,255,.16);
}
.agc-steps h3{font-weight:700;font-size:16.5px;line-height:1.4;margin:0 0 5px}
.agc-steps p{font-size:14px;line-height:1.65;color:var(--ag-on-dark);margin:0}

.agc-hours{
  background:var(--ag-white);border:1px solid var(--ag-line);
  border-radius:var(--agc-card-radius);padding:28px 26px;
}
.agc-hours__title{
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;letter-spacing:.28em;line-height:1.6;
  text-transform:uppercase;color:var(--ag-muted);margin:0 0 18px;
}
.agc-hours__title svg{flex:0 0 auto;color:var(--ag-blue)}
.agc-hours__list{list-style:none;margin:0;padding:0}
.agc-hours__list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:15px;line-height:1.6;color:var(--ag-body);
  padding:9px 0;border-bottom:1px solid var(--ag-line);
}
.agc-hours__list li:last-child{border-bottom:0;padding-bottom:0}
.agc-hours__list li:first-child{padding-top:0}
.agc-hours__list b{font-weight:700;color:var(--ag-navy);white-space:nowrap}

/* --------------------------------------------------------------------------
   4. Map
   -------------------------------------------------------------------------- */

.agc-map__frame{
  position:relative;max-width:var(--ag-shell);margin:0 auto;
  aspect-ratio:16/6;min-height:320px;
  border-radius:var(--agc-card-radius);overflow:hidden;
  border:1px solid var(--ag-line);background:var(--ag-mist);
}
.agc-map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.agc-map__empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;
  background:
    linear-gradient(135deg,rgba(27,142,214,.05) 0%,rgba(18,48,71,.05) 100%),
    var(--ag-mist);
}
.agc-map__empty p{font-size:15px;line-height:1.7;color:var(--ag-body);margin:0;max-width:46ch}
.agc-map__pin{color:var(--ag-blue)}

/* --------------------------------------------------------------------------
   5. Closing strip
   -------------------------------------------------------------------------- */

.agc-strip{
  background:var(--ag-blue-dark);color:var(--ag-white);
  padding:clamp(48px,6vw,72px) var(--ag-gutter);
}
.agc-strip__inner{
  max-width:var(--ag-shell);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
}
.agc-strip__title{
  font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1.2;
  letter-spacing:-.01em;margin:0;
}
.agc-strip__text{font-size:16px;line-height:1.65;color:rgba(255,255,255,.86);margin:10px 0 0;max-width:52ch}
.agc-strip__actions{display:flex;flex-wrap:wrap;gap:14px}
.agc-strip .ag-btn{background:var(--ag-white);color:var(--ag-navy)}
.agc-strip .ag-btn:hover{background:var(--ag-mist);color:var(--ag-navy)}
.agc-btn-outline{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.55);color:var(--ag-white);
  font-weight:600;font-size:14px;letter-spacing:.02em;
  padding:16px 30px;border-radius:100px;
  transition:border-color .3s ease,background .3s ease;
}
.agc-btn-outline:hover{border-color:var(--ag-white);background:rgba(255,255,255,.1);color:var(--ag-white)}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1100px){
  .agc-cards{grid-template-columns:repeat(2,1fr)}
  .agc-cards--overlap{margin-top:calc(-1 * clamp(32px,4vw,56px))}
  .agc-split{grid-template-columns:1fr;gap:32px}
  .agc-aside{position:static;flex-direction:row;flex-wrap:wrap}
  .agc-panel,.agc-hours{flex:1 1 320px}
}

@media (max-width:768px){
  .agc-hero__title{max-width:none}
  .agc-formcard .agc-grid,
  .agc-formcard .ag-form-grid{grid-template-columns:1fr}
  .agc-map__frame{aspect-ratio:4/3;min-height:0}
  .agc-strip__inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px){
  .agc-cards{grid-template-columns:1fr}
  .agc-cards--overlap{margin-top:calc(-1 * 28px)}
  .agc-card{padding:24px 22px 26px}
  .agc-aside{flex-direction:column}
  .agc-strip__actions{width:100%;flex-direction:column}
  .agc-strip__actions .ag-btn,
  .agc-strip__actions .agc-btn-outline{width:100%;justify-content:center}
}