/*
 Theme Name:   Arins Media Child
 Theme URI:    https://arinsmedia.com
 Description:  Custom child theme for Arins Media — Real Estate Media, Seattle WA. Built on Hello Elementor.
 Author:       Arins Media
 Author URI:   https://arinsmedia.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  arins-media-child
*/

/* ==========================================================================
   DESIGN TOKENS — Colors from Figma Design
   ========================================================================== */

:root {
    /* Primary Colors */
    --am-basic-color: #2b3136;       /* Main dark color (buttons, header bg, footer bg) */
    --am-background: #f5f5f5;        /* Page background */
    --am-white: #ffffff;             /* White */

    /* Accent Colors */
    --am-grey-blue: #879baa;         /* Borders, subtle accents */
    --am-light-blue: #b5d0e5;        /* FAQ icons, light accents */
    --am-orange: #ffc084;            /* CTA buttons, warm accents */
    --am-green: #addab9;             /* Success, growth accents */
    --am-teal-border: #a3bdbf;       /* Card borders */
    --am-gold-border: #e5d2b5;       /* Warm card borders */

    /* Text Colors */
    --am-text-dark: #000000;         /* Headings */
    --am-text-body: #2b3136;         /* Body text */
    --am-text-grey: #5d5d5d;         /* Secondary text */
    --am-text-light: rgba(0,0,0,0.75); /* Light text */
    --am-text-muted: rgba(0,0,0,0.5);  /* Muted text */

    /* Typography */
    --am-font-main: 'General Sans', sans-serif;
    --am-font-body: 'Inter', sans-serif;

    /* Spacing */
    --am-section-padding: 80px;
    --am-content-width: 1120px;
    --am-page-width: 1280px;

    /* Shadows */
    --am-shadow-button: 1px 1px 6.3px 0px rgba(0,0,0,0.12);
    --am-shadow-card: 0px 4px 10px 0px rgba(0,0,0,0.25);
    --am-shadow-review: 0px 7px 7px 0px rgba(0,0,0,0.09), 0px 2px 4px 0px rgba(0,0,0,0.1);
    --am-shadow-image: 0px 4px 25px 0px rgba(0,0,0,0.12);

    /* Border Radius */
    --am-radius-button: 8px;
    --am-radius-card: 16px;
    --am-radius-image: 4px;
}


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
    font-family: var(--am-font-main);
    background-color: var(--am-background);
    color: var(--am-text-body);
    line-height: 1.1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--am-font-main);
    color: var(--am-text-dark);
    line-height: 1.1;
}

p {
    font-family: var(--am-font-main);
    line-height: 1.45;
}


/* ==========================================================================
   BUTTONS — Two main button styles from design
   ========================================================================== */

/* Dark Button (Book Now, View All Services) */
.am-btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--am-basic-color);
    color: var(--am-white);
    font-family: var(--am-font-main);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.1px;
    padding: 12px 16px;
    height: 48px;
    width: 280px;
    border-radius: var(--am-radius-button);
    box-shadow: var(--am-shadow-button);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.am-btn-dark:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: var(--am-white);
    text-decoration: none;
}

/* Light Button (View Our Services, More FAQs) */
.am-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--am-white);
    color: var(--am-text-dark);
    font-family: var(--am-font-main);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.09px;
    padding: 12px 16px;
    height: 48px;
    width: 280px;
    border-radius: var(--am-radius-button);
    box-shadow: var(--am-shadow-button);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.am-btn-light:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--am-text-dark);
}

/* Orange Button (Chat Online Now) */
.am-btn-orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--am-orange);
    color: var(--am-text-dark);
    font-family: var(--am-font-main);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.09px;
    padding: 12px 16px;
    height: 48px;
    width: 280px;
    border-radius: var(--am-radius-card);
    box-shadow: var(--am-shadow-button);
    border: 1px solid var(--am-text-dark);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.am-btn-orange:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--am-text-dark);
}


/* ==========================================================================
   CARDS — Service cards, review cards, feature cards
   ========================================================================== */

