/*
Theme Name: The7 Child - MCiSA
Template: dt-the7
Description: MCiSA Holdings design layer over The7.
Version: 1.0
*/

/* ---------------------------------------------------------------------------
   Palette sampled from the client's own assets rather than invented: the logo
   carries a deep green and a gold, and the estate photography sits in olive and
   warm stone. Using those means the imagery and the chrome agree instead of
   fighting, which is most of why the previous pass read as "grey".
--------------------------------------------------------------------------- */
/* The7 drives its entire design system from --the7-* custom properties, and its
   compiled css-vars.css would not rebuild from the saved options — it kept
   serving the dark demo skin (#252525 body, #d73b37 accent, Arial 13px). That
   dark skin is what read as "grey". Redefining the variables here is the
   theme's own documented extension point and takes effect immediately, because
   the child stylesheet loads after the compiled one. */
:root {
  --the7-accent-color:            #2f5d4e;
  --the7-accent-bg-color:         #2f5d4e;
  --the7-body-bg-color:           #ffffff;
  --the7-content-boxes-bg-color:  #f6f4f0;
  --the7-base-color:              #4a5652;
  --the7-base-font-size:          17px;
  --the7-base-line-height:        30px;
  --the7-base-font-family:        "Inter", "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --the7-h1-font-family:          var(--the7-base-font-family);
  --the7-h2-font-family:          var(--the7-base-font-family);
  --the7-h3-font-family:          var(--the7-base-font-family);
  --the7-h4-font-family:          var(--the7-base-font-family);
  --the7-h5-font-family:          var(--the7-base-font-family);
  --the7-h6-font-family:          var(--the7-base-font-family);
  --the7-h1-color:                #16211d;
  --the7-h2-color:                #16211d;
  --the7-h3-color:                #16211d;
  --the7-h4-color:                #16211d;
  --the7-title-bg-color:          #1e3f34;
  --the7-beautiful-loading-bg:    #2f5d4e;
  --the7-base-border-radius:      14px;
  --the7-border-radius-size:      14px;
  --the7-divider-color:           #e2e8e5;
  --the7-content-color:           #4a5652;
  --the7-link-color:              #2f5d4e;
  --the7-link-hover-color:        #c9962f;
}

html, body,
#page, .main-gradient, #main {
  background-color: #ffffff !important;
}

:root {
  --mc-green:        #2f5d4e;
  --mc-green-deep:   #1e3f34;
  --mc-green-soft:   #5f8778;
  --mc-gold:         #c9962f;
  --mc-gold-light:   #fdbb22;
  --mc-ink:          #16211d;
  --mc-body:         #4a5652;
  --mc-line:         #e2e8e5;
  --mc-stone:        #f6f4f0;
  --mc-white:        #ffffff;
  --mc-radius:       14px;
  --mc-shadow:       0 18px 40px -18px rgba(22, 33, 29, .28);
  --mc-shadow-hover: 0 26px 60px -20px rgba(22, 33, 29, .38);
}

body,
.the7-elementor-widget p,
.elementor-widget-text-editor {
  color: var(--mc-body);
  font-size: 17px;
  line-height: 1.78;
  letter-spacing: .002em;
}

h1, h2, h3, h4, h5, h6,
.the7-elementor-widget h1, .the7-elementor-widget h2,
.the7-elementor-widget h3, .the7-elementor-widget h4 {
  color: var(--mc-ink);
  letter-spacing: -.018em;
  line-height: 1.18;
  font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

a { color: var(--mc-green); }
a:hover { color: var(--mc-gold); }

/* --- section rhythm -------------------------------------------------------
   The7 ships generous padding but every band was identical, so the page had no
   cadence. Alternating surfaces and a consistent max measure give it one.      */
.elementor-section.elementor-top-section > .elementor-container {
  max-width: 1180px;
}
.elementor-widget-text-editor { max-width: 74ch; }
.elementor-widget-text-editor.elementor-align-center,
.elementor-section .elementor-widget-text-editor p[style*="center"] {
  margin-left: auto;
  margin-right: auto;
}

/* --- hero -----------------------------------------------------------------
   A flat dark overlay flattens the photograph. A vertical gradient keeps the
   image legible at the top and guarantees text contrast at the bottom.         */
.elementor-top-section:first-child {
  position: relative;
}
.elementor-top-section:first-child > .elementor-background-overlay {
  background-image: linear-gradient(
      170deg,
      rgba(20, 40, 33, .58) 0%,
      rgba(20, 40, 33, .72) 55%,
      rgba(13, 28, 23, .88) 100%) !important;
  opacity: 1 !important;
}
.elementor-top-section:first-child h1 {
  color: #fff !important;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .35);
  margin-bottom: .35em;
}
.elementor-top-section:first-child .elementor-widget-text-editor,
.elementor-top-section:first-child p {
  color: rgba(255, 255, 255, .92) !important;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.12rem;
}
/* thin gold rule under the hero headline — the one deliberate flourish */
.elementor-top-section:first-child h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: .55em auto 0;
  background: var(--mc-gold);
  border-radius: 3px;
}

