/*
Theme Name: Nowoka
Theme URI: https://webbytroops.com/nowoka
Author: Webbytroops
Author URI: https://webbytroops.com
Description: Nowoka is a child theme of Blocksy. Customize Blocksy safely without losing changes on parent theme updates.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: blocksy
Text Domain: nowoka
*/

/* Add your custom styles below. */
 .nowoka-newsletter {
    --theme-form-field-height: 52px;     /* input + button height */
    --theme-form-field-gap: 10px;        /* gap between fields */
    --theme-form-field-border-initial-color: #D9F45F; 
  }

  /*Plus standard CSS on the classes for everything else:*/
  .nowoka-newsletter .ct-newsletter-subscribe-form {
    /* layout / spacing */
  }

  .nowoka-newsletter input[type="email"],
  .nowoka-newsletter input[type="text"] {
    background: #fff;
    border: 1px solid #D9F45F;
    border-radius: 12px;
    padding: 0 1rem;
    font: inherit;
  }

  .nowoka-newsletter input:focus {
    outline: 2px solid #111518;
    outline-offset: 2px;
  }

  .nowoka-newsletter .wp-element-button {
    background: #D9F45F;
    color: #111518;
    border-radius: 999px;
    padding: 0 1.4rem;
    font-weight: 600;
    transition: background-color .2s, color .2s;
  }

  .nowoka-newsletter .wp-element-button:hover {
    background: #111518;
    color: #fff;
  }

  .nowoka-newsletter .ct-newsletter-subscribe-message {
    /* success / error message */
  }

  /* Contact Us Flueent Form CSS*/
/* Load Font Awesome once (skip if theme already loads it) */                                                                                                                                                   
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* Generic: any field with class .nf-icon shows an icon inside input */
.ff-el-group.nf-icon { position: relative; }
.ff-el-group.nf-icon .ff-el-input--content { position: relative; }
.ff-el-group.nf-icon input.ff-el-form-control,
.ff-el-group.nf-icon textarea.ff-el-form-control {
    padding-left: 42px !important;
}
.ff-el-group.nf-icon .ff-el-input--content::before {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
    font-weight: 900;
    color: #6b7280;
    font-size: 16px;
    z-index: 2;
    pointer-events: none;
}

/* Textarea: top-align icon */                                                                                                                                                                                  
.ff-el-group.nf-icon:has(textarea) .ff-el-input--content::before {
    top: 18px;                                                                                                                                                                                                  
    transform: none;                                                                                                                                                                                          
}                                                                                                                                                                                                               

/* Per-icon classes — combine with .nf-icon */                                                                                                                                                                  
.ff-el-group.nf-icon-user   .ff-el-input--content::before { content: "\f007"; }  /* user */                                                                                                                   
.ff-el-group.nf-icon-email  .ff-el-input--content::before { content: "\f0e0"; }  /* envelope */                                                                                                                 
.ff-el-group.nf-icon-phone  .ff-el-input--content::before { content: "\f095"; }  /* phone */                                                                                                                    
.ff-el-group.nf-icon-msg    .ff-el-input--content::before { content: "\f075"; }  /* comment */                                                                                                                  
.ff-el-group.nf-icon-lock   .ff-el-input--content::before { content: "\f023"; }  /* lock */                                                                                                                     
.ff-el-group.nf-icon-pin    .ff-el-input--content::before { content: "\f3c5"; }  /* map-marker */                                                                                                               
.ff-el-group.nf-icon-globe  .ff-el-input--content::before { content: "\f0ac"; }  /* globe */                                                                                                                    
.ff-el-group.nf-icon-calendar .ff-el-input--content::before { content: "\f073"; }                                                                                                                               
.ff-el-group.nf-icon-search .ff-el-input--content::before { content: "\f002"; }                                                                                                                                 
.ff-el-group.nf-icon-building .ff-el-input--content::before { content: "\f1ad"; }                                                                                                                               
                                                                                                                                                                                                                
/* Apply padding-left rule for per-icon classes too */                                                                                                                                                          
.ff-el-group[class*="nf-icon-"] input.ff-el-form-control,                                                                                                                                                       
.ff-el-group[class*="nf-icon-"] textarea.ff-el-form-control {                                                                                                                                                   
    padding-left: 42px !important;
}                                                                                                                                                                                                               
.ff-el-group[class*="nf-icon-"] .ff-el-input--content { position: relative; }                                                                                                                                 
.ff-el-group[class*="nf-icon-"] .ff-el-input--content::before {                                                                                                                                                 
    position: absolute;                                                                                                                                                                                         
    left: 14px;
    top: 50%;                                                                                                                                                                                                   
    transform: translateY(-50%);                                                                                                                                                                              
    font-family: "Font Awesome 6 Free";
    font-weight: 900;                                                                                                                                                                                           
    color: #6b7280;
    font-size: 16px;                                                                                                                                                                                            
    z-index: 2;                                                                                                                                                                                               
    pointer-events: none;
}