/*
Theme Name: Webrix Lab
Theme URI: https://webrixlab.com
Author: Webrix Lab
Author URI: https://webrixlab.com
Description: Custom theme for Webrix Lab — web development, e-commerce, AI automation, performance marketing, SEO and design. Includes Projects and Services custom post types so case studies and service pages are added from the WordPress admin instead of hand-built HTML.
Version: 1.0.9
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webrixlab
Tags: agency, portfolio, business, custom-post-types
*/

/*
   The real styling lives in assets/css/ — those files are enqueued in functions.php
   in the same order the original static build used. Keep this file for the theme
   header (WordPress requires it) and for small overrides only.
*/

/* WordPress core alignment / caption classes the editor can output */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; margin: 8px 0; }
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.sticky, .gallery-caption, .bypostauthor { }

/* -------------------------------------------------------------------------
   Media inside content areas.
   The original build only constrained videos inside .service-section, so a
   video anywhere else (service hero, case study) overflowed its container.
   ---------------------------------------------------------------------- */

.service-hero-media .image-box,
.service-details-content figure.image,
.portfolio-details .image-box,
.portfolio-details-content figure {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  max-width: 100%;
}

.service-details-content figure.image img,
.service-details-content figure.image video,
.portfolio-details .image-box img,
.portfolio-details .image-box video,
.portfolio-details-content figure img,
.portfolio-details-content figure video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
}

/* Service hero: show the WHOLE video, centred. No object-fit cover here —
   that crops the edges off, which is exactly what we don't want. The height
   cap keeps a tall 4:3 clip from taking over the page. */
.service-hero-media .image-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-hero-media .image-box video,
.service-hero-media .image-box img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 640px;
  object-fit: contain;
  border-radius: 12px;
}

/* -------------------------------------------------------------------------
   Service detail body — the editor output needs the theme's rhythm.
   ---------------------------------------------------------------------- */

.service-details-content > p {
  margin-bottom: 26px;
}

.service-details-content > h2 {
  margin-bottom: 20px;
}

.service-details-content > h3 {
  margin-top: 40px;
  margin-bottom: 16px;
}

.service-details-content .list-item li,
.portfolio-details-content .list-item li {
  position: relative;
  display: block;
  padding-left: 28px;
  margin-bottom: 14px;
}

