/*
============================================================
WORDPRESS CUSTOM THEME INFORMATION
============================================================
Theme Name: Angels Theme
Theme URI: https://www.shabbirshowne.com/themes/angels-theme
Author: Shabbir Showne
Author URI: https://www.shabbirshowne.com/
Description: A custom creative agency and commerce theme with a clean burgundy-and-white responsive design, service pricing, work portfolio, animated brand sections, WooCommerce shop layouts, one-click setup and private project enquiries through the companion plugin.
Version: 1.3.0
Requires at least: 7.1
Requires PHP: 8.0
Tested up to: 7.1.2
License: Proprietary for original non-GPL materials; applicable open-source licences retained
License Notice: Prior written permission is required to copy, modify, distribute, sublicense, resell or commercially reuse original proprietary materials, except where an applicable licence grants those rights. WordPress-derived code and third-party components retain their applicable licence terms. This notice does not override GPL modification or distribution rights.
Copyright: (c) 2026 Shabbir Showne
Text Domain: angels-theme
Tags: custom-logo, custom-menu, featured-images, e-commerce, portfolio, blog
Contact: contact@shabbirshowne.com

============================================================
DEVELOPER INFORMATION
============================================================
Developer: Shabbir Showne
Developer Website: https://www.shabbirshowne.com/
Developer Email: contact@shabbirshowne.com
Development Type: Custom WordPress Theme
Platform: WordPress
Core Technologies: PHP, HTML5, CSS3, JavaScript
Responsive Design: Yes
Translation Ready: No - frontend text is not fully internationalised.
RTL Support: No - not implemented or verified.

============================================================
PROJECT TECHNICAL INFORMATION
============================================================
Website Type: Creative agency, service portfolio and e-commerce
Primary Purpose: Present creative services and work, collect project enquiries and provide a WooCommerce storefront.
Main Features: Service pricing; portfolio; blog templates; About and process pages; responsive navigation; animated hero and client logos; shop/product/cart layouts; setup with required plugin installation, media import and five example products; private enquiry inbox and email notification via companion plugin.
Custom Post Types: ag_submission (Project Forms plugin); product, product_variation and WooCommerce-managed commerce records (WooCommerce plugin). No theme-defined custom post type.
Custom Taxonomies: WooCommerce-managed product taxonomies, including product_cat, product_tag and product_type. No theme-defined custom taxonomy.
Required Plugins: WooCommerce; Angels Glyph Project Forms (bundled).
CSS Framework: Compiled Tailwind utility stylesheet plus custom CSS.
JavaScript Libraries: Lucide icons; jQuery for WooCommerce shop controls; vanilla JavaScript for theme interactions and animation. WooCommerce includes its own dependencies.

============================================================
THEME FILE INFORMATION
============================================================
Main Stylesheet: style.css
Main JavaScript: script.js
Theme Assets: assets/
Additional Stylesheets: assets/utilities.css, assets/home-refresh.css, assets/shop.css, assets/contact.css
Additional JavaScript: assets/home-motion.js, assets/shop-controls.js, assets/lucide.js
Page Templates: Templates/
Setup Modules: inc/theme-setup.php, inc/setup-dependencies.php
Bundled Form Plugin: bundled-plugins/angels-glyph-forms/

============================================================
MAINTENANCE INFORMATION
============================================================
Created By: Shabbir Showne
Created: 2026-10-06 (metadata record creation; original theme creation date not supplied)
Last Updated: 2026-10-06
Current Theme Version: 1.3.0
Compatibility Note: WordPress 7.1.2 is the local tested version. Minimum PHP is declared from code requirements; only the local PHP 8.5 runtime was executed. Remote plugin/media installation still depends on hosting permissions and network access.
============================================================
*/
/* Main theme styling is defined in this style.css file; supplementary styles are in assets/. */

:root {
  /* LIGHT MODE (Default) - Pure White Background */
  --bg-page: #ffffff;
  --text-main: #000000;
  --text-muted: #4b5563;
  --bg-panel: rgba(0, 0, 0, 0.05);
  --border-panel: rgba(0, 0, 0, 0.1);
  --bg-footer: #f3f4f6;
  --brand-color: #8a2241;
}

