/*
Theme Name: Aero
Theme URI: https://bitpost.cc/aero
Author: Bitpost
Author URI: https://bitpost.cc
Description: The Wow is back! This theme brings the iconic Frutiger Aero aesthetic to WordPress, featuring skeumorphic elements, glass-like surfaces, soft 3D effects and nature-inspired imagery.
Version: 1.0.0
License: GPLv3
Text Domain: aero
Domain Path: /languages
*/

/*******************************************************************************
 * CONSTANTS
 *******************************************************************************/

:root {
  --aero-site-width: 1140px;
  --aero-site-padding: 5px;
  --aero-site-spacing: 40px;
  --aero-header-height: 60px;
  --aero-content-spacing: 15px;
  --aero-content-spacing-related: 5px;
  --aero-frame-padding: 7px;
  --aero-blur: 4px;
  --aero-header-opacity: 0.85;
}

@media (max-width: 1024px) {
  :root {
    --aero-site-padding: 5px;
    --aero-site-spacing: 40px;
    --aero-header-height: 55px;
  }
}

@media (max-width: 767px) {
  :root {
    --aero-site-padding: 5px;
    --aero-site-spacing: 20px;
    --aero-header-height: 50px;
  }
}

/*******************************************************************************
 * THEME
 *******************************************************************************/