/* --- icon boxes ------------------------------------------------------------
   Actual markup (read from the rendered page rather than guessed):
     .elementor-widget-the7_icon_box_widget
       > .elementor-widget-container
         > .the7-box-wrapper
           > .box-content-wrapper
               > a.elementor-icon-div > .elementor-icon
               > .box-content > h3.box-heading + .box-description
   The widget ships icon-position-left, so the icon sits beside the text and
   outside any card. Restacking .box-content-wrapper to a column and putting the
   card on .the7-box-wrapper gives the stacked card the demo uses.            */
.elementor-widget-the7_icon_box_widget { height: 100%; display: flex; }
.elementor-widget-the7_icon_box_widget > .elementor-widget-container {
  width: 100%;
}
.the7-box-wrapper {
  height: 100%;
  background: #fff;
  border: 1px solid var(--mc-line);
  border-radius: 16px;
  padding: 36px 30px 32px;
  box-shadow: var(--mc-shadow);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.the7-box-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: var(--mc-shadow-hover);
  border-color: rgba(47, 93, 78, .38);
}
.the7-box-wrapper .box-content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0;
}
.the7-box-wrapper .elementor-icon-div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 20px 0 !important;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(47,93,78,.13), rgba(201,150,47,.18));
  flex: 0 0 auto;
  transition: background .28s ease;
}
.the7-box-wrapper:hover .elementor-icon-div { background: var(--mc-green); }
.the7-box-wrapper .elementor-icon { line-height: 0; }
.the7-box-wrapper .elementor-icon svg {
  width: 23px; height: 23px; fill: var(--mc-green); transition: fill .28s ease;
}
.the7-box-wrapper:hover .elementor-icon svg { fill: #fff; }
.the7-box-wrapper .box-content { width: 100%; }
.the7-box-wrapper .box-heading {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
  margin: 0 0 .55em !important;
}
.the7-box-wrapper .box-heading a { color: var(--mc-ink) !important; pointer-events: none; }
.the7-box-wrapper .box-description {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--mc-body);
}
.the7-box-wrapper .box-description strong { color: var(--mc-ink); }

/* --- tinted bands ---------------------------------------------------------- */
.elementor-section[style*="f5f7f9"],
.elementor-section.mc-tint {
  background-color: var(--mc-stone) !important;
}