.dark-mode {
  /* DARK MODE - Pure Black Background */
  --bg-page: #000000;
  --text-main: #ffffff;
  --text-muted: #9ca3af;
  --bg-panel: rgba(255, 255, 255, 0.05);
  --border-panel: rgba(255, 255, 255, 0.1);
  --bg-footer: #000000;
}

body {
  /* FIXED: Added !important to FORCE Black or White background */
  background-color: var(--bg-page) !important;
  color: var(--text-main);
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Global Noise Overlay */
.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-panel);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.glass-button {
  background: #8a2241;
  color: #ffffff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.glass-button:hover {
  background: rgba(138, 34, 65, 0.8);
  box-shadow: 0 0 30px rgba(138, 34, 65, 0.3);
  transform: translateY(-2px);
}

.glass-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: 0.5s;
}

.glass-button:hover::after {
  left: 100%;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-page);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* Made lighter for Day Mode */
  border-radius: 4px;
}
.dark-mode ::-webkit-scrollbar-thumb {
  background: #333; /* Kept dark for Night Mode */
}
::-webkit-scrollbar-thumb:hover {
  background: #8a2241;
}

/* 3D Perspective Utility */
.perspective-1000 {
  perspective: 1000px;
}

.rotate-y-12 {
  transform: rotateY(-12deg) rotateX(5deg);
}

/* IPHONE FIX: Forces the background behind the scroll to match Light Mode default */
html {
    background-color: #ffffff !important;
}
html.dark-mode {
    background-color: #000000 !important;
}

/* ============================================================
   ULTIMATE NEWSLETTER FIX - PREVENTS BOX STRETCHING
   ============================================================ */

