/**
 * Theme Name:     Growhub Child
 * Author:         ThemePul
 * Template:       growhub
 * Text Domain:	   growhub-child
 * Description:    Growhub-Business Consulting WordPress Theme. AGFY brand layer.
 */

/* ==========================================================================
   AGFY brand layer — growhub-child/style.css

   Deliberately minimal. The theme's own layout, spacing and typography are left
   alone. This file only does two things:
     1. Recolours the theme's palette to AGFY's (white base, gold accent,
        charcoal as the dark).
     2. Fixes places where that recolour would otherwise break — gold-on-gold
        text, and the header logo which the theme ships unconstrained.

   Palette source: agfytech.com's own Webflow tokens. See Build/BRAND.md.
   ========================================================================== */

:root {
  --thm-color:    #D2AF71;   /* gold — replaces the theme's #0C6460 */
  --black-color:  #1A1A1A;   /* charcoal — replaces #1A3841 */
  --body-color:   #5D6C7B;
  --white-color:  #FFFFFF;
  --border-color: #E8E2D8;
  --bg-color:     #FAF8F4;
  --box-shadow:   0 4px 24px 0 rgba(26, 26, 26, .06);

  --gold-deep:    #BE9A57;   /* hover/press */
  --gold-tint:    #F6EFE2;
  --muted-color:  #8A939C;
}

/* --------------------------------------------------------------------------
   Contrast fixes. Gold is a mid-tone: #D2AF71 against white is 2.08:1 and
   white text on gold is also 2.08:1. Charcoal on gold is 8.38:1, so anywhere
   the theme puts white text on what is now a gold fill, the label flips to
   charcoal. This is a correction, not a restyle.
   -------------------------------------------------------------------------- */
.theme-btn,
.theme-btn:visited,
input[type="submit"],
button[type="submit"] {
  color: var(--black-color);
}
.theme-btn:hover,
.theme-btn:focus-visible,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--black-color);
}

/* --------------------------------------------------------------------------
   Hardcoded colours in the parent theme and core plugin. These don't read
   --thm-color, so retinting the variable never reached them. Located by
   auditing computed styles on the built page.
   -------------------------------------------------------------------------- */

/* growhub-core custom-widgets.css:1853 — team card scrim */
.team-contents::after { background: rgba(210, 175, 113, .29); }

/* :3601 — testimonial stars were #FFB422, an orange from no part of the palette */
.testimonial-rating-box { color: var(--gold-deep); background: var(--gold-tint); }

/* :5570 — mobile logo plate. Transparent, not charcoal: the lockup has a
   charcoal wordmark and a dark plate would erase half the logo. */
.growhub-menu-wrapper-bg .mobile-logo { background: transparent !important; }

/* :5589 — video play button; the parent sets the glyph white, 2.08:1 on gold */
.growhub-video-button-wrapper-about .icon span {
  background: var(--thm-color);
  border-color: var(--thm-color);
  color: var(--black-color);
}

/* Select options and the CF7 controls the theme leaves on the stock grey */
select option,
.wpcf7-form-control { color: var(--black-color); }

/* --------------------------------------------------------------------------
   Logo sizing. The header widget ships the logo unconstrained — it rendered
   at 754px wide. The AGFY lockup is 3.33:1, so 46px tall lands at ~153px.
   -------------------------------------------------------------------------- */
.navbar .site-branding img,
.site-branding > a > img { height: 46px; width: auto; max-width: 100%; }
.header-sidebar-logo.site-branding img { height: 44px; width: auto; }
.growhub-menu-wrapper .mobile-logo img { height: 40px; width: auto; }

/* --------------------------------------------------------------------------
   Enquiry popup. Every "Get a Free Consultation" CTA opens this rather than
   sending the visitor to their mail client.
   -------------------------------------------------------------------------- */
.agfy-modal[hidden] { display: none; }
.agfy-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.agfy-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 26, 26, .58);
}
.agfy-modal__panel {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  background: var(--white-color);
  border-radius: 14px;
  padding: 38px 34px 30px;
  box-shadow: 0 24px 70px rgba(26, 26, 26, .28);
}
.agfy-modal__close {
  position: absolute; top: 12px; right: 14px;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 30px; line-height: 1;
  color: var(--muted-color);
  cursor: pointer;
}
.agfy-modal__close:hover { background: var(--gold-tint); color: var(--black-color); }
.agfy-modal__eyebrow {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep);
}
.agfy-modal__title { margin: 0 0 8px; font-size: 27px; line-height: 1.2; }
.agfy-modal__intro { margin: 0 0 22px; color: var(--body-color); }