/* --- buttons --------------------------------------------------------------- */
.elementor-widget-the7_button_widget a,
.the7-button,
.wpcf7 input[type="submit"] {
  background: var(--mc-green) !important;
  border: 1px solid var(--mc-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 14px 34px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  box-shadow: 0 10px 24px -12px rgba(47, 93, 78, .8);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.elementor-widget-the7_button_widget a:hover,
.the7-button:hover,
.wpcf7 input[type="submit"]:hover {
  background: var(--mc-gold) !important;
  border-color: var(--mc-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(201, 150, 47, .9);
}

/* --- images ---------------------------------------------------------------- */
.elementor-widget-the7-image-widget img,
.elementor-widget-image img {
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow);
}

/* --- blockquote ------------------------------------------------------------ */
.elementor-widget-blockquote blockquote,
blockquote {
  border: 0 !important;
  border-left: 4px solid var(--mc-gold) !important;
  background: var(--mc-stone);
  border-radius: 0 var(--mc-radius) var(--mc-radius) 0;
  padding: 30px 34px !important;
  font-size: 1.06rem;
  font-style: normal;
  color: var(--mc-ink);
  max-width: 86ch;
  margin: 0 auto;
}

/* --- contact form ---------------------------------------------------------- */
.wpcf7 label {
  display: block;
  font-weight: 600;
  color: var(--mc-ink);
  font-size: 14.5px;
  margin-bottom: 18px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  margin-top: 7px;
  padding: 13px 16px;
  border: 1px solid var(--mc-line);
  border-radius: 10px;
  background: #fff;
  font-size: 15.5px;
  color: var(--mc-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--mc-green-soft);
  box-shadow: 0 0 0 4px rgba(95, 135, 120, .16);
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }

/* --- header / footer chrome ------------------------------------------------ */
.masthead .main-nav > li > a .menu-item-text {
  font-weight: 600;
  letter-spacing: .01em;
}
.masthead .main-nav > li.act > a,
.masthead .main-nav > li > a:hover {
  color: var(--mc-green) !important;
}
#bottom-bar,
.bottom-bar-bg-color {
  background: var(--mc-green-deep) !important;
  color: rgba(255, 255, 255, .72);
}
#bottom-bar a { color: rgba(255, 255, 255, .88); }
#bottom-bar a:hover { color: var(--mc-gold-light); }

/* --- mobile ---------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-top-section:first-child > .elementor-container { padding: 0 6px; }
  .elementor-widget-the7_icon_box_widget > .elementor-widget-container {
    padding: 30px 24px;
  }
  body { font-size: 16px; }
}

/* --- webfont ---------------------------------------------------------------
   Inter, self-hosted intent via Google's CSS. The7's Arial default is most of
   why the type looked dated. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body, p, li, td, input, textarea, select, button,
.masthead .main-nav > li > a,
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* The7's classic header sits on a dark bar in the demo skin; brand it light so
   the logo and menu read. */
.masthead:not(.sticky-on) {
  background: #ffffff !important;
  border-bottom: 1px solid var(--mc-line);
}
.masthead .main-nav > li > a,
.masthead .main-nav > li > a .menu-item-text,
.masthead .main-nav > li > a span,
.mobile-menu-wrap .main-nav > li > a span {
  color: #16211d !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.masthead .main-nav > li > a:hover .menu-item-text,
.masthead .main-nav > li.act > a .menu-item-text,
.masthead .main-nav > li.current-menu-item > a .menu-item-text {
  color: var(--mc-green) !important;
}
/* current page gets a rule rather than a colour change alone. It must sit on
   the anchor's bottom edge; a fixed offset landed it through the middle of the
   word once the header height changed. */
.masthead .main-nav > li.act > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; background: var(--mc-gold); border-radius: 2px;
}
.masthead .main-nav > li > a { padding-bottom: 6px; }
.masthead .main-nav > li > a { position: relative; }
/* the demo header reserved a large empty logo band */
.masthead .header-bar,
#phantom .header-bar { min-height: 0; }
.branding img { max-height: 54px; width: auto; }

/* Elementor sections must not inherit the dark demo background. */
.elementor-section { background-color: transparent; }
.elementor-widget-container { color: inherit; }

/* ---------------------------------------------------------------------------
   FOOTER — three columns in the style of the NHN reference: dark brand band,
   a heading per column, About / Main Menu / Contact Info, then a thin
   copyright strip. The7 renders one widget area in N columns, so these are
   three custom-HTML widgets rather than three sidebars.
--------------------------------------------------------------------------- */
#footer,
.footer,
#footer.solid-bg {
  background: linear-gradient(160deg, #1e3f34 0%, #16302a 55%, #12261f 100%) !important;
  color: rgba(255, 255, 255, .74);
  padding: 72px 0 40px;
  border-top: 3px solid var(--mc-gold);
}
#footer .widget,
.footer .widget { margin-bottom: 0; padding-right: 24px; }

.mc-foot-h {
  color: #fff !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  margin: 0 0 22px !important;
  padding-bottom: 12px;
  position: relative;
}
.mc-foot-h::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 2px;
  background: var(--mc-gold);
  border-radius: 2px;
}

#footer p, .footer p {
  color: rgba(255, 255, 255, .74);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 14px;
}
#footer strong, .footer strong { color: #fff; font-weight: 600; }
#footer a, .footer a { color: rgba(255, 255, 255, .86); transition: color .2s ease; }
#footer a:hover, .footer a:hover { color: var(--mc-gold-light); }