/* Force the form to be a flat flex container so it doesn't stretch */
.newsletter-container form {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Kill all extra gaps added by the plugin */
.newsletter-container form p,
.newsletter-container form br,
.newsletter-container span.wpcf7-form-control-wrap br {
    display: none !important;
}

/* Ensure the wrapper doesn't add height */
.newsletter-container .wpcf7-form-control-wrap {
    display: contents !important;
}

/* Final styling for the Success Message under the box */
.newsletter-container .wpcf7-response-output {
    border: 1px solid #4ade80 !important; 
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px;
    padding: 10px !important;
    margin-top: 15px !important;
    color: #ffffff !important;
    font-size: 13px;
    text-align: center;
}

/* Reduce excessive vertical spacing throughout the theme */
.py-32 { padding-top: 5rem; padding-bottom: 5rem; } /* Reduced py-32 by about 40% */
.pt-48 { padding-top: 10rem; } /* Reduce top padding fix from 12rem */

/* Justification utility */
.text-justify { text-align: justify; text-justify: inter-word; }

/* Portrait Ratio for Reference */
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* Reduced Founder Cards max-width to make them smaller */
.founder-card {
    max-width: 200px; /* Adjust this number to change image size */
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Ensure offset is disabled on mobile */
@media (max-width: 768px) {
    .founder-card { max-width: 100%; }
    .-translate-y-8, .translate-y-8 { transform: translateY(0) !important; }
    .py-32 { padding-top: 4rem; padding-bottom: 4rem; }
}

/* SERVICE ACCORDION CSS (Crucial for JS logic) */
.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-in, padding 0.3s ease;
}

.accordion-item.active {
    border-color: #8a2241 !important;
    background: rgba(138, 34, 65, 0.03);
}

.accordion-item.active .accordion-content {
    max-height: 500px; /* Adjust based on max content height */
    opacity: 1;
}

.accordion-item.active .icon-plus { display: none; }
.accordion-item.active .icon-minus { display: block; }
/* Narrow repairs to original theme: animation, mobile and product/form layouts. */
@keyframes ag-client-scroll{to{transform:translateX(-33.333333%)}}
#logo-ticker{animation:ag-client-scroll 40s linear infinite!important;transition:none!important}
#logo-ticker:hover{animation-play-state:paused!important}
.animate-orbit{animation:spin 60s linear infinite}.accordion-item.active .accordion-content{max-height:none}
.text-justify{text-align:left}.reveal-up,.reveal-left,.reveal-right{opacity:1!important}
.ag-home-products ul.products{margin-bottom:0}.woocommerce .button{background:var(--brand-color);color:white;border-radius:999px}
.ag-page-top{padding-top:160px}.ag-section{padding:40px 24px}.ag-wrap{max-width:1180px;margin:auto}
.ag-project-form{max-width:800px;margin:30px auto}.ag-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ag-project-form label{display:block;margin-bottom:20px}.ag-project-form input:not([type=checkbox]):not([type=hidden]),.ag-project-form textarea{width:100%;display:block;padding:14px;border:1px solid var(--border-panel);border-radius:12px;margin-top:8px;background:var(--bg-page);color:var(--text-main)}
.ag-consent{display:flex!important;gap:12px}.ag-honeypot{position:absolute;left:-10000px}.ag-button{display:inline-flex;background:var(--brand-color);color:white;border-radius:999px;padding:14px 24px}.ag-notice{padding:20px;background:#edf7ef;border-radius:12px}.ag-error{background:#fff1f1}
@media(max-width:640px){.ag-form-grid{grid-template-columns:1fr}#orbit-container .glass-panel{font-size:10px;padding:8px}.woocommerce ul.products li.product{width:48%!important}.ag-page-top{padding-top:120px}}
@media(prefers-reduced-motion:reduce){#logo-ticker,.animate-orbit,#orbit-container *{animation:none!important}}

main.ag-page-top{padding-top:160px}.woocommerce ul.products li.product .price{color:var(--brand-color)}
.woocommerce ul.products li.product{border:1px solid var(--border-panel);border-radius:20px;padding:18px;background:var(--bg-page)}
.woocommerce ul.products li.product img{border-radius:12px}.woocommerce .button,.woocommerce a.button{background:var(--brand-color)!important;color:white!important;border-radius:999px!important}
@media(min-width:1024px){body.home h1{font-size:clamp(2.8rem,4.1vw,4.5rem)}}
@media(max-width:640px){main.ag-page-top{padding-top:120px}}

@keyframes spin{to{transform:rotate(360deg)}}
#orbit-container:hover,#orbit-container:hover *{animation-play-state:paused!important}
.port-row.is-active .port-content{max-height:none!important}
body.home .bg-white\/90{background:rgba(255,255,255,.9)}

/* Shared SHOP COLLECTION typography without changing page layouts. */
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',sans-serif!important;font-style:normal;font-weight:800!important;letter-spacing:-.04em;line-height:1.18}
h3,h4,h5,h6{font-weight:700!important;letter-spacing:-.025em;line-height:1.35}
h1 em,h2 em,h1 .italic,h2 .italic{font-style:normal!important}
.ag-home-products ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ag-home-products ul.products::before,.ag-home-products ul.products::after{display:none!important}
.ag-home-products ul.products li.product{width:auto!important;float:none!important;margin:0!important;display:flex;flex-direction:column;padding:16px;border:1px solid var(--border-panel);border-radius:20px}
.ag-home-products ul.products li.product>a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1}
.ag-home-products ul.products li.product img{aspect-ratio:1;width:100%!important;height:auto!important;object-fit:cover;border-radius:12px}
.ag-home-products .woocommerce-loop-product__title{font-size:14px;min-height:2.7em}.ag-home-products .price{margin-top:auto;color:var(--brand-color)!important}.ag-home-products .button{align-self:flex-start;margin-top:16px!important;background:var(--brand-color)!important;color:#fff!important;border-radius:999px!important}
.ag-home-shop-heading{align-items:center!important}.ag-home-shop-heading>a{white-space:nowrap;display:inline-flex!important;align-items:center!important;justify-content:center;gap:12px}.ag-home-shop-heading>a svg{display:block!important;flex-shrink:0;width:20px;height:20px}
@media(max-width:767px){.ag-home-products ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ag-home-products ul.products li.product{width:auto!important;padding:12px}.ag-home-products .button{font-size:12px}.ag-home-shop-heading{align-items:flex-start!important;gap:20px!important}}

/* One typeface for all site text, including WooCommerce form controls. */
body,body :where(h1,h2,h3,h4,h5,h6,p,a,span,div,li,label,input,select,textarea,button,table,th,td,strong,em,small,blockquote){font-family:'Plus Jakarta Sans',sans-serif!important}
.ag-process-art{max-width:410px;width:100%;margin:auto;padding:30px;border:1px solid #dac6cd;border-radius:28px;background:linear-gradient(145deg,#fffaf7,#f1dce3);box-shadow:0 20px 60px #8a224112;color:#27212a}
.ag-process-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em;font-weight:700;color:#8a2241}.ag-process-top svg{width:20px;height:20px}.ag-process-composition{position:relative;height:210px;margin:20px 0}.ag-process-circle{position:absolute;width:160px;height:160px;border-radius:50%;background:#8a2241;left:15px;top:15px}.ag-process-square{position:absolute;width:140px;height:140px;background:#dfb4c2;border:1px solid #fff9;right:15px;top:60px;transform:rotate(-12deg);box-shadow:0 15px 30px #8a224122}.ag-process-label{position:absolute;left:20px;bottom:0;padding:14px 20px;background:#fffaf7;border:1px solid #e4d1d8;transform:rotate(4deg);font-size:15px;font-weight:800;box-shadow:0 6px 20px #8a224115}.ag-process-art h3{font-size:25px;line-height:1.25;margin:0 0 25px}.ag-process-steps{list-style:none;padding:0;margin:0;display:flex;gap:10px;justify-content:space-between;border-top:1px solid #d6bac4;padding-top:20px;font-size:12px;font-weight:700}.ag-process-steps span{display:block;color:#8a2241;font-size:10px;margin-bottom:7px}
@media(max-width:400px){.ag-process-art{padding:24px}.ag-process-circle{width:140px;height:140px}.ag-process-square{width:120px;height:120px}}
/* Blog pagination: style the clickable link itself, including its background. */
.pagination-wrapper a.page-numbers.prev,.pagination-wrapper a.page-numbers.next{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px!important;overflow:hidden;color:#fff!important;background:var(--brand-color);border:1px solid var(--brand-color);text-decoration:none;transition:filter .2s}
.pagination-wrapper a.page-numbers.prev>span,.pagination-wrapper a.page-numbers.next>span{color:inherit!important;background:transparent!important;border:0!important;padding:12px 24px;display:inline-flex;align-items:center;gap:10px}
.pagination-wrapper a.page-numbers.prev:hover,.pagination-wrapper a.page-numbers.next:hover{filter:brightness(1.12)}
/* Footer link, icon and keyboard-focus feedback. */
footer a{transition:color .2s,transform .2s,background-color .2s,box-shadow .2s}footer a:hover{color:var(--brand-color)}footer .ag-copyright-home{display:inline-block;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}footer .ag-copyright-home:hover{color:var(--brand-color);text-decoration-color:currentColor}footer a:focus-visible,footer button:focus-visible{outline:2px solid var(--brand-color);outline-offset:4px}footer #social-links a:hover{background:var(--brand-color);color:#fff;transform:translateY(-3px);box-shadow:0 6px 14px #8a224120}footer a[href^="mailto:"]:hover{transform:translateX(3px)}footer>a:hover img,footer .group:hover img{filter:brightness(1.08)}
@media(prefers-reduced-motion:reduce){footer a,footer button{transition:none!important}footer #social-links a:hover,footer a[href^="mailto:"]:hover{transform:none}}
/* Keep continuous animations running while hovered or focused. */
html body #logo-ticker:hover,html body #logo-ticker:focus-within,html body #orbit-container:hover,html body #orbit-container:hover *,html body #orbit-container:focus-within,html body #orbit-container:focus-within *{animation-play-state:running!important}