.service-details-content .list-item li::before,
.portfolio-details-content .list-item li::before {
  position: absolute;
  content: '';
  left: 0;
  top: 11px;
  width: 12px;
  height: 2px;
  background-color: var(--theme-color, #2BC5B4);
}

.service-details-content .btn-box {
  margin-top: 40px;
}

.footer-bottom .footer-sep {
  margin: 0 8px;
  opacity: 0.5;
}

.footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom a:hover {
  color: var(--theme-color);
}

/* --- Text pages (Privacy Policy and any other plain page) ---------------- */

/*
 * page.php renders the editor content straight into the theme's portfolio
 * container, which is full-bleed and has no typography of its own — so a text
 * page came out as ~1300px lines with headings jammed against paragraphs.
 * Cap the measure and give the elements real vertical rhythm.
 */
/* .wl-text-page is set by page.php only for pages with no embedded full-width
   section — capping the container on every page squashed the contact form. */
.portfolio-details-content.wl-text-page {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.wl-text-page > p {
  font-size: 18px;
  line-height: 32px;
  margin-bottom: 24px;
}

.wl-text-page > h2,
.wl-text-page > h3,
.wl-text-page > h4 {
  margin-top: 56px;
  margin-bottom: 16px;
}

/* No gap above the very first heading — it sits right under the page title. */
.wl-text-page > *:first-child {
  margin-top: 0;
}

.wl-text-page > h3 {
  font-size: 26px;
  line-height: 34px;
}

.wl-text-page > ul,
.wl-text-page > ol {
  margin: 0 0 24px 0;
  padding-left: 22px;
}

.wl-text-page > ul {
  list-style: disc;
}

.wl-text-page > ol {
  list-style: decimal;
}

.wl-text-page li {
  font-size: 18px;
  line-height: 32px;
  margin-bottom: 10px;
}

.wl-text-page li::marker {
  color: var(--theme-color);
}

/* The section reserves room for a portfolio gallery; on a text page that just
   leaves a long empty stretch above the footer. */
.page-template-default .portfolio-details {
  padding-bottom: 120px;
}

/* --- About page --------------------------------------------------------- */

/* A year is printed plainly rather than counted up, so it has to be given the
   odometer's own size — otherwise it renders at body size next to the others. */
.about-style-six .count-outer .wl-year {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Paragraphs that follow the big opening statement. Left-aligned with it —
   centring them made the block look indented and unrelated. */
.about-style-six .about-story-content {
  max-width: 1000px;
  margin-top: 44px;
}

.about-style-six .about-story-content p {
  font-size: 18px;
  line-height: 32px;
  margin-bottom: 22px;
}

.about-style-six .about-story-content p:last-child {
  margin-bottom: 0;
}

/* --- Contact form ------------------------------------------------------- */

/* Off-screen rather than display:none — bots skip fields they can tell are
   hidden, and screen readers still get the "leave this empty" label. */
.wl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The image column has no fixed height, so without this it stretches to match
   the form and the photo distorts. */
.wl-contact-form .image-column .image-box {
  height: 100%;
}

.wl-contact-form .image-column .image img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: 12px;
}

.wl-contact-form {
  padding-top: 40px;
  padding-bottom: 80px;
}

.wl-contact-form .wl-form-small {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 22px;
  opacity: 0.7;
}

/* Placeholders should read as hints, not as filled-in answers — the input
   colour rule above sets -webkit-text-fill-color, which they inherit. */
.dark .wl-contact-form .form-group input::placeholder,
.dark .wl-contact-form .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
  opacity: 1;
}

.wl-form-note {
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.wl-form-note--ok {
  border: 1px solid var(--theme-color);
}

.wl-form-note--ok h3 {
  margin-bottom: 8px;
}

.wl-form-note--ok p,
.wl-form-note--error {
  margin-bottom: 0;
}

.wl-form-note--error {
  border: 1px solid #d95c5c;
  color: #d95c5c;
}

.wl-form-note--error a {
  color: inherit;
  text-decoration: underline;
}

/* The theme styles .contact-style-two inputs but ships no <select> — match it. */
.wl-contact-form .form-group select {
  position: relative;
  display: block;
  width: 100%;
  height: 60px;
  border-radius: 12px;
  border: 1px solid rgb(110, 110, 110, 0.3);
  background-color: transparent;
  font-size: 16px;
  color: var(--title-color);
  padding: 10px 44px 10px 20px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Inline SVG chevron — an external image would be one more request to lose. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  transition: all 500ms ease;
}

.wl-contact-form .form-group select:focus {
  border-color: var(--theme-color);
  outline: none;
}

/* The dropdown list itself is painted by the OS, so it needs real colours
   rather than transparent — otherwise the options are white on white. */
.wl-contact-form .form-group select option {
  color: #111;
  background-color: #fff;
}

.wl-contact-form .form-group select:invalid {
  color: var(--text-color);
}

/* Dark mode is this site's default, and the theme's dark-mode.css has no rules
   for form markup — labels and typed text stayed near-black on a #232323
   background, so the form was effectively invisible to anyone filling it in. */
/* !important throughout, matching the theme's own dark-mode.css — its rules for
   headings and paragraphs are !important too, so anything here that is not
   loses to them regardless of specificity. */
.dark .wl-contact-form .form-group input,
.dark .wl-contact-form .form-group textarea,
.dark .wl-contact-form .form-group select {
  color: #fff !important;
  /* Chrome paints form-control text from -webkit-text-fill-color when that is
     set, so `color` alone can still leave the typed text dark. */
  -webkit-text-fill-color: #fff !important;
}

.dark .wl-contact-form .wl-form-small,
.dark .wl-form-note--ok p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.wl-contact-form .form-group input::placeholder,
.wl-contact-form .form-group textarea::placeholder {
  color: var(--text-color);
  opacity: 0.6;
}

.dark .wl-contact-form .form-group input::placeholder,
.dark .wl-contact-form .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

/* Browsers repaint autofilled fields with their own near-white background and
   dark text, which undoes the above the moment a password manager fills in. */
.dark .wl-contact-form input:-webkit-autofill,
.dark .wl-contact-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #232323 inset;
  caret-color: #fff;
}

/* Links inside page content fell back to the browser's default blue. */
.portfolio-details-content a,
.service-details-content a {
  color: var(--theme-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.portfolio-details-content a:hover,
.service-details-content a:hover {
  text-decoration: none;
}

/* ------------------------------------------------------------------
 * Promo video section (full-bleed, edge-to-edge — matches original
 * template: 16:9, wrapper scales 0.5 -> 1 on scroll via GSAP) + footer
 * "Get in touch" column
 * ---------------------------------------------------------------- */
.video-section{ padding: 0; margin: 40px 0; overflow: hidden; }
.video-section .video-wrapper{
	max-width: none; width: 100%; margin: 0; padding: 0;
	border-radius: 10px; overflow: hidden;
}
.video-section .video-wrapper video,
.video-section .promo-video{
	display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0;
}
@media (max-width: 767px){
	.video-section{ margin: 24px 0; }
}

.main-footer .contact-list li{ margin-bottom: 10px; }
.main-footer .footer-social{
	display: flex; flex-wrap: wrap; gap: 12px;
	margin: 22px 0 0; padding: 0; list-style: none;
}
.main-footer .footer-social li{ margin: 0; }
.main-footer .footer-social li a{
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(128,128,128,.14); color: inherit;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.main-footer .footer-social li a:hover{
	background: var(--theme-color, #2BC5B4); color: #fff; transform: translateY(-2px);
}
.main-footer .footer-social svg{ width: 18px; height: 18px; fill: currentColor; }