:root {
  --aero-c-header-bg: rgb(35, 105, 155);

  --aero-c-main-bg: rgb(190, 210, 220);
  --aero-c-main-container-bg-start: rgba(180, 210, 220, 0.25);
  --aero-c-main-container-bg-end: rgb(250, 250, 250);
  --aero-c-main-container-border: rgb(5, 20, 35);
  --aero-c-main-container-light: rgba(245, 255, 255, 0.85);

  --aero-c-footer-bg: rgb(60, 120, 160);













  /* Text */
  --aero-c-text: black;
  --aero-c-text-muted: rgb(90, 90, 90);
  --aero-c-heading: rgb(0, 50, 155);
  --aero-c-link: rgb(0, 100, 205);
  --aero-c-link-hover: rgb(50, 155, 255);

  /* Header */
  --aero-g-header: linear-gradient(
    rgba(255, 255, 255, 0.65) 0%,
	rgba(255, 255, 255, 0.25) 49%,
	transparent 51%,
	rgba(255, 255, 255, 0.15) 100%
  );

  /* Frame */
  --aero-c-frame-text: black;
  --aero-c-frame-colorization: rgba(135, 160, 190, 0.6);
  --aero-ts-frame:
    0 0 3px white,
    0 0 6px white,
    0 0 9px white;

  /* Controls */
  --aero-c-control-bg: white;
  --aero-c-control-border: rgb(200, 200, 200);
  --aero-c-control-border-focus-hi: rgb(152, 209, 239);
  --aero-c-control-border-focus-lo: rgb(190, 230, 253);
  --aero-c-control-border-hover: rgb(30, 130, 175);
  --aero-c-control-border-active: rgb(10, 90, 180);
  --aero-c-control-hover-overlay: rgba(170, 220, 240, 0.25);
  --aero-c-control-active-overlay: rgba(130, 200, 250, 0.25);
  --aero-c-control-lowlight-active: rgba(0, 0, 0, 0.2);
  --aero-c-control-separator: rgba(210, 210, 210);
  --aero-c-control-separator-light: white;
  /* Frame controls */
  --aero-c-frame-control-bg: rgba(255, 255, 255, 0.5);
  --aero-c-frame-control-bg-focus: rgba(255, 255, 255, 0.9);
  --aero-c-frame-control-border: rgba(0, 0, 0, 0.3);
  --aero-c-frame-control-light: rgba(255, 255, 255, 0.4);

  /* Content */
  --aero-c-content-bg: rgb(240, 245, 250);
  --aero-c-dialog-bg: rgb(245, 245, 245);
  --aero-c-document-bg: white;
  --aero-c-frame-content-border: rgba(0, 0, 0, 0.6);
  --aero-c-frame-content-light: rgba(255, 255, 255, 0.6);

  /* Button */
  --aero-c-button-bg: rgb(240, 240, 240);
  --aero-c-button-border: rgb(140, 140, 140);
  --aero-c-button-light: rgba(255, 255, 255, 0.6);
  --aero-g-button: linear-gradient(
    transparent 45%,
    rgba(0, 0, 0, 0.05) 45%,
    rgba(0, 0, 0, 0.1)
  );
  --aero-g-button-horizontal: linear-gradient(
    to right,
    transparent 45%,
    rgba(0, 0, 0, 0.05) 45%,
    rgba(0, 0, 0, 0.1)
  );
  --aero-c-button-icon-stroke: white;
  --aero-g-button-icon: linear-gradient(
    transparent 25%,
    rgba(0, 0, 0, 0.5) 100%
  );
  /* Frame button */
  --aero-c-frame-button-border: rgba(0, 0, 0, 0.6);
  --aero-c-frame-button-light: rgba(255, 255, 255, 0.6);
  --aero-c-frame-button-light-hover: rgba(255, 255, 255, 0.85);
  --aero-c-frame-button-lowlight-active: rgba(0, 0, 0, 0.2);
  --aero-g-frame-button: linear-gradient(
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.25) 49%,
    transparent 51%,
    rgba(255, 255, 255, 0.15) 100%
  );
  --aero-g-frame-button-hover-overlay: radial-gradient(
	ellipse 80% 50% at bottom,
	rgba(255, 255, 255, 0.25),
	transparent
  );
  --aero-g-frame-button-active-overlay: radial-gradient(
    ellipse 80% 50% at bottom,
    rgba(255, 255, 255, 0.25),
    rgba(0, 0, 0, 0.25)
  );
  --aero-c-frame-button-icon-stroke: white;

  /* Hero */
  --aero-c-hero-overlay: rgba(0, 0, 0, 0.55);

  /* Banner */
  --aero-c-banner-text: white;
  --aero-ts-banner:
    0 0 3px black,
    0 0 6px black,
    0 0 9px black;
  --aero-g-banner: linear-gradient(
    120deg,
    rgb(5, 70, 110),
    rgb(30, 120, 140),
    rgb(5, 110, 80)
  );
  --aero-g-banner-ext-separator: linear-gradient(
    to right,
    rgb(255, 105, 0),
    rgb(255, 230, 0),
    rgb(255, 105, 0)
  );

  /* Card */
  --aero-c-card-bg: rgba(170, 220, 240, 0.25);

  /* Aggregator */
  --aero-c-aggregator-border: rgba(80, 80, 80, 0.6);
  --aero-c-aggregator-light: rgba(255, 255, 255, 0.2);
  --aero-c-aggregator-bg: rgba(255, 255, 255, 0.25);
  --aero-c-aggregator-button-text: rgb(0, 110, 220);

  /* Progress Bar */
  --aero-c-progress-bg: rgb(200, 200, 200);
  --aero-g-progress-bg: linear-gradient(
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.35) 48%,
    transparent 52%,
    rgba(255, 255, 255, 0.25) 100%
  );
  --aero-g-progress-bar: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.15) 100%
  );

  /* Scrollbar */
  --aero-v-scrollbar-thumb-vertical: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='9' height='10'>\
      <rect width='9' height='10' fill='white'/>\
      <rect x='1' y='1' width='7' height='2' fill='gray'/>\
      <rect x='1' y='4' width='7' height='2' fill='gray'/>\
      <rect x='1' y='7' width='7' height='2' fill='gray'/>\
    </svg>");
  --aero-v-scrollbar-thumb-horizontal: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='10' height='9'>\
      <rect width='10' height='9' fill='white'/>\
      <rect x='1' y='1' width='2' height='7' fill='gray'/>\
      <rect x='4' y='1' width='2' height='7' fill='gray'/>\
      <rect x='7' y='1' width='2' height='7' fill='gray'/>\
    </svg>");
  --aero-v-caret-up: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='7'>\
      <path d='M0.5 6.5h11L6 0.5z' fill='gray' stroke='white' stroke-width='1'/>\
    </svg>");
  --aero-v-caret-down: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='7'>\
      <path d='M0.5 0.5h11L6 6.5z' fill='gray' stroke='white' stroke-width='1'/>\
    </svg>");
  --aero-v-caret-left: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='7' height='12'>\
      <path d='M6.5 0.5v11L0.5 6z' fill='gray' stroke='white' stroke-width='1'/>\
    </svg>");
  --aero-v-caret-right: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='7' height='12'>\
      <path d='M0.5 0.5v11L6.5 6z' fill='gray' stroke='white' stroke-width='1'/>\
    </svg>");

  /* Context */
  --aero-c-context-bg: rgb(240, 240, 240);
  --aero-c-context-border: rgb(145, 145, 145);
  --aero-c-context-light: rgba(255, 255, 255, 0.6);

  /* Misc */
  --aero-c-body-overlay: rgba(0, 0, 0, 0.2);
  --aero-c-shadow: rgba(0, 0, 0, 0.75);
}

header, footer, .aero-hero, .aero-menu-offcanvas, .aero-cs-dark {
  /* Frame */
  --aero-c-frame-text: white;
  --aero-c-frame-colorization: rgba(40, 45, 50, 0.85);
  --aero-ts-frame:
    0 0 3px black,
    0 0 6px black,
    0 0 9px black;
  --aero-c-frame-light: rgba(255, 255, 255, 0.2);

  /* Frame controls */
  --aero-c-frame-control-light: rgba(255, 255, 255, 0.2);

  /* Frame button */
  --aero-c-header-button-lowlight-active: rgba(0, 0, 0, 0.4);
  --aero-c-frame-button-icon-stroke: black;
}