/* Feature card (What You Get section) */
.am-card-feature {
    background-color: var(--am-white);
    border-radius: var(--am-radius-button);
    padding: 32px;
    width: 350px;
    height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.am-card-feature h3 {
    font-size: 24px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--am-text-body);
}

.am-card-feature p {
    font-size: 20px;
    font-weight: 500;
    color: var(--am-text-body);
    line-height: 1.1;
}

/* Green border card */
.am-card-feature--green {
    border: 1px solid var(--am-green);
}

/* Orange border card */
.am-card-feature--orange {
    border: 1px solid var(--am-orange);
}

/* Teal border card */
.am-card-feature--teal {
    border: 1px solid var(--am-teal-border);
}

/* Gold border card */
.am-card-feature--gold {
    border: 1px solid var(--am-gold-border);
}

/* Grey-blue border card */
.am-card-feature--grey {
    border: 1px solid var(--am-grey-blue);
}

/* Review card */
.am-card-review {
    background-color: var(--am-white);
    border: 0.5px solid var(--am-basic-color);
    border-radius: var(--am-radius-card);
    box-shadow: var(--am-shadow-review);
    padding: 24px;
    width: 300px;
    height: 375px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.am-card-review .review-text {
    font-family: var(--am-font-body);
    font-style: italic;
    font-size: 14px;
    line-height: 20px;
    color: #1a1a1a;
}

.am-card-review .reviewer-name {
    font-family: var(--am-font-body);
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
}

.am-card-review .review-date {
    font-family: var(--am-font-body);
    font-size: 12px;
    color: var(--am-text-muted);
}


/* ==========================================================================
   FAQ — Accordion style from design
   ========================================================================== */

.am-faq-section {
    background-color: rgba(255, 192, 132, 0.5);
    border-radius: var(--am-radius-image);
    box-shadow: var(--am-shadow-card);
    padding: 32px 0;
}

.am-faq-item {
    background-color: var(--am-white);
    border: 1px solid var(--am-grey-blue);
    border-radius: var(--am-radius-card);
    padding: 16px 24px;
    margin-bottom: 0;
}

.am-faq-item .am-faq-question {
    font-family: var(--am-font-main);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.5px;
    color: var(--am-text-body);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.am-faq-item .am-faq-icon {
    background-color: var(--am-light-blue);
    border-radius: 300px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ==========================================================================
   CONTACT FORM
   ========================================================================== */

.am-form-input {
    background-color: var(--am-white);
    border: 1px solid var(--am-text-muted);
    border-radius: var(--am-radius-card);
    padding: 16px;
    font-family: var(--am-font-main);
    font-weight: 500;
    font-size: 16px;
    width: 100%;
}

.am-form-input::placeholder {
    color: var(--am-text-muted);
}


/* ==========================================================================
   SECTION HEADINGS — Consistent heading styles
   ========================================================================== */

.am-section-title {
    font-family: var(--am-font-main);
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.8px;
    line-height: 1.1;
    text-align: center;
    color: var(--am-text-dark);
}

.am-section-subtitle {
    font-family: var(--am-font-main);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    text-align: center;
    color: var(--am-text-body);
}


/* ==========================================================================
   IMAGES
   ========================================================================== */

.am-image-rounded {
    border-radius: var(--am-radius-image);
    box-shadow: var(--am-shadow-image);
    object-fit: cover;
}

.am-image-card {
    border-radius: var(--am-radius-button);
    box-shadow: var(--am-shadow-card);
    object-fit: cover;
}


/* ==========================================================================
   INSTAGRAM SECTION
   ========================================================================== */

.am-instagram-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.am-instagram-grid img {
    width: 230px;
    height: 230px;
    object-fit: cover;
}


/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.am-container {
    max-width: var(--am-page-width);
    margin: 0 auto;
    padding: 0 var(--am-section-padding);
}

.am-container-narrow {
    max-width: var(--am-content-width);
    margin: 0 auto;
}

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

.am-gradient-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 46.92%,
        rgba(0, 0, 0, 0.358) 65.43%,
        rgba(0, 0, 0, 0.533) 78.70%,
        rgba(0, 0, 0, 0.75) 98.74%
    );
}

.am-dark-overlay {
    background-color: rgba(0, 0, 0, 0.2);
}