/*
Theme Name: Padmadoree 1.0.0
Text Domain: padmadoree
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Description: Padmadoree is a lightweight and highly customizable multi-purpose theme that makes it easy for anyone to create their perfect website. You can use it for any type of website from blogs, businesses, online shops, creatives, hotels, restaurants, startups and more. With Padmadoree you get the perfect blend of performance, modern design and powerful, yet simple to use options. Works perfectly with the new block editor (Gutenberg) and your favorite plugins such as: WooCommerce, JetPack, page builders, SEO plugins and others. It comes with microdata integration, unlimited colors, multiple layouts, pre-built demo websites and so much more. It's also translatable and built with best SEO practices. Try Padmadoree theme today on https://try.padmadoreewp.com
Tags: two-columns, right-sidebar, left-sidebar, footer-widgets, blog, news, custom-background, custom-menu, post-formats, sticky-post, editor-style, threaded-comments, translation-ready, custom-colors, featured-images, full-width-template, microformats, theme-options, e-commerce
Author: Padmadoree Team
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

Do not add your CSS to this file, use a child theme instead: https://codex.wordpress.org/Child_Themes
The main CSS file is loaded from "assets/css folder".
*/

/* =========================
   RESET & BASE
========================= */
/* =========================
   CUSTOM FONTS
========================= */

