/*!
Theme Name: Caring Concept
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: caring-concept
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Caring Concept is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
.service-content p {
    margin: 0 !important;
    margin-bottom: 15px !important;
}
.service-content menu, .service-content ol, .service-content ul {
    list-style-type: disc !important;
    margin: 0;
    padding: 0;
    list-style-position: inside !important;
    margin-bottom: 15px !important;
}

/* ===== Base ===== */
body{
  margin: 0;
  padding: 0;
  color: #000000;
  background: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Paragraph ===== */
p{
  margin: 0 0 1rem 0;
  color: #000000;
  font-size: 1rem;
  line-height: 1.75;
}

/* ===== Headings ===== */
.blog-single h1, .blog-single h2, .blog-single h3, .blog-single h4, .blog-single h5, .blog-single h6{
  margin: 0 0 0.75rem 0;
  color: #000000;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1{ font-size: clamp(2rem, 4vw, 3.25rem); !important }
h2{ font-size: clamp(1.75rem, 3.2vw, 2.5rem); !important }
h3{ font-size: clamp(1.5rem, 2.6vw, 2rem); !important }
h4{ font-size: 1.375rem; !important }
h5{ font-size: 1.125rem; !important }
h6{ font-size: 1rem; font-weight: 700; !important }

/* If you have Tailwind build pipeline, place inside @layer components */
.tw-input,
.tw-textarea,
.tw-select {
  @apply w-full rounded-md border border-slate-300 bg-white px-4 py-3 text-slate-900 placeholder:text-slate-400
  focus:border-slate-500 focus:ring-2 focus:ring-slate-200;
}

.tw-textarea {
  @apply min-h-[120px];
}

/* CF7 radio output differs per theme; this helps when the input gets the class */
.tw-radio {
  @apply accent-slate-700;
}

:root{
  --cc-primary:#177E79;
  --cc-primary-dark:#13726C;
  --cc-deep:#09312E;
}

/* LABELS */
label{
  display:block;
  margin:0 0 8px 0;
  font-size:12px;
  font-weight:800;
  color:var(--cc-deep);
  letter-spacing:.02em;
}

/* INPUTS / SELECT / TEXTAREA */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  border-radius:12px;
  border:1px solid rgba(255,255,255,.60);
  background:rgba(255,255,255,.85);

  padding:12px 16px;
  font-size:14px;
  line-height:1.4;
  color:#1f2937;

  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  box-shadow:0 12px 40px rgba(9,49,46,.08);
}

textarea{
  min-height:140px;
  resize:vertical;
}

::placeholder{
  color:rgba(100,116,139,.8);
}

/* FOCUS */
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(23,126,121,.60);
  box-shadow:
    0 0 0 4px rgba(23,126,121,.25),
    0 12px 40px rgba(9,49,46,.08);
}

/* HOVER */
input:hover,
select:hover,
textarea:hover{
  border-color:rgba(23,126,121,.35);
}

/* DISABLED */
input:disabled,
select:disabled,
textarea:disabled{
  opacity:.7;
  cursor:not-allowed;
}

/* SELECT ARROW */
select{
  padding-right:44px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(9,49,46,.75) 50%),
    linear-gradient(135deg, rgba(9,49,46,.75) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%,
    0 0;
  background-size:6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
}

/* CHECKBOX / RADIO */
input[type="checkbox"],
input[type="radio"]{
  width:18px;
  height:18px;
  accent-color:var(--cc-primary);
}

/* SUBMIT / BUTTONS */
button,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border:0;
  border-radius:12px;

  padding:12px 18px;
  font-size:14px;
  font-weight:800;
  color:#fff;

  cursor:pointer;
  background:linear-gradient(90deg,var(--cc-primary) 0%, #4A9692 50%, var(--cc-primary-dark) 100%);
  box-shadow:0 22px 70px rgba(23,126,121,.32);

  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

button:hover,
input[type="submit"]:hover{
  transform:scale(1.03);
  box-shadow:0 30px 90px rgba(23,126,121,.40);
  filter:brightness(1.02);
}

button:active,
input[type="submit"]:active{
  transform:scale(.98);
}

/* Use these class names inside CF7: class:tw-input class:tw-textarea class:tw-radio */
.tw-input,
.tw-textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.60);
  background:rgba(255,255,255,.85);
  padding:12px 16px;
  font-size:14px;
  line-height:1.4;
  color:#1f2937;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 40px rgba(9,49,46,.08);
}
.tw-textarea{ min-height:140px; resize:vertical; }
.tw-input:focus,
.tw-textarea:focus{
  border-color:rgba(23,126,121,.60);
  box-shadow:0 0 0 4px rgba(23,126,121,.25), 0 12px 40px rgba(9,49,46,.08);
}
.tw-input::placeholder,
.tw-textarea::placeholder{ color:rgba(100,116,139,.8); }

/* Radio style (works for CF7 radio inputs) */
.tw-radio input[type="radio"]{
  width:18px;
  height:18px;
  accent-color:#177E79;
}

/* Button theme */
.theme-bg{ background:#177E79; }
.theme-bg:hover{ filter:brightness(.95); }

/* CF7 classes used above: class:tw-input class:tw-textarea */
.tw-input,
.tw-textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.60);
  background:rgba(255,255,255,.85);
  padding:12px 16px;
  font-size:14px;
  line-height:1.4;
  color:#1f2937;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 40px rgba(9,49,46,.08);
}
.tw-textarea{ min-height:140px; resize:vertical; }
.tw-input:focus,
.tw-textarea:focus{
  border-color:rgba(23,126,121,.60);
  box-shadow:0 0 0 4px rgba(23,126,121,.25), 0 12px 40px rgba(9,49,46,.08);
}
.tw-input::placeholder,
.tw-textarea::placeholder{ color:rgba(100,116,139,.8); }

/* Button theme */
.theme-bg{ background:#177E79; }
.theme-bg:hover{ filter:brightness(.95); }

.blog-single ul {
    list-style: disc;
    margin: 0;
    padding: 0;
    list-style-position: inside;
    margin-bottom: 15px;
}
.blog-single p {
    margin: 0 0 1rem 0 !important;
    color: #000000;
    font-size: 1rem;
    line-height: 1.75;
}