.agfy-modal .agfy-field { margin: 0 0 16px; }
.agfy-modal .agfy-field label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--black-color);
}
.agfy-modal .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--white-color); color: var(--black-color);
  font-size: 15px;
}
.agfy-modal .wpcf7-form-control:focus-visible {
  outline: 2px solid var(--thm-color); outline-offset: 1px; border-color: var(--thm-color);
}
.agfy-modal .agfy-submit { margin: 22px 0 0; }
.agfy-modal .wpcf7-submit {
  width: 100%; padding: 14px 20px;
  border: 0; border-radius: 999px;
  background: var(--thm-color); color: var(--black-color);
  font-weight: 700; font-size: 15px; cursor: pointer;
}
.agfy-modal .wpcf7-submit:hover { background: var(--gold-deep); }

@media (min-width: 620px) {
  .agfy-modal .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .agfy-modal .agfy-field--wide,
  .agfy-modal .agfy-submit,
  .agfy-modal .wpcf7-response-output { grid-column: 1 / -1; }
}

/* Header contact strip: keep the email on one line — the entity-encoded
   address is short, and a mid-word break reads as a typo. */
.header-contact-content,
.contact-info-content {
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
}

/* agfytech.com's menu bar has no search — hide the theme's */
.header-search { display: none !important; }

/* CTA arrow was rendering enormous inside the appointment band */
.theme-btns i,
.theme-btn i {
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Tony's homepage review, 6 Aug: arrows out, colours corrected.
   -------------------------------------------------------------------------- */

/* The big black arrows in buttons and the message box read as clip-art.
   Buttons are text-only now. */
.theme-btns i, .theme-btns svg,
.theme-btn i, .theme-btn svg,
.growhub-message-boxs i, .growhub-message-boxs svg,
svg[class*="e-fas-arrow"], i[class*="fa-arrow"] {
  display: none !important;
}

/* Service accordion: the icon inherited an old teal fill, and the READ MORE
   pill was still the theme's green. Charcoal on gold, gold-deep pill. */
.service-accordions-icon svg,
.service-accordions-icon i {
  fill: #1A1A1A !important;
  color: #1A1A1A !important;
}
.service-accordions-item .theme-btns,
.service-accordions-item .read-more,
.service-accordions-item .theme-btn {
  background: var(--black-color) !important;
  color: var(--white-color) !important;
}

/* Gold pills had white labels (2.08:1) — charcoal. The accordion pill keeps its
   own later charcoal-bg/white rule. */
.theme-btns { color: #1A1A1A; }

/* Empty 40px gold circle left where the message-box download icon used to be */
.growhub-message-boxs .icon { display: none !important; }

/* Service card icons: Tony's picks from the 3D pack (#84 / #70 / #74), served
   from the child theme. White plate, glyph hidden, PNG as the icon. */
.service-accordions-icon {
  background-color: #FFFFFF !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 72%;
}
.service-accordions-icon svg,
.service-accordions-icon i { display: none !important; }
.service-accordions-item:nth-of-type(1) .service-accordions-icon {
  background-image: url('assets/favicon/agfy-svc-cs.png');
}
.service-accordions-item:nth-of-type(2) .service-accordions-icon {
  background-image: url('assets/favicon/agfy-svc-it.png');
}
.service-accordions-item:nth-of-type(3) .service-accordions-icon {
  background-image: url('assets/favicon/agfy-svc-cloud.png');
}


/* Advantage list: the bordered pills with a gold check each read as template
   chrome. Quiet text list instead, thin gold rule as the only marker. */
.growhub-about-dec-list {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 14px !important;
  border-left: 2px solid var(--thm-color) !important;
}
.growhub-about-dec-list i,
.growhub-about-dec-list svg,
.growhub-about-dec-list .icon {
  display: none !important;
}
/* the pill chrome sits on the list's children, not the wrapper */
.growhub-about-dec-list li,
.growhub-about-dec-list > div,
.growhub-about-dec-list > ul > li {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
}


/* --------------------------------------------------------------------------
   6 Aug, post-launch polish.
   -------------------------------------------------------------------------- */

/* Offcanvas panel: unsized envelope SVG rendered at container width */
.header-sidebar-info-contents svg,
.header-sidebar-info-contents .e-font-icon-svg {
  width: 18px !important;
  height: 18px !important;
}

/* Header: the email sat flush against the CTA pill */
.header-cta-button .theme-btns,
.header-cta-button { margin-left: 20px; }

/* Service accordion: 'all .4s' with default easing snapped open and shut.
   Width alone, longer curve, and the expanded content fades in a beat later. */
.service-accordions-item {
  transition: width .6s cubic-bezier(.3, .85, .25, 1) !important;
  will-change: width;
}
.service-accordions-item .service-accordions-hbox,
.service-accordions-item .service-accordions-hover {
  transition: opacity .28s ease .18s !important;
}
.service-accordions-item:not(.active) .service-accordions-hbox { opacity: 0; }


/* --------------------------------------------------------------------------
   Plain content pages (Careers, Performance, What We Offer).
   -------------------------------------------------------------------------- */
.agfy-page { max-width: 860px; margin: 0 auto; padding: 70px 24px 90px; }
.agfy-page h2 { margin: 44px 0 14px; font-size: 30px; }
.agfy-page h3 { margin: 26px 0 10px; font-size: 21px; }
.agfy-page p, .agfy-page li { color: var(--body-color); line-height: 1.75; }
.agfy-page ul { padding-left: 22px; margin: 0 0 18px; }
.agfy-page li { margin-bottom: 8px; }
.agfy-lede { font-size: 19px; color: var(--black-color) !important; line-height: 1.7; }
.agfy-cta-line { margin-top: 40px; }
.agfy-cta-line .theme-btns { padding: 15px 30px; border-radius: 999px; background: var(--thm-color); }

.agfy-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 36px 0 10px; }
@media (max-width: 700px) { .agfy-stat-row { grid-template-columns: 1fr; } }
.agfy-stat { border: 1px solid var(--border-color); border-radius: 12px; padding: 26px 24px; background: var(--white-color); }
.agfy-stat-num { display: block; font-family: 'Crimson Pro', serif; font-size: 46px; line-height: 1; color: var(--gold-deep); margin-bottom: 8px; }
.agfy-stat h3 { margin: 0 0 8px; font-size: 19px; }
.agfy-stat p { margin: 0; font-size: 15px; }

/* careers form reuses the modal field styling outside the modal */
.agfy-page .agfy-field { margin: 0 0 16px; }
.agfy-page .agfy-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--black-color); }
.agfy-page .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-color);
  border-radius: 8px; background: var(--white-color); color: var(--black-color); font-size: 15px;
}
.agfy-page .wpcf7-submit {
  padding: 14px 34px; border: 0; border-radius: 999px;
  background: var(--thm-color); color: var(--black-color); font-weight: 700; cursor: pointer;
}
.agfy-page .wpcf7-submit:hover { background: var(--gold-deep); }
@media (min-width: 640px) {
  .agfy-page .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .agfy-page .agfy-field--wide, .agfy-page .agfy-submit, .agfy-page .wpcf7-response-output { grid-column: 1 / -1; }
}