@font-face {
  font-family: "Gotham";
  src: url("/wp-content/themes/padmadoree/assets/fonts/Gotham-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gotham-Bold";
  src: url("/wp-content/themes/padmadoree/assets/fonts/Gotham-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Gotham", sans-serif !important;
  background: transparent;
  color: #3d2d1e;
  line-height: 1.6;
 
}

/* =========================
   BACKGROUND CONTAINER
========================= */

.bgcontainer {
  background-image: url("/wp-content/themes/padmadoree/assets/images/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  min-height: 100vh;
  width: 100%;
}

@media (max-width: 768px) {
  .bgcontainer {
    background-attachment: scroll;
  }
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
}

/* =========================
   TYPOGRAPHY (MOBILE FIRST)
========================= */

h1 {
  font-size: 28px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

p {
  font-size: 16px;
  line-height: 1.6;
  font-family: "Gotham", sans-serif !important;
  font-weight: 400 !important;
}

/* =========================
   FONT WEIGHTS
========================= */

strong,
b,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: "Gotham-Bold", sans-serif !important;
}

/* Tablet */
@media (min-width: 768px) {
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
  p  { font-size: 18px; }
}

/* Desktop */
@media (min-width: 1200px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  h3 { font-size: 28px; }
}

/* =========================
   INSTAGRAM ICON (BANNER FIX)
========================= */

.home-text {
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  text-align: center;
  height: 100%;
}


.hero-video-banner,
.about-video-banner {
  position: relative; /* ensure anchor reference */
}

.instagram-link {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 10;
  width: 45px;
  height: 45px;
}

.instagram-link img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .instagram-link {
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 768px) {
  .wp-chatbot-board-container.active-chat-board {
    height: 100vh;
    overflow-y: auto;
  }
}

/* =========================
   CHATBOT RESPONSIVE BOX
========================= */

.wp-chatbot-board-container.active-chat-board {
  display: block;
  width: 100% !important;
  max-width: 420px !important;
  float: none;
  margin-left: auto;
}

/* Tablet */
@media (max-width: 991px) {
  .wp-chatbot-board-container.active-chat-board {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .wp-chatbot-board-container.active-chat-board {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height:50% !important;
  }
}

.wp-chatbot-board-container.active-chat-board {
  width: min(420px, calc(100vw - 20px));
  margin-left: auto;
}
/* =========================
   LAYOUT HELPERS
========================= */

.section {
  padding: 40px 0;
}

.text-center {
  text-align: center;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   HERO SECTION
========================= */

.hero-video-banner {
  position: relative;
  height: 60vh;
  min-height: 320px;
  overflow: hidden;
  background: #8e8075;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}

.brand-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px; /* REQUIRED */
}

.custom-post-wrapper {
  padding: 40px 0;
}

@media (min-width: 768px) {
  .custom-post-wrapper {
    padding: 60px 0;
  }
}

.partner-offer-text {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
/* Desktop */
@media (min-width: 992px) {
  .hero-video-banner {
    height: 100vh;
  }
}

/* =========================
   CONTACT LOGO CENTER (MOBILE)
========================= */

.contact-log-img {
  display: block;
}

/* =========================
   CENTER TEXT (HOME SECTION)
========================= */



/* Mobile only */
@media (max-width: 768px) {
  .contact-log-img {
    margin: 0 auto; /* center image */
  }

  .mt-2 {
    text-align: center; /* extra safety */
  }
}

/* =========================
   CONTACT BANNER
========================= */

.contact-banner {
  text-align: center;
}

.contact-logo-img {
  display: block;
  margin: 0 auto;
  width: 80%;
  max-width: 400px;
}

/* Title spacing */
.contact-title {
  margin-top: 0px !important; /* 👈 clean spacing instead of negative */
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.contact-video-banner {
  position: relative;
  overflow: hidden;
}


/* Tablet */
@media (min-width: 768px) {
  .contact-logo-img {
    width: 70%;
  }

  .contact-title {
    font-size: 30px;
    margin-top: 25px;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .contact-logo-img {
    width: 60%;
  }
  
  .contact-title {
    font-size: 36px;
    margin-top: 30px;
  }
}

/* =========================
   YARN CARD SYSTEM
========================= */

.yarn-card {
  overflow: hidden;
  border-radius: 0 0 22px 22px;
  background: #2f271d;
  height: 100%;
  transition: transform 0.3s ease;
}

.yarn-card:hover {
  transform: translateY(-6px);
}

/* IMAGE */
.yarn-image {
  width: 100%;
  aspect-ratio: 4 / 3; /* 🔥 responsive instead of fixed height */
  overflow: hidden;
}

.yarn-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENT */
.yarn-content {
  background: #2f271d;
  color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yarn-content h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color:#fff;
  letter-spacing: 1px;
}

/* Tablet */
@media (min-width: 768px) {
  .yarn-content {
    padding: 24px;
  }

  .yarn-content h4 {
    font-size: 18px;
    color:#fff;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .yarn-content {
    padding: 28px;
  }

  .yarn-content h4 {
    font-size: 20px;
    color:#fff;
  }
}

/* =========================
   CUSTOM POST WRAPPER SPACING
========================= */

.custom-post-wrapper {
  padding: 40px 15px; /* mobile */
}

/* Tablet */
@media (min-width: 768px) {
  .custom-post-wrapper {
    padding: 60px 30px;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .custom-post-wrapper {
    padding: 80px 60px;
  }
}

/* Large Desktop */
@media (min-width: 1200px) {
  .custom-post-wrapper {
    padding: 100px 100px;
  }
}

/* =========================
   GOLDEN TEXT SECTION
========================= */

.golden-text {
  text-align: center;
  padding: 20px 15px;
}

.golden-text img {
  display: block;
  margin: 0 auto 15px auto;
}

/* base text (mobile first) */
.golden-text p {
  color: #b88a1b;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

/* =========================
   TEXTILE BLEND SECTION SPACING
========================= */

.blend-text {
  text-align: center;
  padding: 0 15px; /* mobile */
}

/* Tablet */
@media (min-width: 768px) {
  .blend-text {
    padding: 0 40px;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .blend-text {
    padding: 0 80px;
  }
}

/* Large Desktop */
@media (min-width: 1200px) {
  .blend-text {
    padding: 0 120px;
  }
}

/* =========================
   About TEXT SECTION
========================= */

.about-content-section
{
    padding-top:30px;
    padding-bottom:10px;
}


/* tablet */
@media (min-width: 768px) {
  .golden-text p {
    font-size: 20px;
  }
}



/* desktop */
@media (min-width: 992px) {
  .golden-text p {
    font-size: 26px;
  }
}

/* large desktop */
@media (min-width: 1200px) {
  .golden-text p {
    font-size: 30px;
  }
}

/* =========================
   BRAND STORY
========================= */

.brand-story-section {
  /*background: #f8f6f3;*/
  padding: 0px 0;
}

.story-content p {
  font-size: 16px;
  text-align: center;
  max-width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .story-content p {
    font-size: 20px;
    max-width: 90%;
    margin: auto;
  }
}

/* =========================
   IMAGE SYSTEM
========================= */

.story-image-wrapper {
  position: relative;
  text-align: center;
}

.story-main-img {
  max-width: 100%;
  height: auto;
  margin: auto;
}

/* =========================
   TEXTILE SECTION
========================= */

.textile-story-section {
  background-color: #4D423D;
  color: #fff;
  padding: 60px 0;
}

.blend {
  background-color: #5E3E29;
  color: #fff;
  padding: 20px 0 40px 0px;
}

.textile-text {
  text-align: center;
  padding: 0 15px;
}

.textile-text h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.textile-text p {
  font-size: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  .textile-text h3 {
    font-size: 30px;
  }

  .textile-text p {
    font-size: 18px;
  }
}

/* =========================
   BUTTONS
========================= */

.tab-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 30px;
  background: #b88a1b;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.tab-btn:hover {
  background: #794617;
}

/* =========================
   MOBILE FIXES
========================= */

@media (max-width: 768px) {

  .hero-content h1 {
    font-size: 24px;
  }

  .hero-content p {
    font-size: 14px;
  }

  .section {
    padding: 30px 0;
  }

  .story-content p {
    padding: 0 10px;
  }
}

/* =========================
   DESKTOP (992px - 1199px)
========================= */

@media (min-width: 992px) {

  .section {
    padding: 60px 0;
  }

  p {
    font-size: 18px;
  }

  .story-content p {
    max-width: 85%;
    margin: auto;
  }

  .textile-text {
    max-width: 900px;
    margin: auto;
  }

  .hero-video-banner {
    height: 90vh;
  }

  .instagram-link {
    top: 30px;
    right: 30px;
    width: 45px;
  }
}

/* =========================
   LARGE DESKTOP (1200px+)
========================= */

@media (min-width: 1200px) {

  h1 {
    font-size: 52px;
  }

  h2 {
    font-size: 40px;
  }

  h3 {
    font-size: 32px;
  }

  p {
    font-size: 20px;
  }

  .container {
    max-width: 1140px;
    margin: auto;
  }

  .hero-video-banner {
    height: 100vh;
  }

  .story-content p {
    max-width: 70%;
  }

  .textile-text {
    max-width: 1000px;
  }
}

/* =========================
   VIDEO WRAPPER (RESPONSIVE)
========================= */

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* maintains ratio */
  overflow: hidden;
}

/* Video */
.video-wrapper video {
  position: absolute;
  inset: 0;               /* shorthand for top/left/right/bottom */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   SAFARI / IOS FIX
========================= */

/* fallback for older browsers */
@supports not (aspect-ratio: 16/9) {
  .video-wrapper {
    height: 0;
    padding-top: 56.25%; /* 16:9 ratio fallback */
  }

  .video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* iOS Safari viewport fix */
@supports (-webkit-touch-callout: none) {
  .video-wrapper {
    min-height: 200px; /* prevents collapse */
  }
}