.mc-foot-menu { list-style: none; margin: 0; padding: 0; }
.mc-foot-menu li { margin: 0 0 11px; }
.mc-foot-menu a {
  display: inline-block;
  font-size: 15px;
  position: relative;
  padding-left: 0;
  transition: padding-left .2s ease, color .2s ease;
}
.mc-foot-menu a::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--mc-gold);
  transition: width .2s ease;
}
.mc-foot-menu a:hover { padding-left: 18px; }
.mc-foot-menu a:hover::before { width: 12px; }

.mc-foot-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--mc-gold);
  color: #16211d !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  transition: background .25s ease, transform .25s ease;
}
.mc-foot-btn:hover {
  background: #fff;
  color: #16211d !important;
  transform: translateY(-2px);
}

/* copyright strip */
#bottom-bar {
  background: #0f211b !important;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .55);
}
#bottom-bar a { color: rgba(255, 255, 255, .75); }
#bottom-bar .dt-copyright, #bottom-bar .wf-td { color: rgba(255, 255, 255, .55); }
/* the theme's own credit line */
#bottom-bar .bottom-text-block, #bottom-bar .copyright-text ~ * { display: none; }

@media (max-width: 767px) {
  #footer, .footer { padding: 52px 0 30px; }
  #footer .widget, .footer .widget { padding-right: 0; margin-bottom: 34px; }
}

/* plain <img> used in place of the image widget (see build_elementor.image) */
.mc-figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow);
}

/* the theme's own credit line in the bottom bar */
#bottom-bar .wf-container-bottom .wf-float-left:has(a[href*="dream-theme"]),
#bottom-bar a[href*="dream-theme"],
#bottom-bar .dt-copyright-block,
.bottom-bar-credits,
#bottom-bar .wf-td:only-child > a[href*="dream"] { display: none !important; }
#bottom-bar .wf-container-bottom { justify-content: center; }

/* footer columns were hugging the left edge */
#footer .wf-container,
#footer .wf-wrap,
.footer .wf-container {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
#footer .wf-container > .wf-cell,
#footer .widget { flex: 1 1 260px; min-width: 240px; }

/* ---------------------------------------------------------------------------
   LOGO — The7 renders .branding but emits no logo element unless its own
   upload-control array shape is present in the7_options, which cannot be
   written reliably from the CLI. The mark is placed on .branding directly;
   #site-title stays as the accessible text.
--------------------------------------------------------------------------- */
.masthead .branding {
  display: flex !important;
  align-items: center;
  min-height: 76px;
}
.masthead .branding::before {
  content: "";
  display: block;
  width: 190px;
  height: 52px;
  background-image: url("/wp-content/uploads/2026/08/logo-7.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  flex: 0 0 auto;
}
.masthead .branding #site-title,
.masthead .branding #site-description { position: absolute; left: -9999px; }
/* logo and nav on one row, nav pushed right */
.masthead .header-bar {
  display: flex !important;
  align-items: center;
  gap: 40px;
  flex-wrap: nowrap;
  padding: 10px 0;
}
.masthead .branding { flex: 0 0 auto; margin: 0 !important; }
.masthead .navigation { margin-left: auto; float: none !important; }
.masthead .navigation .main-nav { display: flex; align-items: center; }

@media (max-width: 767px) {
  .masthead .branding::before { width: 140px; height: 40px; }
  .masthead .branding { min-height: 60px; }
}

/* copyright line — of_get_option() ignores the stored bottom_bar-copyrights
   for the same falsy-default reason as the credit, so it is written here */
/* one target only — both selectors matched, printing the line twice */
#bottom-bar .wf-float-left::after {
  content: "© 2026 MCiSA Holdings (Pty) Ltd. All rights reserved.";
  color: rgba(255, 255, 255, .55);
  font-size: 13.5px;
}
#bottom-bar { min-height: 56px; display: flex; align-items: center; }
#bottom-bar .wf-container-bottom { width: 100%; max-width: 1160px; margin: 0 auto; }