/* WP Job Manager list, quiet card styling */
.agfy-page ul.job_listings { list-style: none; padding: 0; }
.agfy-page ul.job_listings li.job_listing { margin-bottom: 14px; }
.agfy-page ul.job_listings li.job_listing a {
  display: block; padding: 20px 22px;
  background: var(--white-color); border: 1px solid var(--border-color); border-radius: 12px;
}
.agfy-page ul.job_listings li.job_listing a:hover { border-color: var(--thm-color); box-shadow: var(--box-shadow); }


/* Services 'why choose' panel: photo bg removed, so lock the text colours */
.growhub-icon-box-dec { color: var(--body-color) !important; }
.growhub-icon-box h2, .growhub-icon-box h3, .growhub-icon-box h4 { color: var(--black-color) !important; }


/* Job cards: WPJM's company-logo placeholder is a broken grey square */
.agfy-page .job_listing .company_logo, .agfy-page ul.job_listings li.job_listing img { display: none !important; }

/* Footer LinkedIn chip picked up a teal tint */
.about-social-wrapper a, .about-social-wrapper li a {
  background: var(--gold-deep) !important;
  color: var(--black-color) !important;
}


/* Inner-page title banner: the theme hardcodes a teal demo photo
   (.breadcroumb-area, page-titless.jpg). Charcoal with a gold hairline. */
.breadcroumb-area {
  background-image: none !important;
  background-color: var(--black-color) !important;
  border-bottom: 3px solid var(--thm-color);
}
.breadcroumb-area .page-title,
.breadcroumb-area h1, .breadcroumb-area h2 { color: var(--white-color); }
.breadcroumb-area a, .breadcroumb-area span { color: rgba(255,255,255,.75); }


/* Job-card titles rendered at 16px next to 30px section heads */
.agfy-page ul.job_listings li.job_listing h3,
.agfy-page ul.job_listings li.job_listing .position h3 {
  font-size: 20px !important;
  margin-bottom: 2px;
}


/* WPJM's default green job-type badge -> brand gold */
.agfy-page .job-type,
.agfy-page li.job_listing .meta .job-type,
.job_listing .full-time { color: var(--gold-deep) !important; }